@extends('layouts.app')

@section('titulo', isset($codigo) ? 'Editar Código de Fidelización' : 'Nuevo Código de Fidelización')

@section('contenido')

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

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

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

        <div>
            <div class="flex items-center gap-3">
                <a
                    href="{{ route('fidelizacion.index', ['tab' => 'codigos']) }}"
                    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($codigo) ? 'Editar código' : 'Nuevo código' }}
                    </h1>

                    <p class="text-sm text-slate-500">
                        Configura un código promocional y sus condiciones.
                    </p>
                </div>
            </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 space-y-1">

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

            </ul>

        </div>

    @endif


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

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

        @csrf

        @if(isset($codigo))
            @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 código
                </h2>

                <p class="text-sm text-slate-500 mt-1">
                    Define la identificación y el beneficio que otorgará.
                </p>

            </div>


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

                {{-- CÓDIGO --}}

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">
                        Código
                    </label>

                    <input
                        type="text"
                        name="codigo"
                        value="{{ old('codigo', $codigo->codigo ?? '') }}"
                        placeholder="Ej: VERANO2026"
                        class="w-full rounded-xl border-slate-300 uppercase"
                    >

                    <p class="text-xs text-slate-400 mt-1">
                        Si lo dejas vacío, el sistema generará uno automáticamente.
                    </p>
                </div>


                {{-- NOMBRE --}}

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

                    <input
                        type="text"
                        name="nombre"
                        value="{{ old('nombre', $codigo->nombre ?? '') }}"
                        placeholder="Ej: Descuento de verano"
                        class="w-full rounded-xl border-slate-300"
                    >
                </div>


                {{-- TIPO --}}

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">
                        Tipo de beneficio
                    </label>

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

                        <option value="monto"
                            @selected(old('tipo', $codigo->tipo ?? 'monto') === 'monto')>
                            Descuento por monto
                        </option>

                        <option value="porcentaje"
                            @selected(old('tipo', $codigo->tipo ?? '') === 'porcentaje')>
                            Descuento porcentual
                        </option>

                        <option value="puntos"
                            @selected(old('tipo', $codigo->tipo ?? '') === 'puntos')>
                            Puntos
                        </option>

                    </select>
                </div>


                {{-- VALOR --}}

                <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"
                        value="{{ old('valor', $codigo->valor ?? 0) }}"
                        class="w-full rounded-xl border-slate-300"
                    >

                    <p
                        class="text-xs text-slate-400 mt-1"
                        x-text="
                            tipo === 'porcentaje'
                                ? 'Ejemplo: 10 = 10%'
                                : tipo === 'puntos'
                                    ? 'Cantidad de puntos otorgados'
                                    : 'Monto en soles'
                        "
                    ></p>
                </div>


                {{-- DESCRIPCIÓN --}}

                <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"
                        placeholder="Descripción del beneficio..."
                        class="w-full rounded-xl border-slate-300"
                    >{{ old('descripcion', $codigo->descripcion ?? '') }}</textarea>

                </div>

            </div>

        </div>


        {{-- =====================================================
            VIGENCIA Y USOS
        ====================================================== --}}

        <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 y restricciones
                </h2>

            </div>


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

                <div>

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

                    <input
                        type="date"
                        name="fecha_inicio"
                        value="{{ old('fecha_inicio', isset($codigo) && $codigo->fecha_inicio ? \Carbon\Carbon::parse($codigo->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 de fin
                    </label>

                    <input
                        type="date"
                        name="fecha_fin"
                        value="{{ old('fecha_fin', isset($codigo) && $codigo->fecha_fin ? \Carbon\Carbon::parse($codigo->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">
                        Máximo de usos
                    </label>

                    <input
                        type="number"
                        min="1"
                        name="usos_maximos"
                        value="{{ old('usos_maximos', $codigo->usos_maximos ?? '') }}"
                        placeholder="Sin límite"
                        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
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Puedes hacer que el código solo funcione bajo determinadas condiciones.
                    </p>
                </div>

                <button
                    type="button"
                    @click="agregarCondicion()"
                    class="px-4 py-2 rounded-xl bg-slate-800 text-white text-sm font-medium hover:bg-slate-700"
                >
                    + 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-4 gap-4">

                            <div>

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

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

                                    <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="block text-xs font-medium text-slate-600 mb-1">
                                    Producto
                                </label>

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

                                    <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="block text-xs font-medium text-slate-600 mb-1">
                                    Categoría
                                </label>

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

                                    <option value="">
                                        Seleccionar
                                    </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="block text-xs font-medium text-slate-600 mb-1">
                                    Valor
                                </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"
                                >

                            </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"
                >
                    No hay condiciones configuradas.
                </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', $codigo->estado ?? 1) ? 'checked' : '' }}
                    class="rounded border-slate-300"
                >

                <div>

                    <div class="font-medium text-slate-800">
                        Código activo
                    </div>

                    <div class="text-xs text-slate-500">
                        El código podrá ser utilizado en el POS.
                    </div>

                </div>

            </label>

        </div>


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

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

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

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

        </div>

    </form>

</div>


<script>

function codigoFidelizacionForm() {

    return {

        tipo: @js(old('tipo', $codigo->tipo ?? 'monto')),

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

        agregarCondicion() {

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

        },

        eliminarCondicion(index) {

            this.condiciones.splice(index, 1);

        }

    }

}

</script>

@endsection