{% if value is not defined %}
    {% set value = null %}
{% endif %}

<div x-data="Market.datepickerField()"
     x-init="[initDate('{{ value }}'), getNoOfDays()]"
     x-cloak
>
    <input type="hidden"
           name="{{ attribute }}"
           value="{{ value }}"
           x-ref="date"
    >

    <div class="mt-1 relative rounded-md shadow-sm">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            {# Heroicon name: calendar #}
            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
            </svg>
        </div>
        <label for="{{ attribute }}-date" class="sr-only">Time</label>
        <input id="{{ attribute }}-date"
               type="text"
               readonly
               x-model="datepickerValue"
               x-on:click="showDatepicker = !showDatepicker"
               x-on:keydown.escape="showDatepicker = false"
               placeholder="Select date"
               class="focus:ring-action-500 focus:border-action-500 block w-full px-10 sm:text-sm border-gray-300 rounded-md"
        >
        <div class="absolute inset-y-0 right-0 flex items-center">
            <button x-on:click="clearDateValue()"
                    type="button"
                    class="focus:outline-none focus:ring-2 focus:ring-inset focus:ring-action-500 focus:border-action-500 h-full w-9 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"
            >
                {# Heroicon name: x #}
                <svg class="mx-auto h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    </div>

    <div class="bg-white mt-12 rounded-md overflow-hidden shadow-xl absolute z-20 top-0 left-0"
         x-show.transition="showDatepicker"
         x-on:click.away="showDatepicker = false">

        <header class="flex justify-between items-center mb-2 bg-gray-100 p-4">
            <div>
                <span x-text="Market.DP_MONTH_NAMES[month]" class="text-lg font-bold text-gray-800"></span>
                <span x-text="year" class="ml-1 text-lg text-gray-600 font-normal"></span>
            </div>
            <nav>
                <button type="button"
                        class="inline-flex items-center p-1 border border-transparent rounded-full text-gray-500 bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300"
                        x-on:click="prev(); getNoOfDays()"
                >
                    <svg class="h-5 w-5"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </button>
                <button type="button"
                        class="ml-1 inline-flex items-center p-1 border border-transparent rounded-full text-gray-500 bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300"
                        x-on:click="next(); getNoOfDays()"
                >
                    <svg class="h-5 w-5"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>
            </nav>
        </header>

        <div class="p-3">
            <div class="grid grid-cols-7 gap-1">
                <template x-for="(day, index) in Market.DP_DAYS" :key="index">
                    <div x-text="day"
                         class="w-7 mx-0.5 mb-2 text-gray-800 font-medium text-center text-xs"
                    ></div>
                </template>

                <template x-for="blankday in blankdays">
                    <div class="mt-1 mx-0.5 w-7 h-7 text-sm border border-transparent"></div>
                </template>
                <template x-for="(date, dateIndex) in no_of_days" :key="dateIndex">
                    <div class="mt-1 mx-0.5 w-7 h-7">
                        <button type="button"
                                x-on:click="getDateValue(date)"
                                x-text="date"
                                class="w-full h-full cursor-pointer text-center text-sm border border-transparent rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500 focus:bg-action-500 focus:text-white"
                                :class="{
                                    'bg-action-500 text-white': isSelectedDate(date) == true,
                                    'text-gray-700 hover:bg-gray-200 ring-2 ring-offset-2 ring-gray-200': isToday(date) == true && isSelectedDate(date) == false,
                                    'text-gray-700 hover:bg-gray-200': isToday(date) == false && isSelectedDate(date) == false
                                }"
                        ></button>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>