@extends('layouts.app')

@section('head-title','Informes')

@section('content_title','Informes')

@section('content')
    <div class="row mt-4">
        <h3 style="width: 100%" class="mb-4">Exportar información</h3>

        <div class="col-12 row">
            <div class="col form-group">
                <label for="profesional">Profesional</label>
                <select name="profesional" class="form-control select2">
                    <option value="">Todos</option>
                    @foreach ($doctores as $doctor)
                        <option value="{{ $doctor->id }}">{{ $doctor->apellidos }} {{ $doctor->nombres }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col form-group">
                <label for="sanatorio">Sede</label>
                <select name="sanatorio" class="form-control select2">
                    <option value="">Todos</option>
                    @foreach ($sedes as $key => $sede)
                        <option value="{{ $key }}">{{ $sede }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col form-group">
                <label for="estado">Estado</label>
                <select name="estado" class="form-control select2">
                    <option value="">Todos</option>
                    @foreach ($estados as $key => $estado)
                        <option value="{{ $key }}">{{ $estado }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col form-group">
                <label for="estado">Tipo</label>
                <select name="tipo" class="form-control select2">
                    <option value="">Todos</option>
                    <option value="Anticipada">Anticipada</option>
                    <option value="Urgente">Urgente</option>
                </select>
            </div>
            <div class="col form-group">
                <label for="estado">Servicios</label>
                <select name="servicio" class="form-control select2">
                    <option value="">Todos</option>
                    @foreach ($servicios as $servicio)
                        <option value="{{ $servicio->getKey() }}">{{ $servicio->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col form-group">
                <label for="estado">Fecha desde</label>
                <input type="text" name="fecha_reprogramada" id="date" class="form-control datepicker" value="12-06-2025">
            </div>

            <div class="col form-group">
                <label for="estado">Fecha hasta</label>
                <input type="text" name="fecha_reprogramada" id="date2" class="form-control datepicker" value="19-06-2025">
            </div>

            <strong><p>(La fecha que se está utilizando para los filtros es la fecha en la que va a faltar el médico).</p></strong>
        </div>

        <button type="button" onclick="filterList()" class="btn btn-primary mt-2 ml-2" id="filtros" style="height: 10%; width: 10%;">Aplicar filtros</button>
        <button id="btnExportar" class="btn btn-success mt-2 ml-2" style="width: 10%;">
            <i class="fas fa-file-excel"></i> Exportar
        </button>
        <div class="col-8"></div>

        <div class="alert alert-success mt-4 ml-2" style="width: 30%; display:none" id="alert-filtros">
            Filtros aplicados correctamente!
        </div>
    </div>

    <div class="d-flex justify-content-around bg-light border border-secondary rounded mt-5 p-2">
        <div class="col-6">
            <h4 class="mb-2">Días en los cuales más se generan cancelaciones.</h4>
            <canvas id="myChart"></canvas>
        </div>
    </div>
    <div class="d-flex justify-content-around bg-light border border-secondary rounded mt-5 p-2">
        <div class="col-12">
            <canvas id="myPieChart"></canvas>
        </div>
    </div>
    <div class="d-flex justify-content-around bg-light border border-secondary rounded mt-5 p-2">
        <div class="col-6">
            <h4 class="mt-3 mb-2 d-inline" style="margin: 0 10%;">Días en los que más canceló el médico.</h4>
            <canvas id="myChart2" class="p-3 ml-5 mr-5"></canvas>
        </div>
    </div>



@endsection

@section('more_scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/xlsx@0.16.9/dist/xlsx.full.min.js"></script>
    <script src="https://unpkg.com/file-saverjs@latest/FileSaver.min.js"></script>
    <script src="https://unpkg.com/tableexport@latest/dist/js/tableexport.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <script>
        function restWeek(fecha, dias){
            fecha.setDate(fecha.getDate() + dias);
            fecha_desde = fecha.toLocaleDateString();

            fecha_actual = new Date().toLocaleDateString();

            return [fecha_desde, fecha_actual];
        }

        function setDates() {
            let fecha_actual = new Date();
            let fechas_filtro = restWeek(fecha_actual, -7);
            let fecha_desde = fechas_filtro[0];
            let fecha_hasta = fechas_filtro[1];

            if (fecha_desde && fecha_hasta) {
                fecha_desde = fecha_desde.replaceAll('/', '-');
                fecha_hasta = fecha_hasta.replaceAll('/', '-');

                $('#date').val(fecha_desde);
                $('#date2').val(fecha_hasta);
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            // setDates();
            filterList();
            // Grafico de torta
            const ctx2 = document.getElementById('myPieChart');
            charty2 = new Chart(ctx2, {
                type: 'bar',
                data: {
                    datasets: [{
                        data: [],
                        backgroundColor: [],
                    }]
                },
                options: {
                    plugins: {
                        legend:{
                            display:false
                        },
                        title: {
                            display: true,
                            text: 'Cancelaciones por Servicio'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // Grafico de barras
            const ctx = document.getElementById('myChart');
            charty = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado', 'Domingo'],
                    datasets: [{
                        label: '# de cancelaciones',
                        data: [0,0,0,0,0,0,0],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // Grafico de barras 2
            const ctx3 = document.getElementById('myChart2');
            charty3 = new Chart(ctx3, {
                type: 'bar',
                data: {
                    labels: ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes'],
                    datasets: [{
                        label: '# de cancelaciones',
                        data: [0,0,0,0,0],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });

        const filterList = () => {
            axios.get("{{ route('getServicesAvailable') }}?fecha_desde=" + $("#date").val() + "&fecha_hasta=" + $("#date2").val()
            + "&profesional=" + $("select[name='profesional']").val()
            + "&sede=" + $("select[name='sanatorio']").val()
            + "&estado=" + $("select[name='estado']").val()
            + "&tipo=" + $("select[name='tipo']").val()
            ).then(({data}) => {
                const ctx2 = document.getElementById('myPieChart');
                const {colors, services, valores} = data;
                charty2.update();
                charty2.data.labels = services;
                charty2.data.datasets[0].data = valores;
                charty2.data.datasets[0].backgroundColor = colors;
                charty2.update();
            })
            .catch(error => {
                console.log(error);
            });

            axios.get("{{ route('cancelacionesByFilterExport') }}?fecha_desde=" + $("#date").val() + "&fecha_hasta=" + $("#date2").val()
            + "&profesional=" + $("select[name='profesional']").val()
            + "&sede=" + $("select[name='sanatorio']").val()
            + "&estado=" + $("select[name='estado']").val()
            + "&tipo=" + $("select[name='tipo']").val()
            ).then(({data}) => {
                // UPDATE BAR CHART
                charty.data.datasets[0].data[0] = data.cancelaciones_lunes;
                charty.data.datasets[0].data[1] = data.cancelaciones_martes;
                charty.data.datasets[0].data[2] = data.cancelaciones_miercoles;
                charty.data.datasets[0].data[3] = data.cancelaciones_jueves;
                charty.data.datasets[0].data[4] = data.cancelaciones_viernes;
                charty.data.datasets[0].data[5] = data.cancelaciones_sabado;
                charty.data.datasets[0].data[6] = data.cancelaciones_domingo;
                charty.update();

                // UPDATE BAR CHART 2
                charty3.data.datasets[0].data[0] = data.lunes_cancelados_total;
                charty3.data.datasets[0].data[1] = data.martes_cancelados_total;
                charty3.data.datasets[0].data[2] = data.miercoles_cancelados_total;
                charty3.data.datasets[0].data[3] = data.jueves_cancelados_total;
                charty3.data.datasets[0].data[4] = data.viernes_cancelados_total;
                charty3.update();
            })
            .catch(error => {
                console.log(error);
            });

            $("#alert-filtros").css("display", "block");

            setTimeout(() => {
                $("#alert-filtros").css("display", "none");
            }, 2000);
        }

        $('.datetimepicker').datetimepicker({
            format:'d-m-Y H:i',
            dateFormat: "dd-mm-yy",
            timeFormat:  "hh:mm",
            mask:true,
        });

        $('.datepicker').datepicker({
            dateFormat:'dd-mm-yy'
        });

        btnExportar = document.querySelector("#btnExportar");
        btnExportar.addEventListener("click", function() {
            const profesional = document.querySelector("select[name='profesional']");
            const sanatorio = document.querySelector("select[name='sanatorio']");
            const estado = document.querySelector("select[name='estado']");
            const tipo = document.querySelector("select[name='tipo']");
            const fecha_desde = $("#date").val();
            const fecha_hasta = $("#date2").val();
            const servicio = document.querySelector("select[name='servicio']");
            let url = "{{route('exportCancelaciones')}}";
            url += "?profesional=" + profesional.options[profesional.selectedIndex].value;
            url += "&sanatorio=" + sanatorio.options[sanatorio.selectedIndex].value;
            url += "&estado=" + estado.options[estado.selectedIndex].value;
            url += "&tipo=" + tipo.options[tipo.selectedIndex].value;
            url += "&servicio=" + servicio.options[servicio.selectedIndex].text;
            url += "&fecha_desde=" + fecha_desde;
            url += "&fecha_hasta=" + fecha_hasta;
            window.open(url);
        });
    </script>
@endsection