@extends('layouts.panel')

@section('content')
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card card-congratulations">
                <div class="card-body text-center">
                    <img src="app-assets/images/elements/decore-left.png" class="congratulations-img-left" alt="card-img-left">
                    <img src="app-assets/images/elements/decore-right.png" class="congratulations-img-right"
                        alt="card-img-right">
                    <div class="avatar avatar-xl bg-primary shadow">
                        <div class="avatar-content">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-award font-large-1">
                                <circle cx="12" cy="8" r="7"></circle>
                                <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
                            </svg>
                        </div>
                    </div>
                    <div class="text-center">
                        <h2 class=" text-white">Bienvenido, {{ auth()->user()->name }}.</h2>
                        <p class="card-text m-auto w-100">
                            AL <strong>SISTEMA DE COLAS</strong> MUNICIPAL.
                        </p>
                    </div>
                </div>
            </div>
        </div>




    </div>

    <div class="row">
        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header">
                    <div>
                        <h2 class="fw-bolder mb-0">{{ $usuarios_plataformas }}</h2>
                        <p class="card-text">USUARIOS</p>
                    </div>
                    <div class="avatar bg-light-primary p-50 m-0">
                        <div class="avatar-content">

                            <i data-feather='users'></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header">
                    <div>
                        <h2 class="fw-bolder mb-0">{{ $servicios_activos }}</h2>
                        <p class="card-text">SERVICIOS ACTIVOS</p>
                    </div>
                    <div class="avatar bg-light-success p-50 m-0">
                        <div class="avatar-content">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-server font-medium-5">
                                <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                                <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                                <line x1="6" y1="6" x2="6.01" y2="6"></line>
                                <line x1="6" y1="18" x2="6.01" y2="18"></line>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header">
                    <div>
                        <h2 class="fw-bolder mb-0">{{ $servicios_de_baja }}</h2>
                        <p class="card-text">SERVICIOS DADOS DE BAJA</p>
                    </div>
                    <div class="avatar bg-light-danger p-50 m-0">
                        <div class="avatar-content">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-activity font-medium-5">
                                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header">
                    <div>
                        <h2 class="fw-bolder mb-0">{{ $personas }}</h2>
                        <p class="card-text">PERSONAS</p>
                    </div>
                    <div class="avatar bg-light-warning p-50 m-0">
                        <div class="avatar-content">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-alert-octagon font-medium-5">
                                <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2">
                                </polygon>
                                <line x1="12" y1="8" x2="12" y2="12"></line>
                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-3">
                <label for="" class="form-label">PISO:</label>

                <select id="selectPiso" class="form-control">

                    <option value="1">Piso 1</option>
                    <option value="2">Piso 2</option>
                    <!-- Agrega más opciones según sea necesario -->
                </select>
            </div>
        </div>

        <div class="row mt-1">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div id="chart" width="100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('scripts')
    {{-- <script>
        $(document).ready(function() {
            
            console.log(cData);

            var options = {
                series: [{
                    name: 'Cantidad',
                    data: cData.data
                }],
                annotations: {

                },
                chart: {
                    height: 350,
                    type: 'bar',
                },
                plotOptions: {
                    bar: {
                        borderRadius: 10,
                        columnWidth: '50%',
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2
                },

                grid: {
                    row: {
                        colors: ['#fff', '#f2f2f2']
                    }
                },
                xaxis: {
                    labels: {
                        rotate: -45
                    },
                    categories: cData.label,
                    tickPlacement: 'on'
                },
                yaxis: {
                    title: {
                        text: 'SERVICIOS',
                    },
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'light',
                        type: "horizontal",
                        shadeIntensity: 0.25,
                        gradientToColors: undefined,
                        inverseColors: true,
                        opacityFrom: 0.85,
                        opacityTo: 0.85,
                        stops: [50, 0, 100]
                    },
                }
            };

            var chart = new ApexCharts(document.querySelector("#chart"), options);
            chart.render();
        })
    </script> --}}



    {{-- <script>
        $(document).ready(function() {

            const url = "{{ route('datos-ticket-grafico') }}";

            const initialData = obtenerDatosDelServidor(1);

            function updateChart(data) {
                var options = {
                    series: [{
                        name: 'Cantidad',
                        data: data.data
                    }],
                    chart: {
                        height: 350,
                        type: 'bar',
                    },
                    xaxis: {
                    labels: {
                        rotate: -45
                    },
                    categories: data.label,
                    tickPlacement: 'on'
                },
                    // Resto de las opciones del gráfico...
                };

                var chart = new ApexCharts(document.querySelector("#chart"), options);
                chart.render();
            }


            updateChart(initialData);

            $("#selectPiso").change(function() {
                const selectedPiso = $(this).val();

                $.ajax({
                    url: url,
                    method: 'GET',
                    data: { piso: selectedPiso },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)
                        updateChart(response);
                        obtenerDatosDelServidor(response)
                    },
                    error: function(error) {
                        console.error('Error al obtener datos del servidor:', error);
                    }
                });
            });

            function obtenerDatosDelServidor(piso) {
                // Esta función retorna datos de ejemplo, pero debes implementar la lógica para obtener datos desde el servidor
                // Puedes utilizar una base de datos y realizar consultas según el piso seleccionado
                // Aquí simplemente retornamos datos de ejemplo
                return {
                    label: piso.label,
                    data: piso.data
                };
            }

        });
    </script> --}}

    <script>
        $(document).ready(function() {
            const url = "{{ route('datos-ticket-grafico') }}";
            let chart; // Declare the chart variable outside the functions

            function initializeChart(data) {
                var options = {
                    series: [{
                        name: 'Cantidad',
                        data: data.data
                    }],
                    chart: {
                        height: 350,
                        type: 'bar',
                    },
                    xaxis: {
                        labels: {
                            rotate: -45
                        },
                        categories: data.label,
                        tickPlacement: 'on'
                    },
                    // Resto de las opciones del gráfico...
                };

                chart = new ApexCharts(document.querySelector("#chart"), options);
                chart.render();
            }

            function updateChart(data) {
                chart.updateSeries([{
                    data: data.data
                }]);
            }

            // Initial chart creation
            $.ajax({
                url: url,
                method: 'GET',
                data: {
                    piso: 1
                }, // You can use the default floor value here
                dataType: 'json',
                success: function(response) {
                    initializeChart(response);
                },
                error: function(error) {
                    console.error('Error al obtener datos del servidor:', error);
                }
            });

            // Handle select change
            $("#selectPiso").change(function() {
                const selectedPiso = $(this).val();

                $.ajax({
                    url: url,
                    method: 'GET',
                    data: {
                        piso: selectedPiso
                    },
                    dataType: 'json',
                    success: function(response) {
                        updateChart(response);
                    },
                    error: function(error) {
                        console.error('Error al obtener datos del servidor:', error);
                    }
                });
            });
        });
    </script>
@endsection