@extends('staff::layouts.default')
@section('title',trans('admin_default.website_management'))

@section('breadcrumb')
    <li><a href="{!! url($shop_package . '/website-management') !!}">{{trans('admin_default.website')}}</a></li>
    <li class="active"><a href="javascript:void(0)">{{trans('admin_default.website_management')}}</a></li>
@endsection

@section('content')

<style type="text/css">
.center-vertical {
    margin: auto;
    padding: 5px;
}

.custom-caption {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  visibility: visible;
  border-radius: inherit;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.7);
}

.img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.top-margin{
    margin-top: 20px;
}

</style>

<div class="content-wrapper">
    <div class="panel panel-white border-top-success">
        <div class="panel-heading">
            <h5 class="panel-title text-bold">
                <i class="icon-browser position-left"></i>
                {{trans('admin_default.website_management')}}
            </h5>
        </div>

        <div class="panel-body">
            <form action="{{url('shop/website-management/editTemplate')}}" method="POST" class="form-horizontal">
               {!! csrf_field() !!}
                                     @foreach(@$template as $key => $value)
                                        <div class="col-md-4 margin-top"">
                        <div class="panel panel-flat">
                            <div class="panel-heading">
                                <h6 class="panel-title">{{@$properties->template_name}}</h6>
                            <a class="heading-elements-toggle"><i class="icon-menu"></i></a></div>

                            <div class="panel-body">
                                <p style="margin-bottom: 20px;">This template is fit with {{@$value->tag}}</p>

                                <div class="thumbnail">
                                    <div class="thumb">
                                        <img src="{{@$properties->thumnail}}" alt="" style="height:350px;">
                                        <div class="caption-overflow {{$caption_cover_class}}" {{$caption_overflow_hidden}}>
                                            <span>
                                                <a href="{{@$properties->thumnail}}" class="btn bg-warning-300 btn-icon" data-popup="lightbox"><i class="icon-zoomin3"></i></a>
                                                <a href="#" 
                                                class="btn bg-warning-300 btn-icon btn-select-template" 
                                                data-class="{{$caption_class}}" data-caption-cover="{{$caption_cover_class}}"
                                                data-template-name="{{@$properties->template_name}}"
                                                data-id="{{@$value->id}}">Select</a>
                                            </span>
                                        </div>

                                        <div class="{{$caption_class}} custom-caption caption-overflow" {{$hidden}}>
                                            <span>
                                                <a href="{{@$properties->thumnail}}" class="btn bg-warning-300 btn-icon btn-check" data-class="{{$caption_class}}" data-caption-cover="{{$caption_cover_class}}"><i class="icon-checkmark4"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                                        @endforeach
                    <div class="clearfix"></div>
                    <input type="hidden" name="template_name" id="template-name">
                    <input type="hidden" name="template_id" id="template-id">
                    <button type="submit" class="btn btn-primary pull-right">{{trans('admin_default.save')}}</button>

            </form>
        </div>
    </div>
</div>

<style type="text/css">
</style>

@endsection

@section('script')


<script type="text/javascript">
$(function(){

    $('.wysihtml5-custom').wysihtml5({
        parserRules:  wysihtml5ParserRules,
        "font-styles": true, // Font styling, e.g. h1, h2, etc. Default true
        "emphasis": true, // Italics, bold, etc. Default true
        "lists": true, // (Un)ordered lists, e.g. Bullets, Numbers. Default true
        "html": false, // Button which allows you to edit the generated HTML. Default false
        "link": false, // Button to insert a link. Default true
        "image": false, // Button to insert an image. Default true,
        "action": false, // Undo / Redo buttons,
        "color": false // Button to change color of font
    });

    var previose_select_caption = "{{$pervios_caption_class}}";
    var previose_select_cover_class = '{{$pervios_cover_class}}';

    $('.btn-select-template').click(function(e){

        e.preventDefault();

        var me = $(this);
        var caption_class = me.attr('data-class');
        var caption_cover_class = me.attr('data-caption-cover');
        var template_name = me.attr('data-template-name');
        var template_id = me.attr('data-id');

        $('.'+caption_class).show();
        $('.'+caption_cover_class).hide();

         // hide the previuse select template
        if(previose_select_caption != ''){
            $('.'+previose_select_caption).hide();
            $('.'+previose_select_cover_class).show();
        }

        // assign template name to input
        $('#template-name').val(template_name);
        $('#template-id').val(template_id);

        previose_select_caption = caption_class;
        previose_select_cover_class = caption_cover_class;

    });

    $('.btn-check').click(function(e){

        var me = $(this);
        var caption_class = me.attr('data-class');
        var caption_cover_class = me.attr('data-caption-cover');

        $('.'+caption_class).hide();
        $('.'+caption_cover_class).show();

        // clear state
        previose_select_caption = '';
        previose_select_cover_class = '';
        $('#template-name').val('');
        $('#template-id').val('');

        e.preventDefault();
    });

    $('.actions a[href$="#finish"]').click(function(e){
        e.preventDefault();
    });


});
</script>
@endsection