@extends('layouts.layout')

@section('title', 'Listado de Comercializadoras')

@section('content')


<div class="container-fluid py-4">
   <!-- 📌 Encabezado Principal -->
<h1 class="mb-4 text-center fw-bold text-dark">
    <i class="bi bi-lightning-charge-fill text-warning"></i>
    Compararador comercializadoras
</h1>

<!-- 🔍 Buscador y Botones de Acción -->
<div class="d-flex justify-content-between align-items-center mb-4 p-3 bg-white shadow-sm rounded">

    <!-- 🔎 Buscador Mejorado -->
    <div class="input-group w-50">
        <span class="input-group-text bg-light text-dark border-0 rounded-start">
            <i class="bi bi-search"></i>
        </span>
        <input type="text" id="search" class="form-control border-0 shadow-sm rounded-end"
            placeholder="Buscar comercializadora..." style="background-color: #f8f9fa;">
    </div>

    <!-- 📌 Botones de Acción -->
    <div>
        <button class="btn rounded-pill text-white shadow-sm me-2"
            data-bs-toggle="modal" data-bs-target="#modalAgregar"
            style="background-color: #abcd72;">
            <i class="bi bi-plus-circle"></i> Agregar Comercializadora
        </button>
        <button class="btn rounded-pill text-white shadow-sm"
            data-bs-toggle="modal" data-bs-target="#modalSondeo"
            style="background-color: #6ebfd3;">
            <i class="bi bi-clipboard-plus"></i> Agregar Sondeo
        </button>
    </div>

</div>


    <!-- Contenedor de Comercializadoras -->
    <div class="row" id="comercializadorasContainer"></div>
<!-- Modal Agregar Comercializadora -->
<div class="modal fade" id="modalAgregar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content shadow-lg rounded-4 border-0">
            <!-- Encabezado -->
            <div class="modal-header text-white" style="background-color: #6ebfd3;">
                <h5 class="modal-title"><i class="bi bi-building-fill me-2"></i> Agregar Comercializadora</h5>
                <button type="button" class="btn-close text-white" data-bs-dismiss="modal"></button>
            </div>

            <!-- Cuerpo -->
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-bold"><i class="bi bi-tag-fill text-primary"></i> Nombre</label>
                    <input type="text" id="nombre" class="form-control shadow-sm rounded-3 border-light"
                        placeholder="Ejemplo: Iberdrola">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold"><i class="bi bi-card-text text-primary"></i> Descripción</label>
                    <textarea id="descripcion" class="form-control shadow-sm rounded-3 border-light" rows="2"
                        placeholder="Breve descripción"></textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold"><i class="bi bi-list-check text-primary"></i> Tipo de Mercado</label>
                    <select id="tipo" class="form-select shadow-sm rounded-3 border-light">
                        <option value="libre">Mercado Libre</option>
                        <option value="regulado">Mercado Regulador</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold"><i class="bi bi-globe text-primary"></i> Página Web</label>
                    <input type="url" id="url" class="form-control shadow-sm rounded-3 border-light"
                        placeholder="Ejemplo: https://www.comercializadora.com">
                </div>
            </div>

            <!-- Pie de Modal -->
            <div class="modal-footer">
                <button class="btn text-white fw-bold shadow-sm px-4 py-2 rounded-3"
                    style="background-color: #abcd72;" id="guardar">
                    <i class="bi bi-check-circle"></i> Guardar
                </button>
                <button type="button" class="btn btn-outline-secondary shadow-sm px-4 py-2 rounded-3" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Cancelar
                </button>
            </div>
        </div>
    </div>
</div>




   <!-- Modal Agregar Sondeo -->
   <div class="modal fade" id="modalSondeo" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 🟢 Encabezado con icono -->
            <div class="modal-header" style="background-color: #6ebfd3; color: white;">
                <h5 class="modal-title">
                    <i class="bi bi-clipboard-plus"></i> Agregar Sondeo
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 📌 Cuerpo del Modal -->
            <div class="modal-body">
                <form id="sondeoForm">
                    <!-- Comercializadora -->
                    <div class="mb-3">
                        <label class="form-label"><i class="bi bi-shop"></i> Comercializadora</label>
                        <select id="comercializadoraSelect" class="form-select rounded-pill shadow-sm" required>
                            <option value="">Seleccione una Comercializadora</option>
                        </select>
                    </div>

                    <!-- Producto -->
                    <div class="mb-3">
                        <label class="form-label"><i class="bi bi-box"></i> Producto</label>
                        <select id="productoSelect" class="form-select rounded-pill shadow-sm" required>
                            <option value="">Seleccione un Producto</option>
                            <option value="nuevo">Nuevo Producto</option>
                        </select>
                        <input type="text" id="nuevoProducto" class="form-control mt-2 d-none rounded-pill shadow-sm" placeholder="Nuevo Producto">
                    </div>

                    <!-- 🔥 Precios Potencia -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class="bi bi-lightning-charge"></i> Precio Potencia P1 (€/kW)</label>
                            <input type="number" id="precio_potencia_p1" class="form-control rounded-pill shadow-sm" step="0.0001" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class="bi bi-lightning"></i> Precio Potencia P2 (€/kW)</label>
                            <input type="number" id="precio_potencia_p2" class="form-control rounded-pill shadow-sm" step="0.0001" required>
                        </div>
                    </div>

                    <!-- 🔍 ELEGA Potencia -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class="bi bi-graph-up"></i> ELEGA P1 (€/kW)</label>
                            <input type="number" id="elega_precio_potencia_p1" class="form-control rounded-pill shadow-sm" step="0.0001" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class="bi bi-graph-up-arrow"></i> ELEGA P2 (€/kW)</label>
                            <input type="number" id="elega_precio_potencia_p2" class="form-control rounded-pill shadow-sm" step="0.0001" required>
                        </div>
                    </div>

                    <!-- ⚡ Precios Energía -->
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label"><i class="bi bi-lightbulb"></i> Energía P1 (€/kWh)</label>
                            <input type="number" id="precio_energia_p1" class="form-control rounded-pill shadow-sm" step="0.00001" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label"><i class="bi bi-lightbulb"></i> Energía P2 (€/kWh)</label>
                            <input type="number" id="precio_energia_p2" class="form-control rounded-pill shadow-sm" step="0.00001" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label"><i class="bi bi-lightbulb"></i> Energía P3 (€/kWh)</label>
                            <input type="number" id="precio_energia_p3" class="form-control rounded-pill shadow-sm" step="0.00001" required>
                        </div>
                    </div>

                    <!-- 💰 Cuota y Permanencia -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class="bi bi-wallet"></i> Cuota de Gestión</label>
                            <input type="text" id="cuota_gestion" class="form-control rounded-pill shadow-sm" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class="bi bi-shield-check"></i> Permanencia</label>
                            <input type="text" id="permanencia" class="form-control rounded-pill shadow-sm" required>
                        </div>
                    </div>

                    <!-- 📝 Observaciones -->
                    <div class="mb-3">
                        <label class="form-label"><i class="bi bi-chat-left-text"></i> Observaciones</label>
                        <textarea id="observaciones" class="form-control rounded-3 shadow-sm" rows="3" required></textarea>
                    </div>
                </form>
            </div>

            <!-- 🔘 Botón Guardar -->
            <div class="modal-footer">
                <button class="btn text-white w-100 rounded-pill" id="guardarSondeo" style="background-color: #abcd72;">
                    <i class="bi bi-save"></i> Guardar Sondeo
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Modal Editar Comercializadora -->
<div class="modal fade" id="modalEditar" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 🟢 Encabezado con icono -->
            <div class="modal-header" style="background-color: #6ebfd3; color: white;">
                <h5 class="modal-title">
                    <i class="bi bi-pencil-square"></i> Editar Comercializadora
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 📌 Cuerpo del Modal -->
            <div class="modal-body">
                <input type="hidden" id="edit_id">

                <!-- Nombre -->
                <div class="mb-3">
                    <label class="form-label"><i class="bi bi-shop"></i> Nombre</label>
                    <input type="text" id="edit_nombre" class="form-control rounded-pill shadow-sm" required>
                </div>

                <!-- Descripción -->
                <div class="mb-3">
                    <label class="form-label"><i class="bi bi-card-text"></i> Descripción</label>
                    <textarea id="edit_descripcion" class="form-control rounded-3 shadow-sm" rows="3"></textarea>
                </div>

                <!-- Tipo -->
                <div class="mb-3">
                    <label class="form-label"><i class="bi bi-diagram-3"></i> Tipo</label>
                    <select id="edit_tipo" class="form-select rounded-pill shadow-sm">
                        <option value="libre">Mercado Libre</option>
                        <option value="regulado">Mercado Regulador</option>
                    </select>
                </div>

                <!-- URL -->
                <div class="mb-3">
                    <label class="form-label"><i class="bi bi-globe"></i> Página Web</label>
                    <input type="url" id="edit_url" class="form-control rounded-pill shadow-sm"
                        placeholder="Ejemplo: https://www.comercializadora.com">
                </div>
            </div>

            <!-- 🔘 Botones de Acción -->
            <div class="modal-footer d-flex justify-content-between">
                <button class="btn rounded-pill text-white" data-bs-dismiss="modal" style="background-color: #6c757d;">
                    <i class="bi bi-x-circle"></i> Cancelar
                </button>
                <button class="btn rounded-pill text-white" id="guardarEdicion" style="background-color: #abcd72;">
                    <i class="bi bi-check-circle"></i> Guardar Cambios
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Gráficas -->
<div class="modal fade" id="modalGrafica" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 🟢 Encabezado -->
            <div class="modal-header" style="background-color: #6ebfd3; color: white;">
                <h5 class="modal-title">
                    <i class="bi bi-bar-chart-line"></i> Evolución de Tarifas
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 📌 Cuerpo del Modal -->
            <div class="modal-body">

               <!-- Selector de Productos -->
<div class="mb-3">
    <label class="form-label fw-bold"><i class="bi bi-sliders"></i> Seleccionar Producto</label>
    <select id="productoGrafica" class="form-select rounded-pill shadow-sm">
        <option value="">Seleccione un producto...</option>
    </select>
</div>


                <!-- Contenedor de la Gráfica -->
                <canvas id="graficaTarifas"></canvas>
            </div>

            <!-- 🔘 Botones de Acción -->
            <div class="modal-footer d-flex justify-content-between">
                <button class="btn rounded-pill text-white" data-bs-dismiss="modal" style="background-color: #6c757d;">
                    <i class="bi bi-x-circle"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>




<div class="container-fluid px-4">
    <div class="row justify-content-center" id="comercializadorasContainer"></div>
</div>

    <!-- SweetAlert JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // 📌 Búsqueda en vivo de comercializadoras
        document.getElementById("search").addEventListener("input", function () {
    let term = this.value.trim().toLowerCase();
    let cards = document.querySelectorAll("#comercializadorasContainer .card");

    cards.forEach(card => {
        let nameElement = card.querySelector("h5.fw-bold"); // Busca el título de la comercializadora
        let descriptionElement = card.querySelector("p.text-muted"); // Busca la descripción (si la hay)

        let name = nameElement ? nameElement.textContent.toLowerCase() : "";
        let description = descriptionElement ? descriptionElement.textContent.toLowerCase() : "";

        if (name.includes(term) || description.includes(term)) {
            card.style.display = "block"; // Mostrar si coincide
        } else {
            card.style.display = "none"; // Ocultar si no coincide
        }
    });
});



document.addEventListener("DOMContentLoaded", function () {
    loadComercializadoras();
    loadComercializadorasSelect();
    async function loadComercializadoras() {
    try {
        let response = await fetch("{{ route('comercializadoras.list') }}");
        let data = await response.json();

        let html = `<div class="row justify-content-center gx-4 gy-4">`; // 📌 Mayor separación

        data.forEach((com, index) => {
            if (index % 2 === 0 && index !== 0) {
                html += `</div><div class="row justify-content-center gx-4 gy-4">`; // 🔄 Separa filas
            }

            html += `
            <div class="col-lg-6 col-md-12 col-12">
                <div class="card shadow border-0 rounded-4 p-4 bg-white h-100">
                    <div class="row g-4 align-items-center">
                        <!-- 📌 Sección Izquierda: Imagen y Datos -->
                        <div class="col-md-4 text-center">
    <img src="{{ asset('images/default.jpg') }}"
        onerror="this.src='{{ asset('images/default.jpg') }}';"
        alt="${com.nombre}"
        class="rounded-circle border border-3 shadow-sm mb-3"
        style="width: 140px; height: 140px; border-color: #008CBA;">

    <h5 class="fw-bold text-dark">${com.nombre}</h5>
    <p class="text-muted">${com.descripcion ?? 'Sin descripción'}</p>

    <!-- Mostrar URL si existe -->
    ${com.url ? `
    <p class="mb-1">
        <i class="bi bi-globe text-primary"></i>
        <a href="${com.url}" target="_blank" class="text-decoration-none text-primary fw-bold">
            Visitar Página
        </a>
    </p>` : ''}

    <span class="badge fs-6 px-3 py-2 rounded-pill text-white"
        style="background-color: ${com.tipo === 'libre' ? '#5cb85c' : '#f39c12'};">
        ${com.tipo === 'libre' ? 'Mercado Libre' : 'Mercado Regulador'}
    </span>
</div>


                        <!-- 📌 Sección Derecha: Tarifas -->
                        <div class="col-md-8">
                            <h6 class="fw-bold text-primary">
                                <i class="bi bi-lightning-fill text-warning"></i> Últimas Tarifas
                            </h6>
                            <div class="tarifas-list">
    ${com.productos && com.productos.length > 0 ? com.productos.map((producto, index) => {
        let sondeo = producto.ultimo_sondeo || {};
        return `
        <div class="tarifa-item border rounded mb-3 p-3 bg-light shadow-sm">
            <div class="d-flex align-items-center justify-content-between">
                <button class="btn w-100 text-start fw-bold tarifa-toggle d-flex align-items-center p-2 rounded"
                    style="background: linear-gradient(135deg, #eef1f5, #dde4ec); border: none; color: #333; transition: all 0.3s ease;"
                    data-id="${com.id}-${producto.nombre}">
                    <i class="bi bi-chevron-right-circle-fill me-2 icon-toggle"
                       style="color: #6c757d; font-size: 1.4rem;"></i>
                    <span class="flex-grow-1">${producto.nombre}</span>
                </button>
                <button class="btn btn-danger delete-tarifa ms-2" data-id="${producto.id}" title="Eliminar Tarifa">
                    <i class="bi bi-trash-fill"></i>
                </button>
            </div>
            <div id="tarifa-${com.id}-${producto.nombre}" class="tarifa-content collapse mt-2">
                <div class="p-3 rounded bg-white border">
                    <div class="row">
                        <div class="col-md-12">
    <p class="mb-1  d-flex align-items-center"
       style="white-space: nowrap; overflow: hidden; ">
        <i class="bi bi-lightning-fill text-primary"></i> <strong class="fw-normal">Precio Potencia P1:</strong>
        <span class="mx-1">${sondeo.precio_potencia_p1 ?? 'N/A'} €/kW</span>
        <strong class="mx-1">vs</strong>
        <i class="bi bi-lightning-fill text-primary"></i> <strong class="fw-normal">ELEGA P1:</strong>
        <span class="mx-1">${sondeo.elega_precio_potencia_p1 ?? 'N/A'} €/kW</span>
    </p>
    <p class="mb-1  d-flex align-items-center"
       style="white-space: nowrap; overflow: hidden; ">
        <i class="bi bi-lightning-fill text-primary"></i> <strong class="fw-normal">Precio Potencia P2:</strong>
        <span class="mx-1">${sondeo.precio_potencia_p2 ?? 'N/A'} €/kW</span>
        <strong class="mx-1">vs</strong>
        <i class="bi bi-lightning-fill text-primary"></i> <strong class="fw-normal">ELEGA P2:</strong>
        <span class="mx-1">${sondeo.elega_precio_potencia_p2 ?? 'N/A'} €/kW</span>
    </p>
</div>




                        <hr class="my-2 border-secondary">
                        <div class="col-md-6">
                            <p class="mb-1" style="white-space: nowrap; ">
                                <i class="bi bi-lightbulb text-info"></i>
                                <strong>Precio Energía P1:</strong> ${sondeo.precio_energia_p1 ?? 'N/A'} €/kWh
                            </p>
                            <p class="mb-1" style="white-space: nowrap;">
                                <i class="bi bi-lightbulb text-info"></i>
                                <strong>Precio Energía P2:</strong> ${sondeo.precio_energia_p2 ?? 'N/A'} €/kWh
                            </p>
                            <p class="mb-1" style="white-space: nowrap;">
                                <i class="bi bi-lightbulb text-info"></i>
                                <strong>Precio Energía P3:</strong> ${sondeo.precio_energia_p3 ?? 'N/A'} €/kWh
                            </p>
                        </div>
                        <hr class="my-2 border-secondary">
                    </div>
                    <p class="mt-2"><i class="bi bi-wallet-fill text-info"></i>
                    <strong>Cuota de Gestión:</strong> ${sondeo.cuota_gestion ?? 'N/A'} €/mes</p>
                    <p class="mt-2"><i class="bi bi-shield-lock-fill text-primary"></i>
                    <strong>Permanencia:</strong> ${sondeo.permanencia ?? 'N/A'} meses</p>
                    <p class="mt-2"><i class="bi bi-chat-left-text-fill text-secondary"></i>
                    <strong>Observaciones:</strong> ${sondeo.observaciones ?? 'No hay observaciones'}</p>
                </div>
            </div>
        </div>
        ${index < com.productos.length - 1 ? '<hr class="my-3 border-secondary">' : ''}
        `; // Línea separadora entre bloques, excepto después del último
    }).join("") : `<p class="text-muted">No hay tarifas registradas.</p>`}
</div>
                        </div>
                    </div>

                    <!-- 🎛️ Botones -->
                    <div class="d-flex justify-content-between p-3">
                        <button class="btn btn-sm edit px-3"
                                data-id="${com.id}"
                                data-nombre="${com.nombre}"
                                data-descripcion="${com.descripcion}"
                                data-tipo="${com.tipo}"
                                style="background-color: #5cb85c; color: white; border-radius: 20px; transition: 0.3s;">
                            <i class="bi bi-pencil-square"></i> Editar
                        </button>


                        <button class="btn btn-sm btn-outline-primary verGrafica"
        data-id="${com.id}">
    <i class="bi bi-bar-chart-line"></i> Ver Gráfica
</button>


                        <button class="btn btn-sm delete px-3"
                                data-id="${com.id}"
                                style="background-color: #d9534f; color: white; border-radius: 20px; transition: 0.3s;">
                            <i class="bi bi-trash-fill"></i> Eliminar
                        </button>
                    </div>
                </div>
            </div>`;
        });

        html += `</div>`; // 🟢 Cierra la última fila

        document.getElementById("comercializadorasContainer").innerHTML = html;

        // 🗑️ Agregar evento para eliminar tarifa
        document.querySelectorAll(".delete-tarifa").forEach(button => {
            button.addEventListener("click", function () {
                let tarifaId = this.getAttribute("data-id");

                Swal.fire({
                    title: "¿Eliminar esta tarifa?",
                    text: "Esta acción no se puede deshacer.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Sí, eliminar",
                    cancelButtonText: "Cancelar"
                }).then(async (result) => {
                    if (result.isConfirmed) {
                        let deleteResponse = await fetch(`{{ route('productos.destroy', '') }}/${tarifaId}`, {
                            method: "DELETE",
                            headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" }
                        });

                        if (deleteResponse.ok) {
                            Swal.fire("Eliminado", "La tarifa ha sido eliminada.", "success");
                            loadComercializadoras();
                        } else {
                            Swal.fire("Error", "No se pudo eliminar la tarifa.", "error");
                        }
                    }
                });
            });
        });


  // Agregar evento para mostrar/ocultar tarifas individuales
  document.querySelectorAll(".tarifa-toggle").forEach(btn => {
            btn.addEventListener("click", function () {
                let tarifaContent = this.parentElement.nextElementSibling;
                let icon = this.querySelector(".icon-toggle");

                document.querySelectorAll(".tarifa-content").forEach(content => {
                    if (content !== tarifaContent) {
                        content.classList.remove("show");
                    }
                });

                document.querySelectorAll(".icon-toggle").forEach(i => {
                    if (i !== icon) {
                        i.classList.replace("bi-chevron-down-circle-fill", "bi-chevron-right-circle-fill");
                    }
                });

                tarifaContent.classList.toggle("show");
                icon.classList.toggle("bi-chevron-down-circle-fill");
                icon.classList.toggle("bi-chevron-right-circle-fill");
            });
        });

    } catch (error) {
        console.error("Error cargando comercializadoras:", error);
    }
}


document.addEventListener("DOMContentLoaded", function () {
    loadComercializadoras();
});








document.addEventListener("click", function (event) {
    if (event.target.classList.contains("edit")) {
        let id = event.target.getAttribute("data-id");
        let nombre = event.target.getAttribute("data-nombre");
        let descripcion = event.target.getAttribute("data-descripcion") || "";
        let tipo = event.target.getAttribute("data-tipo");
        let url = event.target.getAttribute("data-url") || ""; // Obtiene la URL (si está disponible)

        document.getElementById("edit_id").value = id;
        document.getElementById("edit_nombre").value = nombre;
        document.getElementById("edit_descripcion").value = descripcion;
        document.getElementById("edit_tipo").value = tipo;
        document.getElementById("edit_url").value = url; // Asigna la URL al campo correspondiente

        let modal = new bootstrap.Modal(document.getElementById("modalEditar"));
        modal.show();
    }
});


document.getElementById("guardarEdicion").addEventListener("click", async function () {
    let id = document.getElementById("edit_id").value;
    let nombre = document.getElementById("edit_nombre").value.trim();
    let descripcion = document.getElementById("edit_descripcion").value.trim();
    let tipo = document.getElementById("edit_tipo").value;
    let url = document.getElementById("edit_url").value.trim(); // Captura el valor de la URL

    if (!nombre) {
        Swal.fire("Error", "El nombre es obligatorio.", "error");
        return;
    }

    try {
        let response = await fetch(`{{ route('comercializadoras.update', ':id') }}`.replace(':id', id), {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ nombre, descripcion, tipo, url }) // Enviamos la URL en la petición
        });

        if (response.ok) {
            Swal.fire("¡Actualizado!", "Comercializadora editada con éxito.", "success");
            let modal = bootstrap.Modal.getInstance(document.getElementById("modalEditar"));
            modal.hide();
            loadComercializadoras();
        } else {
            Swal.fire("Error", "No se pudo actualizar la comercializadora.", "error");
        }
    } catch (error) {
        console.error("Error al actualizar comercializadora:", error);
        Swal.fire("Error", "No se pudo conectar con el servidor.", "error");
    }
});








            document.getElementById("productoSelect").addEventListener("change", function () {
    let nuevoProductoInput = document.getElementById("nuevoProducto");

    if (this.value === "nuevo") {
        nuevoProductoInput.classList.remove("d-none");
        nuevoProductoInput.setAttribute("required", "true");
    } else {
        nuevoProductoInput.classList.add("d-none");
        nuevoProductoInput.removeAttribute("required");
    }
});



            /** 📌 2. Guardar Nueva Comercializadora */
            document.getElementById("guardar").addEventListener("click", async function () {
                let nombre = document.getElementById("nombre").value.trim();
                let descripcion = document.getElementById("descripcion").value.trim();
                let tipo = document.getElementById("tipo").value;

                if (!nombre) {
                    Swal.fire("Error", "El nombre es obligatorio.", "error");
                    return;
                }

                try {
                    let response = await fetch("{{ route('comercializadoras.store') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({ nombre, descripcion, tipo })
                    });

                    if (response.ok) {
                        Swal.fire("¡Guardado!", "Comercializadora agregada con éxito.", "success");

                        // Cerrar modal correctamente
                        let modal = bootstrap.Modal.getInstance(document.getElementById("modalAgregar"));
                        modal.hide();

                        // Limpiar formulario
                        document.getElementById("nombre").value = "";
                        document.getElementById("descripcion").value = "";
                        document.getElementById("tipo").value = "libre";

                        // Recargar listas
                        loadComercializadoras();
                        loadComercializadorasSelect();
                    } else {
                        Swal.fire("Error", "No se pudo guardar la comercializadora.", "error");
                    }
                } catch (error) {
                    console.error("Error al guardar comercializadora:", error);
                    Swal.fire("Error", "No se pudo conectar con el servidor.", "error");
                }
            });

            /** 📌 3. Eliminar Comercializadora */
            document.addEventListener("click", async function (event) {
                if (event.target.classList.contains("delete")) {
                    let id = event.target.getAttribute("data-id");

                    Swal.fire({
                        title: "¿Eliminar comercializadora?",
                        text: "Esta acción no se puede deshacer.",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonText: "Sí, eliminar",
                        cancelButtonText: "Cancelar"
                    }).then(async (result) => {
                        if (result.isConfirmed) {
                            try {
                                let response = await fetch(`{{ url('/comercializadoras') }}/${id}`, {
                                    method: "DELETE",
                                    headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" }
                                });

                                if (response.ok) {
                                    Swal.fire("Eliminado", "Comercializadora eliminada con éxito.", "success");
                                    loadComercializadoras();
                                    loadComercializadorasSelect();
                                } else {
                                    Swal.fire("Error", "No se pudo eliminar.", "error");
                                }
                            } catch (error) {
                                console.error("Error al eliminar:", error);
                            }
                        }
                    });
                }
            });

            /** 📌 4. Cargar Comercializadoras en Select */
            async function loadComercializadorasSelect() {
                try {
                    let response = await fetch("{{ route('comercializadoras.list') }}");
                    let data = await response.json();

                    let select = document.getElementById("comercializadoraSelect");
                    select.innerHTML = '<option value="">Seleccione una Comercializadora</option>';

                    data.forEach(com => {
                        select.innerHTML += `<option value="${com.id}">${com.nombre}</option>`;
                    });

                } catch (error) {
                    console.error("Error cargando comercializadoras en select:", error);
                }
            }

                // Cargar productos según la comercializadora seleccionada
                document.getElementById("comercializadoraSelect").addEventListener("change", async function () {
    let comercializadoraId = this.value;
    let productoSelect = document.getElementById("productoSelect");
    productoSelect.innerHTML = '<option value="">Seleccione un Producto</option>';

    if (comercializadoraId) {
        try {
            let response = await fetch(`{{ route('productos.list', ':id') }}`.replace(':id', comercializadoraId));
            let data = await response.json();

            Object.entries(data).forEach(([id, nombre]) => {
                productoSelect.innerHTML += `<option value="${id}">${nombre}</option>`; // Aquí enviamos el ID
            });

            productoSelect.innerHTML += `<option value="nuevo">Nuevo Producto</option>`;
        } catch (error) {
            console.error("Error cargando productos:", error);
        }
    }
});

// 📌 Mostrar input si se elige "Nuevo Producto"
document.getElementById("productoSelect").addEventListener("change", function () {
    let nuevoProductoInput = document.getElementById("nuevoProducto");
    nuevoProductoInput.classList.toggle("d-none", this.value !== "nuevo");
});


document.getElementById("guardarSondeo").addEventListener("click", async function () {
    let productoSelect = document.getElementById("productoSelect");
    let nuevoProductoInput = document.getElementById("nuevoProducto");

    let productoId = productoSelect.value !== "nuevo" ? productoSelect.value : null;
    let productoNombre = productoSelect.value === "nuevo" ? nuevoProductoInput.value.trim() : null;

    if (!productoId && !productoNombre) {
        Swal.fire("Error", "Debe seleccionar o ingresar un producto.", "error");
        return;
    }

    let datos = {
        comercializadora_id: document.getElementById("comercializadoraSelect").value,
        producto_id: productoId,
        producto_nombre: productoNombre,
        precio_potencia_p1: document.getElementById("precio_potencia_p1").value || 0,
        precio_potencia_p2: document.getElementById("precio_potencia_p2").value || 0,
        elega_precio_potencia_p1: document.getElementById("elega_precio_potencia_p1").value || 0,
        elega_precio_potencia_p2: document.getElementById("elega_precio_potencia_p2").value || 0,
        precio_energia_p1: document.getElementById("precio_energia_p1").value || 0,
        precio_energia_p2: document.getElementById("precio_energia_p2").value || 0,
        precio_energia_p3: document.getElementById("precio_energia_p3").value || 0,
        cuota_gestion: document.getElementById("cuota_gestion").value || "N/A",
        permanencia: document.getElementById("permanencia").value || "N/A",
        observaciones: document.getElementById("observaciones").value || "Sin observaciones"
    };

    console.log("📌 Datos enviados:", datos); // 🚀 Verifica en consola

    try {
        let response = await fetch("{{ route('sondeos.store') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
            },
            body: JSON.stringify(datos)
        });

        let result = await response.json();

        if (response.ok) {
            console.log("✅ Producto ID recibido:", result.producto_id);
            Swal.fire("¡Guardado!", "Sondeo agregado con éxito.", "success").then(() => {
                window.location.href = "{{ route('comercializadoras.index') }}"; // 🔄 Redirigir después de guardar
            });
        } else {
            console.log("❌ Error en el servidor:", result);
            Swal.fire("Error", result.error || "Hubo un problema al guardar.", "error");
        }
    } catch (error) {
        console.error("❌ Error al guardar sondeo:", error);
        Swal.fire("Error", "No se pudo conectar con el servidor.", "error");
    }
});



//let response = await fetch(`{{ route('comercializadoras.historico', ':id') }}`.replace(':id', id));
const routeProductos = "{{ route('comercializadoras.productos', ':id') }}";
const routeHistoricoProducto = "{{ route('productos.historico', ':id') }}";

document.addEventListener("click", async function (event) {
    if (event.target.classList.contains("verGrafica")) {
        let comercializadoraId = event.target.getAttribute("data-id");


        try {
            // 🟢 Obtener los productos de la comercializadora con `route()`
            let response = await fetch(routeProductos.replace(':id', comercializadoraId));
            let productos = await response.json();

            if (productos.length === 0) {
                Swal.fire("Información", "No hay productos disponibles para esta comercializadora.", "info");
                return;
            }

            // 🟢 Llenar el select con los productos
            let selectProducto = document.getElementById("productoGrafica");
            selectProducto.innerHTML = '<option value="">Seleccione un producto...</option>'; // Limpiar opciones anteriores

            productos.forEach(producto => {
                let option = document.createElement("option");
                option.value = producto.id;
                option.textContent = producto.nombre;
                selectProducto.appendChild(option);
            });

            // 🟢 Mostrar el modal
            let modal = new bootstrap.Modal(document.getElementById("modalGrafica"));
            modal.show();

        } catch (error) {
            console.error("Error al cargar productos:", error);
            Swal.fire("Error", "No se pudieron obtener los productos.", "error");
        }
    }
});


document.getElementById("modalGrafica").addEventListener("hidden.bs.modal", function () {
    if (window.miGrafica) {
        window.miGrafica.destroy(); // Destruye la gráfica existente
        window.miGrafica = null;    // Limpia la referencia
    }
});



document.getElementById("productoGrafica").addEventListener("change", async function () {
    let productoId = this.value;

    if (!productoId) return;

    try {
        // 🟢 Obtener el histórico de tarifas del producto con `route()`
        let response = await fetch(routeHistoricoProducto.replace(':id', productoId));
        let data = await response.json();

        if (data.length === 0) {
            Swal.fire("Información", "No hay datos históricos disponibles para este producto.", "info");
            return;
        }

        console.log("Datos recibidos:", data);

        // 🔹 Ordenamos los datos por fecha (de más antiguo a más reciente)
        data.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));

        // 🔹 Convertimos fechas a formato legible
        let fechas = data.map(d => new Date(d.created_at).toLocaleDateString());

        // 🔹 Convertimos los valores de texto a números
        let precios = {
            "Precio P1 (€ / kW)": data.map(d => parseFloat(d.precio_potencia_p1)),
            "Precio P2 (€ / kW)": data.map(d => parseFloat(d.precio_potencia_p2)),
            "ELEGA P1 (€ / kW)": data.map(d => parseFloat(d.elega_precio_potencia_p1)),
            "ELEGA P2 (€ / kW)": data.map(d => parseFloat(d.elega_precio_potencia_p2)),
            "Precio Energía P1 (€ / kWh)": data.map(d => parseFloat(d.precio_energia_p1)),
            "Precio Energía P2 (€ / kWh)": data.map(d => parseFloat(d.precio_energia_p2)),
            "Precio Energía P3 (€ / kWh)": data.map(d => parseFloat(d.precio_energia_p3))
        };

        let ctx = document.getElementById("graficaTarifas").getContext("2d");

        // ✅ 🟢 SOLUCIÓN: Destruir la gráfica anterior si existe
        if (window.miGrafica) {
            window.miGrafica.destroy();
        }

        // ✅ Crear la nueva gráfica y almacenarla en `window.miGrafica`
        window.miGrafica = new Chart(ctx, {
            type: "bar",
            data: {
                labels: fechas,
                datasets: Object.keys(precios).map((key, index) => ({
                    label: key,
                    data: precios[key],
                    backgroundColor: ["blue", "red", "green", "purple", "orange", "cyan"][index]
                }))
            },
            options: {
    responsive: true,
    plugins: {
        legend: { position: "top" },
        tooltip: {
            callbacks: {
                label: function(tooltipItem) {
                    let label = tooltipItem.dataset.label || "";
                    let value = tooltipItem.raw;

                    return `${label}: ${parseFloat(value).toFixed(6)} €`; // ✅ Siempre 6 decimales
                }
            }
        }
    },
    scales: {
        x: { title: { display: true, text: "Fecha" } },
        y: {
            title: { display: true, text: "Precio (€)" },
            ticks: {
                callback: function(value) {
                    return parseFloat(value).toFixed(3); // ✅ Asegura 6 decimales en el eje Y
                },
                stepSize: 0.000001, // ✅ Evita el redondeo automático de valores pequeños
                precision: 6
            }
        }
    }
}
        });

    } catch (error) {
        console.error("Error al cargar datos históricos:", error);
        Swal.fire("Error", "No se pudo obtener el historial de tarifas.", "error");
    }
});






        });
    </script>

@endsection