@extends('layouts.admin')

@section('title', 'Banners')
@section('page-title', 'Banners')

@section('content')
<div class="space-y-6">

    {{-- Add Banner Form --}}
    <section x-data="{ open: false }" class="rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
            <h2 class="text-base font-semibold text-slate-900">App Banners</h2>
            <button @click="open = !open"
                    class="inline-flex items-center gap-2 rounded-2xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-700">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                <span x-show="sidebarOpen || true">Add Banner</span>
            </button>
        </div>

        {{-- Add form (hidden by default) --}}
        <div x-show="open" x-collapse class="border-b border-slate-100 bg-slate-50 p-6">
            <form method="POST" action="{{ route('admin.banners.store') }}" class="space-y-4">
                @csrf
                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Title <span class="text-slate-400 font-normal">(optional)</span></label>
                        <input type="text" name="title" value="{{ old('title') }}"
                               placeholder="Summer Sale"
                               class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Image URL <span class="text-rose-500">*</span></label>
                        <input type="url" name="image_url" value="{{ old('image_url') }}" required
                               placeholder="https://example.com/banner.jpg"
                               class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Redirect Type</label>
                        <select name="redirect_type"
                                class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                            <option value="none">None (image only)</option>
                            <option value="url">URL (open browser)</option>
                            <option value="subscription">Subscription Screen</option>
                            <option value="whatsapp">WhatsApp</option>
                            <option value="voucher">Voucher Code</option>
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Voucher Code / URL / Phone <span class="text-slate-400 font-normal">(depends on type)</span></label>
                        <input type="text" name="redirect_url" value="{{ old('redirect_url') }}"
                               placeholder="DEMO-PRO-Y1  ·  https://...  ·  +1234567890"
                               class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Sort Order</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                               class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div class="flex items-end pb-1">
                        <label class="flex cursor-pointer items-center gap-3">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1"
                                   {{ old('is_active', true) ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-600">
                            <span class="text-sm font-semibold text-slate-700">Active</span>
                        </label>
                    </div>
                </div>
                <div class="flex gap-3">
                    <button type="submit"
                            class="inline-flex rounded-2xl bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-700">
                        Save Banner
                    </button>
                    <button type="button" @click="open = false"
                            class="inline-flex rounded-2xl border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:border-slate-400">
                        Cancel
                    </button>
                </div>
            </form>
        </div>

        {{-- Banners Table --}}
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-slate-200 bg-slate-50 text-slate-500">
                    <tr>
                        <th class="px-6 py-4 font-semibold">Preview</th>
                        <th class="px-6 py-4 font-semibold">Title</th>
                        <th class="px-6 py-4 font-semibold">Redirect</th>
                        <th class="px-6 py-4 font-semibold">Order</th>
                        <th class="px-6 py-4 font-semibold">Status</th>
                        <th class="px-6 py-4 font-semibold text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($banners as $banner)
                        <tr x-data="{ editing: false }" class="hover:bg-slate-50/50 transition-colors">
                            {{-- View mode --}}
                            <td x-show="!editing" class="px-6 py-4 align-top">
                                <img src="{{ $banner->image_url }}" alt="{{ $banner->title }}"
                                     class="h-14 w-24 rounded-xl object-cover bg-slate-100"
                                     onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2256%22 viewBox=%220 0 96 56%22%3E%3Crect width=%2296%22 height=%2256%22 fill=%22%23f1f5f9%22/%3E%3Ctext x=%2248%22 y=%2232%22 text-anchor=%22middle%22 fill=%22%2394a3b8%22 font-size=%228%22%3ENo image%3C/text%3E%3C/svg%3E'">
                            </td>
                            <td x-show="!editing" class="px-6 py-4 align-top">
                                <div class="font-medium text-slate-900">{{ $banner->title ?: '—' }}</div>
                            </td>
                            <td x-show="!editing" class="px-6 py-4 align-top">
                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold
                                    @if($banner->redirect_type === 'none') bg-slate-100 text-slate-600
                                    @elseif($banner->redirect_type === 'url') bg-blue-50 text-blue-700
                                    @elseif($banner->redirect_type === 'subscription') bg-violet-50 text-violet-700
                                    @elseif($banner->redirect_type === 'voucher') bg-orange-50 text-orange-700
                                    @else bg-green-50 text-green-700 @endif">
                                    {{ ucfirst($banner->redirect_type) }}
                                </span>
                                @if($banner->redirect_url)
                                    <div class="mt-1 max-w-xs truncate text-xs text-slate-400">{{ $banner->redirect_url }}</div>
                                @endif
                            </td>
                            <td x-show="!editing" class="px-6 py-4 align-top text-slate-600">{{ $banner->sort_order }}</td>
                            <td x-show="!editing" class="px-6 py-4 align-top">
                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold {{ $banner->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">
                                    {{ $banner->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td x-show="!editing" class="px-6 py-4 align-top">
                                <div class="flex items-center justify-end gap-2">
                                    <button @click="editing = true"
                                            class="rounded-xl border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:border-brand-600 hover:text-brand-600">
                                        Edit
                                    </button>
                                    <form method="POST" action="{{ route('admin.banners.destroy', $banner) }}"
                                          onsubmit="return confirm('Delete this banner?')">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                                class="rounded-xl border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-semibold text-red-600 transition hover:bg-red-100">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>

                            {{-- Edit mode (spans all columns) --}}
                            <td x-show="editing" colspan="6" class="px-6 py-4 bg-slate-50">
                                <form method="POST" action="{{ route('admin.banners.update', $banner) }}" class="space-y-3">
                                    @csrf @method('PUT')
                                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                        <div>
                                            <label class="mb-1 block text-xs font-semibold text-slate-600">Title</label>
                                            <input type="text" name="title" value="{{ $banner->title }}"
                                                   class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                        </div>
                                        <div>
                                            <label class="mb-1 block text-xs font-semibold text-slate-600">Image URL <span class="text-rose-500">*</span></label>
                                            <input type="url" name="image_url" value="{{ $banner->image_url }}" required
                                                   class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                        </div>
                                        <div>
                                            <label class="mb-1 block text-xs font-semibold text-slate-600">Redirect Type</label>
                                            <select name="redirect_type"
                                                    class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                                <option value="none" @selected($banner->redirect_type === 'none')>None</option>
                                                <option value="url" @selected($banner->redirect_type === 'url')>URL</option>
                                                <option value="subscription" @selected($banner->redirect_type === 'subscription')>Subscription Screen</option>
                                                <option value="whatsapp" @selected($banner->redirect_type === 'whatsapp')>WhatsApp</option>
                                                <option value="voucher" @selected($banner->redirect_type === 'voucher')>Voucher Code</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="mb-1 block text-xs font-semibold text-slate-600">Redirect URL / Phone</label>
                                            <input type="text" name="redirect_url" value="{{ $banner->redirect_url }}"
                                                   class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                        </div>
                                        <div>
                                            <label class="mb-1 block text-xs font-semibold text-slate-600">Sort Order</label>
                                            <input type="number" name="sort_order" value="{{ $banner->sort_order }}" min="0"
                                                   class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                        </div>
                                        <div class="flex items-end pb-1">
                                            <label class="flex cursor-pointer items-center gap-2">
                                                <input type="hidden" name="is_active" value="0">
                                                <input type="checkbox" name="is_active" value="1"
                                                       {{ $banner->is_active ? 'checked' : '' }}
                                                       class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-600">
                                                <span class="text-sm font-semibold text-slate-700">Active</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <button type="submit"
                                                class="inline-flex rounded-xl bg-brand-600 px-4 py-2 text-xs font-semibold text-white transition hover:bg-brand-700">
                                            Update
                                        </button>
                                        <button type="button" @click="editing = false"
                                                class="inline-flex rounded-xl border border-slate-300 px-4 py-2 text-xs font-semibold text-slate-700 transition hover:border-slate-400">
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center text-sm text-slate-500">
                                No banners yet. Click <strong>Add Banner</strong> to create the first one.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($banners->isEmpty())
        @else
        <div class="border-t border-slate-100 px-6 py-3">
            <p class="text-xs text-slate-400">{{ $banners->count() }} banner{{ $banners->count() === 1 ? '' : 's' }} total</p>
        </div>
        @endif
    </section>

    <section class="rounded-2xl border border-slate-200 bg-white p-5 text-sm text-slate-500 shadow-sm">
        <h3 class="mb-2 font-semibold text-slate-700">Redirect Type Guide</h3>
        <ul class="space-y-1.5 text-xs">
            <li><span class="font-medium text-slate-700">None</span> — banner is decorative, no action on tap</li>
            <li><span class="font-medium text-slate-700">URL</span> — opens the Redirect URL in the device browser</li>
            <li><span class="font-medium text-slate-700">Subscription Screen</span> — navigates to the in-app subscription / upgrade screen</li>
            <li><span class="font-medium text-slate-700">WhatsApp</span> — opens WhatsApp chat to the number in the Redirect URL field (e.g. <code class="rounded bg-slate-100 px-1">+1234567890</code>)</li>
            <li><span class="font-medium text-slate-700">Voucher Code</span> — shows a popup with the code (from Voucher Code / URL / Phone field) and a copy button</li>
        </ul>
    </section>
</div>
@endsection