@props([
    'name', 
    'label' => null, 
    'value' => null, 
    'placeholder' => 'Seleccione fecha',
    'required' => false, 
    'id' => null,
    'range' => false,
    'time' => false
])

@php
    $id = $id ?? $name;
    $val = old($name, $value);
@endphp

<div class="form-group">
    @if($label)
        <label for="{{ $id }}" class="font-weight-bold">
            {{ $label }} 
            @if($required) <span class="text-danger">*</span> @endif
        </label>
    @endif

    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text bg-white"><i class="far fa-calendar-alt text-primary"></i></span>
        </div>
        <input 
            type="text" 
            name="{{ $name }}" 
            id="{{ $id }}" 
            class="form-control float-right @error($name) is-invalid @enderror" 
            value="{{ $val }}"
            placeholder="{{ $placeholder }}"
            @if($required) required @endif
            autocomplete="off"
        >
        
        @error($name) 
            <span class="invalid-feedback d-block font-weight-bold">
                <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
            </span> 
        @enderror
    </div>
</div>

@push('js')
<script>
    $(document).ready(function() {
        $('#{{ $id }}').daterangepicker({
            singleDatePicker: {{ $range ? 'false' : 'true' }},
            timePicker: {{ $time ? 'true' : 'false' }},
            timePicker24Hour: true,
            showDropdowns: true,
            autoApply: true,
            locale: {
                format: "{{ $time ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY' }}",
                separator: " - ",
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
                fromLabel: "De",
                toLabel: "Hasta",
                customRangeLabel: "Personalizado",
                weekLabel: "S",
                daysOfWeek: ["Do","Lu","Ma","Mi","Ju","Vi","Sa"],
                monthNames: ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
                firstDay: 1
            }
        });
    });
</script>
@endpush