@extends('layouts.app')

@section('titulo', 'Códigos de Fidelización')

@section('contenido')

<div 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">
                <div class="w-11 h-11 rounded-2xl bg-brand-100 text-brand-600 flex items-center justify-center">
                    <x-icon name="ticket" class="w-6 h-6"/>
                </div>

                <div>
                    <h1 class="text-2xl font-bold text-slate-800">
                        Códigos de Fidelización
                    </h1>

                    <p class="text-sm text-slate-500">
                        Administra códigos promocionales y sus condiciones.
                    </p>
                </div>
            </div>
        </div>

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

    </div>


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

    @if(session('success'))
        <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            {{ session('error') }}
        </div>
    @endif


    {{-- =========================================================
        TABLA
    ========================================================== --}}

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

        <div class="px-5 py-4 border-b border-slate-200 flex flex-col md:flex-row md:items-center md:justify-between gap-3">

            <div>
                <h2 class="font-bold text-slate-800">
                    Códigos registrados
                </h2>

                <p class="text-xs text-slate-500 mt-1">
                    Los códigos activos podrán ser consultados posteriormente desde el POS.
                </p>
            </div>

            <div class="text-sm text-slate-500">
                {{ $codigos->total() }} registros
            </div>

        </div>


        @if($codigos->count())

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

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

                    <thead class="bg-slate-50 border-b border-slate-200">

                        <tr>

                            <th class="text-left px-5 py-3 font-semibold text-slate-600">
                                Código
                            </th>

                            <th class="text-left px-5 py-3 font-semibold text-slate-600">
                                Nombre
                            </th>

                            <th class="text-left px-5 py-3 font-semibold text-slate-600">
                                Tipo
                            </th>

                            <th class="text-left px-5 py-3 font-semibold text-slate-600">
                                Valor
                            </th>

                            <th class="text-center px-5 py-3 font-semibold text-slate-600">
                                Condiciones
                            </th>

                            <th class="text-center px-5 py-3 font-semibold text-slate-600">
                                Usos
                            </th>

                            <th class="text-center px-5 py-3 font-semibold text-slate-600">
                                Vigencia
                            </th>

                            <th class="text-center px-5 py-3 font-semibold text-slate-600">
                                Estado
                            </th>

                            <th class="text-right px-5 py-3 font-semibold text-slate-600">
                                Acciones
                            </th>

                        </tr>

                    </thead>


                    <tbody class="divide-y divide-slate-100">

                    @foreach($codigos as $codigo)

                        <tr class="hover:bg-slate-50 transition">

                            {{-- Código --}}
                            <td class="px-5 py-4">

                                <div class="font-bold text-slate-800">
                                    {{ $codigo->codigo }}
                                </div>

                                @if($codigo->descripcion)
                                    <div class="text-xs text-slate-400 mt-1 max-w-xs truncate">
                                        {{ $codigo->descripcion }}
                                    </div>
                                @endif

                            </td>


                            {{-- Nombre --}}
                            <td class="px-5 py-4">

                                <span class="font-medium text-slate-700">
                                    {{ $codigo->nombre ?: 'Sin nombre' }}
                                </span>

                            </td>


                            {{-- Tipo --}}
                            <td class="px-5 py-4">

                                @php
                                    $tipoClase = match($codigo->tipo) {
                                        'monto' => 'bg-blue-100 text-blue-700',
                                        'porcentaje' => 'bg-purple-100 text-purple-700',
                                        'puntos' => 'bg-amber-100 text-amber-700',
                                        default => 'bg-slate-100 text-slate-700',
                                    };

                                    $tipoTexto = match($codigo->tipo) {
                                        'monto' => 'Monto',
                                        'porcentaje' => 'Porcentaje',
                                        'puntos' => 'Puntos',
                                        default => ucfirst($codigo->tipo),
                                    };
                                @endphp

                                <span class="inline-flex px-2.5 py-1 rounded-lg text-xs font-semibold {{ $tipoClase }}">
                                    {{ $tipoTexto }}
                                </span>

                            </td>


                            {{-- Valor --}}
                            <td class="px-5 py-4">

                                <span class="font-bold text-slate-800">

                                    @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

                                </span>

                            </td>


                            {{-- Condiciones --}}
                            <td class="px-5 py-4 text-center">

                                <span class="inline-flex items-center justify-center min-w-8 h-8 px-2 rounded-lg bg-slate-100 text-slate-700 font-bold">
                                    {{ $codigo->condiciones_count }}
                                </span>

                            </td>


                            {{-- Usos --}}
                            <td class="px-5 py-4 text-center">

                                <div class="font-semibold text-slate-700">
                                    {{ $codigo->usos_actuales }}
                                    /
                                    {{ $codigo->usos_maximos ?? '∞' }}
                                </div>

                            </td>


                            {{-- Vigencia --}}
                            <td class="px-5 py-4">

                                <div class="text-xs text-slate-500 text-center">

                                    @if($codigo->fecha_inicio)
                                        <div>
                                            Desde:
                                            <strong>
                                                {{ \Carbon\Carbon::parse($codigo->fecha_inicio)->format('d/m/Y') }}
                                            </strong>
                                        </div>
                                    @endif

                                    @if($codigo->fecha_fin)
                                        <div>
                                            Hasta:
                                            <strong>
                                                {{ \Carbon\Carbon::parse($codigo->fecha_fin)->format('d/m/Y') }}
                                            </strong>
                                        </div>
                                    @endif

                                    @if(!$codigo->fecha_inicio && !$codigo->fecha_fin)
                                        <span class="text-emerald-600 font-semibold">
                                            Sin límite
                                        </span>
                                    @endif

                                </div>

                            </td>


                            {{-- Estado --}}
                            <td class="px-5 py-4 text-center">

                                @if($codigo->estado)

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

                                @else

                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-red-100 text-red-700 text-xs font-bold">
                                        <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>
                                        Inactivo
                                    </span>

                                @endif

                            </td>


                            {{-- Acciones --}}
                            <td class="px-5 py-4">

                                <div class="flex items-center justify-end gap-2">

                                    {{-- Activar / Desactivar --}}
                                    <form
                                        method="POST"
                                        action="{{ route('fidelizacion.codigos.toggle', $codigo) }}"
                                    >
                                        @csrf
                                        @method('PATCH')

                                        <button
                                            type="submit"
                                            title="{{ $codigo->estado ? 'Desactivar' : 'Activar' }}"
                                            class="w-9 h-9 rounded-lg flex items-center justify-center
                                            {{ $codigo->estado
                                                ? 'bg-amber-50 text-amber-600 hover:bg-amber-100'
                                                : 'bg-emerald-50 text-emerald-600 hover:bg-emerald-100'
                                            }}"
                                        >
                                            <x-icon
                                                name="{{ $codigo->estado ? 'pause' : 'play' }}"
                                                class="w-4 h-4"
                                            />
                                        </button>

                                    </form>


                                    {{-- Editar --}}
                                    <a
                                        href="{{ route('fidelizacion.codigos.edit', $codigo) }}"
                                        title="Editar"
                                        class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 flex items-center justify-center"
                                    >
                                        <x-icon name="pencil" class="w-4 h-4"/>
                                    </a>


                                    {{-- Eliminar --}}
                                    @if($codigo->usos_actuales == 0)

                                        <form
                                            method="POST"
                                            action="{{ route('fidelizacion.codigos.destroy', $codigo) }}"
                                            onsubmit="return confirm('¿Está seguro de eliminar este código?')"
                                        >
                                            @csrf
                                            @method('DELETE')

                                            <button
                                                type="submit"
                                                title="Eliminar"
                                                class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 flex items-center justify-center"
                                            >
                                                <x-icon name="trash" class="w-4 h-4"/>
                                            </button>

                                        </form>

                                    @else

                                        <button
                                            type="button"
                                            disabled
                                            title="No se puede eliminar porque ya fue utilizado"
                                            class="w-9 h-9 rounded-lg bg-slate-100 text-slate-300 flex items-center justify-center cursor-not-allowed"
                                        >
                                            <x-icon name="trash" class="w-4 h-4"/>
                                        </button>

                                    @endif

                                </div>

                            </td>

                        </tr>

                    @endforeach

                    </tbody>

                </table>

            </div>


            {{-- Paginación --}}
            <div class="px-5 py-4 border-t border-slate-200">
                {{ $codigos->appends(request()->except('codigos_page'))->links() }}
            </div>

        @else

            <div class="py-16 text-center">

                <div class="w-16 h-16 mx-auto rounded-2xl bg-slate-100 text-slate-400 flex items-center justify-center">
                    <x-icon name="ticket" class="w-8 h-8"/>
                </div>

                <h3 class="mt-4 font-bold text-slate-700">
                    No hay códigos registrados
                </h3>

                <p class="text-sm text-slate-500 mt-1">
                    Crea tu primer código de fidelización.
                </p>

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

            </div>

        @endif

    </div>

</div>

@endsection