@extends('layout.store_layout.master')
@section('content')

    <div class="card">
        <div class="card-header ">
            <h3 class="card-title">{{ !empty($section->title) ? $section->title : trans('general.home-slider') }}</h3>
            <div class="card-toolbar">
                <div class="d-flex justify-content-end ">
                    <a href="javascript:void(0);" onclick="openModal()" class="btn text-nowrap  btn-primary" >@lang('general.add_new')</a>
                </div>
            </div>

        </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_table">
                    <thead>
                    <tr class=" text-gray-400 fw-bold fs-7 text-uppercase gs-0"
                        style=" background: #f1f9ff;">
                        <th class="" width="20%">@lang('general.banner')</th>
                        <th class="" width="25%">@lang('general.content_type')</th>
                        <th class="">@lang('general.content_value')</th>
                        <th class="min-w-70px">@lang('admin.procedures')</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($items as $item)
                        <tr id="TR_{{$item->id}}">
                            <td>
                                <div class="symbol symbol-50px">
                                    <span class="symbol-label" style="background-image:url('{{$item->image_url}}');"></span>
                                </div>
                            </td>
                            <td>
                                {{ trans('general.type_'.$item->item_type) }}
                            </td>
                            <td>
                               {{ $item->home_slider_content_value }}
                            </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')
                                    <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>
                                </a>

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

                                    <div class="menu-item px-3">
                                        <a href="#" data-id="{{$item->getKey()}}"
                                           data-skin="dark" data-tooltip="m-tooltip" data-placement="top"
                                           data-url="{{ route('admin.app_settings.home_slider_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>
                                </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>
    <!--begin::Modal - category - show-->
    <div class="modal fade" id="cs_modal_add_slider" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <div class="modal-header py-3">
                    <!--begin::Modal title-->
                    <h2>اضافة/تعديل</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <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>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>

                <div class="modal-body">

                    <form action="">
                        {{--<div class="mb-10 fv-row">--}}
                        {{--<label class="required form-label">العنوان</label>--}}
                        {{--<input type="text" name="title" class="form-control mb-2" placeholder="عنوان" value="" />--}}
                        {{--</div>--}}


                        <div class="fv-row mb-10">
                            <label class="d-block fw-semibold fs-6 mb-5 required">@lang('general.image')</label>
                            <style>
                                .image-input-placeholder { background-image: url('{{asset('/assets/media/svg/files/blank-image.svg')}}'); }
                                [data-theme="dark"] .image-input-placeholder { background-image: url('{{ asset('/assets/media/svg/files/blank-image-dark.svg') }}'); }
                            </style>

                            <div class="image-input image-input-outline image-input-placeholder" data-kt-image-input="true">
                                <div class="image-input-wrapper w-125px h-125px" style="background-image: url({{ asset('/assets/media/avatars/300-6.jpg') }});"></div>

                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="@lang('general.change_image')">
                                    <i class="bi bi-pencil-fill fs-7"></i>
                                    <!--begin::Inputs-->
                                    <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
                                    <input type="hidden" name="avatar_remove" />
                                    <!--end::Inputs-->
                                </label>
                                <!--begin::Cancel-->
                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="@lang('general.cancel_image')">
                                <i class="bi bi-x fs-2"></i>
                            </span>
                                <!--end::Cancel-->
                                <!--begin::Remove-->
                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="@lang('general.remove_image')">
                                <i class="bi bi-x fs-2"></i>
                            </span>
                                <!--end::Remove-->
                            </div>
                            <!--end::Image input-->
                            <!--begin::Hint-->
                            <div class="form-text">@lang('general.allowed_files_types',['types'=>'png, jpg, jpeg'])</div>
                            <!--end::Hint-->
                        </div>
                        <div class="mb-10 fv-row">
                            <label class="required form-label">نوع المحتوى</label>
                            <select class="form-select content_type mb-2"  data-control="select2" data-hide-search="true" data-placeholder="اختر">
                                <option></option>
                                <option value="-1">بدون</option>
                                <option value="1">رابط</option>
                                <option value="2">صفحة</option>
                                <option value="3">قسم رئيسي</option>
                                <option value="4">قسم فرعي</option>
                                <option value="5">قسم تفصيل</option>
                                <option value="6">منتج</option>
                            </select>
                        </div>

                        <style>
                            .option_item{
                                display: none;
                            }
                        </style>
                        <div class="fv-row mb-10 option_item external_link">
                            <label class="required form-label">العميل:</label>
                            <input type="url" class="form-control">
                        </div>
                        <div class="fv-row mb-10 option_item page">
                            <label class="required form-label">الصفحة:</label>
                            <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                <option value="1">صفحة 1</option>
                                <option value="2">صفحة 2</option>
                                <option value="3">صفحة 3</option>
                            </select>
                        </div>
                        <div class="fv-row mb-10 option_item category">
                            <label class="required form-label">قسم رئيسي:</label>
                            <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                <option value="1">قسم 1</option>
                                <option value="2">قسم 2</option>
                                <option value="3">قسم 3</option>
                            </select>
                        </div>
                        <div class="fv-row mb-10 option_item sub_category">
                            <label class="required form-label">قسم فرعي:</label>
                            <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                <option value="1">قسم 1</option>
                                <option value="2">قسم 2</option>
                                <option value="3">قسم 3</option>
                            </select>
                        </div>
                        <div class="fv-row mb-10 option_item tailor_category">
                            <label class="required form-label">قسم تفصيل:</label>
                            <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                <option value="1">قسم 1</option>
                                <option value="2">قسم 2</option>
                                <option value="3">قسم 3</option>
                            </select>
                        </div>
                        <div class="fv-row mb-10 option_item product">
                            <label class="required form-label">منتج:</label>
                            <select class="form-select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                                <option></option>
                                <option value="1">منتج 1</option>
                                <option value="2">منتج 2</option>
                                <option value="3">منتج 3</option>
                            </select>
                        </div>


                        <div class="justify-content-end d-flex align-items-center">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">الغاء</button>
                            <button type="button" class="btn btn-primary ms-2">حفظ</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!--end::Modal - category - show-->
@endsection

@push('custom_js')
    <script src="{{asset('store_admin/js/shared_script.js')}}"></script>
    <script>
        function openModal(){
            $.get('{{ route('admin.app_settings.show_home_slider_form',[$section]) }}', 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);

                addSliderModalOptions();
                $('[data-control="select2"]').select2();
                // KTImageInput.createInstances();
                KTImageInput.init();
                const modalSubmitButton = modal.find('.submit_btn');

                let modalForm = $('#form-modal form');
                modalForm.submit(function(e) {
                    e.preventDefault();
                }).validate({
                    rules: {
                        name: {
                            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]);
                        // var poData = $(form).serializeArray();
                        //
                        // for (var i=0; i<poData.length; i++)
                        //     data.append(poData[i].name, poData[i].value);

                        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");
                                            setTimeout(function () {
                                                location.reload();
                                            },1500)

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

                modal.modal('show');

            });
        }
        $(document).ready(function(){
            // addSliderModalOptions();
        });

        function addSliderModalOptions(){
            // 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();
                $('.option_item').hide();
                if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::EXTERNAL_URL }}' ){
                    $('.option_item.external_link').show();
                }
                // else if(_val=='2'){
                //     $('.option_item.page').show();
                // }
                else if(_val=='{{ \App\Constants\StoreSectionElementContentTypes::MAIN_CATEGORY }}'){
                    $('.option_item.category').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::SUB_CATEGORY }}'){
                    $('.option_item.category,.option_item.sub_category').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::TAILOR_CATEGORY }}'){
                    $('.option_item.tailor_category').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::PRODUCT }}'){
                    $('.option_item.product').show();
                }
                else if(_val== '{{ \App\Constants\StoreSectionElementContentTypes::INTERNAL_TEXT }}'){
                    $('.option_item.internal_text').show();
                }
            });

            // get sub categroy when main category selected
            $(document).on('change','.modal [name="category"]',function (e) {
                let _val = $(this).val();
                if(_val.length > 0){
                    $.get('{{ route('admin.categories.getSubCategories') }}?id=' + _val, function (data) {
                        console.log('data',data);
                        if(data.done == 1){
                            var select = $('form select[name="subcategory"]');
                            select.children('option:not(:first)').remove();
                            select.append(data.html);
                        }
                    });
                }
            });
        }
    </script>
@endpush