@extends('layouts.app')

@section('titulo', 'Combos')

@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-emerald-100 text-emerald-600 flex items-center justify-center">
                    <x-icon name="gift" class="w-6 h-6"/>
                </div>

                <div>

                    <h1 class="text-2xl font-bold text-slate-800">
                        Combos
                    </h1>

                    <p class="text-sm text-slate-500">
                        Agrupa productos y define precios especiales para el POS.
                    </p>

                </div>

            </div>

        </div>


        <button
            type="button"
            onclick="window.dispatchEvent(new CustomEvent('abrir-combo'))"
            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 combo

        </button>

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


    {{-- =========================================================
        LISTADO
    ========================================================== --}}

    <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">
                    Combos registrados
                </h2>

                <p class="text-xs text-slate-500 mt-1">
                    El POS podrá identificar automáticamente los combos disponibles según los productos del carrito.
                </p>

            </div>

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

        </div>


        @if($combos->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">
                                Combo
                            </th>

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

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

                            <th class="text-center px-5 py-3 font-semibold text-slate-600">
                                Acumulable
                            </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($combos as $combo)

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

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

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

                                @if($combo->descripcion)

                                    <div class="text-xs text-slate-400 mt-1 max-w-md truncate">
                                        {{ $combo->descripcion }}
                                    </div>

                                @endif

                            </td>


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

                                <span class="font-bold text-emerald-600 text-base">
                                    S/ {{ number_format($combo->precio, 2) }}
                                </span>

                            </td>


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

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

                            </td>


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

                                @if($combo->acumulable)

                                    <span class="inline-flex px-2.5 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-bold">
                                        Sí
                                    </span>

                                @else

                                    <span class="inline-flex px-2.5 py-1 rounded-full bg-slate-100 text-slate-500 text-xs font-bold">
                                        No
                                    </span>

                                @endif

                            </td>


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

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

                                    @if($combo->fecha_inicio || $combo->fecha_fin)

                                        @if($combo->fecha_inicio)

                                            <div>
                                                {{ \Carbon\Carbon::parse($combo->fecha_inicio)->format('d/m/Y') }}
                                            </div>

                                        @endif


                                        @if($combo->fecha_fin)

                                            <div>
                                                al {{ \Carbon\Carbon::parse($combo->fecha_fin)->format('d/m/Y') }}
                                            </div>

                                        @endif

                                    @else

                                        <span class="text-emerald-600 font-semibold">
                                            Sin límite
                                        </span>

                                    @endif

                                </div>

                            </td>


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

                                @if($combo->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">

                                    <form
                                        method="POST"
                                        action="{{ route('fidelizacion.combos.toggle', $combo->id) }}"
                                    >

                                        @csrf
                                        @method('PATCH')

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

                                            <x-icon
                                                name="{{ $combo->estado ? 'pause' : 'play' }}"
                                                class="w-4 h-4"
                                            />

                                        </button>

                                    </form>


                                    <form
                                        method="POST"
                                        action="{{ route('fidelizacion.combos.destroy', $combo->id) }}"
                                        onsubmit="return confirm('¿Está seguro de eliminar este combo?')"
                                    >

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

                                </div>

                            </td>

                        </tr>

                    @endforeach

                    </tbody>

                </table>

            </div>


            <div class="px-5 py-4 border-t border-slate-200">

                {{ $combos->appends(request()->except('combos_page'))->links() }}

            </div>

        @else

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

                <div class="w-16 h-16 mx-auto rounded-2xl bg-emerald-50 text-emerald-400 flex items-center justify-center">

                    <x-icon name="gift" class="w-8 h-8"/>

                </div>

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

                <p class="text-sm text-slate-500 mt-1">
                    Crea un combo agrupando los productos que quieras vender juntos.
                </p>

            </div>

        @endif

    </div>

</div>

@endsection