@extends('layouts.app')

@section('title', 'Generador de Codigo de Barras')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/barcode-generator.css') }}">
@endpush

@section('content')
    <div class="barcode-generator-shell">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-4">
            <div>
                <h1 class="h3 mb-1">Generador de Codigo de Barras</h1>
                <p class="text-muted-brand mb-0">Seleccione un bien con codigo ABS para generar su etiqueta.</p>
            </div>
            <div>
                <a href="{{ route('administracion.index') }}" class="btn btn-outline-secondary">Volver a administracion</a>
            </div>
        </div>

        <div class="barcode-card p-4 p-md-5">
            <form method="GET" action="{{ route('administracion.barcode-generator') }}" class="mb-4" autocomplete="off">
                <div class="d-flex flex-column flex-lg-row align-items-stretch gap-2">
                    <div class="flex-grow-1">
                        <label for="bienSearch" class="form-label fw-semibold">Buscar bien<span class="text-danger"> *</span></label>
                        <input
                            type="search"
                            id="bienSearch"
                            class="form-control"
                            list="bienesList"
                            autocomplete="off"
                            placeholder="Escriba descripcion o codigo ABS">
                        <input type="hidden" name="bien" id="bien" value="{{ $selectedBien?->id }}" autocomplete="off">
                        <datalist id="bienesList">
                            @foreach ($bienes as $bien)
                                <option
                                    value="{{ $bien->descripcion }}"
                                    data-id="{{ $bien->id }}"
                                    data-codigo="{{ $bien->codigo }}"
                                    data-descripcion="{{ $bien->descripcion }}"
                                    data-tipo="{{ $bien->tipo_nombre ?: 'Sin tipo' }}"
                                    data-unidad="{{ $bien->unidad ?: 'Sin unidad' }}"
                                    data-peso="{{ number_format((float) ($bien->peso ?? 0), 3, ',', '.') }} kg"
                                    data-barcode-url="{{ route('administracion.barcode-generator.barcode', $bien) }}"
                                    @selected(optional($selectedBien)->id === $bien->id)></option>
                            @endforeach
                        </datalist>
                        <div class="barcode-search-hint">Solo se muestran los bienes con codigo ABS.</div>
                    </div>
                    {{-- Botón Abrir PNG eliminado por ser innecesario --}}
                </div>
            </form>

            @if ($selectedBien)
                <div class="barcode-preview">
                    <div class="barcode-stack">
                        <div>
                            @if (! empty($barcodeSvg))
                                <div id="barcodeRender" class="barcode-render" role="img" aria-label="Codigo de barras {{ $barcodeValue }}">
                                    <img
                                        id="barcodeImage"
                                        class="barcode-image"
                                        src="{{ route('administracion.barcode-generator.barcode', $selectedBien) }}"
                                        alt="Codigo de barras {{ $barcodeValue }}">
                                </div>
                                <div id="barcodeCode" class="barcode-code">{{ $barcodeValue }}</div>
                                <div id="barcodeEmptyState" class="barcode-empty-state">Seleccione el bien para generar el codigo de barras</div>
                            @else
                                <div class="text-muted-brand">No se pudo generar el codigo de barras para este bien.</div>
                            @endif
                        </div>

                        <div class="barcode-meta">
                            <div class="barcode-meta-item">
                                <div class="barcode-meta-label">Descripcion</div>
                                <div id="barcodeDescripcion" class="barcode-meta-value">{{ $selectedBien->descripcion }}</div>
                            </div>
                            <div class="barcode-meta-item">
                                <div class="barcode-meta-label">Codigo</div>
                                <div id="barcodeCodigo" class="barcode-meta-value">{{ $selectedBien->codigo }}</div>
                            </div>
                            <div class="barcode-meta-item">
                                <div class="barcode-meta-label">Tipo</div>
                                <div id="barcodeTipo" class="barcode-meta-value">{{ $selectedBien->tipo_nombre ?: 'Sin tipo' }}</div>
                            </div>
                            <div class="barcode-meta-item">
                                <div class="barcode-meta-label">Unidad</div>
                                <div id="barcodeUnidad" class="barcode-meta-value">{{ $selectedBien->unidad ?: 'Sin unidad' }}</div>
                            </div>
                            <div class="barcode-meta-item">
                                <div class="barcode-meta-label">Peso</div>
                                <div id="barcodePeso" class="barcode-meta-value">{{ number_format((float) ($selectedBien->peso ?? 0), 3, ',', '.') }} kg</div>
                            </div>
                        </div>

                        <div class="barcode-actions justify-content-center">
                            <button type="button" id="printBarcodeButton" class="btn btn-primary">Imprimir {{ $copias }} etiquetas</button>
                        </div>
                    </div>
                </div>

                <div id="barcodePrintSheet" class="barcode-print-sheet" aria-hidden="true">
                    <div class="barcode-print-grid">
                        @for ($copy = 1; $copy <= $copias; $copy++)
                            <div class="barcode-print-item">
                                <div class="barcode-print-description">{{ $selectedBien->descripcion }}</div>
                                <img
                                    class="barcode-print-image"
                                    src="{{ route('administracion.barcode-generator.barcode', $selectedBien) }}"
                                    alt="Codigo de barras {{ $barcodeValue }} copia {{ $copy }}">
                                <div class="barcode-print-code">{{ $barcodeValue }}</div>
                            </div>
                        @endfor
                    </div>
                </div>
            @else
                <div class="text-muted-brand">No hay bienes con codigo ABS disponibles.</div>
            @endif
        </div>
    </div>

    @if ($selectedBien)
        <script>
            (() => {
                const bienSearch = document.getElementById('bienSearch');
                const bienInput = document.getElementById('bien');
                const bienOptions = Array.from(document.querySelectorAll('#bienesList option'));
                const barcodeRender = document.getElementById('barcodeRender');
                const barcodeImage = document.getElementById('barcodeImage');
                const barcodeCode = document.getElementById('barcodeCode');
                const barcodeEmptyState = document.getElementById('barcodeEmptyState');
                const barcodeDescripcion = document.getElementById('barcodeDescripcion');
                const barcodeCodigo = document.getElementById('barcodeCodigo');
                const barcodeTipo = document.getElementById('barcodeTipo');
                const barcodeUnidad = document.getElementById('barcodeUnidad');
                const barcodePeso = document.getElementById('barcodePeso');
                const printBarcodeButton = document.getElementById('printBarcodeButton');
                const printImages = Array.from(document.querySelectorAll('.barcode-print-image'));
                const printDescriptions = Array.from(document.querySelectorAll('.barcode-print-description'));
                const printCodes = Array.from(document.querySelectorAll('.barcode-print-code'));

                if (! bienSearch || ! bienInput || ! barcodeImage || ! barcodeCode || ! barcodeRender || ! barcodeEmptyState) {
                    return;
                }

                const togglePreviewState = (hasSelection) => {
                    barcodeRender.style.display = hasSelection ? 'flex' : 'none';
                    barcodeCode.style.display = hasSelection ? 'block' : 'none';
                    barcodeEmptyState.style.display = hasSelection ? 'none' : 'block';

                    if (printBarcodeButton) {
                        printBarcodeButton.disabled = ! hasSelection;
                    }
                };

                const findOption = () => {
                    const term = bienSearch.value.trim().toLowerCase();

                    if (term === '') {
                        return null;
                    }

                    return bienOptions.find((option) => option.value.toLowerCase() === term)
                        ?? bienOptions.find((option) => option.dataset.codigo.toLowerCase() === term)
                        ?? null;
                };

                const updatePreview = (option) => {
                    if (! option) {
                        bienInput.value = '';
                        togglePreviewState(false);
                        return;
                    }

                    bienInput.value = option.dataset.id || '';
                    bienSearch.value = option.value;

                    const codigo = option.dataset.codigo || '';
                    const descripcion = option.dataset.descripcion || '';
                    const tipo = option.dataset.tipo || 'Sin tipo';
                    const unidad = option.dataset.unidad || 'Sin unidad';
                    const peso = option.dataset.peso || '0,000 kg';
                    const barcodeUrl = option.dataset.barcodeUrl || '';

                    barcodeImage.src = barcodeUrl;
                    barcodeImage.alt = `Codigo de barras ${codigo}`;
                    barcodeCode.textContent = codigo;
                    barcodeDescripcion.textContent = descripcion;
                    barcodeCodigo.textContent = codigo;
                    barcodeTipo.textContent = tipo;
                    barcodeUnidad.textContent = unidad;
                    barcodePeso.textContent = peso;
                    togglePreviewState(true);

                    // Botón Abrir PNG eliminado

                    printImages.forEach((image, index) => {
                        image.src = barcodeUrl;
                        image.alt = `Codigo de barras ${codigo} copia ${index + 1}`;
                    });

                    printDescriptions.forEach((element) => {
                        element.textContent = descripcion;
                    });

                    printCodes.forEach((element) => {
                        element.textContent = codigo;
                    });
                };

                bienSearch.addEventListener('change', () => {
                    updatePreview(findOption());
                });

                bienSearch.addEventListener('input', () => {
                    const option = findOption();

                    updatePreview(option);
                });

                if (printBarcodeButton) {
                    printBarcodeButton.addEventListener('click', () => {
                        window.print();
                    });
                }

                togglePreviewState(Boolean(findOption()));
            })();
        </script>
    @endif
@endsection