@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('companyuser::integration.foodics'))
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('company.apps-integration.index',$subdomain)}}">@lang('companyuser::integration.integration')</a>
                </li>
                <li class="breadcrumb-item active"><a href="#">@lang('companyuser::integration.foodics')</a>
                </li>
            </ol>
        </div>
    </div>
@endsection
@section('extra-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/reports/index.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/success-icon-animated.css') }}">
    <style>
        .float-right{
            float: right;
        }
        .float-left{
            float: left;
        }
        /* Fix calendar icon button centering on this page */
        .calendar-icon-btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1 !important;
            vertical-align: middle !important;
            padding: 0 10px !important;
        }
        .calendar-icon-btn svg {
            display: block !important;
            margin: auto !important;
            position: static !important;
            top: unset !important;
            bottom: unset !important;
            transform: none !important;
            padding: 0 !important;
            height: 20px !important;
            width: 20px !important;
        }
        .date-picker-wrapper.has-icon {
            display: inline-flex !important;
            align-items: stretch !important;
            width: 100% !important;
        }
    </style>
@endsection
@section('content')
    <section id="configuration">
        <div class="row">
            <div class="col-xs-12">
                @if(env('SYNC_INTEGRATED_ORDERS_ON') && env('SYNC_INTEGRATED_FOODICS_ORDERS_ON'))
                    @include('superadmin::errors.lists')
                    <div class="card">
                        <div class="card-body collapse in">
                            @if(!$integrated)
                                @if($error)
                                    <div class="alert alert-danger" role="alert">
                                        {{__('companyuser::integration.authorization error')}}
                                    </div>
                                @endif
                                <div class="row p-1">
                                    <h3>{{__('companyuser::integration.Authorize your Foodics account with VôM')}}</h3>
                                    <ul>
                                        @foreach($foodicsScopes as $scope)
                                            <li style="list-style: circle;"><h5>{{__('companyuser::integration.' . $scope)}}</h5></li>
                                        @endforeach
                                    </ul>
                                    <a id="authorize-btn" href="{{env('FOODICE_BASE_LINK') . config('foodics.oauth_url') . "?client_id=" . env('FOODICS_CLIENT_ID') . "&state=" . request('subdomain')}}">
                                        <button class="btn btn-success @if(app()->getLocale() == 'en') float-right @else float-left @endif">
                                            {{__('companyuser::integration.Authorize')}}
                                        </button>
                                    </a>
                                </div>
                            @else
                                @if($failedOrdersExists)
                                    <div class="alert alert-warning" id="journal-data-in-the-future">
                                        {{__('companyuser::integration.failed orders exists')}}
                                        <a class="alert-warning" href="{{route('company.failed-orders.index',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}">
                                            <u>{{__('companyuser::integration.link')}}</u></a>
                                    </div>
                                @endif
                                <div class="row p-1 @if($source) text-center @endif">
                                    <div @if($source) style="margin: 0 auto;width: 55%;" @endif>
                                        @if($source)
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2" class="pb-2">
                                                <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6"
                                                        stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
                                                <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6"
                                                          stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
                                            </svg>
                                        @endif
                                            @if($source)
                                                <h3>{{__('companyuser::integration.authorized with foodics')}}</h3>
                                            @else
                                                <i class="fa fa-check-circle-o display-inline" style="color: #11B99F;font-size: 20px"></i>
                                                <label style="font-size: 1.51rem;" class=" display-inline"> {{__('companyuser::integration.authorized msg')}}</label>
                                            @endif
                                    </div>
                                    <div class="row pt-2">
                                        <div class="divBack pr-1 pl-1" @if($source) style="text-align: center" @endif>
                                            <div class="btn-group product-list">
                                                <a type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{ __('companyuser::sidebar.Settings')}}" class="btn btn-min-width btn-info text-white ml-1 mt-half">
                                                    <img src="{{asset('assets/images/svg/cog.svg')}}" width="20px"/>
                                                    <span data-i18n=""
                                                        class="menu-title sales">{{ __('companyuser::integration.Configurations') }}</span>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item text-decoration-none"
                                                    href="{{route('company.integrated-generalConfigs.edit',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}">
                                                        {{__('companyuser::integration.general_configurations')}}
                                                    </a>
                                                    <a class="dropdown-item text-decoration-none"
                                                    href="{{route('company.integrated-accounts.edit',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}">
                                                        {{__('companyuser::integration.update accounts default configurations')}}
                                                    </a>
                                                    <a class="dropdown-item text-decoration-none"
                                                    href="{{route('company.integrated-costCenters.edit',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}">
                                                        {{__('companyuser::integration.Cost Centers Configuration')}}
                                                    </a>
                                                    <a class="dropdown-item text-decoration-none"
                                                    href="{{route('company.integrated-paymentOptions.edit',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}">
                                                        {{__('companyuser::integration.Payment Options Configuration')}}
                                                    </a>
                                                </div>
                                            </div>
                                            {{-- <a href="{{route('company.integrated-accounts.edit',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}"
                                               class="btn btn-min-width btn-info text-white ml-1 mt-half">
                                                {{__('companyuser::integration.update accounts default configurations')}}
                                            </a> --}}
                                            {{-- <a href="{{route('company.integrated-costCenters.edit',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}"
                                               class="btn btn-min-width btn-info text-white ml-1 mt-half">
                                                {{__('companyuser::integration.Cost Centers Configuration')}}
                                            </a>
                                            <a href="{{route('company.integrated-paymentOptions.edit',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}"
                                               class="btn btn-min-width btn-info text-white ml-1 mt-half">
                                                {{__('companyuser::integration.Payment Options Configuration')}}
                                            </a> --}}
                                            <a href="{{route('company.failed-orders.index',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}"
                                               class="btn btn-soundcloud btn-min-width center-icon-when-small text-white mt-half ml-1">
                                                {{__('companyuser::integration.review the failed syncing orders')}}</a>
{{--                                            <a href="{{route('delete-foodics', [$subdomain])}}"--}}
{{--                                               class="btn btn-soundcloud btn-min-width center-icon-when-small text-white mt-half ml-1">--}}
{{--                                                delete all orders</a>--}}
                                            @if(!$source)
                                                <a @if(app()->getLocale() == 'ar') style="float: right;" @else style="float: left;" @endif
                                                    href="{{route('company.apps-integration.revoke',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}"
                                                    class="btn btn-danger btn-min-width center-icon-when-small text-white mt-half">
                                                    {{__('companyuser::integration.revoke')}}</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                    <form action="{{ route('company.sync-orders.store',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS]) }}" method="POST" class="form" novalidate id="sync_orders_form" autocomplete="off">
                                        @csrf
                                    <div class="row p-1">
                                        <h4>{{__('companyuser::integration.Sync your orders from your Foodics account')}}</h4>
                                        <div class="form-check pl-2 pr-2">
                                            <div class="col-md-12"  style="margin-bottom:20px">
                                                <input class="form-check-input" type="radio"
                                                       value="{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ALL_ORDERS}}"
                                                       name="filter_option" id="all_orders"
                                                       @if(!old('filter_option')) checked @endif
                                                       @if(old('filter_option') == \Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ALL_ORDERS) checked @endif>
                                                <label style="margin-top: -5px;" class="form-check-label font-medium-1" for="all_orders">
                                                    {{__('companyuser::integration.all orders')}}
                                                </label>
                                            </div>
                                        </div>




                                        <div class="form-check pl-2 pr-2" >
                                            <div class="col-md-4 col-sm-12" style="margin-bottom:20px">
                                                <input class="form-check-input" type="radio"
                                                       value="{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE}}"
                                                       name="filter_option" id="all_orders_by_date"
                                                       @if(old('filter_option') == \Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE) checked @endif>
                                                <label style="margin-top: -5px;" class="form-check-label font-medium-1" for="all_orders_by_date">
                                                    {{__('companyuser::integration.all orders start from date')}}
                                                </label>
                                            </div>
                                            <div class="col-md-4 col-sm-12">
                                                <x-date-picker
                                                    name="filter_date"
                                                    :value="old('filter_date')"
                                                    :is-invalid="$errors->has('order_date')"
                                                    input-id="filter_date"
                                                    max-date="{{ Date::now('date') }}"
                                                />
                                            </div>
                                        </div>

                                        <div class="clearfix"></div>

                                        <div class="form-check pl-2 pr-2" >
                                            <div class="col-md-4 col-sm-12" style="margin-bottom:20px">
                                                <input class="form-check-input" type="radio"
                                                       value="{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SINGLE_DAY}}"
                                                       name="filter_option" id="all_orders_by_single_day"
                                                       @if(old('filter_option') == \Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SINGLE_DAY) checked @endif>
                                                <label style="margin-top: -5px;" class="form-check-label font-medium-1" for="all_orders_by_single_day">
                                                    {{__('companyuser::integration.all orders in this day')}}
                                                </label>
                                            </div>
                                            <div class="col-md-4 col-sm-12">
                                                <x-date-picker
                                                    name="filter_by_single_day"
                                                    :value="old('filter_by_single_day')"
                                                    :is-invalid="$errors->has('filter_by_single_day')"
                                                    input-id="filter_by_single_day"
                                                    max-date="{{ Date::now('date') }}"
                                                />
                                            </div>

                                            @if (count($syncedSegments))
                                                <div class="row">
                                                    <div class="col-md-10 col-sm-12">
                                                        <table class="table table-borderless">
                                                            <tbody>
                                                                @foreach ($syncedSegments as $key => $items)
                                                                    <tr>
                                                                        <th scope="row">{{\Modules\Accounting\Enums\TransactionTypesEnum::toString($key)}}</th>
                                                                        <td colspan="4">
                                                                            @foreach ($items['params'] as $item)
                                                                                @if ($item['status'] == 1)
                                                                                    <span class="badge bg-secondary px-2 rounded" style="margin-left: 1.5px; margin-right: 1.5px;"></span>
                                                                                @elseif ($item['status'] == 2)
                                                                                    <span class="badge bg-primary px-2 rounded" style="margin-left: 1.5px; margin-right: 1.5px;"></span>
                                                                                @elseif ($item['status'] == 3)
                                                                                    <span class="badge bg-danger px-2 rounded" style="margin-left: 1.5px; margin-right: 1.5px;"></span>
                                                                                @endif
                                                                            @endforeach
                                                                        </td>
                                                                        <td>
                                                                            @if ($items['dominantStatus'] == 3)
                                                                                @lang('companyuser::integration.being_processed')
                                                                            @elseif ($items['dominantStatus'] == 2)
                                                                                @lang('companyuser::integration.done')
                                                                            @elseif ($items['dominantStatus'] == 1)
                                                                                @lang('companyuser::integration.syncing')
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>



                                        <div class="clearfix"></div>


                                        <div class="form-check pl-2 pr-2">
                                            <div class="col-md-4 col-sm-12">
                                                <input class="form-check-input" type="radio"
                                                       value="{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SPECIFIC_PERIOD}}"
                                                       name="filter_option" id="all_orders_after"
                                                       @if(old('filter_option') == \Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SPECIFIC_PERIOD) checked @endif>
                                                <label style="margin-top: -5px;" class="form-check-label font-medium-1" for="all_orders_after">
                                                    {{__('companyuser::integration.all orders after date')}}
                                                </label>
                                            </div>
                                            <div class="col-md-4 col-sm-12">
                                                <x-date-picker
                                                    name="filter_date_from"
                                                    :value="old('filter_date_from')"
                                                    :is-invalid="$errors->has('order_date_from')"
                                                    input-id="filter_date_from"
                                                    max-date="{{ Date::now('date') }}"
                                                />
                                            </div>
                                            <div class="col-md-4 col-sm-12">
                                                <x-date-picker
                                                    name="filter_date_to"
                                                    :value="old('filter_date_to')"
                                                    :is-invalid="$errors->has('filter_date_to')"
                                                    input-id="filter_date_to"
                                                    max-date="{{ Date::now('date') }}"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="@if(app()->getLocale() == 'ar') text-left @else text-right @endif">
                                        <button type="submit" class="btnWidth btn btn-primary saveDraftBtn-color" id="sync_btn">@lang('companyuser::integration.sync')</button>
                                    </div>
                                </form>
                                @if($allowSyncedCustomers)
                                    <hr>
                                    <div class="row p-1">
                                        <h4>{{__('companyuser::integration.Sync customers from your account', ['integration_type' => ucwords(\App\Enums\IntegrationConfigTypesEnum::FOODICS)])}}</h4>
                                    </div>
                                    <div class="@if(app()->getLocale() == 'ar') text-left @else text-right @endif">
                                        <a href="{{route('company.sync-customers.store',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}" class="btnWidth btn btn-primary saveDraftBtn-color"> {{__('companyuser::integration.sync')}}</a>
                                    </div>
                                @endif
                                @if($allowSyncedSuppliers)
                                    <hr>
                                    <div class="row p-1">
                                        <h4>{{__('companyuser::integration.Sync suppliers from your account', ['integration_type' => ucwords(\App\Enums\IntegrationConfigTypesEnum::FOODICS)])}}</h4>
                                    </div>
                                    <div class="@if(app()->getLocale() == 'ar') text-left @else text-right @endif">
                                        <a href="{{route('company.sync-suppliers.store',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}"  class="btnWidth btn btn-primary saveDraftBtn-color"> {{__('companyuser::integration.sync')}}</a>
                                    </div>
                                @endif
                                    <hr>
                                    @can('accounting.manual-journal-entries.delete')


                                        <div class="row p-1">
                                            <h4>{{__('companyuser::integration.delete your orders from your Foodics account')}}</h4>
                                            <div class="form-check pl-2 pr-2">
                                                <div class="col-md-12" style="margin-bottom: 10px;margin-top: 5px">
                                                    <input class="form-check-input" type="radio"
                                                           value="{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ALL_ORDERS}}"
                                                           name="delete_option" id="delete_all_orders"
                                                           @if(!old('delete_option')) checked @endif
                                                           @if(old('delete_option') == \Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ALL_ORDERS) checked @endif>
                                                    <label class="form-check-label font-medium-1" for="delete_all_orders">
                                                        {{__('companyuser::integration.delete all orders')}}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-check pl-2 pr-2">
                                                <div class="col-md-4 col-sm-12">
                                                    <input class="form-check-input" type="radio"
                                                           value="{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE}}"
                                                           name="delete_option" id="delete_all_orders_after"
                                                           @if(old('delete_option') == \Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE) checked @endif>
                                                    <label class="form-check-label font-medium-1" for="delete_all_orders_after">
                                                        {{__('companyuser::integration.delete all orders from date')}}
                                                    </label>
                                                </div>
                                                <div class="col-md-4 col-sm-12">
                                                    <x-date-picker
                                                        name="delete_filter_date_from"
                                                        :value="old('delete_filter_date_from')"
                                                        :is-invalid="$errors->has('delete_order_date_from')"
                                                        input-id="delete_filter_date_from"
                                                        max-date="{{ Date::now('date') }}"
                                                    />
                                                </div>
                                                <div class="col-md-4 col-sm-12">
                                                    <x-date-picker
                                                        name="delete_filter_date_to"
                                                        :value="old('delete_filter_date_to')"
                                                        :is-invalid="$errors->has('delete_filter_date_to')"
                                                        input-id="delete_filter_date_to"
                                                        max-date="{{ Date::now('date') }}"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="@if(app()->getLocale() == 'ar') text-left @else text-right @endif">
                                            <a data-url="{{route('company.delete-orders',[$subdomain, \App\Enums\IntegrationConfigTypesEnum::FOODICS])}}"
                                               class='btnWidth btn btn-danger btn-delete delete-orders text-white'
                                               data-toggle="modal" data-target="#deleteModal"
                                               data-toggle="tooltip" data-placement="bottom"
                                            >{{__('companyuser::integration.delete orders')}}</a>
                                        </div>

                                    @endcan
                            @endif
                        </div>
                    </div>
                @else
                    <div class="alert alert-warning" id="journal-data-in-the-future">
                        @lang('companyuser::integration.integration is not available currently')
                    </div>
                @endif
            </div>
        </div>
    </section>

    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
         aria-labelledby="deleteModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="deleteModalLabel">@lang('Delete')</h4>
                </div>
                <div class="modal-body">
                    <p>
                        @lang('Are You Sure to delete this?')
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default mx-1"
                            data-dismiss="modal">@lang('Cancel')</button>
                    <span class="pull-right">
                    <form  action="" method="POST" class="form delete-form">
                        @csrf
                        <input type="hidden" name="delete_selected_option">
                        <input type="hidden" name="delete_date_from">
                        <input type="hidden" name="delete_date_to">
                        <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                    </form>
                </span>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('extra_scripts')
    <script>
        gtag('event', 'web_apps_foodics_main_page');
        console.log('web_apps_foodics_main_page event');
    </script>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script>
        window.onload = function() {
            @if($integrated)
                document.getElementById("sync_btn").onclick = function fun() {
                    $('#overlay').css('display', 'flex');
                }

                /**
                 * Enable or disable a date-picker input + its calendar button sibling.
                 */
                function enableDatePicker(inputId) {
                    var input = document.getElementById(inputId);
                    if (!input) return;
                    input.removeAttribute('disabled');
                    var btn = input.nextElementSibling;
                    if (btn) btn.removeAttribute('disabled');
                    if (input._flatpickr) input._flatpickr.set('clickOpens', true);
                }

                function disableDatePicker(inputId) {
                    var input = document.getElementById(inputId);
                    if (!input) return;
                    input.setAttribute('disabled', 'disabled');
                    var btn = input.nextElementSibling;
                    if (btn) btn.setAttribute('disabled', 'disabled');
                    if (input._flatpickr) {
                        input._flatpickr.clear();
                        input._flatpickr.set('clickOpens', false);
                    }
                }

                $('input[type=radio][name=filter_option]').change(function() {
                    if (this.value === '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE}}') {
                        enableDatePicker('filter_date');
                        disableDatePicker('filter_by_single_day');
                        disableDatePicker('filter_date_from');
                        disableDatePicker('filter_date_to');
                    }
                    else if (this.value === '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SINGLE_DAY}}') {
                        disableDatePicker('filter_date');
                        enableDatePicker('filter_by_single_day');
                        disableDatePicker('filter_date_from');
                        disableDatePicker('filter_date_to');
                    }
                    else if(this.value === '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SPECIFIC_PERIOD}}'){
                        disableDatePicker('filter_date');
                        disableDatePicker('filter_by_single_day');
                        enableDatePicker('filter_date_from');
                        enableDatePicker('filter_date_to');
                    }
                    else{
                        disableDatePicker('filter_date');
                        disableDatePicker('filter_by_single_day');
                        disableDatePicker('filter_date_from');
                        disableDatePicker('filter_date_to');
                    }
                });

                $('input[type=radio][name=delete_option]').change(function() {
                    if (this.value === '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE}}') {
                        enableDatePicker('delete_filter_date_from');
                        enableDatePicker('delete_filter_date_to');
                    }else{
                        disableDatePicker('delete_filter_date_from');
                        disableDatePicker('delete_filter_date_to');
                    }
                });

                // Apply initial disabled state on page load based on the current radio selection
                (function initDatePickerStates() {
                    var filterOpt = document.querySelector('input[name="filter_option"]:checked');
                    var filterOptVal = filterOpt ? filterOpt.value : null;
                    if (filterOptVal !== '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE}}') {
                        disableDatePicker('filter_date');
                    }
                    if (filterOptVal !== '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SINGLE_DAY}}') {
                        disableDatePicker('filter_by_single_day');
                    }
                    if (filterOptVal !== '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_SPECIFIC_PERIOD}}') {
                        disableDatePicker('filter_date_from');
                        disableDatePicker('filter_date_to');
                    }

                    var deleteOpt = document.querySelector('input[name="delete_option"]:checked');
                    if (!deleteOpt || deleteOpt.value !== '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE}}') {
                        disableDatePicker('delete_filter_date_from');
                        disableDatePicker('delete_filter_date_to');
                    }
                })();

            @else
                document.getElementById("authorize-btn").onclick = function fun() {
                    $('#overlay').css('display', 'flex');
                }
            @endif
        }
    </script>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            $(document).ready(function () {
                // For A Delete Record Popup
                //handel desktop(click) and mobile(touchstart) browsers
                $(document).on('touchstart click', '.delete-orders', function () {
                    let modal = $(this).attr('data-target');
                    let url = $(this).attr('data-url');
                    $(modal + ' .delete-form').attr("action", url);

                    let deleteOption =  document.querySelector('input[name="delete_option"]:checked').value;
                    $("input[name='delete_selected_option']").attr("value", deleteOption);

                    if(deleteOption === '{{\Modules\CompanyUser\Enums\SyncOrdersFilterEnum::ORDERS_BY_DATE}}') {
                        let deleteFilterDateFrom = document.getElementById('delete_filter_date_from').value;
                        let deleteFilterDateTo = document.getElementById('delete_filter_date_to').value;
                        $("input[name='delete_date_from']").attr("value", deleteFilterDateFrom);
                        $("input[name='delete_date_to']").attr("value", deleteFilterDateTo);
                    }
                });

                //to reset filter dropdown menus
                //handel desktop(click) and mobile(touchstart) browsers
                $(document).on('touchstart click', '#reset', function (E) {
                    e.preventDefault()
                    // here we made it val to work in both inputs and dropdown menu
                    $('.form-control').val("");
                    // or prop('selectedIndex',0);
                })

                $('.delete-form').submit(function (e) {
                    $('#overlay').css('display', 'flex');
                })
            });
        });
    </script>
@endsection