@props(['name', 'label', 'required' => false])

<div class="form-group">
    <label class="font-weight-bold text-dark">{{ $label }}</label>
    <div class="input-group shadow-sm">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
        </div>
        <input type="text" class="form-control float-right daterange-picker" name="{{ $name }}" id="{{ $name }}">
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        $('#{{ $name }}').daterangepicker({
            locale: { format: 'YYYY-MM-DD', separator: ' al ', applyLabel: 'Aplicar', cancelLabel: 'Cancelar', fromLabel: 'Desde', toLabel: 'Hasta', customRangeLabel: 'Personalizado', daysOfWeek: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'], monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], firstDay: 1 }
        });
    });
</script>



{{-- <x-form.date-range name="filtro_fecha" label="Periodo de Ventas" /> --}}