@extends('layout.store_layout.master')
@section('content')
        <div class="card">

            <div class="card-header border-0 pt-6">
                <h3 class="card-title">@lang('general.app_home_customization')</h3>
                <!--begin::Card title-->

                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <div class="d-flex justify-content-end ">

                        <a href="javascript:void(0);" onclick="openAddSectionModal()" class="btn btn-primary text-nowrap mw-mc" >@lang('general.add_new_section')</a>
                    </div>
                    <!--begin::Toolbar-->
                </div>
                <!--end::Card toolbar-->

            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table text-center align-middle table-row-dashed fs-6 gy-5" id="cs_sections_table">
                        <thead>
                        <tr class=" text-gray-400 fw-bold fs-7 text-uppercase gs-0" style=" background: #f1f9ff;">
                            <th class="" width="70px"></th>
                            <th class="">@lang('admin.title')</th>
                            <th class="">@lang('general.type')</th>
                            <th class="min-w-80px">@lang('admin.status')</th>
                            <th class="min-w-80px">@lang('admin.created_date')</th>
                            <th class="min-w-70px">@lang('admin.procedures')</th>
                        </tr>
                        </thead>
                        <tbody class="draggable-zone">
                        @forelse($items as $item)
                            <tr id="TR_{{$item->id}}" class="{{ $item->section_type != \App\Constants\StoreSectionTypes::HOME_SLIDER ? 'draggable' :'' }}" data-id="{{$item->getKey()}}" data-sorted="{{$item->sorted ?? 1}}">
                                @if($item->section_type != \App\Constants\StoreSectionTypes::HOME_SLIDER)
                                <td class="draggable-handle">
                                    <i class="fas fa-arrows-alt fs-2x"></i>
                                </td>
                                @else
                                <td></td>
                                @endif
                                <td>
                                    <div class="d-flex align-items-center">
                                        {{--<div class="symbol symbol-50px">--}}
                                            {{--<span class="symbol-label" style="background-image:url({{$item->image_url}});"></span>--}}
                                        {{--</div>--}}
                                        <div class="ms-5">
                                            <span class="text-gray-800 text-hover-primary fs-5 fw-bold">{{$item->title}}</span>

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

                                <td>
                                    <span class="text-gray-600">{{trans('general.'.$item->section_type)}}</span>
                                </td>

                                <td>
                                    <label  class=" form-check form-switch form-switch-sm  form-check-custom form-check-solid">
                                        <input data-id="{{ $item->getKey() }}" data-url="{{ route('admin.app_settings.home_sections_status') }}" class="js-switch form-check-input" name="status" type="checkbox" value="true" {{ ($item->status == 1) ? 'checked' : ''  }}/>
                                            <span class="form-check-label">
                                            @lang('general.enable')
                                        </span>
                                    </label>
                                </td>

                                <td>{{getFormattedTime($item->created_at)}}</td>

                                <td class="text-center">
                                    <a href="#" class="btn btn-sm btn-light btn-active-light-primary text-nowrap"
                                       data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                            @lang('admin.settings')
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                                        <span class="svg-icon svg-icon-5 m-0">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                  fill="currentColor"/>
                                        </svg>
                                </span>
                                        <!--end::Svg Icon-->
                                    </a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                         data-kt-menu="true">
                                        @if($item->section_type == \App\Constants\StoreSectionTypes::HOME_SLIDER)
                                            <div class="menu-item px-3">
                                                <a href="{{ route('admin.app_settings.home_slider',[$item]) }}" class="menu-link px-3">
                                                    <i class="fas fa-pen fs-8"></i>
                                                    <span class="px-3">@lang('admin.edit')</span>
                                                </a>
                                            </div>
                                        @else
                                            <div class="menu-item px-3">
                                                <a href="javascript:void(0);" onclick="updateSection('{{ $item->getKey() }}')" class="menu-link px-3">
                                                    <i class="fas fa-pen fs-8"></i>
                                                    <span class="px-3">@lang('admin.edit')</span>
                                                </a>
                                            </div>
                                            <div class="menu-item px-3">
                                                <a href="#" data-id="{{$item->id}}"
                                                   data-skin="dark" data-tooltip="m-tooltip" data-placement="top"
                                                   data-url="{{route('admin.app_settings.section_delete')}}"
                                                   data-token="{{csrf_token()}}" class="menu-link px-3 btn-del">
                                                    <i class="fas fa-trash fs-8"></i>
                                                    <span class="px-3">@lang('admin.delete')</span>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>

                        @empty
                            <tr>
                                <td colspan="6" class="text-center">
                                    @lang('admin.no_data_found')
                                </td>
                            </tr>
                        @endforelse


                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal fade" id="cs_modal_section_details" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered modal-lg mw-650px1">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" ></h5>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                            </svg>
                        </span>
                        </div>
                        <!--end::Close-->
                    </div>

                    <div class="modal-body">
                    </div>
                </div>
            </div>
        </div>
@endsection

@push('custom_js')
    <script src="{{asset('store_admin/js/shared_script.js')}}"></script>
    <script src="{{ asset('assets/plugins/custom/draggable/draggable.bundle.js') }}"></script>
    <script>
        function openAddSectionModal() {
            $.get('{{ route('admin.app_settings.show_form') }}', function (data) {
                let modal = $('#form-modal');
                // modal.find('.modal-dialog').removeClass('modal-lg');
                $('body').addClass('modal-open');
                modal.find('.modal-dialog').addClass('modal-lg');
                modal.find('.modal-title').html(data.title);
                modal.find('.modal-body').html(data.page);
                KTApp.init();
                const modalSubmitButton = modal.find('.submit_btn');

                let modalForm = $('#form-modal form');
                modalForm.submit(function(e) {
                    e.preventDefault();
                }).validate({
                    rules: {
                        // section_type: {
                        //     required: true
                        // }
                    },
                    submitHandler: function (form) {
                        modalSubmitButton.attr('data-kt-indicator', 'on');
                        // Disable submit button whilst loading
                        modalSubmitButton.attr('disabled',true);
                        const data = new FormData($(form)[0]);
                        const action = $(form).attr('action');

                        $.ajax({
                            url: action,
                            type: "POST",
                            data: data,
                            contentType: false,
                            processData: false,
                            success: function (data) {
                                if (data.status === 0) {
                                    // Enable submit button after loading
                                    modalSubmitButton.attr('data-kt-indicator', 'off');
                                    modalSubmitButton.removeAttr('disabled');
                                    if(data.errors && data.errors.length > 0){
                                        var errors = data.errors;
                                        for(var error = 0;error < errors.length; error++){
                                            var input_name = errors[error].input_name;
                                            var input_error = errors[error].errors;
                                            // console.log(input_name,input_error);
                                            $('#'+input_name+'_error').html(input_error).show();

                                        }
                                    }

                                }else if (data.success) {

                                    modalSubmitButton.removeAttr('data-kt-indicator');
                                    if(data.page){
                                        let modalDetails = $('#cs_modal_section_details');
                                        modalDetails.find('.modal-title').html(data.title);
                                        modalDetails.find('.modal-body').html(data.page);
                                        modal.modal('hide');
                                        setTimeout(function () {
                                            $('body').addClass('modal-open');
                                        },500);
                                        KTApp.init();
                                        addElementModalOptions();
                                        $('[data-control="select2"]').select2();
                                        KTImageInput.init();
                                        saveSection();
                                        modalDetails.modal('show');



                                    }else{
                                        // modal.modal('hide');
                                    }






                                    // Swal.fire({
                                    //     text: "تمت عملية الاضافة بنجاح!",
                                    //     icon: "success",
                                    //     buttonsStyling: false,
                                    //     confirmButtonText: "تم!",
                                    //     customClass: {
                                    //         confirmButton: "btn btn-primary"
                                    //     }
                                    // }).then(function (result) {
                                    //     if (result.isConfirmed) {
                                    //         // Enable submit button after loading
                                    //         modalSubmitButton.attr('data-kt-indicator', 'off');
                                    //         modalSubmitButton.removeAttr('disabled');
                                    //
                                    //         // Redirect to customers list page
                                    //         // window.location = form.getAttribute("data-kt-redirect");
                                    //         if(data.reload){
                                    //             setTimeout(function () {
                                    //                 location.reload();
                                    //             },1500)
                                    //         }
                                    //
                                    //     }
                                    // });
                                } else {
                                    // validationErrors(data.errors);
                                }
                            },
                            error: function (danger) {
                                console.log(danger);
                            }
                        });
                    }
                });

                modal.modal('show');

            });
        }
        function saveSection() {
            let modal = $('#cs_modal_section_details');
            const modalSubmitButton = modal.find('.submit_btn');
            let modalForm = $('#cs_modal_section_details form');

            modalForm.submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    // section_type: {
                    //     required: true
                    // }
                },
                submitHandler: function (form) {
                    modalSubmitButton.attr('data-kt-indicator', 'on');
                    // Disable submit button whilst loading
                    modalSubmitButton.attr('disabled',true);
                    const data = new FormData($(form)[0]);
                    const action = $(form).attr('action');

                    $.ajax({
                        url: action,
                        type: "POST",
                        data: data,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            if (data.status === 0) {
                                // Enable submit button after loading
                                modalSubmitButton.attr('data-kt-indicator', 'off');
                                modalSubmitButton.removeAttr('disabled');
                                if(data.errors && data.errors.length > 0){
                                    var errors = data.errors;
                                    for(var error = 0;error < errors.length; error++){
                                        var input_name = errors[error].input_name;
                                        var input_error = errors[error].errors;
                                        // console.log(input_name,input_error);
                                        $('#'+input_name+'_error').html(input_error).show();

                                    }
                                }

                            }else if (data.status) {

                                modalSubmitButton.removeAttr('data-kt-indicator');
                                modal.modal('hide');

                                Swal.fire({
                                    text: "تمت عملية الاضافة بنجاح!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    confirmButtonText: "تم!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                }).then(function (result) {
                                    if (result.isConfirmed) {
                                        // Enable submit button after loading
                                        modalSubmitButton.attr('data-kt-indicator', 'off');
                                        modalSubmitButton.removeAttr('disabled');

                                        // Redirect to customers list page
                                        // window.location = form.getAttribute("data-kt-redirect");
                                        if(data.reload){
                                            setTimeout(function () {
                                                location.reload();
                                            },1500)
                                        }

                                    }
                                });
                            } else {
                                // validationErrors(data.errors);
                            }
                        },
                        error: function (danger) {
                            console.log(danger);
                        }
                    });
                }
            });
        }
        function addElementModalOptions(){
            // display and hidden base on slider content type
            // $(document).on('change','#cs_modal_add_slider select.content_type',function (e) {
            $(document).on('change','.modal select.content_type',function (e) {
                let _val = $(this).val();
                let _wrapper = $(this).closest('.form-group').parent();

                _wrapper.find('.option_item').hide();

                if(_val=='{{ \App\Constants\StoreSectionElementContentTypes::MAIN_CATEGORY }}'){
                    _wrapper.find('.option_item.category').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::SUB_CATEGORY }}'){
                    _wrapper.find('.option_item.category,.option_item.sub_category').show();
                    if(_wrapper.find('.option_item.category select').val()){
                        _wrapper.find('.option_item.category select').trigger('change');
                    }
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::TAILOR_CATEGORY }}'){
                    _wrapper.find('.option_item.tailor_category').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::PRODUCTS }}'){
                    _wrapper.find('.option_item.products').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::INTERNAL_TEXT }}'){
                    _wrapper.find('.option_item.internal_text').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::PRODUCT }}'){
                    _wrapper.find('.option_item.product').show();
                }else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::EXTERNAL_URL }}' ){
                    _wrapper.find('.option_item.external_link').show();
                }

            });

            // get sub categroy when main category selected
            $(document).on('change','.modal .category select',function (e) {
                let _val = $(this).val();
                let _wrapper = $(this).closest('.form-group').parent();
                if(_val.length > 0){
                    $.get('{{ route('admin.categories.getSubCategories') }}?id=' + _val, function (data) {
                        console.log('data',data);
                        if(data.done == 1){
                            var select = _wrapper.find('.sub_category select');
                            select.children('option:not(:first)').remove();
                            select.append(data.html);
                        }
                    });
                }
            });
        }
        function updateSection(sectionId = '') {
            $.post(
                '{{ route('admin.app_settings.section_details_form') }}',
                {
                    _token: '{{ csrf_token() }}',
                    id: sectionId,
                },
                function (data) {
                let modal = $('#form-modal');
                // modal.find('.modal-dialog').removeClass('modal-lg');
                modal.find('.modal-title').html(data.title);
                modal.find('.modal-body').html(data.page);
                KTApp.init();
                addElementModalOptions();
                $('[data-control="select2"]').select2();
                const modalSubmitButton = modal.find('.submit_btn');

                let modalForm = $('#form-modal form');
                modalForm.submit(function(e) {
                    e.preventDefault();
                }).validate({
                    rules: {
                        section_type: {
                            required: true
                        }
                    },
                    submitHandler: function (form) {
                        modalSubmitButton.attr('data-kt-indicator', 'on');
                        // Disable submit button whilst loading
                        modalSubmitButton.attr('disabled',true);
                        const data = new FormData($(form)[0]);
                        const action = $(form).attr('action');

                        $.ajax({
                            url: action,
                            type: "POST",
                            data: data,
                            contentType: false,
                            processData: false,
                            success: function (data) {
                                if (data.status === 0) {
                                    // Enable submit button after loading
                                    modalSubmitButton.attr('data-kt-indicator', 'off');
                                    modalSubmitButton.removeAttr('disabled');
                                    if(data.errors && data.errors.length > 0){
                                        var errors = data.errors;
                                        for(var error = 0;error < errors.length; error++){
                                            var input_name = errors[error].input_name;
                                            var input_error = errors[error].errors;
                                            // console.log(input_name,input_error);
                                            $('#'+input_name+'_error').html(input_error).show();

                                        }
                                    }

                                }else if (data.status) {

                                    modalSubmitButton.removeAttr('data-kt-indicator');
                                    modal.modal('hide');

                                    Swal.fire({
                                        text: "تمت العملية  بنجاح!",
                                        icon: "success",
                                        buttonsStyling: false,
                                        confirmButtonText: "تم!",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    }).then(function (result) {
                                        if (result.isConfirmed) {
                                            // Enable submit button after loading
                                            modalSubmitButton.attr('data-kt-indicator', 'off');
                                            modalSubmitButton.removeAttr('disabled');

                                            // Redirect to customers list page
                                            // window.location = form.getAttribute("data-kt-redirect");
                                            if(data.reload){
                                                setTimeout(function () {
                                                    location.reload();
                                                },1500)
                                            }

                                        }
                                    });
                                } else {
                                    // validationErrors(data.errors);
                                }
                            },
                            error: function (danger) {
                                console.log(danger);
                            }
                        });
                    }
                });

                modal.modal('show');

            });
        }
        function initDragable(){
            var containers = document.querySelectorAll("#cs_sections_table .draggable-zone");

            if (containers.length === 0) {
                return false;
            }

            // var swappable = new Swappable.default(containers, {
            var swappable = new Sortable.default(containers, {
                draggable: ".draggable",
                handle: ".draggable .draggable-handle",
                mirror: {
                    //appendTo: selector,
                    appendTo: "body",
                    constrainDimensions: true
                }
            });

            // swappable.on('sortable:start', () => console.log('sortable:start'));
            // swappable.on('sortable:sort', () => console.log('sortable:sort'));
            // swappable.on('sortable:sorted', () => console.log('sortable:sorted'));
            swappable.on('sortable:stop', (e) => {
                // console.log('sortable:stop',e.originalSource.getAttribute("id"));
                // console.log('sortable:stop',e,e.oldIndex,e.newIndex);

                updateOrder(e.oldIndex,e.newIndex);
            });
            function updateOrder(oldIndex,newIndex){
                if(oldIndex == newIndex){
                    return;
                }
                var old = $('#cs_sections_table .draggable').eq(oldIndex);
                var oldId = old.attr('data-id');
                var oldSorted = old.attr('data-sorted');
                // console.log('old',old,oldId,oldSorted);
                var newEl = $('#cs_sections_table .draggable').eq(newIndex);
                var newId = newEl.attr('data-id');
                var newSorted = newEl.attr('data-sorted');
                // console.log('new',newEl,newId,newSorted);



                $.ajax({
                    url: "{{ route('admin.app_settings.home_sections_sort') }}",
                    type: "POST",
                    data: {
                        old_id:oldId,
                        new_id:newId,
                        old_sort:oldSorted,
                        new_sort:newSorted,
                    },
                    dataType: 'json',
                    // contentType: false,
                    // processData: false,
                    success: function (data) {
                       if (data.success) {
                           // update table
                           oldId = old.attr('data-sorted',newSorted);
                           newId = newEl.attr('data-sorted',oldSorted);
                        } else {
                        }
                    },
                    error: function (danger) {
                        console.log(danger);
                    }
                });

            }
        }
        $(document).ready(function(){
            initDragable();

            if($('.js-switch').length > 0){
                $('body').on('change', '.js-switch', function () {
                    let status = $(this).prop('checked') === true ? 1 : 0;
                    console.log(status,$(this).prop('checked'));
                    let elementId = $(this).data('id');
                    let url = $(this).data('url');
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: url,
                        data: {'id': elementId,'status': status},
                        success: function (data) {
                            console.log(data.message);
                        }
                    });
                });
            }
            $('.modal').on('shown.bs.modal', event => {
                $('body').addClass('modal-open');
                // alert('ss');
            })
        });
    </script>
@endpush