@extends('base')
@section('extrajs')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $("#select__periodo_desde").select2();
        $("#select__periodo_hasta").select2();
        const btnReporteDetalleSubmit = document.querySelector("#btn__reporteSubmit");
        const reporteDetalleDesde = document.querySelector("#select__periodo_desde");
        const reporteDetalleHasta = document.querySelector("#select__periodo_hasta");

        function onPeriodoSelectChange() {
            btnReporteDetalleSubmit.disabled = !(reporteDetalleDesde.value < reporteDetalleHasta.value);
            btnReporteDetalleSubmit.title = btnReporteDetalleSubmit.disabled ?
                "Configuracion incorrecta de fechas, la fecha inicial debe ser mayor a la final." : "";

        }
        onPeriodoSelectChange();
    </script>
@endsection
@section('extracss')
    <style>
        button:disabled {
            cursor: not-allowed;
        }

    </style>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
    <h1>Reportes Detallados</h1>
    <form action="{{ route('ReportesRecursosHumanos.Detallado') }}" class="form w-75 mx-auto" method="get" target="_blank">
        <div class="d-flex justify-content-between mx-auto">
            <div class="form-group d-flex flex-column">
                <label for="desde" class="label-group">Periodo Inicial</label>
                <select class="form-control" name="desde" id="select__periodo_desde" onchange="onPeriodoSelectChange()">
                    @foreach ($periodos as $periodo)
                        <option value="{{ $periodo->periodo }}">{{ join(' ', $periodo->fechaArrayFromPeriodo()) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group d-flex flex-column">
                <label for="desde" class="label-group">Periodo Final</label>
                <select class="form-control" name="hasta" id="select__periodo_hasta" onchange="onPeriodoSelectChange()">
                    @foreach ($periodos as $periodo)
                        <option value="{{ $periodo->periodo }}">{{ join(' ', $periodo->fechaArrayFromPeriodo()) }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group d-flex flex-column">
            <label for="tipo" class="label-group">Tipo De Reporte</label>
            <select class="form-control" name="tipo">
                @foreach ($tipos as $tipo)
                    <option value="{{ $tipo }}">{{ ucwords($tipo) }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" id="btn__reporteSubmit" class="btn btn-success" value="Generar Reporte En Excel"><i class="fa-regular fa-file-excel fs-2"></i> Generar Reporte En Excel</button>
    </form>
@endsection