@use('Illuminate\Support\Str')
@use('Carbon\Carbon')
@props([
    'name',
    'label' => $name ?? '',
    'required' => false,
    'startDate' => null,
    'endDate' => null,
    'useLabel' => true,
    'container' => 'body',
    'minDate' => null,
    'maxDate' => null,
    'ranges' => true,
    'readonly' => false,
])
@php
    $nameId = !empty($name) ? Str::slug($name) : uniqid();
    $startName = 'start_'.$name;
    $endName = 'end_'.$name;
@endphp
<div id="div-daterange-{{ $nameId }}" class="form-floating mb-2">
    <input {{ $attributes->class(['form-control bg-unset daterange', 'is-invalid' => $errors->has($startName) || $errors->has($endName)]) }}
        id="daterange-{{ $nameId }}"
        type="text"
        name="{{ $name }}"
        value="{{ old($name, $startDate && $endDate ? $startDate . ' - ' . $endDate : '') }}"
        placeholder="{{ $useLabel ? '' : $label }}"
        @required($required)
        @if($readonly)
        readonly disabled style="pointer-events: none; background-color: #e9ecef;"
        @else
        readonly
        @endif
    />
    @if($useLabel)
        <label class="form-label" for="{{ $name }}">{{ $label }}
            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif
    <input type="hidden" name="{{ $startName }}" id="daterange-{{ $nameId }}-start" value="{{ old($startName, $startDate) }}" />
    <input type="hidden" name="{{ $endName }}" id="daterange-{{ $nameId }}-end" value="{{ old($endName, $endDate) }}" />
    @error($startName)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
    @error($endName)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

@push('scripts')
    <script type="module" src="{{ asset('js/daterangepicker/index.js') }}"></script>
    <script type="module">
        $(document).ready(function() {
            @if(!$readonly)
                const startDate = moment(@json($startDate));
                const endDate = moment(@json($endDate));
                $('#daterange-{{ $nameId }}').daterangepicker({
                    startDate: startDate.isValid() ? startDate : moment(),
                    endDate: endDate.isValid() ? endDate : moment(),
                    @if($minDate)
                        minDate: moment(@json($minDate)),
                    @endif
                    @if($maxDate)
                        maxDate: moment(@json($maxDate)),
                    @endif
                    @if($ranges)
                        ranges: {
                            '{{ __("general.today") }}': [moment(), moment()],
                            '{{ __("general.yesterday") }}': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            '{{ __("general.this_month") }}': [moment().startOf('month'), moment().endOf('month')],
                            '{{ __("general.past_month") }}': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                            '{{ __("general.this_3_months") }}': [moment().subtract(2, 'months').startOf('month'), moment().endOf('month')],
                            '{{ __("general.past_3_months") }}': [moment().subtract(3, 'months').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        },
                    @endif
                    locale: {
                        cancelLabel: '{{ __("general.cancel") }}',
                        applyLabel: '{{ __("general.apply") }}',
                        customRangeLabel: '{{ __("general.custom_range") }}',
                        format: 'DD-MMM-YYYY',
                    },
                    applyClass: 'btn btn-sm btn-primary ms-2',
                    cancelButtonClasses: 'btn btn-sm btn-info mb-2 mb-sm-0',
                    parentEl: '{{ $container }}',
                }, function (start, end) {
                    $('#daterange-{{ $nameId }}-start').val(start.format('YYYY-MM-DD'));
                    $('#daterange-{{ $nameId }}-end').val(end.format('YYYY-MM-DD'));
                });
            @endif
        });
    </script>
@endpush