@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Add Template') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Add Template') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>

        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="box">
                    {!! Form::open(['method' => 'post', 'action' => 'Admin\TemplateController@store', 'files' => true, 'class' => 'form_to_submit']) !!}
                    <div class="box-body">
                        <div class="form-group">
                            <label for="title_ar">{{ translate('Arabic title') }}
                            </label>
                            <div>
                                {!! Form::text('title_ar', null, ['class' => 'form-control', 'placeholder' => translate('Arabic title')]) !!}
                            </div>
                            @error('title_ar')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="title_en">{{ translate('English title') }}
                            </label>
                            <div>
                                {!! Form::text('title_en', null, ['class' => 'form-control', 'placeholder' => translate('English title')]) !!}
                            </div>
                            @error('title_en')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="front_id">{{ translate('Front ID') }}
                            </label>
                            <div>
                                {!! Form::number('front_id', null, ['class' => 'form-control', 'placeholder' => translate('Front ID')]) !!}
                            </div>
                            @error('front_id')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="arrangement">{{ translate('Arrangement') }}
                            </label>
                            <div>
                                {!! Form::number('arrangement', null, ['class' => 'form-control', 'placeholder' => translate('Arrangement')]) !!}
                            </div>
                            @error('arrangement')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="brand_id">{{ translate('Template category') }}
                            </label>
                            <div>
                                {!! Form::select('template_category_id', $categories, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="brand_id">{{ translate('Subscribtions') }}
                            </label>
                            <div>
                                {!! Form::select('subscribtions[]', $subscribtions, null, ['required' => 'required', 'multiple' => 'multiple', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="brand_id">{{ translate('Components') }}
                            </label>
                            <div>
                                {!! Form::select('components[]', $components, null, ['required' => 'required', 'multiple' => 'multiple', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                            </div>
                        </div>
                        <h4 class="box-title">{{ translate('Default styles') }}</h4>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="offers_slider_style">{{ translate('Offers slider style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('offers_slider_style', $offers_slider_style, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('offers_slider_style')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="recent_slider_style">{{ translate('Recent slider style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('recent_slider_style', $recent_slider_style, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('recent_slider_style')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="best_selling_slider_style">{{ translate('Best selling slider style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('best_selling_slider_style', $best_selling_slider_style, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('best_selling_slider_style')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="small_banner_style">{{ translate('Small banner style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('small_banner_style', $small_banner_style, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('small_banner_style')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="big_banner_style">{{ translate('Big banner style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('big_banner_style', $big_banner_style, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('big_banner_style')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="site_features_style">{{ translate('Site features style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('site_features_style', $site_features_style, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('site_features_style')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="btnStyle">{{ translate('Btn style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('btnStyle', [0 => 0, 1 => 1], null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('btnStyle')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="titleStyle">{{ translate('title style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('titleStyle', [0 => 0, 1 => 1], null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('titleStyle')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="product_card_style">{{ translate('Product card style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('product_card_style', $product_card_style, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('product_card_style')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="searchFilterStyle">{{ translate('Search filter style') }}
                                    </label>
                                    <div>
                                        {!! Form::select('searchFilterStyle', [1 => 1, 2 => 2], null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('searchFilterStyle')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="brand_id">{{ translate('Default color pallet') }}
                                    </label>
                                    <div>
                                        {!! Form::select('default_color_pallet_id', $colors, null, ['required' => 'required', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    {!! Form::Close() !!}
                    <div class="box-header">
                        <h4 class="box-title">{{ translate('Template photos') }}</h4>
                    </div>
                    <div class="box-body">
                        <form action="{{ route('Template.fileupload') }}" class="dropzone" drop-zone=""
                            id="file-dropzone">
                            <div class="fallback">
                                <input name="file" type="file" multiple />
                            </div>

                        </form>
                        <ul class="visualizacao sortable dropzone-previews">

                        </ul>
                        <div class="preview" style="display:none;">
                            <li>
                                <div>
                                    <div class="dz-preview dz-file-preview">
                                        <img data-dz-thumbnail />
                                        <div class="dz-progress"><span class="dz-upload"
                                                data-dz-uploadprogress></span>
                                        </div>
                                        <div class="dz-error-message"><span data-dz-errormessage></span></div>
                                    </div>
                                </div>
                            </li>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button type="button" id="submit_button" class="btn btn-rounded btn-primary btn-outline">
                            <i class="ti-save-alt"></i> {{ translate('Save') }}
                        </button>
                    </div>


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


    </section>
@endsection
<style>
    .dropzone {
        min-height: 0px !important;
        border: 0px !important;
        padding: 0px !important;
    }

    .sortable {
        padding: 0;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .sortable li {
        float: left;
        width: 120px;
        height: 120px;
        overflow: hidden;
        border: 2px solid #2A3042;
        text-align: center;
        margin: 5px;
        position: relative;
    }

    .del_thumbnail {
        color: blueviolet !important;
        cursor: pointer !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }

    li.sortable-placeholder {
        border: 1px dashed #CCC;
        background: none;
    }

</style>
@section('script')
    <script>
        $("select").on("select2:select", function(evt) {
            var element = evt.params.data.element;
            var $element = $(element);
            $element.detach();
            $(this).append($element);
            $(this).trigger("change");
        });
        $(document).ready(function() {
            $('#submit_button').click(function() {
                $('.form_to_submit').submit();
            });
            var $sortableList = $('.sortable');
            $sortableList.sortable({
                stop: function(event, ui) {
                    $('.dz-complete').each(function(i) {
                        var data_id = $(this).data('id')
                        var id_sort = data_id + "_" + i;
                        console.log('data_id-- ' + data_id + " || sort --" + i)
                        $("input[data-id=" + data_id + "]").val(id_sort)
                    });
                }
            });
        });
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#file-dropzone", {
            url: "{{ route('Template.fileupload') }}",
            maxFilesize: 100,
            acceptedFiles: ".jpeg,.jpg,.png,.pdf",
            dictDefaultMessage: `<i style="font-size: 4em" class="fa fa-cloud-upload" aria-hidden="true"></i>`,
            paramName: "uploadfile",
            maxThumbnailFilesize: 99999,
            previewsContainer: '.visualizacao',
            previewTemplate: $('.preview').html(),
            init: function() {
                this.on('completemultiple', function(file, json) {
                    $sortableList.sortable('enable');
                });
                this.on('success', function(file, response) {
                    $(file.previewElement).attr('data-id', response.id);
                    var id_sort = response.id + "_" + response.sort;
                    $('.form_to_submit').append(
                        '<input type="hidden" name="attatches[]" data-id="' + response.id +
                        '" value="' +
                        id_sort + '">');
                    $('.sortable').sortable('enable');

                });
                this.on('addedfile', function(file) {
                    var _this = this;
                    var removeButton = Dropzone.createElement(
                        "<span data-dz-remove class='glyphicon glyphicon-trash del_thumbnail'></span>"
                    );
                    removeButton.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var fileName = file.name;
                        var fileid = $(file.previewElement).attr('data-id');
                        $.post(`{{ route('Template.fileupload') }}`, {
                            _token: '{{ csrf_token() }}',
                            name: fileName,
                            id: fileid,
                            type: 'delete'
                        }, function(data) {
                            $('.form_to_submit').find(
                                    'input[name="attatches[]"][data-id="' + data.id +
                                    '"]')
                                .remove();
                        });
                        _this.removeFile(file);
                    });
                    file.previewElement.appendChild(removeButton);
                });

                this.on('drop', function(file) {});
            }
        });
        myDropzone.on("sending", function(file, xhr, formData) {
            formData.append("_token", '{{ csrf_token() }}');
            formData.append("filesize", file.size);
            formData.append("filesize", file.size);
            formData.append("type", 'add');
        });
    </script>
@endsection