@extends('layouts.app')

@section('titulo', 'Nueva compra')

@section('contenido')

<form
    method="POST"
    action="{{ route('compras.store') }}"
    x-data="compraForm()"
    class="grid grid-cols-1 lg:grid-cols-3 gap-6"
>
    @csrf

    {{-- ========================================================= --}}
    {{-- COLUMNA PRINCIPAL --}}
    {{-- ========================================================= --}}

    <div class="lg:col-span-2 space-y-6">

        {{-- ===================================================== --}}
        {{-- DATOS DE LA COMPRA --}}
        {{-- ===================================================== --}}

        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">

            <h3 class="font-semibold text-slate-700 mb-4">
                Datos de la compra
            </h3>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                {{-- ================================================= --}}
                {{-- LOCAL --}}
                {{-- ================================================= --}}

                <div>

                    <label class="block text-sm font-medium text-slate-700">
                        Local
                        <span class="text-red-500">*</span>
                    </label>

                    <select
                        x-model="localId"
                        @change="cambiarLocal()"
                        required
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
                    >

                        <option value="">
                            — Selecciona local —
                        </option>

                        @foreach ($locales as $local)

                            <option value="{{ $local->id }}">
                                {{ $local->nombre }}
                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- ================================================= --}}
                {{-- ALMACÉN --}}
                {{-- ================================================= --}}

                <div>

                    <label class="block text-sm font-medium text-slate-700">
                        Almacén
                        <span class="text-red-500">*</span>
                    </label>

                    <select
                        x-model="almacenId"
                        @change="cambiarAlmacen()"
                        :disabled="!localId"
                        required
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none disabled:bg-slate-100"
                    >

                        <option value="">
                            — Selecciona almacén —
                        </option>

                        <template x-for="almacen in almacenesFiltrados" :key="almacen.id">

                            <option
                                :value="almacen.id"
                                x-text="almacen.nombre"
                            ></option>

                        </template>

                    </select>

                    <p
                        x-show="localId && almacenesFiltrados.length === 0"
                        class="mt-1 text-xs text-red-500"
                    >
                        Este local no tiene almacenes disponibles.
                    </p>

                </div>


                {{-- ================================================= --}}
                {{-- PROVEEDOR --}}
                {{-- ================================================= --}}

                <div class="sm:col-span-2">

                    <label class="block text-sm font-medium text-slate-700">
                        Proveedor
                        <span class="text-red-500">*</span>
                    </label>

                    <select
                        name="proveedor_id"
                        required
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
                    >

                        <option value="">
                            — Selecciona proveedor —
                        </option>

                        @foreach ($proveedores as $prov)

                            <option
                                value="{{ $prov->id }}"
                                @selected(old('proveedor_id') == $prov->id)
                            >
                                {{ $prov->razon_social }}
                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- ================================================= --}}
                {{-- DOCUMENTO --}}
                {{-- ================================================= --}}

                <div>

                    <label class="block text-sm font-medium text-slate-700">
                        N° de documento / factura
                    </label>

                    <input
                        type="text"
                        name="numero_documento"
                        value="{{ old('numero_documento') }}"
                        placeholder="Autogenerado si lo dejas vacío"
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
                    >

                </div>


                {{-- ================================================= --}}
                {{-- FECHA --}}
                {{-- ================================================= --}}

                <div>

                    <label class="block text-sm font-medium text-slate-700">
                        Fecha
                    </label>

                    <input
                        type="date"
                        name="fecha"
                        value="{{ old('fecha', now()->toDateString()) }}"
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
                    >

                </div>


                {{-- ================================================= --}}
                {{-- ESTADO DE PAGO --}}
                {{-- ================================================= --}}

                <div>

                    <label class="block text-sm font-medium text-slate-700">
                        Estado de pago
                    </label>

                    <select
                        name="estado_pago"
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
                    >

                        <option value="pendiente">
                            Pendiente (por pagar)
                        </option>

                        <option value="pagada">
                            Pagada
                        </option>

                    </select>

                </div>


                {{-- ================================================= --}}
                {{-- OBSERVACIÓN --}}
                {{-- ================================================= --}}

                <div>

                    <label class="block text-sm font-medium text-slate-700">
                        Observación
                    </label>

                    <input
                        type="text"
                        name="observacion"
                        value="{{ old('observacion') }}"
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
                    >

                </div>

            </div>

        </div>


        {{-- ========================================================= --}}
        {{-- PRODUCTOS --}}
        {{-- ========================================================= --}}

        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">

            <div class="flex items-center justify-between mb-4">

                <div>

                    <h3 class="font-semibold text-slate-700">
                        Productos a ingresar
                    </h3>

                    <p class="text-xs text-slate-400 mt-1">
                        Busca por nombre o escanea/escribe el código de barras.
                    </p>

                </div>

            </div>


            {{-- ===================================================== --}}
            {{-- BUSCADOR DE PRODUCTO --}}
            {{-- ===================================================== --}}

            <div class="grid grid-cols-1 md:grid-cols-4 gap-2 mb-5">

                {{-- CÓDIGO DE BARRAS --}}

                <div class="md:col-span-1">

                    <input
                        type="text"
                        x-model="barcode"
                        @keydown.enter.prevent="buscarPorCodigo()"
                        :disabled="!almacenId"
                        placeholder="Código de barras"
                        class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none disabled:bg-slate-100"
                    >

                </div>


                {{-- BUSCAR NOMBRE --}}

                <div class="md:col-span-2">

                    <input
                        type="text"
                        x-model="buscarProducto"
                        @input="filtrarProductos()"
                        :disabled="!almacenId"
                        placeholder="Buscar producto por nombre..."
                        class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none disabled:bg-slate-100"
                    >

                </div>


                {{-- BOTÓN --}}

                <div>

                    <button
                        type="button"
                        @click="buscarPorCodigo()"
                        :disabled="!almacenId || !barcode"
                        class="w-full rounded-lg bg-slate-800 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-900 disabled:opacity-40 disabled:cursor-not-allowed"
                    >
                        Buscar
                    </button>

                </div>

            </div>


            {{-- ===================================================== --}}
            {{-- RESULTADOS DE BÚSQUEDA --}}
            {{-- ===================================================== --}}

            <div
                x-show="mostrarResultados"
                class="border border-slate-200 rounded-lg mb-5 max-h-72 overflow-y-auto"
            >

                <template x-for="p in productosFiltrados" :key="p.id">

                    <button
                        type="button"
                        @click="agregarProducto(p)"
                        class="w-full text-left px-4 py-3 border-b border-slate-100 hover:bg-slate-50"
                    >

                        <div class="flex items-center justify-between gap-3">

                            <div>

                                <div
                                    class="font-medium text-slate-700"
                                    x-text="p.nombre"
                                ></div>

                                <div class="text-xs text-slate-400">

                                    Código:
                                    <span x-text="p.codigo_barras || 'Sin código'"></span>

                                </div>

                            </div>

                            <div class="text-right">

                                <div class="text-xs text-slate-400">
                                    Stock actual
                                </div>

                                <div
                                    class="font-semibold text-slate-700"
                                    x-text="stockProducto(p.id)"
                                ></div>

                            </div>

                        </div>

                    </button>

                </template>


                <div
                    x-show="productosFiltrados.length === 0"
                    class="p-4 text-center text-sm text-slate-400"
                >
                    No se encontraron productos.
                </div>

            </div>


            {{-- ===================================================== --}}
            {{-- TABLA DE PRODUCTOS --}}
            {{-- ===================================================== --}}

            <div class="overflow-x-auto">

                <table class="w-full text-sm">

                    <thead class="text-slate-400 text-left border-b border-slate-200">

                        <tr>

                            <th class="py-2 font-medium">
                                Producto
                            </th>

                            <th class="py-2 font-medium w-32">
                                Presentación
                            </th>

                            <th class="py-2 font-medium w-20 text-center">
                                Equiv.
                            </th>

                            <th class="py-2 font-medium w-20">
                                Cant.
                            </th>

                            <th class="py-2 font-medium w-28">
                                Costo
                            </th>

                            <th class="py-2 font-medium w-28">
                                Lote
                            </th>

                            <th class="py-2 font-medium w-36">
                                Vencimiento
                            </th>

                            <th class="py-2 font-medium text-right w-24">
                                Subtotal
                            </th>

                            <th class="py-2 w-8"></th>

                        </tr>

                    </thead>


                    <tbody>

                        <template
                            x-for="(l, i) in lines"
                            :key="l.uid"
                        >

                            <tr class="border-b border-slate-50">

                                {{-- PRODUCTO --}}

                                <td class="py-2 pr-2">

                                    <div class="font-medium text-slate-700">
                                        <span x-text="l.nombre"></span>
                                    </div>

                                    <div class="text-xs text-slate-400">

                                        Código:
                                        <span
                                            x-text="l.codigo_barras || 'Sin código'"
                                        ></span>

                                    </div>

                                    <div class="text-xs text-slate-400">

                                        Stock almacén:
                                        <span
                                            class="font-semibold"
                                            x-text="stockProducto(l.id)"
                                        ></span>

                                    </div>

                                </td>


                                {{-- PRESENTACIÓN --}}

                                <td class="py-2 pr-2">

                                    <select
                                        x-model.number="l.presentacion_id"
                                        @change="cambiarPresentacion(l)"
                                        class="w-full rounded border border-slate-200 px-2 py-1 text-sm focus:border-brand-500 focus:outline-none"
                                    >

                                        <template
                                            x-for="pres in l.presentaciones"
                                            :key="pres.id ?? ('unidad-' + l.id)"
                                        >

                                            <option
                                                :value="pres.id"
                                                x-text="capitalizar(pres.tipo)"
                                            ></option>

                                        </template>

                                    </select>

                                </td>


                                {{-- EQUIVALENCIA --}}

                                <td class="py-2 pr-2">

                                    <input
                                        type="number"
                                        min="1"
                                        x-model.number="l.equivalencia"
                                        class="w-full rounded border border-slate-200 px-2 py-1 text-sm text-center bg-slate-50"
                                    >

                                </td>


                                {{-- CANTIDAD --}}

                                <td class="py-2 pr-2">

                                    <input
                                        type="number"
                                        min="1"
                                        x-model.number="l.cantidad"
                                        class="w-full rounded border border-slate-200 px-2 py-1 text-sm focus:border-brand-500 focus:outline-none"
                                    >

                                </td>


                                {{-- COSTO --}}

                                <td class="py-2 pr-2">

                                    <input
                                        type="number"
                                        min="0"
                                        step="0.01"
                                        x-model.number="l.precio_compra"
                                        class="w-full rounded border border-slate-200 px-2 py-1 text-sm focus:border-brand-500 focus:outline-none"
                                    >

                                </td>


                                {{-- LOTE --}}

                                <td class="py-2 pr-2">

                                    <input
                                        type="text"
                                        x-model="l.lote"
                                        class="w-full rounded border border-slate-200 px-2 py-1 text-sm focus:border-brand-500 focus:outline-none"
                                    >

                                </td>


                                {{-- VENCIMIENTO --}}

                                <td class="py-2 pr-2">

                                    <input
                                        type="date"
                                        x-model="l.fecha_vencimiento"
                                        class="w-full rounded border border-slate-200 px-2 py-1 text-sm focus:border-brand-500 focus:outline-none"
                                    >

                                </td>


                                {{-- SUBTOTAL --}}

                                <td class="py-2 text-right font-semibold text-slate-700">

                                    <span
                                        x-text="'S/ ' + calcularSubtotalLinea(l).toFixed(2)"
                                    ></span>

                                </td>


                                {{-- ELIMINAR --}}

                                <td class="py-2 text-right">

                                    <button
                                        type="button"
                                        @click="lines.splice(i, 1)"
                                        class="text-slate-300 hover:text-red-500 text-xl"
                                    >
                                        &times;
                                    </button>

                                </td>

                            </tr>

                        </template>


                        {{-- SIN PRODUCTOS --}}

                        <tr x-show="lines.length === 0">

                            <td
                                colspan="9"
                                class="py-8 text-center text-slate-400"
                            >
                                <span x-show="!almacenId">
                                    Primero selecciona el local y almacén.
                                </span>

                                <span x-show="almacenId">
                                    Busca y agrega productos a la compra.
                                </span>
                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>


    {{-- ============================================================= --}}
    {{-- RESUMEN --}}
    {{-- ============================================================= --}}

    <div class="space-y-6">

        <div
            class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm lg:sticky lg:top-20"
        >

            <h3 class="font-semibold text-slate-700 mb-4">
                Resumen
            </h3>


            {{-- UBICACIÓN --}}

            <div class="mb-5 p-3 rounded-lg bg-slate-50 border border-slate-200">

                <div class="text-xs text-slate-400">
                    Ingreso de mercadería
                </div>

                <div
                    class="font-semibold text-slate-700 mt-1"
                    x-text="nombreLocal() || 'Sin local'"
                ></div>

                <div
                    class="text-sm text-slate-500"
                    x-text="nombreAlmacen() || 'Sin almacén'"
                ></div>

            </div>


            {{-- TOTALES --}}

            <div class="space-y-2 text-sm">

                <div class="flex justify-between text-slate-500">

                    <span>
                        Subtotal
                    </span>

                    <span
                        x-text="'S/ ' + subtotal().toFixed(2)"
                    ></span>

                </div>


                <div class="flex justify-between text-slate-500">

                    <span>
                        IGV (18%)
                    </span>

                    <span
                        x-text="'S/ ' + igv().toFixed(2)"
                    ></span>

                </div>


                <div
                    class="flex justify-between text-lg font-bold text-slate-800 pt-2 border-t border-slate-200"
                >

                    <span>
                        Total
                    </span>

                    <span
                        x-text="'S/ ' + total().toFixed(2)"
                    ></span>

                </div>

            </div>


            {{-- ===================================================== --}}
            {{-- DATOS PARA CONTROLLER --}}
            {{-- ===================================================== --}}

            <input
                type="hidden"
                name="local_id"
                :value="localId"
            >

            <input
                type="hidden"
                name="almacen_id"
                :value="almacenId"
            >

            <input
                type="hidden"
                name="items_json"
                :value="JSON.stringify(payload())"
            >


            {{-- ===================================================== --}}
            {{-- BOTONES --}}
            {{-- ===================================================== --}}

            <div class="mt-5 flex flex-col gap-2">

                <button
                    type="submit"
                    :disabled="lines.length === 0 || !localId || !almacenId"
                    class="rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed"
                >
                    Registrar compra
                </button>


                <a
                    href="{{ route('compras.index') }}"
                    class="text-center rounded-lg px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100"
                >
                    Cancelar
                </a>

            </div>

        </div>

    </div>

</form>

@endsection


@push('scripts')

<script>
function compraForm() {

    return {

        // =========================================================
        // DATOS PRINCIPALES
        // =========================================================

        localId: '',
        almacenId: '',

        almacenes: @json($almacenes ?? []),

        products: @json($productos ?? []),

        lines: [],

        barcode: '',
        buscarProducto: '',

        productosFiltrados: [],

        mostrarResultados: false,


        // =========================================================
        // ALMACENES DEL LOCAL
        // =========================================================

        get almacenesFiltrados() {

            if (!this.localId) {
                return [];
            }

            return this.almacenes.filter(
                a => String(a.local_id) === String(this.localId)
            );

        },


        // =========================================================
        // CAMBIAR LOCAL
        // =========================================================

        cambiarLocal() {

            this.almacenId = '';

            this.lines = [];

            this.barcode = '';

            this.buscarProducto = '';

            this.productosFiltrados = [];

            this.mostrarResultados = false;

        },


        // =========================================================
        // CAMBIAR ALMACÉN
        // =========================================================

        cambiarAlmacen() {

            this.lines = [];

            this.barcode = '';

            this.buscarProducto = '';

            this.productosFiltrados = [];

            this.mostrarResultados = false;

        },


        // =========================================================
        // BUSCAR PRODUCTOS
        // =========================================================

        filtrarProductos() {

            const texto = this.buscarProducto
                .toLowerCase()
                .trim();

            if (!this.almacenId || !texto) {

                this.productosFiltrados = [];

                this.mostrarResultados = false;

                return;
            }


            this.productosFiltrados = this.products
                .filter(p => {

                    const nombre = String(
                        p.nombre ?? ''
                    ).toLowerCase();

                    const codigo = String(
                        p.codigo_barras ?? ''
                    ).toLowerCase();

                    return (
                        nombre.includes(texto) ||
                        codigo.includes(texto)
                    );

                })
                .slice(0, 30);


            this.mostrarResultados =
                this.productosFiltrados.length > 0;

        },


        // =========================================================
        // BUSCAR POR CÓDIGO DE BARRAS
        // =========================================================

        buscarPorCodigo() {

            if (!this.almacenId || !this.barcode) {
                return;
            }

            const codigo = String(
                this.barcode
            ).trim().toLowerCase();


            const producto = this.products.find(
                p =>
                    String(
                        p.codigo_barras ?? ''
                    ).trim().toLowerCase() === codigo
            );


            if (!producto) {

                alert(
                    'No se encontró ningún producto con ese código de barras.'
                );

                return;

            }


            this.agregarProducto(producto);

            this.barcode = '';

            this.buscarProducto = '';

            this.productosFiltrados = [];

            this.mostrarResultados = false;

        },


        // =========================================================
        // AGREGAR PRODUCTO
        // =========================================================

        agregarProducto(p) {

            if (!this.almacenId) {

                alert(
                    'Primero selecciona el local y el almacén.'
                );

                return;

            }


            const existente = this.lines.find(
                l => Number(l.id) === Number(p.id)
            );


            if (existente) {

                existente.cantidad =
                    Number(existente.cantidad || 0) + 1;

                return;

            }


            const presentaciones =
                p.presentaciones || [];


            const primeraPresentacion =
                presentaciones.length
                    ? presentaciones[0]
                    : {
                        id: null,
                        tipo: 'unidad',
                        equivalencia: 1,
                        precio_compra: Number(
                            p.precio_compra || 0
                        ),
                        es_compra: true,
                        es_venta: true
                    };


            this.lines.push({

                uid:
                    Date.now() +
                    Math.random(),

                id: p.id,

                nombre: p.nombre,

                codigo_barras:
                    p.codigo_barras || '',

                presentaciones:
                    presentaciones.length
                        ? presentaciones
                        : [primeraPresentacion],

                presentacion_id:
                    primeraPresentacion.id,

                tipo_presentacion:
                    primeraPresentacion.tipo,

                equivalencia:
                    Number(
                        primeraPresentacion.equivalencia || 1
                    ),

                cantidad: 1,

                precio_compra:
                    Number(
                        primeraPresentacion.precio_compra ??
                        p.precio_compra ??
                        0
                    ),

                lote: '',

                fecha_vencimiento: ''

            });


            this.buscarProducto = '';

            this.barcode = '';

            this.productosFiltrados = [];

            this.mostrarResultados = false;

        },


        // =========================================================
        // CAMBIAR PRESENTACIÓN
        // =========================================================

        cambiarPresentacion(l) {

            const pres =
                l.presentaciones.find(
                    p =>
                        String(p.id) ===
                        String(l.presentacion_id)
                );


            if (!pres) {
                return;
            }


            l.tipo_presentacion =
                pres.tipo;

            l.equivalencia =
                Number(
                    pres.equivalencia || 1
                );

            l.precio_compra =
                Number(
                    pres.precio_compra || 0
                );

        },


        // =========================================================
        // STOCK DEL PRODUCTO EN ALMACÉN
        // =========================================================

        stockProducto(productoId) {

            if (!this.almacenId) {
                return 0;
            }


            const stock =
                this.products
                    .find(
                        p =>
                            Number(p.id) ===
                            Number(productoId)
                    )
                    ?.stocks
                    ?.find(
                        s =>
                            Number(s.almacen_id) ===
                            Number(this.almacenId)
                    );


            return stock
                ? Number(stock.stock || 0)
                : 0;

        },


        // =========================================================
        // NOMBRE LOCAL
        // =========================================================

        nombreLocal() {

            const local =
                @json($locales ?? [])
                    .find(
                        l =>
                            Number(l.id) ===
                            Number(this.localId)
                    );

            return local
                ? local.nombre
                : '';

        },


        // =========================================================
        // NOMBRE ALMACÉN
        // =========================================================

        nombreAlmacen() {

            const almacen =
                this.almacenes.find(
                    a =>
                        Number(a.id) ===
                        Number(this.almacenId)
                );

            return almacen
                ? almacen.nombre
                : '';

        },


        // =========================================================
        // CAPITALIZAR
        // =========================================================

        capitalizar(texto) {

            if (!texto) {
                return '';
            }

            return texto.charAt(0).toUpperCase() +
                texto.slice(1);

        },


        // =========================================================
        // SUBTOTAL DE LÍNEA
        // =========================================================

        calcularSubtotalLinea(l) {

            const cantidad =
                Number(l.cantidad || 0);

            const precio =
                Number(l.precio_compra || 0);

            return cantidad * precio;

        },


        // =========================================================
        // SUBTOTAL
        // =========================================================

        subtotal() {

            return this.lines.reduce(
                (total, l) =>
                    total +
                    this.calcularSubtotalLinea(l),
                0
            );

        },


        // =========================================================
        // IGV
        // =========================================================

        igv() {

            return this.subtotal() * 0.18;

        },


        // =========================================================
        // TOTAL
        // =========================================================

        total() {

            return this.subtotal() + this.igv();

        },


        // =========================================================
        // PAYLOAD
        // =========================================================

        payload() {

            return this.lines.map(l => ({

                id: l.id,

                presentacion_id:
                    l.presentacion_id,

                cantidad:
                    Number(l.cantidad || 1),

                precio_compra:
                    Number(l.precio_compra || 0),

                lote:
                    l.lote || null,

                fecha_vencimiento:
                    l.fecha_vencimiento || null

            }));

        }

    };

}
</script>

@endpush