@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">

            <div class="panel panel-white">
                    <div class="panel-heading">
                        <h6 class="panel-title">New Website</h6>
                    </div>

                    <form class="stepy-validation" action="{{url('shop/website-management/save')}}" method="POST">
                       {!! csrf_field() !!}
                        <fieldset title="1">
                            <legend class="text-semibold">Website Address</legend>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group margin-top">
                                        <label class="control-label col-lg-4 text-right center-vertical" style="font-size: 16px;">Website Address Name<span class="text-danger">*</span></label>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="eg your-storename" name="data[website_address]" required>
                                                <span class="input-group-btn">
                                                    <label class="btn btn-default" style="cursor: default; !important">.vembers.com</label>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4"></div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <fieldset title="2">
                            <legend class="text-semibold">Select Template</legend>
                                                             @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}}">
                                                        <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-template-id="{{@$value->id}}"
                                                            data-primary-color="{{@$properties->primary_color}}"
                                                            data-secondary-color="{{@$properties->secondary_color}}"
                                                            data-menu-background-color="{{@$properties->menu_background_color}}"
                                                            data-menu-text-color="{{@$properties->menu_text_color}}">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
                                <input type="hidden" name="data[template_name]" id="template-name" required>
                                <input type="hidden" name="data[id]" id="template-id" required>
                                <div class="clearfix"></div>
                        </fieldset>



                        <fieldset title="3">
                            <legend class="text-semibold">Theme Color</legend>
                            <h6 class="content-group text-semibold">
                                Website Theme Color
                                    <small class="display-block">Select your website theme color, secondary color, menu color and menu text color.</small>
                                </h6>

                                <div class="row">
                                    <!-- primary color -->
                                    <div class="col-md-4">
                                        <div class="panel panel-body border-top-warning text-center" data-id="primary-color-contanier">
                                            <h6 class="no-margin text-semibold">Primary Color</h6>
                                            <p class="content-group-sm text-muted">This will be the main color of your website.</p>

                                            <input type="text" class="form-control colorpicker-show-input sp-input" data-preferred-format="hex3" name="data[primary_color]" id="primary-color">
                                              
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="panel panel-body border-top-warning text-center" data-id="secondary-color-contanier">
                                            <h6 class="no-margin text-semibold">Secondary Color</h6>
                                            <p class="content-group-sm text-muted">The second color after the main color of your website.</p>

                                            <input type="text" class="form-control colorpicker-show-input" data-preferred-format="hex3" style="display: none;" name="data[secondary_color]" id="secondary-color">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="panel panel-body border-top-warning text-center"
                                         data-id="menu-color-contanier">
                                            <h6 class="no-margin text-semibold">Menu Color</h6>
                                            <p class="content-group-sm text-muted">The color of menu in the website.</p>

                                            <input type="text" class="form-control colorpicker-show-input" data-preferred-format="hex3" style="display: none;" name="data[menu_background_color]" id="menu-background-color">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="panel panel-body border-top-warning text-center" data-id="menutext-color-contanier">
                                            <h6 class="no-margin text-semibold">Menu Color Text</h6>
                                            <p class="content-group-sm text-muted">This is the color of your menu text.</p>

                                            <input type="text" class="form-control colorpicker-show-input" data-preferred-format="hex3" style="display: none;" name="data[menu_text_color]" id="menu-text-color">
                                        </div>
                                    </div>
                                </div>
                        </fieldset>

                        <button type="submit" class="btn btn-primary stepy-finish">Submit <i class="icon-check position-right"></i></button>
                    </form>
            </div>
        </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 = '';
    var previose_select_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-template-id');
        var primary_color = me.attr('data-primary-color');
        var secondary_color = me.attr('data-secondary-color');
        var menu_background_color = me.attr('data-menu-background-color');
        var menu_text_color = me.attr('data-menu-text-color');

        $('.'+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);

        // assign template default color
        $('#primary-color').val(primary_color);
        $('#secondary-color').val(secondary_color);
        $('#menu-background-color').val(menu_background_color);
        $('#menu-text-color').val(menu_text_color);

        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('');

        e.preventDefault();
    });


});
</script>
@endsection