@extends('layouts.admin')
@section('reportes', 'active bg-gradient-primary')
@section('contenido')

    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">Reportes</h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">
                            <i style="color:green" class="text-center fa-solid fa-file-excel fa-4x"></i>

                            <form id="frmImportar" class="text-start col-md-8 offset-md-2 row" enctype="multipart/form-data"
                                action="{{ asset('reporte_agendados') }}" method="POST">
                                @csrf


                                <div class="col-md-10 offset-1">
                                    <label class="form-label">Reporte</label>
                                    <select id="reporte" name="reporte" class="form-select" onchange="toggleFechas()"
                                        required>
                                        <option value="Agendados">Agendados</option>
                                        <option value="No Agendados">No Agendados</option>
                                        @if (Auth::user()->perfil_id == 3)

                                        <option value="Valorización">Valorización</option>
                                        @endif
                                    </select>
                                </div>

                                <div id="div_zonal"  class="col-md-5 offset-1">
                                    <label class="form-label">Zonal</label>
                                    <select id="zonal_id" name="zonal_id" class="form-select"
                                        onchange="buscarLocalidades(this.value)" required>
                                        <option value="0">Todas</option>
                                        @foreach ($zonales as $zonal)
                                            <option value={{ $zonal->id }}>{{ $zonal->codigo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div id="div_localidad" class="col-md-5" style="display:none">
                                    <label class="form-label">Localidad</label>
                                    <select id="localidad_id" name="localidad_id" class="form-select" required>
                                        <option value="0">Todas</option>
                                        @foreach ($zonales as $zonal)
                                            <option value={{ $zonal->id }}>{{ $zonal->codigo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div id="div_tecnicos" class="col-md-5">
                                    <label class="form-label">Técnico</label>
                                    <select id="tecnico_id" name="tecnico_id" class="form-select" required>
                                        <option value="0">Todos</option>
                                        @foreach ($tecnicos as $tecnico)
                                            <option value={{ $tecnico->id }}>{{ $tecnico->usuario }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div id="" name="" class="offset-1 row" style="padding:0px;display:flex">
                                    <div class="col-md-5">
                                        <div class="input-group input-group-outline my-3 focus is-focused col-md-6">
                                            <label class="form-label">Inicio</label>
                                            <input type="date" class="form-control" name="desde" id="desde">
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="input-group input-group-outline my-3 focus is-focused col-md-6">
                                            <label class="form-label">Fin</label>
                                            <input type="date" class="form-control" name="hasta" id="hasta">
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2">Generar
                                    Reporte</button>

                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        function toggleFechas() {
            const selectElement = document.getElementById("reporte");
            const divFechas = document.getElementById("div_fechas");
            const divTecnicos = document.getElementById("div_tecnicos");
            const divZonal = document.getElementById("div_zonal");
            const divLocalidad = document.getElementById("div_localidad");

            switch (selectElement.value) {
                case "No Agendados":
                    divTecnicos.style.display = "none";
                    divLocalidad.style.display = "block";
                    divFechas.style.display = "none";
                    divZonal.style.display = "block";

                    break;
                case "Valorización":
                    divTecnicos.style.display = "none";
                    divLocalidad.style.display = "none";
                    divFechas.style.display = "flex";
                    divZonal.style.display = "none";

                    break;
                default:
                    divTecnicos.style.display = "block";
                    divLocalidad.style.display = "none";
                    divFechas.style.display = "none";
                    divZonal.style.display = "block";
                    break;
            }
        }

        function buscarLocalidades(id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "get",
                dataType: "json",
                url: "../buscar_localidades_" + id,
                success: function(resultado) {
                    $('#localidad_id').empty();
                    $('#localidad_id').append(
                        `<option value="0">Todas</option>`);
                    resultado.localidades.forEach(localidad => {

                        $('#localidad_id').append(
                            `<option value="${localidad.id}">${localidad.nombre}</option>`)
                    });

                },
                error: function() {
                    alert("error");

                }
            });
            return true;
        }
    </script>
@endsection