{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{ $page_title }}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">

    <!--begin::Body-->
    <div class="card">
        <div class="card-header flex-wrap border-0  pb-0">

            <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                    <input type="text" data-kt-customer-table-filter="search"
                        class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
                </div>
                <!--end::Search-->
                <!--begin::Export buttons-->
                <div id="kt_datatable_example_1_export" class="d-none"></div>
                <!--end::Export buttons-->
            </div>
            <div class="card-toolbar mt-10">

                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                    <!--begin::Filter-->
                    <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
                        <span class="svg-icon svg-icon-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <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"></path>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->Filter
                    </button>
                    <!--begin::Menu 1-->
                    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" id="kt-toolbar-filter">
                        <!--begin::Header-->
                        <div class="px-7 py-5">
                            <div class="fs-4 text-dark fw-bolder">Filter Options</div>
                        </div>
                        <!--end::Header-->
                        <!--begin::Separator-->
                        <div class="separator border-gray-200"></div>
                        <!--end::Separator-->
                        <!--begin::Content-->
                        <div class="px-7 py-5 scroll_filter_dropmenu">
                            {!!Helper::getClientFilterDropDown()!!}
                            <!--begin::Input group-->
                            <div class="mb-10">
                                <!--begin::Label-->
                                <label class="form-label fs-5 fw-bold mb-3">From Date:</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" class="form-control datepicker2 filter-date input-from-date" placeholder="From Date" name="fromDate" value="{{$fromDateDefault}}" autocomplete="off" />
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="mb-10">
                                <!--begin::Label-->
                                <label class="form-label fs-5 fw-bold mb-3">To Date:</label>
                                <!--end::Label-->
                                <!--begin::Options-->
                                <input type="text" class="form-control datepicker2 filter-date input-to-date" placeholder="To Date" name="toDate" value="{{$toDateDefault}}" autocomplete="off" />
                                <!--end::Options-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="mb-10">
                                <!--begin::Label-->
                                <label class="form-label fs-5 fw-bold mb-3">Email:</label>
                                <!--end::Label-->
                                <!--begin::Options-->
                                <input type="email" class="form-control input-email shift_export_email" placeholder="Email" name="email" value="" autocomplete="off" />
                                <!--end::Options-->
                            </div>
                            <!--end::Input group-->

                        </div>
                        <!--end::Content-->
                        <!--begin::Actions-->
                        <div class="d-flex justify-content-end mt-2 mb-5 me-5">
                            <button type="reset" class="btn btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true" data-kt-customer-table-filter="reset">Reset</button>
                            <button type="submit" class="btn btn-primary" data-kt-menu-dismiss="true" data-kt-customer-table-filter="filter">Apply</button>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <!--end::Menu 1-->
                    <!--end::Filter-->

                </div>

                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">

                    <button type="submit" class="btn btn-primary me-2" id="submit_for_export">Send Email</button>
                </div>

            </div>


        </div>
    
        <div class="card-body">
    <div id="noDataLabel"class="d-none">
            <div class="alert bg-info d-flex flex-column flex-sm-row w-100 p-5 mb-10">
                <!--begin::Icon-->
                <!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
                <span class="svg-icon svg-icon-2hx svg-icon-light me-4 mb-5 mb-sm-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="currentColor"></path>
                        <path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="currentColor"></path>
                    </svg>
                </span>
                <!--end::Svg Icon-->
                <!--end::Icon-->
                <!--begin::Content-->
                <div class="d-flex flex-column text-light pe-0 pe-sm-10">
                    No records found for selected filters.
                    <strong>Please click on Send Email.</strong>
                </div>
                <!--end::Content-->
            </div>
        </div>
            @include('backend.alerts')
            <!--begin: Datatable-->
            {!! $html->table() !!}
            <!--end: Datatable-->
        </div>
        <!--end::Body-->
    </div>
    <!--end::Card-->
    @endsection

    {{-- Scripts Section --}}
    @section('scripts')
    <script src="{{ asset('backend/scripts/user/list-datatable.js') }}"></script>
    {!! $html->scripts() !!}
    <script type="text/javascript">
        function isValidEmail(email) {
            // Email pattern
            var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailPattern.test(email);
        }

        $(document).on('click', '#submit_for_export', function() {
            var fromDate = $('.input-from-date').val();
            var toDate = $('.input-to-date').val();
            var clientId = $('.input_client_id').val();
            var email = $('.shift_export_email').val();
            if (fromDate != '' && toDate != '' && clientId != '' && email != '') {
                if (!isValidEmail(email)) {
                    alert('Invalid email');
                    return false;
                }
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        fromDate: fromDate,
                        toDate: toDate,
                        clientId: clientId,
                        email: email,
                        "_token": "{{ csrf_token() }}",
                    },
                    url: "{!! route('shiftcasenotes.export') !!}",
                    success: function(data) {
                        if (data.status) {
                            deleteSuccessAlert['text'] =
                                'Email has been added to the queue and will trigger in some time!'
                            Swal.fire(deleteSuccessAlert).then(function(result) {
                                if (result.value || result.dismiss) {
                                    window.LaravelDataTables['dataTableBuilder'].ajax.reload();
                                }
                            });
                        } else {
                            errorAlert['text'] = 'Something went wrong!'
                            Swal.fire(errorAlert);
                        }
                    },
                });
            } else {
                alert('Please select all filters to export!');
            }
        });

        function reloadDataTable(tableId) {
            window.LaravelDataTables[tableId].ajax.reload();
        }
        $(document).ready(function() {
            setInterval(() => {
                reloadDataTable("dataTableBuilder");
            }, 15000);
        });
    </script>
    @endsection