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

    <div class="card mb-6 mb-xl-9">
        <div class="d-flex justify-content-end mt-5 me-5">
            <div>
                <a href="#" class="btn btn-sm btn-bg-light btn-active-color-primary me-3" data-bs-toggle="modal" data-bs-target="#messages_add_package">اضافة باقة</a>
                {{--<a href="#" class="btn btn-sm btn-primary me-3" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">Add Target</a>--}}

            </div>
        </div>
        <div class="d-flex justify-content-start w-100">
            @if($sms_setting)
                <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 m-3 w-25 text-center">
                    <!--begin::Number-->
                    <div class="d-flex justify-content-center">
                        <div class="fs-4 fw-bold" data-kt-countup="true" data-kt-countup-value="{{$sms_setting?->amount - $sms_setting?->used_amount}}" data-kt-countup-prefix=" ">0</div>
                    </div>
                    <!--end::Number-->
                    <!--begin::Label-->
                    <div class="fw-semibold fs-6 text-gray-400 ">عدد الرسائل المتبقي</div>
                    <!--end::Label-->

                </div>
            @endif

        </div>


        <div class="card-body px-4 py-2">
            <h6 class="my-3">اخر باقة تم الاشتراك بها</h6>
            <div class="row">
                @if($store_last_package)
                    <div class="col-md-9">
                        <!--begin::Details-->
                        <div class="d-flex flex-wrap flex-sm-nowrap mb-6 border border-1 p-4">

                            <!--begin::Wrapper-->
                            <div class="flex-grow-1">
                                <!--begin::Head-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::Details-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Status-->
                                        <div class="d-flex align-items-center mb-1">
                                            <a href="#" class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">{{$store_last_package->name_ar}}</a>
                                            @if($store_last_package->status)
                                                <span class="badge badge-light-success me-auto">فعاله</span>
                                            @else
                                                <span class="badge badge-light-danger me-auto">غير فعالة</span>
                                            @endif
                                        </div>
                                        <!--end::Status-->
                                        <!--begin::Description-->
                                        <!--end::Description-->
                                    </div>
                                    <!--end::Details-->
                                    <!--begin::Actions-->

                                    <!--end::Actions-->
                                </div>
                                <!--end::Head-->
                                <!--begin::Info-->
                                <div class="d-flex flex-wrap justify-content-start">
                                    <!--begin::Stats-->
                                    <div class="d-flex flex-wrap">
                                        <!--begin::Stat-->
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                <div class="fs-4 fw-bold">{{\Carbon\Carbon::createFromDate($store_last_package->pivot->created_at)->toDateString()}}</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-semibold fs-6 text-gray-400">تاريخ الشراء</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                        <!--begin::Stat-->
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                <div class="fs-4 fw-bold" data-kt-countup="true" data-kt-countup-value="{{$store_last_package->price}}" data-kt-countup-prefix="SAR">
                                                    0</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-semibold fs-6 text-gray-400">سعر الباقة</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                        <!--begin::Stat-->
                                        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                <div class="fs-4 fw-bold" data-kt-countup="true" data-kt-countup-value="{{$store_last_package->amount}}" data-kt-countup-prefix="">
                                                    0</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-semibold fs-6 text-gray-400">قيمة الباقة</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                    </div>
                                    <!--end::Stats-->

                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Details-->
                    </div>

                @else
                    <div class="col-md-9">
                        <div class="d-flex flex-wrap flex-sm-nowrap mb-6">

                            <!--begin::Wrapper-->
                            <div class="flex-grow-1">
                                <!--begin::Head-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::Details-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Status-->
                                        <div class="d-flex align-items-center mb-1">
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#messages_add_package" class="badge badge-light-primary text-primary-800 text-hover-primary fs-2 fw-bold me-3">لم يتم اضافة اي باقة , أضف الآن</a>
                                        </div>
                                        <!--end::Status-->
                                        <!--begin::Description-->
                                        <!--end::Description-->
                                    </div>
                                    <!--end::Details-->
                                    <!--begin::Actions-->

                                    <!--end::Actions-->
                                </div>
                                <!--end::Head-->

                            </div>
                            <!--end::Wrapper-->
                        </div>
                    </div>
                @endif



            </div>



        </div>
    </div>


<!--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">
            الرسائل المرسلة
        </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-messages-table-toolbar="base">
                <div class="me-3 w-100 mw-250px">
                    {{--<label class="form-label fs-5 fw-semibold mb-3">تاريخ الاضافة:</label>--}}
                </div>
                <div class="w-100 mw-100px mx-5">
                    <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-messages-table-toolbar="selected">
                <div class="fw-bold me-5 text-nowrap">
                    <span class="me-2" data-kt-messages-table-select="selected_count"></span> @lang('general.selected')
                </div>
                <button type="button" class="btn btn-danger text-nowrap" data-kt-messages-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.messages.index')}}" method="get">
                    <div class="row d-flex justify-content-end">
                        <div class="col-lg-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="from_date_flatpickr" />
                                    <button class="btn btn-icon btn-light" id="from_date_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-70px">العمليات</th>
            </tr>
            <!--end::Table row-->
            </thead>
            <!--end::Table head-->
            <!--begin::Table body-->
            <tbody class="fw-semibold text-gray-600">
                @forelse($store_smss as $mssg)
                    <tr>
                        <td>
                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                <input class="form-check-input selector" type="checkbox" value="{{$mssg->id}}" />
                            </div>
                        </td>
                        <td >
                            {{$mssg->title}}
                        </td>
                        <td >
                            @lang("admin.messages.".$mssg->target_type)
                        </td>
                        <td >
                            {{$mssg->created_at}}
                        </td>
                        <td class="">
                            <div class="btn-group">
                                <a href="#" data-bs-toggle="modal" data-bs-target="#cs_modal_show" data-message="{{$mssg}}" class="btn btn-icon btn-sm btn-light-primary ">
                                    <i class="fas fa-eye fs-4"></i>
                                </a>

                                <a href="#"  data-id="{{$mssg->id}}"
                                   data-tooltip="m-tooltip" data-placement="top"
                                   data-url="{{route('admin.messages.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>

                @empty
                    <div>
                        لم يتم ارسال اي رسالة
                    </div>
                @endforelse


            </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 ><div id="mssg_modal">2</div></td>
                        </tr>
                        <tr>
                            <th>نوع الرسالة</th>
                            <td id="mssg_type_modal">2</td>
                        </tr>
                        <tr>
                            <th>اسم العميل</th>
                            <td id="client_name_modal">2</td>
                        </tr>
                        <tr>
                            <th>تاريخ الارسال</th>
                            <td id="send_date_modal">2</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>
                        <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="message_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-->

<!--begin::Modal - messages_add_package-->
<div class="modal fade" id="messages_add_package" 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="addPackageForm" data-kt-redirect="{{route('admin.messages.index')}}">

                    <div class="mb-10 fv-row">
                        {{--<label class="required form-label">الباقة</label>--}}
                        {{-- multiple="multiple" --}}
                        {{--<select class="form-select mb-2"  data-control="select2" data-hide-search="false" data-placeholder="اختر">--}}
                            {{--<option></option>--}}
                            {{--<option value="1">باقة 1</option>--}}
                            {{--<option value="2">باقة 2</option>--}}
                            {{--<option value="3">باقة 3</option>--}}
                            {{--<option value="4">باقة 4</option>--}}
                            {{--<option value="5">باقة 5</option>--}}
                        {{--</select>--}}



                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_ecommerce_edit_order_product_table">
                            <!--begin::Table head-->
                            <thead>
                            <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                <th class="w-25px pe-2"></th>
                                <th class="min-w-200px">الباقة</th>
                                <th class="min-w-100px text-end pe-5">عدد الرسائل</th>
                            </tr>
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="fw-semibold text-gray-600">

                            @forelse($sms_packages as $sms_package)
                                @if($sms_package->status)
                                    <tr>
                                        <!--begin::Checkbox-->
                                        <td>
                                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                <input class="form-check-input checkPackage" name="package[]" type="checkbox" value="{{$sms_package->id}}" />
                                            </div>
                                        </td>
                                        <!--end::Checkbox-->
                                        <!--begin::Product=-->
                                        <td>
                                            <div class="d-flex align-items-center" data-kt-ecommerce-edit-order-filter="product" data-kt-ecommerce-edit-order-id="product_1">
                                                <!--begin::Thumbnail-->
                                                <div class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url({{ asset('/assets/media/stock/ecommerce/1.gif') }});"></span>
                                                </div>
                                                <!--end::Thumbnail-->
                                                <div class="ms-5">
                                                    <!--begin::Title-->
                                                    <h3 class="text-gray-800 text-hover-primary fs-5 fw-bold">{{$sms_package->name_ar}}</h3>
                                                    <!--end::Title-->
                                                    <!--begin::Price-->
                                                    <div class="fw-semibold fs-7">السعر: SAR {{$sms_package->price}}</div>
                                                    <!--end::Price-->
                                                    <!--begin::SKU-->
                                                    <div class="text-muted fs-7"> المدة : <span class="badge badge-light-danger">لا محدود</span> </div>
                                                    <!--end::SKU-->
                                                    </h3>
                                                </div>
                                            </div>
                                        </td>
                                        <!--end::Product=-->
                                        <!--begin::Qty=-->
                                        <td class="text-end pe-5" data-order="39">
                                            <span class="fw-bold ms-3">{{$sms_package->amount}}</span>
                                        </td>
                                        <!--end::Qty=-->
                                    </tr>

                                @endif
                            @empty
                                <div class="d-flex align-items-center mb-1">
                                    <h5 class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">لا يوجد باقات متاحة</h5>
                                </div>
                            @endforelse
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </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" id="submitAddPackage" data-kt-package-modal-action="" class="btn btn-primary ms-2">اضافة</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
<!--end::Modal - messages_add_package-->

@endsection

@push('custom_js')
    <script>
        $('#cs_modal_show').on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget); // Button that triggered the modal
            let message = button.data('message');
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            $('#mssg_modal').text(message.title);
            $('#mssg_type_modal').text(message.target_type);
            $('#client_name_modal').text(message.target_type);
            var formattedDate = new Date(message.created_at);

            $('#send_date_modal').text(formattedDate.toDateString());
        })
    </script>
    <script src="{{asset('store_admin/js/shared_script.js')}}"></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: 4 }, // Disable ordering on column 3 (actions)
                ]
            });


            // init flatpickr
            var notification_flatpickr = $('#from_date_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
                },
            });
            var notification_flatpickr = $('#to_date_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','#from_date_flatpickr_clear',function (e) {
                e.preventDefault();
                notification_flatpickr.clear();
            });
            $(document).on('click','#to_date_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();
                });
            }

            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: "هل متأكد من عملية الحذف؟",
                            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 current row
                                    datatable.row($(parent)).remove().draw();
                                });
                            } else if (result.dismiss === 'cancel') {
                                Swal.fire({
                                    text: " فشلت عملية الحذف",
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "إغلاق",
                                    customClass: {
                                        confirmButton: "btn fw-bold btn-primary",
                                    }
                                });
                            }
                        });
                    });
                // });
            }

            // 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-messages-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
                changeStatusSelected.addEventListener('change', function (e) {
                    let value = this.value;
                    // 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 () {
                                // update all selected administrators
                                checkboxes.forEach(c => {
                                    if (c.checked && !c.hasAttribute('data-kt-check')) {
                                        if(value == 'enable'){
                                            $(c.closest('tbody tr')).find('.form-switch .form-check-input').attr('checked','checked');
                                        }else if(value == 'disable'){
                                            $(c.closest('tbody tr')).find('.form-switch .form-check-input').removeAttr('checked');
                                        }
                                        // datatable.row($(c.closest('tbody tr'))).draw();

                                        // datatable.row($(c.closest('tbody tr')).find('.form-switch .form-check-input').attr('checked',true)).draw();
                                        c.click();
                                    }
                                });
                                //reset status select
                                changeStatusSelected.options[0].selected = 'selected';
                                // 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",
                                }
                            });
                        }
                    });
                });
            }
            // Toggle toolbars
            function toggleToolbars () {
                // Define variables
                const toolbarBase = document.querySelector('[data-kt-messages-table-toolbar="base"]');
                const toolbarSelected = document.querySelector('[data-kt-messages-table-toolbar="selected"]');
                const selectedCount = document.querySelector('[data-kt-messages-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>
    <script>
        const submitButton = document.querySelector('#submitAddPackage');
        const addPackageForm = document.querySelector('#addPackageForm');
        $('#submitAddPackage').click(function(e) {
            e.preventDefault();
            checked = $("#addPackageForm input[type=checkbox]:checked").length;
            if(!checked) {
                Swal.fire({
                    icon: "error",
                    title: 'الرجاء اختيار باقة للإستمرار',
                    timer: 4000
                });
            }else{
                // Show loading indication
                var form_data = new FormData($('#addPackageForm')[0]);

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

                // Disable button to avoid multiple click
                submitButton.disabled = true;

                // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                $.ajax({
                    type: "post",
                    url: "{{route('admin.messages.package.subscribe')}}",
                    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
                            submitButton.setAttribute('data-kt-indicator', 'off');
                            submitButton.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 () {
                                submitButton.removeAttribute('data-kt-indicator');

                                Swal.fire({
                                    text: "تم اضافة الباقة بنجاح !",
                                    icon: "success",
                                    buttonsStyling: false,
                                    confirmButtonText: "تم!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                }).then(function (result) {
                                    // Enable submit button after loading
                                    submitButton.setAttribute('data-kt-indicator', 'off');
                                    // Redirect to customers list page
                                    location.reload();

                                });
                            }, 2000);
                        }
                    },
                    error: function (data) {
                        // Enable submit button after loading
                        submitButton.setAttribute('data-kt-indicator', 'off');
                        submitButton.disabled = false;
                        Swal.fire({
                            icon: "error",
                            title: 'حدثت خلل أثناء العملية',
                            timer: 4000
                        });
                    }
                });
            }

        });
    </script>
    <!--Send new mssg script-->
    <script>
        const submitSendMssgButton = document.querySelector('#sendMssgFormSubmit');
        const sendMssgForm = document.querySelector('#sendMssgForm');
        $('#sendMssgFormSubmit').click(function(e) {
            e.preventDefault();
            var validator = FormValidation.formValidation(
                sendMssgForm,
                {
                    fields: {
                        'message': {
                            validators: {
                                notEmpty: {
                                    message: 'هذا الحقل مطلوب'
                                }
                            }
                        },
                        'message_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.messages.add')}}",
                            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>
        $('.mssg-delete').click(function(e) {
            e.preventDefault();

                // Show loading indication


                // 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.messages.add')}}",
                    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: "تم اضافة الباقة بنجاح !",
                                    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: 'حدثت خلل أثناء العملية',
                            timer: 4000
                        });
                    }
                });


        });
    </script>

@endpush