@extends('layouts.app')

@section('titulo', 'Ofertas')

@section('contenido')

<div
    x-data="ofertasApp()"
    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">
                Fidelización
            </div>

            <h1 class="text-2xl font-bold text-gray-900">
                Ofertas
            </h1>

            <p class="text-sm text-gray-500 mt-1">
                Administra descuentos, promociones y precios especiales.
            </p>
        </div>

        <button
            type="button"
            @click="abrirCrear()"
            class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl
                   bg-brand-600 text-white font-semibold text-sm
                   hover:bg-brand-700 transition shadow-sm"
        >
            <x-icon name="plus" class="w-5 h-5" />
            Nueva oferta
        </button>

    </div>


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

    @if(session('success'))

        <div class="flex items-start gap-3 p-4 rounded-xl bg-green-50 border border-green-200 text-green-800">

            <x-icon name="check-circle" class="w-5 h-5 mt-0.5 shrink-0" />

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

        </div>

    @endif


    @if(session('error'))

        <div class="flex items-start gap-3 p-4 rounded-xl bg-red-50 border border-red-200 text-red-800">

            <x-icon name="x-circle" class="w-5 h-5 mt-0.5 shrink-0" />

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

        </div>

    @endif


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

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

        <div class="bg-white rounded-2xl border border-gray-200 p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                        Total ofertas
                    </p>

                    <p class="text-2xl font-bold text-gray-900 mt-1">
                        {{ $ofertas->total() }}
                    </p>
                </div>

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

            </div>

        </div>


        <div class="bg-white rounded-2xl border border-gray-200 p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                        Activas
                    </p>

                    <p class="text-2xl font-bold text-green-600 mt-1">
                        {{ $ofertas->where('estado', 1)->count() }}
                    </p>
                </div>

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

            </div>

        </div>


        <div class="bg-white rounded-2xl border border-gray-200 p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                        Inactivas
                    </p>

                    <p class="text-2xl font-bold text-gray-600 mt-1">
                        {{ $ofertas->where('estado', 0)->count() }}
                    </p>
                </div>

                <div class="w-11 h-11 rounded-xl bg-gray-100 text-gray-600 flex items-center justify-center">
                    <x-icon name="pause-circle" class="w-5 h-5" />
                </div>

            </div>

        </div>


        <div class="bg-white rounded-2xl border border-gray-200 p-5 shadow-sm">

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

                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                        Prioridad
                    </p>

                    <p class="text-2xl font-bold text-brand-600 mt-1">
                        {{ $ofertas->max('prioridad') ?? 0 }}
                    </p>
                </div>

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

            </div>

        </div>

    </div>


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

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

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

            <div>
                <h2 class="font-bold text-gray-900">
                    Listado de ofertas
                </h2>

                <p class="text-xs text-gray-500 mt-1">
                    Las ofertas activas podrán ser consultadas automáticamente desde el POS.
                </p>
            </div>

            <div class="relative">

                <x-icon
                    name="search"
                    class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
                />

                <input
                    type="text"
                    x-model="busqueda"
                    placeholder="Buscar oferta..."
                    class="w-full md:w-64 pl-9 pr-3 py-2 rounded-xl border border-gray-300
                           text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                >

            </div>

        </div>


        @if($ofertas->count())

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

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

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

                        <tr>

                            <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Oferta
                            </th>

                            <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Tipo
                            </th>

                            <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Valor
                            </th>

                            <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Vigencia
                            </th>

                            <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Prioridad
                            </th>

                            <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Acumulable
                            </th>

                            <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Estado
                            </th>

                            <th class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-gray-500">
                                Acciones
                            </th>

                        </tr>

                    </thead>


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

                        @foreach($ofertas as $oferta)

                            <tr
                                x-show="coincide(
                                    @js($oferta->nombre),
                                    @js($oferta->descripcion)
                                )"
                                class="hover:bg-gray-50 transition"
                            >

                                {{-- OFERTA --}}

                                <td class="px-5 py-4">

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

                                    @if($oferta->descripcion)

                                        <div class="text-xs text-gray-500 mt-1 max-w-xs">
                                            {{ Str::limit($oferta->descripcion, 90) }}
                                        </div>

                                    @endif

                                </td>


                                {{-- TIPO --}}

                                <td class="px-5 py-4">

                                    @switch($oferta->tipo)

                                        @case('porcentaje')

                                            <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-blue-50 text-blue-700 text-xs font-semibold">
                                                Porcentaje
                                            </span>

                                            @break

                                        @case('monto')

                                            <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-green-50 text-green-700 text-xs font-semibold">
                                                Monto
                                            </span>

                                            @break

                                        @case('precio_especial')

                                            <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-purple-50 text-purple-700 text-xs font-semibold">
                                                Precio especial
                                            </span>

                                            @break

                                        @default

                                            <span class="text-gray-500">
                                                {{ $oferta->tipo }}
                                            </span>

                                    @endswitch

                                </td>


                                {{-- VALOR --}}

                                <td class="px-5 py-4">

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

                                        <span class="font-bold text-gray-900">
                                            {{ number_format($oferta->valor, 2) }}%
                                        </span>

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

                                        <span class="font-bold text-gray-900">
                                            S/ {{ number_format($oferta->valor, 2) }}
                                        </span>

                                    @else

                                        <span class="font-bold text-gray-900">
                                            S/ {{ number_format($oferta->valor, 2) }}
                                        </span>

                                    @endif

                                </td>


                                {{-- VIGENCIA --}}

                                <td class="px-5 py-4">

                                    <div class="text-xs text-gray-600">

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

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

                                                <x-icon name="calendar" class="w-4 h-4 text-gray-400" />

                                                <span>

                                                    {{ $oferta->fecha_inicio
                                                        ? \Carbon\Carbon::parse($oferta->fecha_inicio)->format('d/m/Y')
                                                        : 'Sin inicio'
                                                    }}

                                                    →

                                                    {{ $oferta->fecha_fin
                                                        ? \Carbon\Carbon::parse($oferta->fecha_fin)->format('d/m/Y')
                                                        : 'Sin fin'
                                                    }}

                                                </span>

                                            </div>

                                        @else

                                            <span class="text-gray-400">
                                                Sin límite de fecha
                                            </span>

                                        @endif


                                        @if($oferta->hora_inicio || $oferta->hora_fin)

                                            <div class="flex items-center gap-1 mt-1">

                                                <x-icon name="clock" class="w-4 h-4 text-gray-400" />

                                                <span>

                                                    {{ $oferta->hora_inicio
                                                        ? substr($oferta->hora_inicio, 0, 5)
                                                        : '--:--'
                                                    }}

                                                    →

                                                    {{ $oferta->hora_fin
                                                        ? substr($oferta->hora_fin, 0, 5)
                                                        : '--:--'
                                                    }}

                                                </span>

                                            </div>

                                        @endif

                                    </div>

                                </td>


                                {{-- PRIORIDAD --}}

                                <td class="px-5 py-4">

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

                                </td>


                                {{-- ACUMULABLE --}}

                                <td class="px-5 py-4">

                                    @if($oferta->acumulable)

                                        <span class="inline-flex items-center gap-1 text-green-700 text-xs font-semibold">

                                            <x-icon name="check" class="w-4 h-4" />

                                            Sí

                                        </span>

                                    @else

                                        <span class="inline-flex items-center gap-1 text-gray-500 text-xs font-semibold">

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

                                            No

                                        </span>

                                    @endif

                                </td>


                                {{-- ESTADO --}}

                                <td class="px-5 py-4">

                                    @if($oferta->estado)

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

                                            Activa

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

                                            Inactiva

                                        </span>

                                    @endif

                                </td>


                                {{-- ACCIONES --}}

                                <td class="px-5 py-4">

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

                                        {{-- VER CONDICIONES --}}

                                        <button
                                            type="button"
                                            @click='verOferta(@json($oferta))'
                                            class="w-9 h-9 rounded-lg border border-gray-200
                                                   text-gray-500 hover:text-brand-600 hover:bg-brand-50
                                                   transition"
                                            title="Ver detalles"
                                        >

                                            <x-icon name="eye" class="w-4 h-4 mx-auto" />

                                        </button>


                                        {{-- ACTIVAR / DESACTIVAR --}}

                                        <form
                                            method="POST"
                                            action="{{ route('fidelizacion.ofertas.toggle', $oferta->id) }}"
                                            class="inline"
                                        >

                                            @csrf
                                            @method('PATCH')

                                            <button
                                                type="submit"
                                                class="w-9 h-9 rounded-lg border border-gray-200
                                                       transition
                                                       {{ $oferta->estado
                                                            ? 'text-orange-500 hover:bg-orange-50'
                                                            : 'text-green-600 hover:bg-green-50'
                                                       }}"
                                                title="{{ $oferta->estado ? 'Desactivar' : 'Activar' }}"
                                            >

                                                @if($oferta->estado)

                                                    <x-icon name="pause" class="w-4 h-4 mx-auto" />

                                                @else

                                                    <x-icon name="play" class="w-4 h-4 mx-auto" />

                                                @endif

                                            </button>

                                        </form>


                                        {{-- ELIMINAR --}}

                                        <form
                                            method="POST"
                                            action="{{ route('fidelizacion.ofertas.destroy', $oferta->id) }}"
                                            class="inline"
                                            onsubmit="return confirm('¿Seguro que deseas eliminar esta oferta?')"
                                        >

                                            @csrf
                                            @method('DELETE')

                                            <button
                                                type="submit"
                                                class="w-9 h-9 rounded-lg border border-gray-200
                                                       text-red-500 hover:bg-red-50 transition"
                                                title="Eliminar"
                                            >

                                                <x-icon name="trash-2" class="w-4 h-4 mx-auto" />

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>


            {{-- PAGINACIÓN --}}

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

                {{ $ofertas->appends(request()->except('ofertas_page'))->links() }}

            </div>

        @else

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

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

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

                </div>

                <h3 class="mt-4 font-bold text-gray-900">
                    No hay ofertas registradas
                </h3>

                <p class="text-sm text-gray-500 mt-1">
                    Crea tu primera oferta para comenzar.
                </p>

                <button
                    type="button"
                    @click="abrirCrear()"
                    class="mt-5 inline-flex items-center gap-2 px-4 py-2.5 rounded-xl
                           bg-brand-600 text-white font-semibold text-sm
                           hover:bg-brand-700 transition"
                >

                    <x-icon name="plus" class="w-4 h-4" />

                    Nueva oferta

                </button>

            </div>

        @endif

    </div>


    {{-- =========================================================
        MODAL DETALLE
    ========================================================== --}}

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

        <div
            class="absolute inset-0 bg-black/50"
            @click="cerrarDetalle()"
        ></div>


        <div
            x-show="mostrarDetalle"
            x-transition
            class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden"
        >

            <div class="px-6 py-5 border-b border-gray-200 flex items-center justify-between">

                <div>

                    <p class="text-xs uppercase tracking-wide text-brand-600 font-semibold">
                        Detalle de oferta
                    </p>

                    <h3
                        class="text-xl font-bold text-gray-900 mt-1"
                        x-text="ofertaSeleccionada?.nombre || ''"
                    ></h3>

                </div>

                <button
                    type="button"
                    @click="cerrarDetalle()"
                    class="w-9 h-9 rounded-lg hover:bg-gray-100 text-gray-500"
                >

                    <x-icon name="x" class="w-5 h-5 mx-auto" />

                </button>

            </div>


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

                <div class="grid grid-cols-2 gap-4">

                    <div class="p-4 rounded-xl bg-gray-50">

                        <p class="text-xs text-gray-500">
                            Tipo
                        </p>

                        <p
                            class="font-semibold text-gray-900 mt-1"
                            x-text="tipoTexto(ofertaSeleccionada?.tipo)"
                        ></p>

                    </div>


                    <div class="p-4 rounded-xl bg-gray-50">

                        <p class="text-xs text-gray-500">
                            Valor
                        </p>

                        <p
                            class="font-semibold text-gray-900 mt-1"
                            x-text="valorTexto(ofertaSeleccionada)"
                        ></p>

                    </div>

                </div>


                <div
                    x-show="ofertaSeleccionada?.descripcion"
                    class="p-4 rounded-xl border border-gray-200"
                >

                    <p class="text-xs text-gray-500 mb-1">
                        Descripción
                    </p>

                    <p
                        class="text-sm text-gray-700"
                        x-text="ofertaSeleccionada?.descripcion || ''"
                    ></p>

                </div>


                <div class="grid grid-cols-2 gap-4">

                    <div>

                        <p class="text-xs text-gray-500">
                            Prioridad
                        </p>

                        <p
                            class="font-semibold text-gray-900 mt-1"
                            x-text="ofertaSeleccionada?.prioridad ?? 0"
                        ></p>

                    </div>


                    <div>

                        <p class="text-xs text-gray-500">
                            Acumulable
                        </p>

                        <p
                            class="font-semibold text-gray-900 mt-1"
                            x-text="ofertaSeleccionada?.acumulable ? 'Sí' : 'No'"
                        ></p>

                    </div>

                </div>


                <div class="p-4 rounded-xl bg-gray-50">

                    <p class="text-xs font-semibold text-gray-700 mb-2">
                        Vigencia
                    </p>

                    <div class="text-sm text-gray-600 space-y-1">

                        <div>
                            Inicio:
                            <span x-text="ofertaSeleccionada?.fecha_inicio || 'Sin límite'"></span>
                        </div>

                        <div>
                            Fin:
                            <span x-text="ofertaSeleccionada?.fecha_fin || 'Sin límite'"></span>
                        </div>

                        <div x-show="ofertaSeleccionada?.hora_inicio || ofertaSeleccionada?.hora_fin">
                            Horario:
                            <span x-text="(ofertaSeleccionada?.hora_inicio || '--:--') + ' → ' + (ofertaSeleccionada?.hora_fin || '--:--')"></span>
                        </div>

                    </div>

                </div>

            </div>


            <div class="px-6 py-4 border-t border-gray-200 flex justify-end">

                <button
                    type="button"
                    @click="cerrarDetalle()"
                    class="px-4 py-2 rounded-xl border border-gray-300
                           text-sm font-semibold text-gray-700
                           hover:bg-gray-50"
                >
                    Cerrar
                </button>

            </div>

        </div>

    </div>

</div>


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

<script>

function ofertasApp() {

    return {

        busqueda: '',

        mostrarDetalle: false,

        ofertaSeleccionada: null,


        coincide(nombre, descripcion) {

            const texto = (
                (nombre || '') +
                ' ' +
                (descripcion || '')
            ).toLowerCase();

            return texto.includes(
                this.busqueda.toLowerCase().trim()
            );

        },


        abrirCrear() {

            /*
             * La creación puede manejarse desde el formulario
             * principal de fidelización.
             *
             * Si tu index general utiliza un modal de ofertas,
             * aquí puedes dispararlo.
             */

            window.dispatchEvent(
                new CustomEvent('abrir-modal-oferta')
            );

        },


        verOferta(oferta) {

            this.ofertaSeleccionada = oferta;

            this.mostrarDetalle = true;

        },


        cerrarDetalle() {

            this.mostrarDetalle = false;

            this.ofertaSeleccionada = null;

        },


        tipoTexto(tipo) {

            switch (tipo) {

                case 'porcentaje':
                    return 'Descuento porcentual';

                case 'monto':
                    return 'Descuento por monto';

                case 'precio_especial':
                    return 'Precio especial';

                default:
                    return tipo || '';

            }

        },


        valorTexto(oferta) {

            if (!oferta) {
                return '';
            }

            const valor = Number(
                oferta.valor || 0
            ).toFixed(2);

            if (oferta.tipo === 'porcentaje') {
                return valor + '%';
            }

            return 'S/ ' + valor;

        }

    };

}

</script>

@endsection