@extends('layout.store_layout.master')
@section('content')
<!--begin::Products-->
<div class="card card-flush">
    <!--begin::Card header-->
    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
        <!--begin::Card title-->
        <div class="card-title">
            <form action="{{route('admin.notifications.index')}}" method="get" class="w-100">

            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                <span class="svg-icon svg-icon-1 position-absolute ms-4">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
                    </svg>
                </span>
                <!--end::Svg Icon-->
                <input type="text" data-table-filter="search" name="search_title" class="form-control form-control-solid w-250px ps-14 search-btn" placeholder="بحث" />
            </div>
            </form>
            <!--end::Search-->
        </div>
        <!--end::Card title-->
        <!--begin::Card toolbar-->
        <div class="card-toolbar ">
            {{--flex-row-fluid justify-content-end gap-5--}}
            <div class="d-flex justify-content-end base" data-kt-ratings-table-toolbar="base">

                <div class="w-100 mw-200px">
                    <button type="button" class="btn btn-light me-3 mw-mc" data-bs-toggle="collapse" data-bs-target="#extra_filter" aria-expanded="false" aria-controls="extra_filter">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
                        <span class="svg-icon svg-icon-2">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor" />
                                    </svg>
                                </span>
                        <!--end::Svg Icon-->
                        @lang('general.filter')
                    </button>
                </div>

                <a href="#cs_modal_add_new" data-bs-toggle="modal" class="btn btn-primary text-nowrap" >@lang('general.add_new')</a>

            </div>
            <!--begin::Group actions-->
            <div class="d-flex justify-content-end align-items-center d-none" data-kt-ratings-table-toolbar="selected">
                <div class="fw-bold me-5 text-nowrap">
                    <span class="me-2" data-kt-ratings-table-select="selected_count"></span> @lang('general.selected')
                </div>
                <button type="button" class="btn btn-danger text-nowrap" data-kt-ratings-table-select="delete_selected">@lang('general.delete_selected')</button>

            </div>
            <!--end::Group actions-->

        </div>
        <div class=" py-4 base accordion-collapse collapse w-100" id="extra_filter"  >
            <div class="border p-3">
                <form action="{{route('admin.notifications.index')}}" method="get">
                    <div class="row d-flex justify-content-end">
                        <div class="col-md-3">
                            <div class="mb-10 fv-row">
                                <label class="form-label fs-5 fw-semibold m-3">الفترة الزمنية :</label>
                                <div class="input-group min-w-250px">
                                    <input class="form-control form-control-solid rounded rounded-end-0 " name="from_date" placeholder="اختر الفترة الزمنية" id="notification_date_range_flatpickr" />
                                    <button class="btn btn-icon btn-light search-btn" id="notification_date_range_flatpickr_clear">
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr088.svg-->
                                        <span class="svg-icon svg-icon-2">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect opacity="0.5" x="7.05025" y="15.5356" width="12" height="2" rx="1" transform="rotate(-45 7.05025 15.5356)" fill="currentColor" />
                                                <rect x="8.46447" y="7.05029" width="12" height="2" rx="1" transform="rotate(45 8.46447 7.05029)" fill="currentColor" />
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="d-flex justify-content-end border-top-1 border p-3">
                        <button class="btn btn-light-primary" type="submit">@lang('general.apply')</button>
                    </div>
                </form>

            </div>

        </div>
        <!--end::Card toolbar-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-0">
        <!--begin::Table-->
        <table class="table align-middle table-row-dashed fs-6 gy-5" id="cs_datatable">
            <!--begin::Table head-->
            <thead>
            <!--begin::Table row-->
            <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                <th class="w-10px pe-2">
                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                        <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#cs_datatable .form-check-input.selector" value="1" />
                    </div>
                </th>
                <th class="min-w-200px">العنوان</th>
                <th class="min-w-100px">نص الإشعار</th>
                <th class="min-w-100px">النوع</th>
                <th class=" min-w-100px">تاريخ الاضافة</th>
                <th class=" min-w-70px">العمليات</th>
            </tr>
            <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="fw-semibold text-gray-600">
                @foreach($notifications as $notification)
                    <tr>
                        <td>
                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                <input class="form-check-input selector" type="checkbox" value="{{$notification->id}}" />
                            </div>
                        </td>
                        <td >
                            {{$notification->title}}
                        </td>
                        <td >
                            {{$notification->description}}
                        </td>
                        <td >
                            @lang("admin.messages.".$notification->target_type)
                        </td>
                        <td >
                            {{$notification->created_at}}
                        </td>
                        <td class="">
                            <div class="btn-group">
                                <a href="#"  data-id="{{$notification->id}}"
                                   data-tooltip="m-tooltip" data-placement="top"
                                   data-url="{{route('admin.notifications.delete')}}"
                                   data-token="{{csrf_token()}}"
                                   class="btn-del btn btn-icon btn-sm btn-light-danger">
                                    <i class="fas fa-trash fs-4"></i>
                                </a>
                            </div>
                        </td>
                    </tr>

                @endforeach


            </tbody>
            <!--end::Table body-->
        </table>
        <!--end::Table-->
    </div>
    <!--end::Card body-->
</div>


<!--begin::Modal - 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>عنوان الاشعار</td>
                        </tr>
                        <tr>
                            <th>نوع الاشعار</th>
                            <td>لعميل</td>
                        </tr>
                        <tr>
                            <th>اسم العميل</th>
                            <td>أحمد محمود</td>
                        </tr>
                        <tr>
                            <th>نص الاشعار</th>
                            <td>وصف لمحتوى الاشعار</td>
                        </tr>
                        <tr>
                            <th>تاريخ الاضافه</th>
                            <td>01-01-2023</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - show-->

<!--begin::Modal - add new-->
<div class="modal fade" id="cs_modal_add_new" 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">

                <form action="" id="sendMssgForm">
                    <div class="mb-10 fv-row">
                        <label class="required form-label">عنوان الاشعار</label>
                        <input type="text" name="title" required class="form-control mb-2" id="" cols="30" rows="5"></input>
                    </div>
                    <div class="mb-10 fv-row">
                        <label class="required form-label">نص الاشعار</label>
                        <textarea name="message" required class="form-control mb-2" id="" cols="30" rows="5"></textarea>
                    </div>
                    <div class="mb-10 fv-row">
                        <label class=" form-label">نوع االاشعار</label>
                        {{-- multiple="multiple" --}}
                        <select class="form-select notification_type mb-2"  name="target_type" data-control="select2" data-hide-search="false" data-placeholder="اختر">
                            <option></option>
                            <option value="some_users">مجموعة عملاء</option>
                            <option value="all_users">جميع العملاء</option>
                            <option value="some_sales_representatives">مجموعة مندوبين</option>
                            <option value="all_sales_representatives">جميع المندوبين</option>
                            <option value="all_users_sales_representative">جميع المستخدمين</option>
                        </select>
                    </div>
                    <style>
                        .option_item{
                            display: none;
                        }
                    </style>
                    <div class="fv-row mb-10 option_item clients_group">
                        <label class="required form-label">مجموعة عملاء:</label>
                        <select class="form-select" name="user_group_select"  data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                            @foreach($user_groups as $group)
                                <option value="{{$group->id}}">{{$group->name}}</option>
                            @endforeach

                        </select>
                    </div>

                    <div class="fv-row mb-10 option_item delegates_group">
                        <label class="required form-label">مجموعة مندوبين:</label>
                        <select class="form-select" multiple="multiple" name="delegate_group_select" data-control="select2" data-hide-search="false" data-placeholder="الرجاء الاختيار.." data-allow-clear="false" >
                            <option></option>
                            @foreach($sales_groups as $group)
                                <option value="{{$group->id}}">{{$group->name}}</option>
                            @endforeach
                        </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="submit" class="btn btn-primary ms-2" id="sendMssgFormSubmit">ارسال</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
<!--end::Modal - add new-->

@endsection

@push('custom_js')
    <script src="{{asset('store_admin/js/shared_script.js')}}"></script>

    <script>
        $('.search-btn').keypress(function (e) {
            if (e.which == 13) {
                $('#search_form').submit();
            }
        });
    </script>
    <script>
        const submitSendMssgButton = document.querySelector('#sendMssgFormSubmit');
        const sendMssgForm = document.querySelector('#sendMssgForm');
        $('#sendMssgFormSubmit').click(function(e) {
            e.preventDefault();
            var validator = FormValidation.formValidation(
                sendMssgForm,
                {
                    fields: {
                        'title': {
                            validators: {
                                notEmpty: {
                                    message: 'هذا الحقل مطلوب'
                                }
                            }
                        },
                        'message': {
                            validators: {
                                notEmpty: {
                                    message: 'هذا الحقل مطلوب'
                                }
                            }
                        },
                        'target_type': {
                            validators: {
                                notEmpty: {
                                    message: 'هذا الحقل مطلوب'
                                }
                            }
                        },
                    },

                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap: new FormValidation.plugins.Bootstrap5({
                            rowSelector: '.fv-row',
                            eleInvalidClass: '',
                            eleValidClass: ''
                        })
                    }
                }
            );

            if (validator) {
                validator.validate().then(function (status) {
                    console.log('validated!');

                    if (status == 'Valid') {
                        var form_data = new FormData($('#sendMssgForm')[0]);

                        submitSendMssgButton.setAttribute('data-kt-indicator', 'on');

                        // Disable button to avoid multiple click
                        submitSendMssgButton.disabled = true;
                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                        $.ajax({
                            type: "post",
                            url: "{{route('admin.notifications.sendGlobalNotification')}}",
                            data: form_data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                            success: function (data) {
                                if (data.status === 0) {
                                    // Enable submit button after loading
                                    submitSendMssgButton.setAttribute('data-kt-indicator', 'off');
                                    submitSendMssgButton.disabled = false;
                                    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 {
                                    setTimeout(function () {
                                        submitSendMssgButton.removeAttribute('data-kt-indicator');
                                        Swal.fire({
                                            text: data.mssg,
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "تم!",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then(function (result) {
                                            // Enable submit button after loading
                                            submitSendMssgButton.setAttribute('data-kt-indicator', 'off');
                                            // Redirect to customers list page
                                            location.reload();

                                        });
                                    }, 2000);
                                }
                            },
                            error: function (data) {
                                // Enable submit button after loading
                                submitSendMssgButton.setAttribute('data-kt-indicator', 'off');
                                submitSendMssgButton.disabled = false;
                                Swal.fire({
                                    icon: "error",
                                    title: data.responseJSON.mssg,
                                    timer: 4000
                                });
                            }
                        });
                    } else {
                        Swal.fire({
                            text: "معذرة ، يبدو أنه تم اكتشاف بعض الأخطاء ، يرجى المحاولة مرة أخرى.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "حسناً!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                });
            }
        });
        // Show loading indication




    </script>

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


            // init flatpickr
            var notification_flatpickr = $('#notification_date_range_flatpickr').flatpickr({
                altInput: true,
                altFormat: "d/m/Y",
                dateFormat: "Y-m-d",
                mode: "range",
                onChange: function (selectedDates, dateStr, instance) {
                    // handleFlatpickr(selectedDates, dateStr, instance);
                    // do some things
                },
            });
            $(document).on('click','#notification_date_range_flatpickr_clear',function (e) {
                e.preventDefault();
                notification_flatpickr.clear();
            });

            // display and hidden base on notification type
            $(document).on('change','select.notification_type',function (e) {
                let _val = $(this).val();
                $('.option_item').hide();
                if(_val=='some_users'){
                    $('.option_item.clients_group').show();
                }
                else if(_val=='some_sales_representatives'){
                    $('.option_item.delegates_group').show();
                }
            });

            // Re-init functions on datatable re-draws
            // datatable.on('draw', function () {
                handleDeleteRows();
            // });
            initToggleToolbar ();
            // toggleToolbars ();
            handleSearchDatatable1();
            // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
            function handleSearchDatatable1() {
                const filterSearch = document.querySelector('[data-table-filter="search"]');
                filterSearch.addEventListener('keyup', function (e) {
                    // alert('pass '+e.target.value);
                    datatable.search(e.target.value).draw();
                });
            }


            // Init toggle toolbar
            function initToggleToolbar (){
                // Toggle selected action toolbar
                // Select all checkboxes
                const checkboxes = $(table)[0].querySelectorAll('.form-check-sm [type="checkbox"]');

                // Select elements
                const deleteSelected = document.querySelector('[data-kt-ratings-table-select="delete_selected"]');
                const changeStatusSelected = document.querySelector('[data-table-select="status"]');

                // Toggle delete selected toolbar
                checkboxes.forEach(c => {
                    // Checkbox on click event
                    c.addEventListener('click', function () {
                        setTimeout(function () {
                            toggleToolbars();
                        }, 50);
                    });
                });

                // Deleted selected rows
                deleteSelected.addEventListener('click', function () {
                    // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
                    Swal.fire({
                        text: "هل أنت متأكد أنك تريد حذف العناصر المحددة؟",
                        icon: "warning",
                        showCancelButton: true,
                        buttonsStyling: false,
                        confirmButtonText: "نعم ، احذف!",
                        cancelButtonText: "لا ، إلغاء",
                        customClass: {
                            confirmButton: "btn fw-bold btn-danger",
                            cancelButton: "btn fw-bold btn-active-light-primary"
                        }
                    }).then(function (result) {
                        if (result.value) {
                            Swal.fire({
                                text: "لقد قمت بحذف جميع العناصر المحددة !.",
                                icon: "success",
                                buttonsStyling: false,
                                confirmButtonText: "حسنًا!",
                                customClass: {
                                    confirmButton: "btn fw-bold btn-primary",
                                }
                            }).then(function () {
                                // Remove all selected administrators
                                checkboxes.forEach(c => {
                                    if (c.checked) {
                                        datatable.row($(c.closest('tbody tr'))).remove().draw();
                                    }
                                });

                                // Remove header checked box
                                const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
                                headerCheckbox.checked = false;
                            });
                        } else if (result.dismiss === 'cancel') {
                            Swal.fire({
                                text: "لم يتم حذف العناصر المحددة.",
                                icon: "error",
                                buttonsStyling: false,
                                confirmButtonText: "حسنًا!",
                                customClass: {
                                    confirmButton: "btn fw-bold btn-primary",
                                }
                            });
                        }
                    });
                });

                // change status selected rows
            }
            // Toggle toolbars
            function toggleToolbars () {
                // Define variables
                const toolbarBase = document.querySelector('[data-kt-ratings-table-toolbar="base"]');
                const toolbarSelected = document.querySelector('[data-kt-ratings-table-toolbar="selected"]');
                const selectedCount = document.querySelector('[data-kt-ratings-table-select="selected_count"]');

                // Select refreshed checkbox DOM elements
                const allCheckboxes = $(table)[0].querySelectorAll('tbody .form-check-sm .form-check-input[type="checkbox"]');

                // Detect checkboxes state & count
                let checkedState = false;
                let count = 0;

                // Count checked boxes
                allCheckboxes.forEach(c => {
                    if (c.checked) {
                        checkedState = true;
                        count++;
                        console.log(count);
                    }
                });

                // Toggle toolbars
                if (checkedState) {
                    selectedCount.innerHTML = count;
                    toolbarBase.classList.add('d-none');
                    toolbarSelected.classList.remove('d-none');
                } else {
                    toolbarBase.classList.remove('d-none');
                    toolbarSelected.classList.add('d-none');
                }
            }

        })
    </script>
@endpush