@php use Carbon\Carbon; @endphp

<x-app-layout>
    <x-slot name="header">
        <h2 id="titulo-balance" class="text-xl font-semibold leading-tight mb-6">
            Balance Económico de los productos fijos 2.0TD
        </h2>
    </x-slot>

    <style>
        table th, table td {
            white-space: nowrap !important;
            font-size: 14px;
            padding: 4px 8px;
        }

        .btn-colvis-custom {
            background-color: #0051a2 !important;
            color: white !important;
            border: none;
        }

        .btn-colvis-custom:hover {
            background-color: #003f7a !important;
            color: white !important;
        }

        div.dt-button-collection {
            max-height: 300px;
            width: 320px;
            overflow-y: auto !important;
            padding: 10px;
            font-size: 14px;
            z-index: 99999 !important;
            border-radius: 8px;
            background-color: #fff;
            position: absolute !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }


    </style>

    <div class="px-2 sm:px-4 py-4">
        <div id="tablaAcumuladaContainer">
            @include('costes.vista_acumulado', ['acumulados' => $acumulados])
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>







    <script>
        let tarifaActual = '2.0TD';
        let periodoActual = '';

        function cargarDatos() {
            $.ajax({
                url: "{{ route('coste.energia') }}",
                method: "GET",
                data: { tarifa: tarifaActual, periodo: periodoActual },
                beforeSend: function () {
                    $('#tablaAcumuladaContainer').html('');
                },
                success: function (data) {
                    $('#tablaAcumuladaContainer').html(data);
                    inicializarTabla();
                },
                error: function () {
                    $('#tablaAcumuladaContainer').html('<div class="text-danger p-4">❌ Error al cargar los datos</div>');
                }
            });
        }

        function inicializarTabla() {
            $('#tablaAcumulados').DataTable({
                destroy: true,
                processing: false,
                dom: '<"d-flex flex-wrap justify-content-between align-items-center mb-3"fBl>rtip',
                buttons: [
                    {
                        text: '',
                        className: 'btn btn-light border d-flex align-items-center flex-wrap gap-3',
                        action: function () {},
                        init: function(api, node, config) {
                            $(node).html(`
                                <div class="d-flex align-items-center gap-2">
                                    <label class="mb-0 fw-bold">
                                        <i class="fas fa-bolt text-warning me-1"></i> Tarifa:
                                    </label>
                                    <select id="tarifa-select" class="form-select form-select-sm w-auto shadow-sm border border-primary">
                                        <option value="2.0TD" ${tarifaActual === '2.0TD' ? 'selected' : ''}>2.0TD</option>
                                        <option value="3.0TD" ${tarifaActual === '3.0TD' ? 'selected' : ''}>3.0TD</option>
                                        <option value="6.1TD" ${tarifaActual === '6.1TD' ? 'selected' : ''}>6.1TD</option>
                                    </select>
                                </div>

                                <div class="d-flex align-items-center gap-2 ms-4">
                                    <label class="mb-0 fw-bold">
                                        <i class="fas fa-calendar-alt text-primary me-1"></i> Periodo:
                                    </label>
                                    <div class="input-group">
                                        <input type="text" id="filtroPeriodo" class="form-control form-control-sm shadow-sm border border-info" placeholder="Seleccionar mes/año" readonly />
                                        <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                    </div>
                                    <button id="btnAplicarFiltro" class="btn btn-sm btn-primary ms-2">Aplicar</button>
                                </div>
                            `);

                            // Esperamos a que el DOM pinte el input para inicializar el TempusDominus
                                setTimeout(() => {
                                    const filtroPeriodoElem = document.getElementById('filtroPeriodo');
                                    if (filtroPeriodoElem) {
                                        new tempusDominus.TempusDominus(filtroPeriodoElem, {
                                            display: {
                                                viewMode: 'calendar',
                                                components: {
                                                    decades: true,
                                                    year: true,
                                                    month: true,
                                                    date: false,  // ✅ Desactivamos el día
                                                    hours: false,
                                                    minutes: false,
                                                    seconds: false
                                                }
                                            },
                                            localization: {
                                                locale: 'es',
                                                format: 'MM/yyyy'  // ✅ Solo mes y año
                                            },
                                            allowInputToggle: true
                                        });
                                    }
                                }, 0);

                            // Eventos
                            $(document).off('click', '#btnAplicarFiltro').on('click', '#btnAplicarFiltro', function () {
                                periodoActual = $('#filtroPeriodo').val() || '';
                                cargarDatos();
                            });


                            $(document).off('change', '#tarifa-select').on('change', '#tarifa-select', function () {
                                tarifaActual = $(this).val();
                                document.getElementById('titulo-balance').textContent = `Balance Económico de los productos fijos ${tarifaActual}`;
                                cargarDatos();
                            });
                        }
                    },
                    {
                        extend: 'colvis',
                        className: 'btn btn-colvis-custom',
                        text: '<i class="fas fa-eye me-1"></i> Columnas'
                    },
                    {
                    extend: 'excelHtml5',
                    className: 'btn btn-success',
                    text: '<i class="fas fa-file-excel"></i> Descargar',
                    exportOptions: {
                        columns: ':visible'
                    },
                    customize: function (xlsx) {
                        const sheet = xlsx.xl.worksheets['sheet1.xml'];
                        // Cambia 'C' y 'D' por la columna de Fecha Inicio y Fecha Fin (por letra)
                        // A = 1, B = 2, C = 3, etc. (0-based en JS, 1-based en Excel)
                        $('row c[r^="D"], row c[r^="E"]', sheet).attr('s', '22'); // 's' 22 es estilo de fecha
                    }
                }
                ],
                columnDefs: [
                     { targets: [3, 4], visible: false }
                ],
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "Mostrar todo"]],
                pageLength: 50
            });
        }

        $(document).ready(function () {
            inicializarTabla();
        });
    </script>






</x-app-layout>