@extends('layouts.app')

@section('titulo', 'Fidelización')

@section('contenido')

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

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

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

        <div>
            <div class="text-xs font-semibold uppercase tracking-wider text-brand-600">
                Marketing y fidelización
            </div>

            <h1 class="text-2xl font-bold text-gray-900">
                Fidelización
            </h1>

            <p class="text-sm text-gray-500 mt-1">
                Administra puntos, códigos promocionales, ofertas y combos
                que posteriormente serán utilizados automáticamente por el POS.
            </p>
        </div>

        <div class="flex flex-wrap gap-2">

            <button
                type="button"
                @click="abrirModalConfiguracion()"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl
                       border border-gray-200 bg-white text-gray-700
                       hover:bg-gray-50 transition"
            >
                <x-icon name="cog-6-tooth" class="w-5 h-5" />
                Configuración
            </button>

        </div>

    </div>


    {{-- =========================================================
        MENSAJES
    ========================================================== --}}

    @if(session('success'))

        <div
            class="flex items-start gap-3 p-4 rounded-xl border border-green-200
                   bg-green-50 text-green-800"
        >
            <x-icon name="check-circle" class="w-5 h-5 mt-0.5 shrink-0" />

            <div class="text-sm">
                {{ session('success') }}
            </div>
        </div>

    @endif


    @if(session('error'))

        <div
            class="flex items-start gap-3 p-4 rounded-xl border border-red-200
                   bg-red-50 text-red-800"
        >
            <x-icon name="exclamation-circle" class="w-5 h-5 mt-0.5 shrink-0" />

            <div class="text-sm">
                {{ session('error') }}
            </div>
        </div>

    @endif


    {{-- =========================================================
        ESTADÍSTICAS
    ========================================================== --}}

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

        {{-- Códigos activos --}}
        <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-medium text-gray-500">
                        Códigos activos
                    </p>

                    <p class="text-2xl font-bold text-gray-900 mt-1">
                        {{ $estadisticas['codigos_activos'] ?? 0 }}
                    </p>
                </div>

                <div class="w-11 h-11 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
                    <x-icon name="ticket" class="w-5 h-5" />
                </div>

            </div>

        </div>


        {{-- Usos --}}
        <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-medium text-gray-500">
                        Usos de códigos
                    </p>

                    <p class="text-2xl font-bold text-gray-900 mt-1">
                        {{ $estadisticas['usos_totales'] ?? 0 }}
                    </p>
                </div>

                <div class="w-11 h-11 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center">
                    <x-icon name="arrow-path" class="w-5 h-5" />
                </div>

            </div>

        </div>


        {{-- Descuentos --}}
        <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-medium text-gray-500">
                        Descuentos configurados
                    </p>

                    <p class="text-2xl font-bold text-gray-900 mt-1">
                        S/ {{ number_format($estadisticas['descuentos_totales'] ?? 0, 2) }}
                    </p>
                </div>

                <div class="w-11 h-11 rounded-xl bg-orange-50 text-orange-600 flex items-center justify-center">
                    <x-icon name="banknotes" class="w-5 h-5" />
                </div>

            </div>

        </div>


        {{-- Clientes --}}
        <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-medium text-gray-500">
                        Clientes con puntos
                    </p>

                    <p class="text-2xl font-bold text-gray-900 mt-1">
                        {{ $estadisticas['clientes_con_puntos'] ?? 0 }}
                    </p>
                </div>

                <div class="w-11 h-11 rounded-xl bg-green-50 text-green-600 flex items-center justify-center">
                    <x-icon name="users" class="w-5 h-5" />
                </div>

            </div>

        </div>


        {{-- Puntos --}}
        <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-medium text-gray-500">
                        Puntos en circulación
                    </p>

                    <p class="text-2xl font-bold text-gray-900 mt-1">
                        {{ number_format($estadisticas['puntos_en_circulacion'] ?? 0, 0) }}
                    </p>
                </div>

                <div class="w-11 h-11 rounded-xl bg-yellow-50 text-yellow-600 flex items-center justify-center">
                    <x-icon name="star" class="w-5 h-5" />
                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
        NAVEGACIÓN PRINCIPAL
    ========================================================== --}}

    <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">

        <div class="border-b border-gray-100 px-4 lg:px-6">

            <nav class="flex gap-1 overflow-x-auto">

                <button
                    type="button"
                    @click="tab = 'resumen'"
                    :class="tab === 'resumen'
                        ? 'text-brand-600 border-brand-600'
                        : 'text-gray-500 border-transparent hover:text-gray-700'"
                    class="px-4 py-4 text-sm font-semibold border-b-2 whitespace-nowrap transition"
                >
                    Resumen
                </button>

                <button
                    type="button"
                    @click="tab = 'configuracion'"
                    :class="tab === 'configuracion'
                        ? 'text-brand-600 border-brand-600'
                        : 'text-gray-500 border-transparent hover:text-gray-700'"
                    class="px-4 py-4 text-sm font-semibold border-b-2 whitespace-nowrap transition"
                >
                    Puntos
                </button>

                <button
                    type="button"
                    @click="tab = 'codigos'"
                    :class="tab === 'codigos'
                        ? 'text-brand-600 border-brand-600'
                        : 'text-gray-500 border-transparent hover:text-gray-700'"
                    class="px-4 py-4 text-sm font-semibold border-b-2 whitespace-nowrap transition"
                >
                    Códigos
                </button>

                <button
                    type="button"
                    @click="tab = 'ofertas'"
                    :class="tab === 'ofertas'
                        ? 'text-brand-600 border-brand-600'
                        : 'text-gray-500 border-transparent hover:text-gray-700'"
                    class="px-4 py-4 text-sm font-semibold border-b-2 whitespace-nowrap transition"
                >
                    Ofertas
                </button>

                <button
                    type="button"
                    @click="tab = 'combos'"
                    :class="tab === 'combos'
                        ? 'text-brand-600 border-brand-600'
                        : 'text-gray-500 border-transparent hover:text-gray-700'"
                    class="px-4 py-4 text-sm font-semibold border-b-2 whitespace-nowrap transition"
                >
                    Combos
                </button>

            </nav>

        </div>


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

        <div
            x-show="tab === 'resumen'"
            x-cloak
            class="p-5 lg:p-6"
        >

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

                {{-- Estado --}}
                <div class="border border-gray-100 rounded-2xl p-5">

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

                        <div>
                            <p class="text-sm font-semibold text-gray-900">
                                Programa de fidelización
                            </p>

                            <p class="text-xs text-gray-500 mt-1">
                                Estado general
                            </p>
                        </div>

                        @if(($configuracion->estado ?? 0) == 1)

                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                         bg-green-50 text-green-700 text-xs font-semibold">
                                <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                                Activo
                            </span>

                        @else

                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full
                                         bg-gray-100 text-gray-600 text-xs font-semibold">
                                <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
                                Inactivo
                            </span>

                        @endif

                    </div>

                    <div class="mt-5 text-sm text-gray-600">
                        El POS consultará automáticamente las promociones,
                        códigos, puntos y combos que se encuentren activos.
                    </div>

                </div>


                {{-- Puntos --}}
                <div class="border border-gray-100 rounded-2xl p-5">

                    <p class="text-sm font-semibold text-gray-900">
                        Configuración de puntos
                    </p>

                    <div class="mt-4 space-y-3">

                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">
                                Puntos por sol
                            </span>

                            <strong class="text-gray-900">
                                {{ number_format($configuracion->puntos_por_sol ?? 0, 2) }}
                            </strong>
                        </div>

                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">
                                Valor de 1 punto
                            </span>

                            <strong class="text-gray-900">
                                S/ {{ number_format($configuracion->valor_punto ?? 0, 2) }}
                            </strong>
                        </div>

                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">
                                Mínimo de canje
                            </span>

                            <strong class="text-gray-900">
                                {{ number_format($configuracion->minimo_canje ?? 0, 0) }}
                            </strong>
                        </div>

                    </div>

                </div>


                {{-- Funcionamiento --}}
                <div class="border border-gray-100 rounded-2xl p-5">

                    <p class="text-sm font-semibold text-gray-900">
                        Integración con POS
                    </p>

                    <div class="mt-4 space-y-3 text-sm text-gray-600">

                        <div class="flex gap-2">
                            <x-icon name="check-circle" class="w-5 h-5 text-green-500 shrink-0" />
                            Consulta de códigos.
                        </div>

                        <div class="flex gap-2">
                            <x-icon name="check-circle" class="w-5 h-5 text-green-500 shrink-0" />
                            Aplicación de ofertas.
                        </div>

                        <div class="flex gap-2">
                            <x-icon name="check-circle" class="w-5 h-5 text-green-500 shrink-0" />
                            Detección de combos.
                        </div>

                        <div class="flex gap-2">
                            <x-icon name="check-circle" class="w-5 h-5 text-green-500 shrink-0" />
                            Consulta y canje de puntos.
                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- =====================================================
            CONFIGURACIÓN DE PUNTOS
        ====================================================== --}}

        <div
            x-show="tab === 'configuracion'"
            x-cloak
            class="p-5 lg:p-6"
        >

            <div class="max-w-3xl">

                <div class="mb-5">

                    <h2 class="text-lg font-bold text-gray-900">
                        Configuración de puntos
                    </h2>

                    <p class="text-sm text-gray-500 mt-1">
                        Define cómo se generan y utilizan los puntos de fidelización.
                    </p>

                </div>


                <form
                    method="POST"
                    action="{{ route('fidelizacion.configuracion.update') }}"
                    class="space-y-5"
                >

                    @csrf

                    @method('PUT')


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

                        <div>

                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Puntos por S/
                            </label>

                            <input
                                type="number"
                                step="0.01"
                                min="0.01"
                                name="puntos_por_sol"
                                value="{{ old('puntos_por_sol', $configuracion->puntos_por_sol ?? 1) }}"
                                class="w-full rounded-xl border-gray-200 focus:border-brand-500
                                       focus:ring-brand-500"
                                required
                            >

                        </div>


                        <div>

                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Valor de cada punto
                            </label>

                            <div class="relative">

                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                                    S/
                                </span>

                                <input
                                    type="number"
                                    step="0.01"
                                    min="0.01"
                                    name="valor_punto"
                                    value="{{ old('valor_punto', $configuracion->valor_punto ?? 1) }}"
                                    class="w-full pl-10 rounded-xl border-gray-200
                                           focus:border-brand-500 focus:ring-brand-500"
                                    required
                                >

                            </div>

                        </div>


                        <div>

                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Mínimo para canjear
                            </label>

                            <input
                                type="number"
                                min="1"
                                step="1"
                                name="minimo_canje"
                                value="{{ old('minimo_canje', $configuracion->minimo_canje ?? 1) }}"
                                class="w-full rounded-xl border-gray-200
                                       focus:border-brand-500 focus:ring-brand-500"
                                required
                            >

                        </div>

                    </div>


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

                        <input
                            type="checkbox"
                            name="estado"
                            value="1"
                            @checked(old('estado', $configuracion->estado ?? 1))
                            class="rounded border-gray-300 text-brand-600
                                   focus:ring-brand-500"
                        >

                        <span>
                            <span class="block text-sm font-medium text-gray-900">
                                Activar programa de puntos
                            </span>

                            <span class="block text-xs text-gray-500">
                                El POS podrá generar y utilizar puntos.
                            </span>
                        </span>

                    </label>


                    <div class="flex justify-end">

                        <button
                            type="submit"
                            class="inline-flex items-center gap-2 px-5 py-2.5
                                   rounded-xl bg-brand-600 text-white font-semibold
                                   hover:bg-brand-700 transition"
                        >
                            <x-icon name="check" class="w-5 h-5" />
                            Guardar configuración
                        </button>

                    </div>

                </form>

            </div>

        </div>


        {{-- =====================================================
            CÓDIGOS
        ====================================================== --}}

        <div
            x-show="tab === 'codigos'"
            x-cloak
            class="p-5 lg:p-6"
        >

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-5">

                <div>

                    <h2 class="text-lg font-bold text-gray-900">
                        Códigos de fidelización
                    </h2>

                    <p class="text-sm text-gray-500 mt-1">
                        Códigos que el cliente podrá utilizar en el POS.
                    </p>

                </div>

               <a
                    href="{{ route('fidelizacion.codigos.create') }}"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-brand-600 text-white font-semibold hover:bg-brand-700 transition"
                >
                    <x-icon name="plus" class="w-4 h-4" />
                    Nuevo código
                </a>

            </div>


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

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

                    <thead>

                        <tr class="border-b border-gray-100 text-left">

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Código
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Nombre
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Tipo
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Valor
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Usos
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Estado
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500 text-right">
                                Acciones
                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-50">

                        @forelse($codigos as $codigo)

                            <tr class="hover:bg-gray-50">

                                <td class="py-3 px-3">

                                    <span class="font-bold text-brand-600">
                                        {{ $codigo->codigo }}
                                    </span>

                                </td>

                                <td class="py-3 px-3 text-gray-700">
                                    {{ $codigo->nombre ?: 'Sin nombre' }}
                                </td>

                                <td class="py-3 px-3">

                                    @switch($codigo->tipo)

                                        @case('porcentaje')
                                            <span class="px-2.5 py-1 rounded-lg bg-blue-50 text-blue-700 text-xs font-semibold">
                                                Porcentaje
                                            </span>
                                            @break

                                        @case('monto')
                                            <span class="px-2.5 py-1 rounded-lg bg-orange-50 text-orange-700 text-xs font-semibold">
                                                Monto
                                            </span>
                                            @break

                                        @case('puntos')
                                            <span class="px-2.5 py-1 rounded-lg bg-yellow-50 text-yellow-700 text-xs font-semibold">
                                                Puntos
                                            </span>
                                            @break

                                    @endswitch

                                </td>

                                <td class="py-3 px-3 font-semibold text-gray-900">

                                    @if($codigo->tipo === 'porcentaje')

                                        {{ number_format($codigo->valor, 2) }}%

                                    @elseif($codigo->tipo === 'monto')

                                        S/ {{ number_format($codigo->valor, 2) }}

                                    @else

                                        {{ number_format($codigo->valor, 2) }} pts

                                    @endif

                                </td>

                                <td class="py-3 px-3 text-gray-600">

                                    {{ $codigo->usos_actuales }}

                                    @if($codigo->usos_maximos)
                                        / {{ $codigo->usos_maximos }}
                                    @else
                                        / ∞
                                    @endif

                                </td>

                                <td class="py-3 px-3">

                                    @if($codigo->estado)

                                        <span class="px-2.5 py-1 rounded-full bg-green-50 text-green-700 text-xs font-semibold">
                                            Activo
                                        </span>

                                    @else

                                        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-semibold">
                                            Inactivo
                                        </span>

                                    @endif

                                </td>

                                <td class="py-3 px-3 text-right">
                                    <a
                                        href="{{ route('fidelizacion.codigos.edit', ['codigo' => $codigo->id]) }}"
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg
                                            border border-gray-200 bg-white text-gray-700
                                            hover:bg-gray-50 transition"
                                    >
                                        <x-icon name="pencil-square" class="w-4 h-4" />
                                        Editar
                                    </a>
                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td
                                    colspan="7"
                                    class="py-10 text-center text-gray-500"
                                >
                                    No hay códigos registrados.

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>


        {{-- =====================================================
            OFERTAS
        ====================================================== --}}

        <div
            x-show="tab === 'ofertas'"
            x-cloak
            class="p-5 lg:p-6"
        >

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-5">

                <div>

                    <h2 class="text-lg font-bold text-gray-900">
                        Ofertas
                    </h2>

                    <p class="text-sm text-gray-500 mt-1">
                        Promociones automáticas según productos, categorías,
                        montos, cantidades, locales y almacenes.
                    </p>

                </div>

                <a
                    href="{{ route('fidelizacion.ofertas.create') }}"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-brand-600 text-white font-semibold hover:bg-brand-700 transition"
                >
                    <x-icon name="plus" class="w-4 h-4" />
                    Nueva oferta
                </a>

            </div>


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

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

                    <thead>

                        <tr class="border-b border-gray-100 text-left">

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Oferta
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Tipo
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Valor
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Prioridad
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Acumulable
                            </th>

                             <th class="py-3 px-3 font-semibold text-gray-500">
                                Estado
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500 text-right">
                                Acciones
                            </th>


                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-50">

                        @forelse($ofertas as $oferta)

                            <tr class="hover:bg-gray-50">

                                <td class="py-3 px-3">

                                    <div class="font-semibold text-gray-900">
                                        {{ $oferta->nombre }}
                                    </div>

                                    @if($oferta->descripcion)

                                        <div class="text-xs text-gray-500 mt-0.5">
                                            {{ $oferta->descripcion }}
                                        </div>

                                    @endif

                                </td>

                                <td class="py-3 px-3 text-gray-600">
                                    {{ ucfirst(str_replace('_', ' ', $oferta->tipo)) }}
                                </td>

                                <td class="py-3 px-3 font-semibold text-gray-900">

                                    @if($oferta->tipo === 'porcentaje')

                                        {{ number_format($oferta->valor, 2) }}%

                                    @else

                                        S/ {{ number_format($oferta->valor, 2) }}

                                    @endif

                                </td>

                                <td class="py-3 px-3">
                                    {{ $oferta->prioridad }}
                                </td>

                                <td class="py-3 px-3">

                                    @if($oferta->acumulable)

                                        <span class="text-green-600 font-semibold">
                                            Sí
                                        </span>

                                    @else

                                        <span class="text-gray-500">
                                            No
                                        </span>

                                    @endif

                                </td>

                                <td class="py-3 px-3">

                                    @if($oferta->estado)

                                        <span class="px-2.5 py-1 rounded-full bg-green-50 text-green-700 text-xs font-semibold">
                                            Activa
                                        </span>

                                    @else

                                        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-semibold">
                                            Inactiva
                                        </span>

                                    @endif

                                </td>
                                <td class="py-3 px-3 text-right">
                                    <a
                                        href="{{ route('fidelizacion.ofertas.edit', ['oferta' => $oferta->id]) }}"
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg
                                            border border-gray-200 bg-white text-gray-700
                                            hover:bg-gray-50 transition"
                                    >
                                        <x-icon name="pencil-square" class="w-4 h-4" />
                                        Editar
                                    </a>
                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td
                                    colspan="7"
                                    class="py-10 text-center text-gray-500"
                                >
                                    No hay ofertas registradas.
                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>


        {{-- =====================================================
            COMBOS
        ====================================================== --}}

        <div
            x-show="tab === 'combos'"
            x-cloak
            class="p-5 lg:p-6"
        >

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-5">

                <div>

                    <h2 class="text-lg font-bold text-gray-900">
                        Combos
                    </h2>

                    <p class="text-sm text-gray-500 mt-1">
                        Agrupa productos y define un precio especial
                        para venderlos como un solo combo.
                    </p>

                </div>

                <a
                    href="{{ route('fidelizacion.combos.create') }}"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-brand-600 text-white font-semibold hover:bg-brand-700 transition"
                >
                    <x-icon name="plus" class="w-4 h-4" />
                    Nuevo combo
                </a>

            </div>


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

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

                    <thead>

                        <tr class="border-b border-gray-100 text-left">

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Combo
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Precio
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Prioridad
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500">
                                Acumulable
                            </th>

                             <th class="py-3 px-3 font-semibold text-gray-500">
                                Estado
                            </th>

                            <th class="py-3 px-3 font-semibold text-gray-500 text-right">
                                Acciones
                            </th>


                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-50">

                        @forelse($combos as $combo)

                            <tr class="hover:bg-gray-50">

                                <td class="py-3 px-3">

                                    <div class="font-semibold text-gray-900">
                                        {{ $combo->nombre }}
                                    </div>

                                    @if($combo->descripcion)

                                        <div class="text-xs text-gray-500 mt-0.5">
                                            {{ $combo->descripcion }}
                                        </div>

                                    @endif

                                </td>

                                <td class="py-3 px-3 font-bold text-gray-900">
                                    S/ {{ number_format($combo->precio, 2) }}
                                </td>

                                <td class="py-3 px-3">
                                    {{ $combo->prioridad }}
                                </td>

                                <td class="py-3 px-3">

                                    @if($combo->acumulable)

                                        <span class="text-green-600 font-semibold">
                                            Sí
                                        </span>

                                    @else

                                        <span class="text-gray-500">
                                            No
                                        </span>

                                    @endif

                                </td>

                                <td class="py-3 px-3">

                                    @if($combo->estado)

                                        <span class="px-2.5 py-1 rounded-full bg-green-50 text-green-700 text-xs font-semibold">
                                            Activo
                                        </span>

                                    @else

                                        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-semibold">
                                            Inactivo
                                        </span>

                                    @endif

                                </td>
                                <td class="py-3 px-3 text-right">
                                    <a
                                    href="{{ route('fidelizacion.combos.edit', ['combo' => $combo->id]) }}"
                                    class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg
                                        border border-gray-200 bg-white text-gray-700
                                        hover:bg-gray-50 transition"
                                >
                                        <x-icon name="pencil-square" class="w-4 h-4" />
                                        Editar
                                    </a>
                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td
                                    colspan="6"
                                    class="py-10 text-center text-gray-500"
                                >
                                    No hay combos registrados.
                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>


    {{-- =========================================================
        MODAL CONFIGURACIÓN
    ========================================================== --}}

    <div
        x-show="modalConfiguracion"
        x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
    >

        <div
            class="absolute inset-0 bg-black/40"
            @click="modalConfiguracion = false"
        ></div>


        <div
            class="relative w-full max-w-lg bg-white rounded-2xl shadow-xl"
            @click.stop
        >

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

                <div>

                    <h3 class="font-bold text-gray-900">
                        Configuración de puntos
                    </h3>

                    <p class="text-xs text-gray-500 mt-1">
                        Configuración general de fidelización.
                    </p>

                </div>

                <button
                    type="button"
                    @click="modalConfiguracion = false"
                    class="w-9 h-9 rounded-lg hover:bg-gray-100
                           flex items-center justify-center"
                >
                    <x-icon name="x-mark" class="w-5 h-5 text-gray-500" />
                </button>

            </div>


            <form
                method="POST"
                action="{{ route('fidelizacion.configuracion.update') }}"
            >

                @csrf

                @method('PUT')


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

                    <div>

                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Puntos por cada S/
                        </label>

                        <input
                            type="number"
                            step="0.01"
                            min="0.01"
                            name="puntos_por_sol"
                            value="{{ $configuracion->puntos_por_sol ?? 1 }}"
                            class="w-full rounded-xl border-gray-200
                                   focus:border-brand-500 focus:ring-brand-500"
                            required
                        >

                    </div>


                    <div>

                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Valor monetario del punto
                        </label>

                        <div class="relative">

                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                                S/
                            </span>

                            <input
                                type="number"
                                step="0.01"
                                min="0.01"
                                name="valor_punto"
                                value="{{ $configuracion->valor_punto ?? 1 }}"
                                class="w-full pl-10 rounded-xl border-gray-200
                                       focus:border-brand-500 focus:ring-brand-500"
                                required
                            >

                        </div>

                    </div>


                    <div>

                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Mínimo de puntos para canje
                        </label>

                        <input
                            type="number"
                            min="1"
                            name="minimo_canje"
                            value="{{ $configuracion->minimo_canje ?? 1 }}"
                            class="w-full rounded-xl border-gray-200
                                   focus:border-brand-500 focus:ring-brand-500"
                            required
                        >

                    </div>


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

                        <input
                            type="checkbox"
                            name="estado"
                            value="1"
                            @checked($configuracion->estado ?? 1)
                            class="rounded border-gray-300 text-brand-600
                                   focus:ring-brand-500"
                        >

                        <span class="text-sm text-gray-700">
                            Programa de puntos activo
                        </span>

                    </label>

                </div>


                <div class="flex justify-end gap-2 p-5 border-t border-gray-100">

                    <button
                        type="button"
                        @click="modalConfiguracion = false"
                        class="px-4 py-2.5 rounded-xl border border-gray-200
                               text-gray-700 font-semibold hover:bg-gray-50"
                    >
                        Cancelar
                    </button>

                    <button
                        type="submit"
                        class="px-4 py-2.5 rounded-xl bg-brand-600 text-white
                               font-semibold hover:bg-brand-700"
                    >
                        Guardar
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


{{-- =========================================================
    ALPINE
========================================================== --}}

<script>

document.addEventListener('alpine:init', () => {

    Alpine.data('fidelizacionApp', () => ({

        tab: @js(request('tab', 'resumen')),

        modalConfiguracion: false,

        modalOferta: false,

        modalCombo: false,


        init() {

            if (!['resumen', 'configuracion', 'codigos', 'ofertas', 'combos'].includes(this.tab)) {
                this.tab = 'resumen';
            }

        },


        abrirModalConfiguracion() {
            this.modalConfiguracion = true;
        },


        abrirModalOferta() {
            this.tab = 'ofertas';

            /*
             * El formulario completo de ofertas se agregará
             * en la vista de ofertas.
             */
            this.modalOferta = true;
        },


        abrirModalCombo() {
            this.tab = 'combos';

            /*
             * El formulario completo de combos se agregará
             * en la vista de combos.
             */
            this.modalCombo = true;
        }

    }));

});

</script>

@endsection