@extends('layouts.app')
@section('content')
    @php
        function arrayToRangeString($array)
        {
            if (empty($array)) {
                return '';
            }

            // Ordenar el array
            sort($array);

            $result = [];
            $start = $array[0];
            $end = $start;

            for ($i = 1; $i <= count($array); $i++) {
                if (isset($array[$i]) && $array[$i] == $end + 1) {
                    $end = $array[$i];
                } else {
                    if ($start == $end) {
                        $result[] = "$start";
                    } else {
                        $result[] = "$start-$end";
                    }
                    if (isset($array[$i])) {
                        $start = $array[$i];
                        $end = $start;
                    }
                }
            }

            return implode(', ', $result);
        }

    @endphp

    <style>
        #zoom-image {
            user-select: none;
        }

        .point {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            padding: 3px;
        }
    </style>

    <div class="row p-3 border-bottom">
        <a href="{{ Route('customer.edit', ['id' => $floorplan->customer->id, 'type' => $type, 'section' => 8]) }}"
            class="col-auto btn-primary p-0 fs-3"><i class="bi bi-arrow-left m-3"></i></a>
        <h1 class="col-auto fs-2 fw-bold m-0">{{ __('customer.floorplan.title.print') }}: {{ $floorplan->customer->name }}
        </h1>
    </div>

    <div class="container-fluid">
        <div class="p-3">
            <div class="row">
                <div class="col-6 mb-3">
                    <label class="form-label" for="font-family">Versión del plano:</label>
                    <div class="input-group">
                        <select class="form-select " id="version" name="version">
                            @foreach ($floorplan->versions as $floorVersion)
                                <option value="{{ $floorVersion->version }}">
                                    {{ $floorVersion->version }} -
                                    ({{ $floorVersion->created_at }})
                                </option>
                            @endforeach
                        </select>
                        <button class="btn btn-success" type="button" onclick="searchVersion()">Buscar</button>
                    </div>
                </div>
                <div class="col mb-3">
                    <label class="form-label" for="font-family">Estilo de letra:</label>
                    <select class="form-select" id="font-family" onchange="updateTextStyle()">
                        <option value="Helvetica" selected>Helvetica</option>
                        <option value="Times">Times</option>
                        <option value="Courier">Courier</option>
                    </select>
                </div>
                <div class="col mb-3">
                    <label class="form-label" for="font-family">Color del texto:</label>
                    <input class="form-control form-control-color" type="color" id="font-color" value="#000000"
                        onchange="updateTextStyle()" />
                </div>
            </div>
            <div class="row">
                <div class="col mb-3">
                    <label class="form-label">Nombre del plano</label>
                    <input type="text" class="form-control bg-secondary-subtle" id="floorplan-name" value="{{ $floorplan->filename }}"
                        readonly>
                </div>
                <div class="col mb-3">
                    <label class="form-label">Servicio</label>
                    <input type="text" class="form-control bg-secondary-subtle" id="floorplan-service" value="{{ $legend['service'] }}"
                        readonly>
                </div>
                <div class="col mb-3">
                    <label class="form-label">Fecha de actualizacion</label>
                    <input type="text" class="form-control bg-secondary-subtle" id="floorplan-update" value="{{ $legend['date_version'] }}"
                        readonly>
                </div>
                <div class="col-auto mb-3">
                    <label class="form-label">Cantidad de dispositivos</label>
                    <input type="text" class="form-control bg-secondary-subtle" id="floorplan-count" value="{{ $legend['count'] }}" readonly>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Color</th>
                            <th>Nombre</th>
                            <th>Código</th>
                            <th>Cantidad</th>
                            <th>Rangos</th>
                        </tr>
                    </thead>
                    <tbody id="legend-table-body">
                        @foreach ($legend['data'] as $data)
                            <tr>
                                <td>
                                    <div class="rounded"
                                        style="width:25px; height: 25px; background-color: {{ htmlspecialchars($data['color']) }};">
                                    </div>
                                </td>
                                <td>{{ $data['label'] }}</td>
                                <td>{{ $data['code'] }}</td>
                                <td>{{ $data['count'] }}</td>
                                <td>{{ arrayToRangeString($data['numbers']) }}</td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            <button id="print-button" class="btn btn-primary mb-3" onclick="generateImage();">Generar PDF</button>
        </div>
    </div>

    <script>
        const floorplan = @json($floorplan);
        const img_sizes = @json($img_sizes);
        const img_src = "{{ route('image.show', ['path' => $floorplan->path]) }}";
        const logo_src = "{{ asset('images/logo.png') }}";
        var devices = @json($devices);
        var legend = @json($legend);
        var points = [];
        var stepX = 0;
        var stepY = 0;
        var font_family = 'Helvetica';
        var font_size = '';
        var font_color = '';

        $(document).ready(function() {
            setDevices();
        });

        function updateTextStyle() {
            font_family = $('#font-family').val();
            fontSize = $('#font-size').val() + 'px';
            font_color = $('#font-color').val();
        }

        function formatDate(isoDate) {
            const date = new Date(isoDate);
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear();
            return `${day}-${month}-${year}`;
        }

        function setDevices() {
            if (devices) {
                devices.forEach(device => {
                    count = device.nplan;
                    index = device.itemnumber;
                    addPoint(
                        device.map_x,
                        device.map_y,
                        device.type_control_point_id,
                        device.application_area_id,
                        device.product_id,
                        device.color,
                        device.code
                    );
                });
            }
        }

        function addPoint(x, y, pointId, areaId, productId, color, code) {
            var newPoint = {
                index: index,
                point_id: pointId,
                area_id: areaId,
                product_id: productId,
                color: color,
                code: code,
                x: x,
                y: y,
                img_tamx: 0,
                img_tamy: 0,
                count: count,
            };
            points.push(newPoint);
        }

        async function generateImage() {

            try {
                const imageData = await loadImage(img_src);
                const img = new Image();
                img.src = imageData;

                img.onload = async function() {
                    const imgWidth = img.width;
                    const imgHeight = img.height;
                    const headerHeight = 120;
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    const canvasWidth = img_sizes[0] > img_sizes[1] ? 1100 : 800;
                    const canvasHeight = img_sizes[0] > img_sizes[1] ? 800 : 1100;

                    const orientation = canvasWidth > canvasHeight ? 'landscape' : 'portrait';
                    const columnWidth = orientation == 'landscape' ? 100 : 400;

                    const x = 10;
                    const y = 60;
                    const width = canvasWidth / 2.2;
                    const height = canvasHeight / 2.2;

                    canvas.width = canvasWidth;
                    canvas.height = canvasHeight;

                    ctx.drawImage(img, 0, 0, imgWidth, imgHeight, 0, 0, canvasWidth, canvasHeight);

points.forEach(point => {
    const pointRadius = 8;  // Radio del punto
    const scaledX = point.x + 5;
    const scaledY = point.y + 5;

    // 1. Dibujar el punto (círculo)
    ctx.fillStyle = point.color || '#000';
    ctx.beginPath();
    ctx.arc(scaledX, scaledY, pointRadius, 0, Math.PI * 2, true);
    ctx.fill();

    // 2. Configurar el texto (centrado perfecto)
    ctx.font = 'bold 8px Helvetica';
    ctx.fillStyle = getContrastColor(point.color || '#000');  // Color blanco para contraste
    ctx.textAlign = 'center';  // Centrado horizontal
    ctx.textBaseline = 'middle';  // ¡Clave! Centrado vertical

    // 3. Dibujar el texto EN EL MISMO CENTRO que el punto
    ctx.fillText(point.count.toString(), scaledX, scaledY);
});

                    const imageURL = canvas.toDataURL('image/png');
                    const {
                        jsPDF
                    } = window.jspdf;

                    const pdf = new jsPDF({
                        orientation: orientation,
                        unit: 'px'
                    });
                    
                    const pdf_name = legend.customer + '_Dispositivos_Plano-' + floorplan.filename + '.pdf'

                    addHeaderWithLegend(pdf, headerHeight);

                    pdf.setLineWidth(1);
                    pdf.setDrawColor(0, 0, 0);
                    pdf.rect(x, y, width, height);

                    pdf.addImage(imageURL, 'PNG', x, y, width, height);
                    stepX = orientation == 'landscape' ? x + width + 5 : x;
                    stepY = orientation == 'landscape' ? y : y + height + 10;
                    if (points.length > 0) {
                        drawLegend(pdf, columnWidth, canvasHeight);
                    }

                    const pdfBlob = new Blob([pdf.output("arraybuffer")], {
                        type: "application/pdf"
                    });

                    // Comprimir PDF
                    const compressedBlob = await compressPDF(pdfBlob);

                    // Descargar PDF comprimido
                    const link = document.createElement("a");
                    link.href = URL.createObjectURL(compressedBlob);
                    link.download = pdf_name;
                    link.click();
                };
            } catch (error) {
                console.error('Error al generar la imagen:', error);
            }
        }

        async function compressPDF(pdfBlob) {
            const {
                PDFDocument
            } = window.PDFLib;
            const pdfDoc = await PDFDocument.load(await pdfBlob.arrayBuffer());

            // Opcional: Agregar metadatos optimizados
            pdfDoc.setTitle("Archivo PDF optimizado");
            pdfDoc.setProducer("pdf-lib Compression");

            // Guardar PDF comprimido
            const compressedBytes = await pdfDoc.save({
                useObjectStreams: true
            });
            return new Blob([compressedBytes], {
                type: "application/pdf"
            });
        }

        function addHeaderWithLegend(pdf, headerHeight) {
            const padding = 10;
            const logoWidth = 130; // Ancho del logo
            const logoHeight = 40; // Alto del logo
            const legendStartX = padding * 2 + logoWidth + 10;
            const maxWidth = pdf.internal.pageSize.width - legendStartX - padding;
            const lineHeight = 10;
            const columnWidth = 100;
            let startY = padding;
            let legendX = legendStartX;
            let legendY = startY;

            pdf.setTextColor(font_color);

            pdf.addImage(logo_src, 'PNG', padding, startY, logoWidth, logoHeight);
            pdf.setFont(font_family, 'bold');
            pdf.setFontSize(16);

            const filenameLines = pdf.splitTextToSize(legend.customer, maxWidth);
            filenameLines.forEach((line, index) => {
                pdf.text(line, legendX, startY + lineHeight);
            });
            legendY = startY + filenameLines.length + 10;

            // Nombre del cliente
            pdf.setFontSize(10);
            pdf.setFont(font_family, 'normal');
            const customerNameLines = pdf.splitTextToSize(floorplan.filename, maxWidth);
            customerNameLines.forEach((line, index) => {
                pdf.text(line, legendX, legendY + lineHeight);
            });
            legendY += customerNameLines.length * lineHeight + 10;

            // Fecha actual
            const today = new Date();
            pdf.text(`Fecha de actualización: ${legend.date_version}`, legendX, legendY);
            legendY += 10;

            pdf.text(`Cantidad de dispositivos: ${legend.count}`, legendX, legendY);
            legendY += 10;
        }

        function drawLegend(pdf, columnWidth, maxY, lineHeight = 8) {
    let legendX = stepX;
    let legendY = stepY;

    const groupedPoints = groupByColorAndCode(points);

    pdf.setFont(font_family, 'bold');
    pdf.text(`Simbología`, legendX, legendY);
    legendY += 10;

    Object.keys(groupedPoints).forEach((key) => {
        const group = groupedPoints[key];
        const color = group[0].color || '#000';
        const code = group[0].code || 'Sin código';
        const legendData = legend['data'].find(item => item.color == key);
        const ranges = arrayToRangeString(legendData.numbers);
        const label = `${legendData.label} (${code.replace(/-\d+$/, '')}) - Puntos totales: ${legendData.numbers.length} - Rango(s): ${ranges}`;

        // Dividir el texto para que no se salga del área disponible
        const lines = pdf.splitTextToSize(label, columnWidth);

        // Comprobar si el texto cabe en el espacio restante
        if (legendY + lines.length * lineHeight > maxY) {
            // Si no cabe, solo movemos el `legendY` a una nueva línea dentro de la misma columna
            legendY = stepY; // Reiniciar a la posición superior de la misma columna
        }

        // Dibujar el punto de color
        pdf.setFillColor(color);
        pdf.circle(legendX + 5, legendY, 3, 'F');

        // Imprimir cada línea del texto en la misma columna
        pdf.setFont(font_family, 'normal');
        pdf.setFillColor('#000');
        lines.forEach((line, index) => {
            pdf.text(line, legendX + 10, legendY + 3 + index * lineHeight);
        });

        // Ajustar `legendY` para la siguiente entrada
        legendY += lineHeight * lines.length + 5;
    });
}

        function arrayToRangeString(array) {
            if (!array || array.length == 0) return '';

            array.sort((a, b) => a - b);
            let result = [];
            let start = array[0];
            let end = start;

            for (let i = 1; i <= array.length; i++) {
                if (array[i] == end + 1) {
                    end = array[i];
                } else {
                    if (start == end) {
                        result.push(`${start}`);
                    } else {
                        result.push(`${start}-${end}`);
                    }
                    start = array[i];
                    end = start;
                }
            }

            return result.join(', ');
        }

        function groupByColorAndCode(points) {
            return points.reduce((acc, point) => {
                const key = `${point.color}`;
                if (!acc[key]) {
                    acc[key] = [];
                }
                acc[key].push(point);
                return acc;
            }, {});
        }

        function loadImage(src) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = function() {
                    const canvas = document.createElement('canvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0);
                    resolve(canvas.toDataURL('image/jpeg'));
                };
                img.onerror = reject;
                img.src = src;
            });
        }

        function searchVersion() {
            var formData = new FormData();
            var csrfToken = $('meta[name="csrf-token"]').attr("content");
            var version = $('#version').val();

            formData.append('version', version);
            $.ajax({
                url: "{{ route('floorplans.search.device.version', ['id' => $floorplan->id]) }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    "X-CSRF-TOKEN": csrfToken,
                },
                success: function(response) {
                    points = [];
                    legend = response.legend;
                    devices = response.devices;
                    $('#floorplan-update').val(legend.date_version);
                    $('#floorplan-count').val(legend.count);

                    setDevices();
                    paintLegendRows()
                },
                error: function(xhr, status, error) {
                    console.error('Error in AJAX request:', status, error);
                }
            });
        }

        function paintLegendRows() {
            var html = '';
            legend.data.forEach(data => {
                html += `
                    <tr>
                        <td>
                            <div class="rounded"
                                style="width:25px; height: 25px; background-color: ${data['color']};">
                            </div>
                        </td>
                        <td>${ data['label'] }</td>
                        <td>${ data['code'] }</td>
                        <td>${ data['count'] }</td>
                        <td>${ arrayToRangeString(data['numbers']) }</td>
                    </tr>
                `
            })
            
            $('#legend-table-body').html(html);
        }
        
        function getContrastColor(hexColor) {
    // Convierte color HEX a RGB
    const r = parseInt(hexColor.substr(1, 2), 16) / 255;
    const g = parseInt(hexColor.substr(3, 2), 16) / 255;
    const b = parseInt(hexColor.substr(5, 2), 16) / 255;
    
    // Fórmula de luminancia (estándar WCAG)
    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    
    // Retorna blanco para fondos oscuros, negro para claros
    return luminance > 0.5 ? '#000000' : '#FFFFFF';
}
    </script>
@endsection