@extends('layouts.app')

@section('titulo', isset($registro) ? 'Editar Oferta' : 'Nueva Oferta')

@section('contenido')

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

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

    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

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

            <a
                href="{{ route('fidelizacion.index', ['tab' => 'ofertas']) }}"
                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 oferta' : 'Nueva oferta' }}
                </h1>

                <p class="text-sm text-slate-500">
                    Configura una promoción para el POS.
                </p>

            </div>

        </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


    {{-- =========================================================
        FORM
    ========================================================== --}}

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

        @csrf

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


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

        <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 de la oferta
                </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: 20% de descuento en medicamentos"
                        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">
                        Tipo
                    </label>

                    <select
                        name="tipo"
                        x-model="tipo"
                        class="w-full rounded-xl border-slate-300"
                    >

                        <option value="porcentaje"
                            @selected(old('tipo', $registro->tipo ?? 'porcentaje') === 'porcentaje')>
                            Porcentaje
                        </option>

                        <option value="monto"
                            @selected(old('tipo', $registro->tipo ?? '') === 'monto')>
                            Monto
                        </option>

                        <option value="precio_especial"
                            @selected(old('tipo', $registro->tipo ?? '') === 'precio_especial')>
                            Precio especial
                        </option>

                    </select>

                </div>


                <div>

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

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

                    <p
                        class="text-xs text-slate-400 mt-1"
                        x-text="
                            tipo === 'porcentaje'
                                ? 'Ejemplo: 20 = 20%'
                                : tipo === 'monto'
                                    ? 'Monto de descuento en soles'
                                    : 'Precio final especial'
                        "
                    ></p>

                </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"
                    >

                    <p class="text-xs text-slate-400 mt-1">
                        Una prioridad mayor se procesa primero.
                    </p>

                </div>


                <div class="flex items-center">

                    <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 esta oferta con otras.
                            </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-4 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>

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

                    <input
                        type="time"
                        name="hora_inicio"
                        value="{{ old('hora_inicio', isset($registro) && $registro->hora_inicio ? substr($registro->hora_inicio, 0, 5) : '') }}"
                        class="w-full rounded-xl border-slate-300"
                    >

                </div>


                <div>

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

                    <input
                        type="time"
                        name="hora_fin"
                        value="{{ old('hora_fin', isset($registro) && $registro->hora_fin ? substr($registro->hora_fin, 0, 5) : '') }}"
                        class="w-full rounded-xl border-slate-300"
                    >

                </div>

            </div>

        </div>


        {{-- =====================================================
            CONDICIONES
        ====================================================== --}}

        <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">
                        Condiciones de aplicación
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Define cuándo debe aplicarse la oferta.
                    </p>

                </div>

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

            </div>


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

                <template
                    x-for="(condicion, index) in condiciones"
                    :key="index"
                >

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

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

                            <div>

                                <label class="text-xs font-medium text-slate-600">
                                    Tipo
                                </label>

                                <select
                                    :name="`condiciones[${index}][tipo]`"
                                    x-model="condicion.tipo"
                                    class="w-full rounded-xl border-slate-300 text-sm mt-1"
                                >

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

                                    <option value="categoria">
                                        Categoría
                                    </option>

                                    <option value="monto_minimo">
                                        Monto mínimo
                                    </option>

                                    <option value="cantidad_minima">
                                        Cantidad mínima
                                    </option>

                                </select>

                            </div>


                            <div x-show="condicion.tipo === 'producto'">

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

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

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

                                    @foreach($productos as $producto)

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

                                    @endforeach

                                </select>

                            </div>


                            <div x-show="condicion.tipo === 'categoria'">

                                <label class="text-xs font-medium text-slate-600">
                                    Categoría
                                </label>

                                <select
                                    :name="`condiciones[${index}][categoria_id]`"
                                    x-model="condicion.categoria_id"
                                    class="w-full rounded-xl border-slate-300 text-sm mt-1"
                                >

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

                                    @foreach($categorias as $categoria)

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

                                    @endforeach

                                </select>

                            </div>


                            <div x-show="condicion.tipo === 'cantidad_minima'">
                                <label class="text-xs font-medium text-slate-600">Aplicar sobre</label>
                                <select x-model="condicion.alcance" class="w-full rounded-xl border-slate-300 text-sm mt-1">
                                    <option value="producto">Producto específico</option>
                                    <option value="categoria">Categoría</option>
                                    <option value="carrito">Todo el carrito</option>
                                </select>
                            </div>

                            <div x-show="condicion.tipo === 'cantidad_minima' && condicion.alcance === 'producto'">
                                <label class="text-xs font-medium text-slate-600">Producto</label>
                                <select :name="`condiciones[${index}][producto_id]`" x-model="condicion.producto_id" class="w-full rounded-xl border-slate-300 text-sm mt-1">
                                    <option value="">Seleccionar producto</option>
                                    @foreach($productos as $producto)
                                        <option value="{{ $producto->id }}">{{ $producto->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div x-show="condicion.tipo === 'cantidad_minima' && condicion.alcance === 'categoria'">
                                <label class="text-xs font-medium text-slate-600">Categoría</label>
                                <select :name="`condiciones[${index}][categoria_id]`" x-model="condicion.categoria_id" class="w-full rounded-xl border-slate-300 text-sm mt-1">
                                    <option value="">Seleccionar categoría</option>
                                    @foreach($categorias as $categoria)
                                        <option value="{{ $categoria->id }}">{{ $categoria->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div x-show="['monto_minimo','cantidad_minima'].includes(condicion.tipo)">
                                <label class="text-xs font-medium text-slate-600">
                                    <span x-text="condicion.tipo === 'cantidad_minima' ? 'Cantidad mínima' : 'Valor'"></span>
                                </label>
                                <input type="number" step="0.01" min="0" :name="`condiciones[${index}][valor]`" x-model="condicion.valor" class="w-full rounded-xl border-slate-300 text-sm mt-1">
                                <p x-show="condicion.tipo === 'cantidad_minima'" class="text-xs text-slate-400 mt-1">Ejemplo: 2 = la oferta se activa al llevar 2 unidades.</p>
                            </div>

                            <div class="flex items-end">

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

                            </div>

                        </div>

                    </div>

                </template>


                <div
                    x-show="condiciones.length === 0"
                    class="text-center py-8 text-sm text-slate-400"
                >
                    Esta oferta no tiene condiciones.
                </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">
                        Si no seleccionas ninguno, aplica a todos.
                    </p>

                </div>


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

                    @foreach($locales as $local)

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

                            <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">
                        Si no seleccionas ninguno, aplica a todos.
                    </p>

                </div>


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

                    @foreach($almacenes as $almacen)

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

                            <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">
                        Oferta activa
                    </div>

                    <div class="text-xs text-slate-500">
                        La oferta estará disponible para el POS.
                    </div>

                </div>

            </label>

        </div>


        {{-- BOTONES --}}

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

            <a
                href="{{ route('fidelizacion.index', ['tab' => 'ofertas']) }}"
                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 oferta' }}
            </button>

        </div>

    </form>

</div>


<script>

function ofertaFidelizacionForm() {

    return {

        tipo: @js(old('tipo', $registro->tipo ?? 'porcentaje')),

        condiciones: @js(
            old(
                'condiciones',
                isset($condiciones)
                    ? $condiciones->map(function ($condicion) {
                        return [
                            'tipo' => $condicion->tipo,
                            'producto_id' => $condicion->producto_id,
                            'categoria_id' => $condicion->categoria_id,
                            'valor' => $condicion->valor,
                            'alcance' => $condicion->producto_id ? 'producto' : ($condicion->categoria_id ? 'categoria' : 'carrito'),
                        ];
                    })->values()->toArray()
                    : []
            )
        ),

        agregarCondicion() {

            this.condiciones.push({
                tipo: 'producto',
                producto_id: '',
                categoria_id: '',
                valor: '',
                alcance: 'producto'
            });

        },

        eliminarCondicion(index) {

            this.condiciones.splice(index, 1);

        }

    }

}

</script>

@endsection