@props([
    // determines what type of datepicker to show. Available options: single, range
    'type' => 'single',

    // name of the datepicker. This name is used when posting the form with the datepicker
    'name' => 'bw-datepicker',

    // default date to fill in to the datepicker. Defaults to today. Set to blank to display no default
    'default_date' => '',
    'defaultDate' => '',

    // date format.. default is yyyy-mm-dd
    // accepted formats are yyyy-mm-dd, mm-dd-yyyy, dd-mm-yyyy, D d M, Y
    'format' => config('bladewind.datepicker.format', 'yyyy-mm-dd'),

    // text to display in the label that identifies the input field
    'label' => '',

    // placeholder text to display if datepicker is empty
    'placeholder' => 'Select a date',

    // is the value of the date field required? used for form validation. default is false
    'required' => false,

    //----------- used for range datepickers ----------------------------------
    // what should be the default date for the from date
    'default_date_from' => '',
    'defaultDateFrom' => '',

    // what should be the default date for the to date
    'default_date_to' => '',
    'defaultDateTo' => '',

    // what label should be displayed for the from date. Default is 'From'
    'date_from_label' => 'From',
    'dateFromLabel' => 'From',

    // what label should be displayed for the to date. Default is 'To'
    'date_to_label' => 'To',
    'dateToLabel' => 'To',

    // what names should be used for the from date. Default is 'start_date'
    'date_from_name' => 'start_date',
    'dateFromName' => 'start_date',

    // what name should be displayed for the to date. Default is 'end_date'
    'date_to_name' => 'end_date',
    'dateToName' => 'end_date',

    // should validation be turned on for the range picker
    'validate' => false,

    // should the error message be displayed inline instead of in the notification component
    // ensure you have the <-bladewind::notification /> component in your page if you do not
    // want to display the error inline
    'show_error_inline' => false,

    // validation message to display if there is an error with the range picker selection
    'validation_message' => 'Your end date cannot be less than your start date',

    // custom function to call when the datepicker loses focus
    'onblur' => '',

    'tabindex' => -1,

    // first day of the week
    'week_starts' => 'sunday',

    // any extra classes for the datepicker
    'class' => '',

    // should the datepicker use a placeholder instead of the labels when type="range"
    'use_placeholder' => false,

    // show the range pickers be stacked vertically
    'stacked' => false,

    // size of the input field
    'size' => 'medium',
    'min_date' => '',
    'max_date' => '',
])
@php
    // reset variables for Laravel 8 support
    $default_date = $defaultDate;
    $default_date_from = $defaultDateFrom;
    $default_date_to = $defaultDateTo;
    $date_from_label = $dateFromLabel;
    $date_to_label = $dateToLabel;
    $date_from_name = $dateFromName;
    $date_to_name = $dateToName;
    $required = parseBladewindVariable($required);
    $validate = parseBladewindVariable($validate);
    $show_error_inline = parseBladewindVariable($show_error_inline);
    $use_placeholder = parseBladewindVariable($use_placeholder);
    $stacked = parseBladewindVariable($stacked);
    //--------------------------------------------------------
    $name = preg_replace('/[\s-]/', '_', $name);
    $default_date = ($default_date != '') ? $default_date : '';
    $js_function = ($validate) ? "compareDates('$date_from_name', '$date_to_name', '$validation_message', '$show_error_inline')" : $onblur;
    $week_starts = str_replace('day', '', ((in_array($week_starts, ['sun','sunday','mon','monday'])) ? $week_starts : 'sunday'));
@endphp
<style>
    [x-cloak] {
        display: none !important;
    }
</style>
@if($type == 'single')
    <div x-data="app('{{ $default_date }}', '{{ strtoupper($format) }}', '{{$week_starts}}', '{{$min_date}}', '{{$max_date}}')"
         x-init="[initDate(), getNoOfDays()]" x-cloak>
        <div class="relative w-full">
            <input
                    type="hidden"
                    x-ref="date"
                    :value="datepickerValue"
                    value="{{ $default_date }}"/>

            <x-bladewind::input
                    {{-- class="bw-datepicker bw-input block w-full peer {{$name}}" --}}
                    class="bw-datepicker {{$class}}"
                    x-on:click="showDatepicker = !showDatepicker;"
                    x-on:keydown.escape="showDatepicker = false"
                    x-model="datepickerValue"
                    type="text"
                    id="dtp-{{ $name }}"
                    name="{{$name}}"
                    x-ref="{{$name}}"
                    label="{{ ($use_placeholder) ? '' : $label }}"
                    placeholder="{{ $placeholder }}"
                    onblur="{!! $onblur !!}"
                    tabindex="{!! $tabindex !!}"
                    size="{{$size}}"
                    suffix="calendar-days"
                    suffix_is_icon="true"
                    suffix_icon_div_css="rtl:!right-[unset] rtl:!left-0"
                    suffix_icon_css="text-slate-300"
                    max_date="{{$max_date}}"
                    required="{{$required}}"/>

            <div class="bg-white dark:bg-dark-700 mt-12 p-4 absolute top-0 left-0 z-50 drop-shadow-md dark:border dark:border-dark-600/70 rounded-lg"
                 style="width: 17rem"
                 x-show.transition="showDatepicker" @click.away="showDatepicker = false">
                <div class="flex justify-between items-center bg-primary-500 dark:bg-dark-800/50 p-4 !-mx-4 !-mt-4 mb-4 rounded-tl-lg rounded-tr-lg">
                    <div>
                        <button type="button"
                                class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer py-1 pr-1 !-ml-1"
                                @click="if (month == 0) {
                    year--;
                    month = 12;
                } month--; getNoOfDays()">
                            <x-bladewind::icon name="arrow-left"
                                               class="size-5 text-white/50 hover:text-white inline-flex rtl:!rotate-180"/>
                        </button>
                    </div>
                    <div class="text-lg text-white/90 dark:text-gray-100 cursor-default">
                        <span x-text="MONTH_NAMES[month]"></span>
                        <span x-text="year" class="ml-1"></span>
                    </div>
                    <div>
                        <button type="button"
                                class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer py-1 pl-1 !-mr-1 rounded-full"
                                @click="if (month == 11) {
                    month = 0;
                    year++;
                } else {
                    month++;
                } getNoOfDays()">
                            <x-bladewind::icon
                                    name="arrow-right"
                                    class="size-5 text-white/50 hover:text-white inline-flex rtl:!rotate-180"/>
                        </button>
                    </div>
                </div>

                <div class="flex flex-wrap mb-3 -mx-1">
                    <template x-for="(day, index) in DAYS" :key="index">
                        <div style="width: 14.26%" class="px-0.5">
                            <div x-text="day"
                                 class="text-gray-500 tracking-wide dark:text-gray-400 font-medium text-center text-xs uppercase cursor-default"></div>
                        </div>
                    </template>
                </div>

                <div class="flex flex-wrap -mx-1">
                    <template x-for="blankDay in blankDays">
                        <div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm"></div>
                    </template>
                    <template x-for="(date, dateIndex) in noOfDays" :key="dateIndex">
                        <div style="width: 14.28%" class=" mb-1">
                            <div @click="getDateValue(date, '{{$format}}')" x-text="date"
                                 class="cursor-pointer text-center text-sm leading-8 rounded-md transition ease-in-out duration-100"
                                 :class="{'bg-primary-100 dark:bg-dark-800': isToday(date) == true,
                                 'text-gray-300 dark:text-gray-600 cursor-not-allowed': isDisabled(date),
                                'text-gray-600 dark:text-gray-100 hover:bg-primary-200 hover:dark:bg-dark-500':
                                !isDisabled(date) && !isSelectedDate(date),
                                'bg-primary-600 dark:bg-dark-900 text-white hover:bg-opacity-75': isSelectedDate(date),}"
                                 :aria-disabled="isDisabled(date)">
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
@else
    <div class="@if(!$stacked) grid  grid-cols-2 gap-2 @endif">
        <div>
            <x-bladewind::datepicker
                    name="{{ $date_from_name }}"
                    type="single"
                    placeholder="{{$date_from_label}}"
                    default_date="{{ $default_date_from??'' }}"
                    :required="$required"
                    :stacked="$stacked"
                    :use_placeholder="$use_placeholder"
                    label="{{$date_from_label}}"
                    week_starts="{{$week_starts}}"
                    onblur="{{ $js_function }}"
                    class="{{$class}}"
                    size="{{$size}}"
                    format="{{$format}}"/>
        </div>
        <div>
            <x-bladewind::datepicker
                    name="{{ $date_to_name }}"
                    type="single"
                    placeholder="{{$date_to_label}}"
                    default_date="{{ $default_date_to??'' }}"
                    :required="$required"
                    :stacked="$stacked"
                    :use_placeholder="$use_placeholder"
                    label="{{$date_to_label}}"
                    week_starts="{{$week_starts}}"
                    onblur="{{ $js_function }}"
                    class="{{$class}}"
                    size="{{$size}}"
                    format="{{$format}}"/>
        </div>
        <div class="text-red-500 text-sm -mt-2 mb-3 col-span-2 error-{{ $date_from_name.$date_to_name }}"></div>
    </div>
@endif
@once
    <script>
        const january = '{{ __('bladewind::datepicker.JAN') }}';
        const february = '{{ __('bladewind::datepicker.FEB') }}';
        const march = '{{ __('bladewind::datepicker.MAR') }}';
        const april = '{{ __('bladewind::datepicker.APR') }}';
        const may = '{{ __('bladewind::datepicker.MAY') }}';
        const june = '{{ __('bladewind::datepicker.JUN') }}';
        const july = '{{ __('bladewind::datepicker.JUL') }}';
        const august = '{{ __('bladewind::datepicker.AUG') }}';
        const september = '{{ __('bladewind::datepicker.SEP') }}';
        const october = '{{ __('bladewind::datepicker.OCT') }}';
        const november = '{{ __('bladewind::datepicker.NOV') }}';
        const december = '{{ __('bladewind::datepicker.DEC') }}';

        const monday = '{{ __('bladewind::datepicker.MON') }}';
        const tuesday = '{{ __('bladewind::datepicker.TUE') }}';
        const wednesday = '{{ __('bladewind::datepicker.WED') }}';
        const thursday = '{{ __('bladewind::datepicker.THU') }}';
        const friday = '{{ __('bladewind::datepicker.FRI') }}';
        const saturday = '{{ __('bladewind::datepicker.SAT') }}';
        const sunday = '{{ __('bladewind::datepicker.SUN') }}';

        const MONTH_NAMES = [
            january, february, march, april, may, june, july, august,
            september, october, november, december,
        ];
        const MONTH_SHORT_NAMES = [
            january.substring(0, 3), february.substring(0, 3), march.substring(0, 3),
            april.substring(0, 3), may.substring(0, 3), june.substring(0, 3), july.substring(0, 3),
            august.substring(0, 3), september.substring(0, 3), october.substring(0, 3),
            november.substring(0, 3), december.substring(0, 3)
        ];
        const DAYS = [@if($week_starts == 'sun') sunday.substring(0, 3), @endif
        monday.substring(0, 3), tuesday.substring(0, 3), wednesday.substring(0, 3),
            thursday.substring(0, 3), friday.substring(0, 3), saturday.substring(0, 3) @if($week_starts == 'mon') , sunday.substring(0, 3) @endif
        ];
    </script>
    <script src="{{ asset('vendor/bladewind/js/datepicker.js') }}"></script>
@endonce