@extends('layouts.app')

@section('titulo', isset($registro) ? 'Editar Combo' : 'Nuevo Combo')

@section('contenido')

<div
    x-data="comboFidelizacionForm()"
    class="space-y-6"
>

    {{-- =========================================================
        ENCABEZADO
    ========================================================== --}}

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

        <a
            href="{{ route('fidelizacion.index', ['tab' => 'combos']) }}"
            class="w-10 h-10 rounded-xl border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50"
        >
            ←
        </a>

        <div>

            <h1 class="text-2xl font-bold text-slate-800">
                {{ isset($registro) ? 'Editar combo' : 'Nuevo combo' }}
            </h1>

            <p class="text-sm text-slate-500">
                Agrupa productos y establece un precio especial.
            </p>

        </div>

    </div>


    {{-- =========================================================
        ERRORES
    ========================================================== --}}

    @if($errors->any())

        <div class="rounded-xl border border-red-200 bg-red-50 p-4">

            <div class="font-semibold text-red-700 mb-2">
                Hay errores en el formulario:
            </div>

            <ul class="list-disc list-inside text-sm text-red-600">

                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach

            </ul>

        </div>

    @endif


    {{-- =========================================================
        FORMULARIO
    ========================================================== --}}

    <form
        method="POST"
        action="{{ isset($registro)
            ? route('fidelizacion.combos.update', $registro->id)
            : route('fidelizacion.combos.store') }}"
        class="space-y-6"
    >

        @csrf

        @if(isset($registro))
            @method('PUT')
        @endif


        {{-- =====================================================
            INFORMACIÓN GENERAL
        ====================================================== --}}

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

            <div class="p-5 border-b border-slate-100">

                <h2 class="font-semibold text-slate-800">
                    Información del combo
                </h2>

            </div>


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

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

                    <label class="block text-sm font-medium text-slate-700 mb-1">
                        Nombre
                    </label>

                    <input
                        type="text"
                        name="nombre"
                        required
                        value="{{ old('nombre', $registro->nombre ?? '') }}"
                        placeholder="Ej: Combo Regreso a Clases"
                        class="w-full rounded-xl border-slate-300"
                    >

                </div>


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

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

                    <textarea
                        name="descripcion"
                        rows="3"
                        class="w-full rounded-xl border-slate-300"
                    >{{ old('descripcion', $registro->descripcion ?? '') }}</textarea>

                </div>


                <div>

                    <label class="block text-sm font-medium text-slate-700 mb-1">
                        Precio del combo
                    </label>

                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        required
                        name="precio"
                        value="{{ old('precio', $registro->precio ?? 0) }}"
                        class="w-full rounded-xl border-slate-300"
                    >

                </div>


                <div>

                    <label class="block text-sm font-medium text-slate-700 mb-1">
                        Prioridad
                    </label>

                    <input
                        type="number"
                        min="0"
                        name="prioridad"
                        value="{{ old('prioridad', $registro->prioridad ?? 0) }}"
                        class="w-full rounded-xl border-slate-300"
                    >

                </div>


                <div>

                    <label class="flex items-center gap-3 cursor-pointer">

                        <input
                            type="checkbox"
                            name="acumulable"
                            value="1"
                            {{ old('acumulable', $registro->acumulable ?? 0) ? 'checked' : '' }}
                            class="rounded border-slate-300"
                        >

                        <div>

                            <div class="font-medium text-slate-800">
                                Acumulable
                            </div>

                            <div class="text-xs text-slate-500">
                                Permite combinar con otras promociones.
                            </div>

                        </div>

                    </label>

                </div>

            </div>

        </div>


        {{-- =====================================================
            VIGENCIA
        ====================================================== --}}

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

            <div class="p-5 border-b border-slate-100">

                <h2 class="font-semibold text-slate-800">
                    Vigencia
                </h2>

            </div>


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

                <div>

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

                    <input
                        type="date"
                        name="fecha_inicio"
                        value="{{ old('fecha_inicio', isset($registro) && $registro->fecha_inicio ? \Carbon\Carbon::parse($registro->fecha_inicio)->format('Y-m-d') : '') }}"
                        class="w-full rounded-xl border-slate-300"
                    >

                </div>


                <div>

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

                    <input
                        type="date"
                        name="fecha_fin"
                        value="{{ old('fecha_fin', isset($registro) && $registro->fecha_fin ? \Carbon\Carbon::parse($registro->fecha_fin)->format('Y-m-d') : '') }}"
                        class="w-full rounded-xl border-slate-300"
                    >

                </div>

            </div>

        </div>


        {{-- =====================================================
            PRODUCTOS DEL COMBO
        ====================================================== --}}

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

            <div class="p-5 border-b border-slate-100 flex items-center justify-between">

                <div>

                    <h2 class="font-semibold text-slate-800">
                        Productos del combo
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Define qué productos y cantidades forman parte del combo.
                    </p>

                </div>

                <button
                    type="button"
                    @click="agregarProducto()"
                    class="px-4 py-2 rounded-xl bg-slate-800 text-white text-sm"
                >
                    + Agregar producto
                </button>

            </div>


            <div class="p-5 space-y-4">

                <template
                    x-for="(detalle, index) in detalles"
                    :key="index"
                >

                    <div class="border border-slate-200 rounded-xl p-4">

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

                            {{-- PRODUCTO --}}

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

                                <label class="block text-xs font-medium text-slate-600 mb-1">
                                    Producto
                                </label>

                                <select
                                    :name="`detalles[${index}][producto_id]`"
                                    x-model="detalle.producto_id"
                                    required
                                    class="w-full rounded-xl border-slate-300 text-sm"
                                >

                                    <option value="">
                                        Seleccionar producto
                                    </option>

                                    @foreach($productos as $producto)

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

                                    @endforeach

                                </select>

                            </div>


                            {{-- CANTIDAD --}}

                            <div>

                                <label class="block text-xs font-medium text-slate-600 mb-1">
                                    Cantidad
                                </label>

                                <input
                                    type="number"
                                    step="0.01"
                                    min="0.01"
                                    required
                                    :name="`detalles[${index}][cantidad]`"
                                    x-model="detalle.cantidad"
                                    class="w-full rounded-xl border-slate-300 text-sm"
                                >

                            </div>


                            {{-- LOTE --}}

                            <div>

                                <label class="block text-xs font-medium text-slate-600 mb-1">
                                    Lote específico
                                </label>

                                <input
                                    type="number"
                                    min="1"
                                    :name="`detalles[${index}][lote_id]`"
                                    x-model="detalle.lote_id"
                                    placeholder="Opcional"
                                    class="w-full rounded-xl border-slate-300 text-sm"
                                >

                            </div>

                        </div>


                        <div class="mt-3 flex justify-end">

                            <button
                                type="button"
                                @click="eliminarProducto(index)"
                                class="px-3 py-2 rounded-xl border border-red-200 text-red-600 hover:bg-red-50 text-sm"
                            >
                                Eliminar producto
                            </button>

                        </div>

                    </div>

                </template>


                <div
                    x-show="detalles.length === 0"
                    class="text-center py-10 text-sm text-slate-400"
                >
                    Agrega al menos un producto al combo.
                </div>

            </div>

        </div>


        {{-- =====================================================
            LOCALES / ALMACENES
        ====================================================== --}}

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            {{-- LOCALES --}}

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

                <div class="p-5 border-b border-slate-100">

                    <h2 class="font-semibold text-slate-800">
                        Locales
                    </h2>

                    <p class="text-xs text-slate-500 mt-1">
                        Sin selección aplica a todos los locales.
                    </p>

                </div>


                <div class="p-5 space-y-3">

                    @foreach($locales as $local)

                        <label class="flex items-center gap-3 cursor-pointer">

                            <input
                                type="checkbox"
                                name="locales[]"
                                value="{{ $local->id }}"
                                @checked(
                                    in_array(
                                        $local->id,
                                        old(
                                            'locales',
                                            $localesSeleccionados ?? []
                                        )
                                    )
                                )
                                class="rounded border-slate-300"
                            >

                            <span class="text-sm text-slate-700">
                                {{ $local->nombre }}
                            </span>

                        </label>

                    @endforeach

                </div>

            </div>


            {{-- ALMACENES --}}

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

                <div class="p-5 border-b border-slate-100">

                    <h2 class="font-semibold text-slate-800">
                        Almacenes
                    </h2>

                    <p class="text-xs text-slate-500 mt-1">
                        Sin selección aplica a todos los almacenes.
                    </p>

                </div>


                <div class="p-5 space-y-3">

                    @foreach($almacenes as $almacen)

                        <label class="flex items-center gap-3 cursor-pointer">

                            <input
                                type="checkbox"
                                name="almacenes[]"
                                value="{{ $almacen->id }}"
                                @checked(
                                    in_array(
                                        $almacen->id,
                                        old(
                                            'almacenes',
                                            $almacenesSeleccionados ?? []
                                        )
                                    )
                                )
                                class="rounded border-slate-300"
                            >

                            <span class="text-sm text-slate-700">
                                {{ $almacen->nombre }}
                            </span>

                        </label>

                    @endforeach

                </div>

            </div>

        </div>


        {{-- =====================================================
            ESTADO
        ====================================================== --}}

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

            <label class="flex items-center gap-3 cursor-pointer">

                <input
                    type="checkbox"
                    name="estado"
                    value="1"
                    {{ old('estado', $registro->estado ?? 1) ? 'checked' : '' }}
                    class="rounded border-slate-300"
                >

                <div>

                    <div class="font-medium text-slate-800">
                        Combo activo
                    </div>

                    <div class="text-xs text-slate-500">
                        El combo podrá ser utilizado por el POS.
                    </div>

                </div>

            </label>

        </div>


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

        <div class="flex justify-end gap-3">

            <a
                href="{{ route('fidelizacion.index', ['tab' => 'combos']) }}"
                class="px-5 py-2.5 rounded-xl border border-slate-300 bg-white"
            >
                Cancelar
            </a>

            <button
                type="submit"
                class="px-5 py-2.5 rounded-xl bg-brand-600 text-white font-medium"
            >
                {{ isset($registro) ? 'Guardar cambios' : 'Crear combo' }}
            </button>

        </div>

    </form>

</div>


<script>

function comboFidelizacionForm() {

    return {

        detalles: @js(
            old(
                'detalles',
                isset($detalles)
                    ? $detalles->map(function ($detalle) {
                        return [
                            'producto_id' => $detalle->producto_id,
                            'cantidad' => $detalle->cantidad,
                            'lote_id' => $detalle->lote_id,
                        ];
                    })->values()->toArray()
                    : []
            )
        ),

        agregarProducto() {

            this.detalles.push({
                producto_id: '',
                cantidad: 1,
                lote_id: ''
            });

        },

        eliminarProducto(index) {

            this.detalles.splice(index, 1);

        }

    }

}

</script>

@endsection