@extends('layouts.epelcon')
@section('title', 'Room Settings')

@section('content')
<div x-data="{ tab: 'promos', addPromo: false }">
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Room settings</h1>
            <p class="text-sm text-slate-500">Promo codes, bed types, booking channels and complementary perks.</p>
        </div>
        <button x-show="tab === 'promos'" @click="addPromo = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ New promo</button>
    </div>

    {{-- Tabs --}}
    <div class="no-scrollbar mb-5 flex gap-2 overflow-x-auto">
        @foreach ([['promos', 'Promo codes'], ['beds', 'Bed types'], ['btypes', 'Booking types'], ['comp', 'Complementary']] as [$key, $label])
            <button @click="tab = '{{ $key }}'"
                    :class="tab === '{{ $key }}' ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200'"
                    class="shrink-0 rounded-full px-4 py-2 text-xs font-bold">{{ $label }}</button>
        @endforeach
    </div>

    {{-- ============ Promo codes ============ --}}
    <div x-show="tab === 'promos'" x-cloak>
        <div class="mb-5 grid gap-3 sm:grid-cols-3">
            <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Active promos</p><p class="mt-1 text-2xl font-extrabold text-emerald-600">{{ $promoStats['active'] }}</p></div>
            <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Total redemptions</p><p class="mt-1 text-2xl font-extrabold text-indigo-600">{{ number_format($promoStats['redemptions']) }}</p></div>
            <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">All codes</p><p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $promos->count() }}</p></div>
        </div>

        <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
            <table class="w-full min-w-[820px] text-sm">
                <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                    <th class="px-4 py-3">Code</th><th class="px-4 py-3">Discount</th><th class="px-4 py-3">Applies to</th><th class="px-4 py-3">Uses</th><th class="px-4 py-3">Validity</th><th class="px-4 py-3">Status</th><th class="px-4 py-3"></th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                @forelse ($promos as $promo)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-3 font-mono font-extrabold text-slate-900">{{ $promo->code }}</td>
                        <td class="px-4 py-3 font-bold text-slate-800">{{ $promo->type === 'percent' ? rtrim(rtrim(number_format($promo->value, 2), '0'), '.') . '%' : $CUR . number_format($promo->value, 2) }} off</td>
                        <td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold uppercase text-slate-600">{{ $promo->applies_to }}</span></td>
                        <td class="px-4 py-3 text-slate-600">{{ number_format($promo->used_count) }} / {{ $promo->max_uses > 0 ? number_format($promo->max_uses) : '∞' }}</td>
                        <td class="px-4 py-3 text-xs text-slate-500">
                            @if ($promo->starts_at || $promo->expires_at)
                                {{ $promo->starts_at?->format('j M Y') ?? 'Anytime' }} → {{ $promo->expires_at?->format('j M Y') ?? 'No expiry' }}
                            @else
                                Always valid
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if ($promo->isValid())
                                <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-bold uppercase text-emerald-700">Active</span>
                            @elseif ($promo->status === 'active')
                                <span class="rounded-full bg-amber-100 px-2.5 py-1 text-[10px] font-bold uppercase text-amber-700">Expired / used up</span>
                            @else
                                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold uppercase text-slate-500">Inactive</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <form method="POST" action="{{ route('epelcon.roomsettings.promos.toggle', $promo) }}" class="flex justify-end">@csrf
                                @if ($promo->status === 'active')
                                    <button class="rounded-lg bg-rose-50 px-2.5 py-1.5 text-[11px] font-bold text-rose-600 hover:bg-rose-100">Deactivate</button>
                                @else
                                    <button class="rounded-lg bg-emerald-50 px-2.5 py-1.5 text-[11px] font-bold text-emerald-700 hover:bg-emerald-100">Activate</button>
                                @endif
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-4 py-10 text-center text-slate-400">No promo codes yet — create one to boost direct bookings.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- ============ Bed types ============ --}}
    <div x-show="tab === 'beds'" x-cloak class="grid gap-5 lg:grid-cols-3">
        <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 lg:col-span-2">
            <table class="w-full text-sm">
                <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                    <th class="px-4 py-3">Name</th><th class="px-4 py-3">Description</th><th class="px-4 py-3"></th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                @forelse ($bedTypes as $bed)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-3 font-bold text-slate-800">{{ $bed->name }}</td>
                        <td class="px-4 py-3 text-slate-500">{{ $bed->description ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <form method="POST" action="{{ route('epelcon.roomsettings.beds.delete', $bed) }}" class="flex justify-end" onsubmit="return confirm('Remove this bed type?')">@csrf
                                <button class="rounded-lg bg-rose-50 px-2.5 py-1.5 text-[11px] font-bold text-rose-600 hover:bg-rose-100">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="px-4 py-10 text-center text-slate-400">No bed types configured.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="h-fit rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Add bed type</h2>
            <form method="POST" action="{{ route('epelcon.roomsettings.beds.store') }}" class="space-y-3">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span>
                    <input name="name" required maxlength="80" placeholder="e.g. King" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Description</span>
                    <input name="description" maxlength="255" placeholder="Optional" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <button class="w-full rounded-xl bg-indigo-600 py-2.5 text-sm font-bold text-white hover:bg-indigo-700">Add bed type</button>
            </form>
        </div>
    </div>

    {{-- ============ Booking types ============ --}}
    <div x-show="tab === 'btypes'" x-cloak class="grid gap-5 lg:grid-cols-3">
        <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 lg:col-span-2">
            <table class="w-full text-sm">
                <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                    <th class="px-4 py-3">Name</th><th class="px-4 py-3 text-right">Commission</th><th class="px-4 py-3"></th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                @forelse ($bookingTypes as $type)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-3 font-bold text-slate-800">{{ $type->name }}</td>
                        <td class="px-4 py-3 text-right font-extrabold text-slate-900">{{ rtrim(rtrim(number_format($type->commission_percent, 2), '0'), '.') }}%</td>
                        <td class="px-4 py-3">
                            <form method="POST" action="{{ route('epelcon.roomsettings.btypes.delete', $type) }}" class="flex justify-end" onsubmit="return confirm('Remove this booking type?')">@csrf
                                <button class="rounded-lg bg-rose-50 px-2.5 py-1.5 text-[11px] font-bold text-rose-600 hover:bg-rose-100">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="px-4 py-10 text-center text-slate-400">No booking types configured.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="h-fit rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Add booking type</h2>
            <form method="POST" action="{{ route('epelcon.roomsettings.btypes.store') }}" class="space-y-3">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span>
                    <input name="name" required maxlength="80" placeholder="e.g. Travel Agent" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Commission %</span>
                    <input type="number" step="0.01" min="0" max="100" name="commission_percent" value="0" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <button class="w-full rounded-xl bg-indigo-600 py-2.5 text-sm font-bold text-white hover:bg-indigo-700">Add booking type</button>
            </form>
        </div>
    </div>

    {{-- ============ Complementary items ============ --}}
    <div x-show="tab === 'comp'" x-cloak class="grid gap-5 lg:grid-cols-3">
        <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 lg:col-span-2">
            <table class="w-full min-w-[520px] text-sm">
                <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                    <th class="px-4 py-3">Item</th><th class="px-4 py-3">Room type</th><th class="px-4 py-3"></th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                @forelse ($complementaryItems as $item)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-3"><p class="font-bold text-slate-800">{{ $item->name }}</p>@if ($item->description)<p class="text-xs text-slate-400">{{ $item->description }}</p>@endif</td>
                        <td class="px-4 py-3">
                            @if ($item->roomType)
                                <span class="rounded-full bg-indigo-50 px-2.5 py-1 text-[10px] font-bold uppercase text-indigo-700">{{ $item->roomType->name }}</span>
                            @else
                                <span class="text-xs text-slate-400">All rooms</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <form method="POST" action="{{ route('epelcon.roomsettings.comp.delete', $item) }}" class="flex justify-end" onsubmit="return confirm('Remove this complementary item?')">@csrf
                                <button class="rounded-lg bg-rose-50 px-2.5 py-1.5 text-[11px] font-bold text-rose-600 hover:bg-rose-100">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="px-4 py-10 text-center text-slate-400">No complementary items configured.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="h-fit rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Add complementary item</h2>
            <form method="POST" action="{{ route('epelcon.roomsettings.comp.store') }}" class="space-y-3">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span>
                    <input name="name" required maxlength="120" placeholder="e.g. Welcome drink" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Description</span>
                    <input name="description" maxlength="255" placeholder="Optional" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Room type</span>
                    <select name="room_type_id" class="w-full rounded-xl border-slate-200 text-sm">
                        <option value="">All room types</option>
                        @foreach ($roomTypes as $roomType)<option value="{{ $roomType->id }}">{{ $roomType->name }}</option>@endforeach
                    </select></label>
                <button class="w-full rounded-xl bg-indigo-600 py-2.5 text-sm font-bold text-white hover:bg-indigo-700">Add item</button>
            </form>
        </div>
    </div>

    {{-- ============ New promo modal ============ --}}
    <div x-cloak x-show="addPromo" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addPromo = false"></div>
        <div x-show="addPromo" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">New promo code</h2>
            <form method="POST" action="{{ route('epelcon.roomsettings.promos.store') }}" class="grid grid-cols-2 gap-4">@csrf
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Code</span>
                    <input name="code" required maxlength="30" placeholder="e.g. WELCOME10" value="{{ old('code') }}" class="w-full rounded-xl border-slate-200 font-mono text-sm uppercase" style="text-transform: uppercase"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Type</span>
                    <select name="type" class="w-full rounded-xl border-slate-200 text-sm">
                        <option value="percent">Percent off</option>
                        <option value="fixed">Fixed amount ({{ $CUR }})</option>
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Value</span>
                    <input type="number" step="0.01" min="0.01" name="value" required value="{{ old('value') }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Applies to</span>
                    <select name="applies_to" class="w-full rounded-xl border-slate-200 text-sm">
                        <option value="bookings">Bookings</option>
                        <option value="orders">Orders</option>
                        <option value="both">Both</option>
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Max uses (0 = unlimited)</span>
                    <input type="number" min="0" name="max_uses" value="{{ old('max_uses', 0) }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Starts</span>
                    <input type="date" name="starts_at" value="{{ old('starts_at') }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Expires</span>
                    <input type="date" name="expires_at" value="{{ old('expires_at') }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="col-span-2 flex justify-end gap-2">
                    <button type="button" @click="addPromo = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Create promo</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
