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

<div class="card mb-7">
    <div class="card-header card-header-stretch">
        <h3 class="card-title">@lang('general.app_home_customization')</h3>
        <div class="card-toolbar">
            @include('pages.store_admin.app_settings.sections._tabs')
        </div>
    </div>
</div>


<!--begin::Products-->
<div class="card">
    <!--begin::Card header-->
    <div class="card-header ">
        <div class="card-title">
            <h3>تخصيص رئيسية التطبيق</h3>
        </div>
        <div class="card-toolbar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1 active" data-bs-toggle="tab" href="#setting_slider_tab"  tabindex="-1">السلايدر</a>
                </li>
                <li class="nav-item" >
                    <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1 " data-bs-toggle="tab"  href="#setting_sections_tab" >البنرات والاقسام</a>
                </li>
            </ul>
        </div>
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <div class="tab-content">
            <!--begin::Tab pane-->
            <div class="tab-pane fade active show" id="setting_slider_tab">
                <div class="border p-3 rounded-2 d-flex align-items-center my-3 ">
                    <h4>السلايدر</h4>
                    <label class="form-check form-switch form-switch-sm   me-3 ms-auto">
                        <input class="form-check-input" type="checkbox" value="" checked/>
                        <span class="form-check-label">@lang('general.enable')</span>
                    </label>
                    <a href="#cs_modal_add_slider" data-bs-toggle="modal" class="btn btn-sm btn-light-dark" >@lang('general.add_new')</a>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5 " id="sliders_table">
                        <thead>
                        <tr class="bg-gray-100 text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            <th class="">البنر</th>
                            <th class="">نوع المحتوى</th>
                            <th class="min-w-80px">الحاله</th>
                            <th class="min-w-70px">الإجراءات</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div class="symbol symbol-50px">
                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                </div>
                            </td>
                            <td>
                                رابط
                            </td>
                            <td data-search="enabled">
                                <label class="form-check form-switch form-switch-sm  form-check-custom form-check-solid">
                                    <input class="form-check-input" type="checkbox" value="" checked/>
                                    <span class="form-check-label">
                                    @lang('general.enable')
                                </span>
                                </label>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a href="#cs_modal_add_slider" data-bs-toggle="modal" class="btn btn-icon btn-sm btn-light-warning">
                                        <i class="fas fa-pen fs-4"></i>
                                    </a>

                                    <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-light-danger">
                                        <i class="fas fa-trash fs-4"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="symbol symbol-50px">
                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                </div>
                            </td>
                            <td>
                                رابط
                            </td>
                            <td data-search="enabled">
                                <label class="form-check form-switch form-switch-sm  form-check-custom form-check-solid">
                                    <input class="form-check-input" type="checkbox" value="" checked/>
                                    <span class="form-check-label">
                                    @lang('general.enable')
                                </span>
                                </label>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a href="#cs_modal_add_slider" data-bs-toggle="modal" class="btn btn-icon btn-sm btn-light-warning">
                                        <i class="fas fa-pen fs-4"></i>
                                    </a>

                                    <a href="#" data-kt-filter="delete_row" class="btn btn-icon btn-sm btn-light-danger">
                                        <i class="fas fa-trash fs-4"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end::Tab pane-->
            <!--begin::Tab pane-->
            <div class="tab-pane fade " id="setting_sections_tab" >
                sections
            </div>
            <!--end::Tab pane-->
        </div>


    </div>
    <!--end::Card body-->
</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-->

<!--begin::Modal - category - show-->
<div class="modal fade" id="cs_modal_show" 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">
                <!--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">
                <div class="table-responsive">
                    <table class="table table-row-bordered table-striped" >
                        <tbody>
                        <tr>
                            <th>الاسم</th>
                            <td>طول 2</td>
                        </tr>
                        <tr>
                            <th>عدد المنتجات</th>
                            <td>30</td>
                        </tr>
                        <tr>
                            <th>تاريخ الاضافه</th>
                            <td>01-01-1111</td>
                        </tr>
                        <tr>
                            <th>الحالة</th>
                            <td><span class="badge badge-light-success fs-7 fw-bold">مفعل</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - category - show-->

@endsection

@push('custom_js')
    <script>

        $(document).ready(function(){
            var table = '#sliders_table';
            // table = document.querySelector('#kt_ecommerce_category_table');
            // Init datatable --- more info on datatables: https://datatables.net/manual/
            let datatable = $(table).DataTable({
                "info": false,
                'order': [],
                'pageLength': 10,
                'columnDefs': [
                    // { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
                    { orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
                ]
            });


                handleDeleteRows();
            addSliderModalOptions();


        })

        function addSliderModalOptions(){
            // display and hidden base on slider content type
            $(document).on('change','#cs_modal_add_slider select.content_type',function (e) {
                let _val = $(this).val();
                $('.option_item').hide();
                if(_val=='1'){
                    $('.option_item.external_link').show();
                }
                else if(_val=='2'){
                    $('.option_item.page').show();
                }
                else if(_val=='3'){
                    $('.option_item.category').show();
                }
                else if(_val=='4'){
                    $('.option_item.category,.option_item.sub_category').show();
                }
                else if(_val=='5'){
                    $('.option_item.tailor_category').show();
                }
                else if(_val=='6'){
                    $('.option_item.product').show();
                }
            });
        }
        function handleDeleteRows(){
            // Select all delete buttons
            // const deleteButtons = $(table).find('[data-kt-ecommerce-category-filter="delete_row"]');
            //
            // deleteButtons.forEach(d => {
            // Delete button on click
            $(document).on('click','[data-kt-filter="delete_row"]', function (e) {
                e.preventDefault();

                // Select parent row
                const parent = $(this).closest('tr');

                // Get category name
                const categoryName = parent.find('[data-kt-filter="name"]').text();

                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
                Swal.fire({
                    text: "Are you sure you want to delete " + categoryName + "?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Yes, delete!",
                    cancelButtonText: "No, cancel",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary"
                    }
                }).then(function (result) {
                    if (result.value) {
                        Swal.fire({
                            text: "You have deleted " + categoryName + "!.",
                            icon: "success",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary",
                            }
                        }).then(function () {
                            // Remove current row
                            datatable.row($(parent)).remove().draw();
                        });
                    } else if (result.dismiss === 'cancel') {
                        Swal.fire({
                            text: categoryName + " was not deleted.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn fw-bold btn-primary",
                            }
                        });
                    }
                });
            });
            // });
        }

    </script>
@endpush