@extends('admin.layouts.app')

@php
    $esEdicion = $solicitud !== null;

    // Fuera del @json(): el parser de directivas de Blade no soporta una closure con
    // corchetes anidados adentro del argumento y rompe la compilacion de la vista.
    $lineasGuardadas = $esEdicion
        ? $solicitud->items->map(fn ($i) => [
            'co_arti'       => $i->co_arti,
            'descripcion'   => $i->descripcion,
            'im_valor'      => (float) $i->im_valor,
            'cantidad'      => (float) $i->cantidad,
            'observaciones' => $i->observaciones,
        ])->values()
        : [];
@endphp

@section('content')
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
    <h4 class="mb-sm-0">
        {{ $esEdicion ? "Editar borrador {$solicitud->numero}" : 'Nueva Solicitud de Compra' }}
    </h4>
    <div class="page-title-right">
        <ol class="breadcrumb m-0">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Inicio</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.branch-requests.index') }}">Solicitudes de Compra</a></li>
            <li class="breadcrumb-item active">{{ $esEdicion ? $solicitud->numero : 'Nueva' }}</li>
        </ol>
    </div>
</div>

@include('admin.branch-requests.partials.flash')

<form action="{{ $esEdicion ? route('admin.branch-requests.update', $solicitud->id) : route('admin.branch-requests.store') }}"
      method="POST" id="formSolicitud">
    @csrf
    @if($esEdicion)
        @method('PUT')
    @endif

    {{-- ============ Encabezado ============ --}}
    <div class="card">
        <div class="card-header"><h5 class="card-title mb-0">Datos de la solicitud</h5></div>
        <div class="card-body">
            <div class="row g-3">

                <div class="col-md-4">
                    <label class="form-label">Sucursal que solicita <span class="text-danger">*</span></label>
                    @if($miSucursal)
                        @php $mia = $sucursales->firstWhere('CO_ORIDE', $miSucursal); @endphp
                        <input type="text" class="form-control" readonly
                               value="{{ $mia->nombre ?? $miSucursal }}">
                        <div class="form-text">Se emite a nombre de tu sucursal.</div>
                    @else
                        {{-- Usuario de la empresa: no tiene sucursal propia, tiene que elegir. --}}
                        <select name="co_sucu" class="form-select @error('co_sucu') is-invalid @enderror" required>
                            <option value="">Seleccionar...</option>
                            @foreach($sucursales as $s)
                                <option value="{{ trim($s->CO_ORIDE) }}" {{ old('co_sucu', $esEdicion ? $solicitud->co_sucu : '') === trim($s->CO_ORIDE) ? 'selected' : '' }}>
                                    {{ $s->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @error('co_sucu')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    @endif
                </div>

                <div class="col-md-4">
                    <label class="form-label">Tipo <span class="text-danger">*</span></label>
                    <select name="tipo" class="form-select @error('tipo') is-invalid @enderror" required>
                        <option value="deposito" {{ old('tipo', $esEdicion ? $solicitud->tipo : 'deposito') === 'deposito' ? 'selected' : '' }}>
                            A depósito &mdash; que lo mande otra sucursal
                        </option>
                        <option value="compras" {{ old('tipo', $esEdicion ? $solicitud->tipo : '') === 'compras' ? 'selected' : '' }}>
                            A compras &mdash; que se compre al proveedor
                        </option>
                    </select>
                    @error('tipo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label">Prioridad <span class="text-danger">*</span></label>
                    <select name="prioridad" class="form-select @error('prioridad') is-invalid @enderror" required>
                        @foreach(['baja' => 'Baja', 'media' => 'Media', 'alta' => 'Alta', 'urgente' => 'Urgente'] as $val => $lbl)
                            <option value="{{ $val }}" {{ old('prioridad', $esEdicion ? $solicitud->prioridad : 'media') === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                        @endforeach
                    </select>
                    @error('prioridad')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label">Dirigida a</label>
                    <select name="co_sucu_destino" class="form-select @error('co_sucu_destino') is-invalid @enderror">
                        <option value="">Abierta &mdash; cualquier sucursal con stock</option>
                        @foreach($sucursales as $s)
                            @continue($miSucursal && trim($s->CO_ORIDE) === $miSucursal)
                            <option value="{{ trim($s->CO_ORIDE) }}" {{ old('co_sucu_destino', $esEdicion ? $solicitud->co_sucu_destino : '') === trim($s->CO_ORIDE) ? 'selected' : '' }}>
                                {{ $s->nombre }}
                            </option>
                        @endforeach
                    </select>
                    @error('co_sucu_destino')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">
                        Si la dejás abierta, la ve cualquier sucursal y la cubre la que tenga el artículo.
                    </div>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Fecha de entrega deseada</label>
                    <input type="date" name="fecha_entrega" class="form-control @error('fecha_entrega') is-invalid @enderror"
                           value="{{ old('fecha_entrega', $esEdicion ? $solicitud->fecha_entrega?->format('Y-m-d') : '') }}" min="{{ now()->toDateString() }}">
                    @error('fecha_entrega')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label">Observaciones</label>
                    <textarea name="observaciones" class="form-control" rows="1"
                              placeholder="Aclaraciones para quien responda...">{{ old('observaciones', $esEdicion ? $solicitud->observaciones : '') }}</textarea>
                </div>

            </div>
        </div>
    </div>

    {{-- ============ Artículos ============ --}}
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">Artículos solicitados</h5>
            <button type="button" class="btn btn-success btn-sm" id="btnAbrirBuscador">
                <i class="ri-add-line align-bottom me-1"></i> Agregar artículo
            </button>
        </div>
        <div class="card-body">
            @error('items')<div class="alert alert-danger">{{ $message }}</div>@enderror

            <div class="table-responsive">
                <table class="table table-bordered align-middle mb-0" id="tablaItems">
                    <thead class="table-light">
                        <tr>
                            <th width="40">#</th>
                            <th>Artículo</th>
                            <th width="130" class="text-end">Costo s/IVA</th>
                            <th width="120" class="text-center">Cantidad</th>
                            <th width="140" class="text-end">Subtotal</th>
                            <th>Observación</th>
                            <th width="50"></th>
                        </tr>
                    </thead>
                    <tbody id="cuerpoItems">
                        <tr id="filaVacia">
                            <td colspan="7" class="text-center text-muted py-4">
                                <i class="ri-shopping-basket-2-line fs-3 d-block mb-2"></i>
                                Todavía no agregaste artículos.
                            </td>
                        </tr>
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <th colspan="4" class="text-end">Importe estimado</th>
                            <th class="text-end fs-15" id="importeTotal">$ 0,00</th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mb-4">
        <a href="{{ route('admin.branch-requests.index') }}" class="btn btn-light">Cancelar</a>
        <button type="submit" name="enviar" value="0" class="btn btn-secondary">
            <i class="ri-draft-line align-bottom me-1"></i>
            {{ $esEdicion ? 'Guardar cambios' : 'Guardar borrador' }}
        </button>
        <button type="submit" name="enviar" value="1" class="btn btn-primary">
            <i class="ri-send-plane-line align-bottom me-1"></i> Guardar y enviar
        </button>
    </div>
</form>

{{-- ============ Buscador de artículos ============ --}}
<div class="modal fade" id="modalArticulos" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white"><i class="ri-search-line me-1"></i> Buscar artículos</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-5">
                        <div class="input-group">
                            <input type="text" id="buscarArticulo" class="form-control"
                                   placeholder="Código, descripción o código de barras...">
                            <button class="btn btn-primary" type="button" id="btnBuscar">
                                <i class="ri-search-line"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <select id="filtroCategoria" class="form-select">
                            <option value="">Todas las categorías</option>
                            @foreach($categorias as $c)
                                <option value="{{ trim($c->CO_CATEGOR) }}">{{ trim($c->DE_CATEGOR) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select id="filtroMarca" class="form-select">
                            <option value="">Todas las marcas</option>
                            @foreach($marcas as $m)
                                <option value="{{ trim($m->CO_MARCA) }}">{{ trim($m->DE_MARCA) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div id="cargandoArticulos" class="text-center py-4 d-none">
                    <div class="spinner-border text-primary"></div>
                    <div class="text-muted mt-2">Buscando...</div>
                </div>

                <div class="table-responsive">
                    <table class="table table-sm table-hover align-middle">
                        <thead class="table-light">
                            <tr id="encabezadoResultados">
                                <th>Código</th>
                                <th>Descripción</th>
                                <th class="text-end">Costo s/IVA</th>
                                <th class="text-center">Total web</th>
                                {{-- Las columnas por sucursal las inyecta el JS con los nombres reales --}}
                                <th width="50"></th>
                            </tr>
                        </thead>
                        <tbody id="resultadosArticulos"></tbody>
                    </table>
                </div>
            </div>

            <div class="modal-footer justify-content-between">
                <span class="text-muted small" id="infoResultados"></span>
                <div>
                    <button class="btn btn-sm btn-light" type="button" id="paginaAnterior" disabled>
                        <i class="ri-arrow-left-s-line"></i> Anterior
                    </button>
                    <button class="btn btn-sm btn-light" type="button" id="paginaSiguiente" disabled>
                        Siguiente <i class="ri-arrow-right-s-line"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
(function () {
    'use strict';

    const URL_PRODUCTOS = @json(route('admin.branch-requests.products'));

    let paginaActual = 1;
    let ultimaPagina = 1;
    let sucursales   = [];      // se completa con la primera respuesta del servidor
    let contadorFila = 0;
    const agregados  = new Set();

    const modal = new bootstrap.Modal(document.getElementById('modalArticulos'));

    const moneda = (n) => '$ ' + Number(n || 0).toLocaleString('es-AR', {
        minimumFractionDigits: 2, maximumFractionDigits: 2
    });

    // Escapa lo que venga de la base antes de meterlo en el HTML: las descripciones
    // del DBF traen comillas y caracteres raros que romperían el markup.
    const esc = (t) => String(t ?? '').replace(/[&<>"']/g, (c) => ({
        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    })[c]);

    // ---------- Buscador ----------

    document.getElementById('btnAbrirBuscador').addEventListener('click', () => {
        modal.show();
        buscar(1);
    });

    document.getElementById('modalArticulos').addEventListener('shown.bs.modal', () => {
        document.getElementById('buscarArticulo').focus();
    });

    document.getElementById('btnBuscar').addEventListener('click', () => buscar(1));

    // Enter busca, pero no manda el formulario de la solicitud.
    document.getElementById('buscarArticulo').addEventListener('keydown', (e) => {
        if (e.key === 'Enter') { e.preventDefault(); buscar(1); }
    });

    ['filtroCategoria', 'filtroMarca'].forEach((id) => {
        document.getElementById(id).addEventListener('change', () => buscar(1));
    });

    document.getElementById('paginaAnterior').addEventListener('click', () => buscar(paginaActual - 1));
    document.getElementById('paginaSiguiente').addEventListener('click', () => buscar(paginaActual + 1));

    function buscar(pagina) {
        if (pagina < 1 || pagina > ultimaPagina && ultimaPagina > 0 && pagina !== 1) return;

        paginaActual = pagina;
        document.getElementById('cargandoArticulos').classList.remove('d-none');
        document.getElementById('resultadosArticulos').innerHTML = '';

        const params = new URLSearchParams({
            search:      document.getElementById('buscarArticulo').value,
            category_id: document.getElementById('filtroCategoria').value,
            brand_id:    document.getElementById('filtroMarca').value,
            page:        pagina
        });

        fetch(URL_PRODUCTOS + '?' + params, { headers: { 'Accept': 'application/json' } })
            .then((r) => {
                if (!r.ok) throw new Error('HTTP ' + r.status);
                return r.json();
            })
            .then(pintarResultados)
            .catch((err) => {
                document.getElementById('cargandoArticulos').classList.add('d-none');
                document.getElementById('resultadosArticulos').innerHTML =
                    '<tr><td colspan="99" class="text-center text-danger py-4">' +
                    '<i class="ri-error-warning-line fs-3 d-block mb-2"></i>' +
                    'No se pudieron cargar los artículos: ' + esc(err.message) + '</td></tr>';
            });
    }

    function pintarResultados(data) {
        document.getElementById('cargandoArticulos').classList.add('d-none');

        // Los encabezados de sucursal salen de ori_dest, no están fijos en el HTML.
        if (!sucursales.length && data.sucursales) {
            sucursales = data.sucursales;
            const fila = document.getElementById('encabezadoResultados');
            const ultima = fila.lastElementChild;
            sucursales.forEach((s) => {
                const th = document.createElement('th');
                th.className = 'text-center';
                th.title = s.nombre + ' — ' + s.codigo;
                // Etiqueta (WW_NAME), no el codigo interno: es lo que se lee de un vistazo.
                th.textContent = s.etiqueta;
                fila.insertBefore(th, ultima);
            });
        }

        const filas = data.productos.data || [];
        const cuerpo = document.getElementById('resultadosArticulos');

        if (!filas.length) {
            cuerpo.innerHTML = '<tr><td colspan="99" class="text-center text-muted py-4">' +
                'No se encontraron artículos con ese criterio.</td></tr>';
        } else {
            cuerpo.innerHTML = filas.map((p) => {
                const celdasStock = (p.stock || []).map((s) => {
                    const clase = s.fisico > 0 ? 'text-success fw-semibold'
                                : s.fisico < 0 ? 'text-danger fw-semibold' : 'text-muted';
                    return `<td class="text-center ${clase}">${Number(s.fisico).toLocaleString('es-AR')}</td>`;
                }).join('');

                const yaEsta = agregados.has(p.co_arti);

                return `
                    <tr>
                        <td><code>${esc(p.co_arti)}</code></td>
                        <td>${esc(p.descripcion)}</td>
                        <td class="text-end">${moneda(p.im_valor)}</td>
                        <td class="text-center">${Number(p.total_web).toLocaleString('es-AR')}</td>
                        ${celdasStock}
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-${yaEsta ? 'light' : 'success'} btn-agregar"
                                    ${yaEsta ? 'disabled title="Ya está en la solicitud"' : ''}
                                    data-articulo="${esc(JSON.stringify(p))}">
                                <i class="ri-${yaEsta ? 'check' : 'add'}-line"></i>
                            </button>
                        </td>
                    </tr>`;
            }).join('');
        }

        ultimaPagina = data.productos.last_page || 1;
        document.getElementById('infoResultados').textContent =
            `${data.productos.total} artículos — página ${data.productos.current_page} de ${ultimaPagina}`;
        document.getElementById('paginaAnterior').disabled = data.productos.current_page <= 1;
        document.getElementById('paginaSiguiente').disabled = data.productos.current_page >= ultimaPagina;
    }

    // ---------- Líneas de la solicitud ----------

    document.getElementById('resultadosArticulos').addEventListener('click', (e) => {
        const boton = e.target.closest('.btn-agregar');
        if (!boton || boton.disabled) return;

        agregarLinea(JSON.parse(boton.dataset.articulo));

        boton.disabled = true;
        boton.classList.replace('btn-success', 'btn-light');
        boton.innerHTML = '<i class="ri-check-line"></i>';
        boton.title = 'Ya está en la solicitud';
    });

    function agregarLinea(p) {
        if (agregados.has(p.co_arti)) return;
        agregados.add(p.co_arti);

        document.getElementById('filaVacia')?.remove();

        const i = contadorFila++;
        const fila = document.createElement('tr');
        fila.dataset.coArti = p.co_arti;
        fila.innerHTML = `
            <td class="text-muted numero-linea"></td>
            <td>
                <div class="fw-semibold">${esc(p.descripcion)}</div>
                <small class="text-muted"><code>${esc(p.co_arti)}</code></small>
                <input type="hidden" name="items[${i}][co_arti]" value="${esc(p.co_arti)}">
            </td>
            <td class="text-end costo" data-valor="${p.im_valor}">${moneda(p.im_valor)}</td>
            <td>
                <input type="number" name="items[${i}][cantidad]" class="form-control form-control-sm text-center cantidad"
                       value="1" min="0.01" step="0.01" required>
            </td>
            <td class="text-end subtotal">${moneda(p.im_valor)}</td>
            <td>
                <input type="text" name="items[${i}][observaciones]" class="form-control form-control-sm"
                       placeholder="Opcional" maxlength="1000">
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-soft-danger btn-quitar" title="Quitar">
                    <i class="ri-delete-bin-line"></i>
                </button>
            </td>`;

        document.getElementById('cuerpoItems').appendChild(fila);
        renumerar();
        recalcular();
    }

    document.getElementById('cuerpoItems').addEventListener('input', (e) => {
        if (e.target.classList.contains('cantidad')) recalcular();
    });

    document.getElementById('cuerpoItems').addEventListener('click', (e) => {
        const boton = e.target.closest('.btn-quitar');
        if (!boton) return;

        const fila = boton.closest('tr');
        agregados.delete(fila.dataset.coArti);
        fila.remove();
        renumerar();
        recalcular();

        if (!document.querySelectorAll('#cuerpoItems tr').length) {
            document.getElementById('cuerpoItems').innerHTML =
                '<tr id="filaVacia"><td colspan="7" class="text-center text-muted py-4">' +
                '<i class="ri-shopping-basket-2-line fs-3 d-block mb-2"></i>' +
                'Todavía no agregaste artículos.</td></tr>';
        }
    });

    function renumerar() {
        document.querySelectorAll('#cuerpoItems tr[data-co-arti] .numero-linea')
            .forEach((td, i) => { td.textContent = i + 1; });
    }

    function recalcular() {
        let total = 0;

        document.querySelectorAll('#cuerpoItems tr[data-co-arti]').forEach((fila) => {
            const costo    = parseFloat(fila.querySelector('.costo').dataset.valor) || 0;
            const cantidad = parseFloat(fila.querySelector('.cantidad').value) || 0;
            const subtotal = costo * cantidad;

            fila.querySelector('.subtotal').textContent = moneda(subtotal);
            total += subtotal;
        });

        document.getElementById('importeTotal').textContent = moneda(total);
    }

    // ---------- Precarga (edición de borrador) ----------

    // Las líneas ya guardadas se reconstruyen con la misma función que las nuevas, así
    // editar y agregar producen exactamente el mismo markup y el mismo cálculo.
    const lineasGuardadas = @json($lineasGuardadas);

    lineasGuardadas.forEach((linea) => {
        agregarLinea(linea);

        const fila = document.querySelector(`#cuerpoItems tr[data-co-arti="${CSS.escape(linea.co_arti)}"]`);
        fila.querySelector('.cantidad').value = linea.cantidad;
        if (linea.observaciones) {
            fila.querySelector('input[name$="[observaciones]"]').value = linea.observaciones;
        }
    });
    if (lineasGuardadas.length) recalcular();

    // No dejar mandar una solicitud vacía: el servidor la rechaza igual, pero el aviso
    // acá evita perder la carga del encabezado.
    document.getElementById('formSolicitud').addEventListener('submit', (e) => {
        if (!document.querySelectorAll('#cuerpoItems tr[data-co-arti]').length) {
            e.preventDefault();
            Swal.fire({
                icon: 'warning',
                title: 'Solicitud sin artículos',
                text: 'Agregá al menos un artículo antes de guardar.'
            });
        }
    });
})();
</script>
@endpush