@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')
@include('admin.partials.management-styles')

@php
    $statistics = $statistics ?? ['total' => 0, 'active' => 0, 'inactive' => 0, 'customer' => 0, 'provider' => 0];
    $targetLabels = ['customer' => 'Customer', 'provider' => 'Provider', 'both' => 'Both Apps'];
    $targetIcons = ['customer' => 'person', 'provider' => 'storefront', 'both' => 'devices'];
@endphp

<style>
    .banner-cover { background: var(--color-surface-container-low); border-radius: 10px; height: 68px; overflow: hidden; width: 120px; }
    .banner-cover img { height: 100%; object-fit: cover; width: 100%; }
    .banner-cover button { background: transparent; border: 0; cursor: zoom-in; display: block; height: 100%; padding: 0; width: 100%; }
    .banner-preview { align-items: center; background: var(--color-surface-container-low); border: 1px dashed var(--color-outline-variant); border-radius: 12px; color: var(--color-on-surface-variant); display: flex; height: 170px; justify-content: center; overflow: hidden; width: 100%; }
    .banner-preview img { height: 100%; object-fit: cover; width: 100%; }
    .banner-empty { align-items: center; display: flex; flex-direction: column; gap: 8px; text-align: center; }
    .banner-image-error { background: #fee2e2; border: 1px solid #fecaca; border-radius: 10px; color: #991b1b; display: none; font-size: 13px; font-weight: 700; margin-bottom: 10px; padding: 9px 11px; }
    .banner-image-error.show { display: block; }
    .banner-lightbox { align-items: center; background: rgba(2, 6, 23, .88); display: none; inset: 0; justify-content: center; padding: 28px; position: fixed; z-index: 3000; }
    .banner-lightbox.show { display: flex; }
    .banner-lightbox-panel { max-height: 88vh; max-width: min(960px, 92vw); position: relative; }
    .banner-lightbox-panel img { background: #fff; border-radius: 12px; max-height: 88vh; max-width: 100%; object-fit: contain; }
    .banner-lightbox-close { align-items: center; background: #fff; border: 0; border-radius: 999px; color: var(--color-on-surface); display: flex; height: 38px; justify-content: center; position: absolute; right: -14px; top: -14px; width: 38px; }
    .banner-modal-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 220px; }
    @media (max-width: 767px) { .banner-modal-grid { grid-template-columns: 1fr; } .banner-cover { width: 96px; } }
</style>

<main id="main" class="pt-4">
    <section class="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-4">
        <div>
            <div class="admin-breadcrumb"><span>Admin</span><span class="material-symbols-outlined" style="font-size:16px;">chevron_right</span><span class="active">Banners</span></div>
            <h2 class="admin-page-title">Banner Management</h2>
            <p class="admin-page-subtitle">Create app banners for customer and provider discovery screens.</p>
        </div>
        <button class="btn-primary-action" id="addBannerButton" type="button">
            <span class="material-symbols-outlined" style="font-size:18px;">add_photo_alternate</span>
            Add Banner
        </button>
    </section>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Please review the banner form.</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">view_carousel</span></div><p class="admin-stat-value">{{ number_format((int) $statistics['total']) }}</p><p class="admin-stat-label">Total banners</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">task_alt</span></div><p class="admin-stat-value">{{ number_format((int) $statistics['active']) }}</p><p class="admin-stat-label">Active banners</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">person</span></div><p class="admin-stat-value">{{ number_format((int) $statistics['customer']) }}</p><p class="admin-stat-label">Customer visible</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">storefront</span></div><p class="admin-stat-value">{{ number_format((int) $statistics['provider']) }}</p><p class="admin-stat-label">Provider visible</p></div></div>
    </section>

    <section class="admin-card">
        <div class="admin-card-body d-flex flex-column flex-lg-row justify-content-between gap-3">
            <div><h3 class="admin-card-title">Banner Library</h3><p class="admin-meta mt-1">Manage placement, link targets, and availability</p></div>
            <div class="admin-toolbar"><span class="admin-chip">{{ $banners->total() }} records</span></div>
        </div>
        <div class="table-responsive">
            <table class="table admin-table mb-0">
                <thead><tr><th>Banner</th><th>Target</th><th>Status</th><th>Redirect</th><th>Updated</th><th class="text-end">Action</th></tr></thead>
                <tbody>
                    @forelse ($banners as $banner)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="banner-cover">
                                        @if ($banner->image_url)
                                            <button class="js-lightbox" type="button" data-src="{{ $banner->image_url }}" data-alt="{{ $banner->title }}">
                                                <img src="{{ $banner->image_url }}" alt="{{ $banner->title }}">
                                            </button>
                                        @else
                                            <div class="banner-empty h-100"><span class="material-symbols-outlined">image</span></div>
                                        @endif
                                    </div>
                                    <div>
                                        <p class="admin-name">{{ $banner->title }}</p>
                                        <p class="admin-meta">BNR-{{ str_pad((string) $banner->id, 5, '0', STR_PAD_LEFT) }}</p>
                                    </div>
                                </div>
                            </td>
                            <td><span class="admin-chip"><span class="material-symbols-outlined" style="font-size:15px;">{{ $targetIcons[$banner->target_app] ?? 'devices' }}</span> {{ $targetLabels[$banner->target_app] ?? ucfirst($banner->target_app) }}</span></td>
                            <td><span class="admin-status {{ $banner->status === 'active' ? 'success' : 'warning' }}">{{ ucfirst($banner->status) }}</span></td>
                            <td class="admin-meta">{{ $banner->redirect_url ? Str::limit($banner->redirect_url, 46) : 'No redirect' }}</td>
                            <td class="admin-meta">{{ $banner->updated_at?->format('d M Y, h:i A') }}</td>
                            <td class="text-end">
                                <button class="admin-action js-edit-banner"
                                    data-id="{{ $banner->id }}"
                                    data-title="{{ $banner->title }}"
                                    data-image-url="{{ $banner->image_url }}"
                                    data-redirect-url="{{ $banner->redirect_url }}"
                                    data-target-app="{{ $banner->target_app }}"
                                    data-status="{{ $banner->status }}"
                                    type="button"
                                    title="Edit">
                                    <span class="material-symbols-outlined">edit</span>
                                </button>
                                <button class="admin-action js-delete-banner" data-id="{{ $banner->id }}" data-title="{{ $banner->title }}" type="button" title="Delete">
                                    <span class="material-symbols-outlined">delete</span>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr><td class="text-center admin-meta py-5" colspan="6">No banners found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="admin-pagination">{{ $banners->links() }}</div>
    </section>
</main>

<div class="modal fade" id="bannerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <form id="bannerForm" method="POST" enctype="multipart/form-data" action="{{ route('admin.banners.store') }}">
                @csrf
                <input id="bannerMethod" name="_method" type="hidden" value="PUT" disabled>
                <input id="bannerFormMode" name="_form_mode" type="hidden" value="create">
                <input id="bannerId" name="_banner_id" type="hidden">
                <div class="modal-header"><h5 class="modal-title" id="bannerModalTitle">Add Banner</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
                <div class="modal-body">
                    <div class="banner-modal-grid">
                        <div>
                            <div class="mb-3">
                                <label class="form-label" for="bannerTitle">Title</label>
                                <input class="form-control" id="bannerTitle" name="title" type="text" maxlength="255" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="bannerRedirectUrl">Redirect URL</label>
                                <input class="form-control" id="bannerRedirectUrl" name="redirect_url" type="url" maxlength="2048" placeholder="https://example.com">
                            </div>
                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="bannerTargetApp">Target App</label>
                                    <select class="form-select" id="bannerTargetApp" name="target_app" required>
                                        <option value="both">Both Apps</option>
                                        <option value="customer">Customer</option>
                                        <option value="provider">Provider</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="bannerStatus">Status</label>
                                    <select class="form-select" id="bannerStatus" name="status" required>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="form-label" for="bannerImage">Banner Image</label>
                            <div class="banner-image-error" id="bannerImageError">Image must be less than 4 MB.</div>
                            <div class="banner-preview mb-3" id="bannerImagePreview">
                                <div class="banner-empty"><span class="material-symbols-outlined" style="font-size:40px;">add_photo_alternate</span><span class="admin-meta">Image preview</span></div>
                            </div>
                            <input class="form-control" id="bannerImage" name="image" accept=".jpg,.jpeg,.png,.webp,.gif,.bmp,image/jpeg,image/png,image/webp,image/gif,image/bmp" type="file">
                            <p class="admin-meta mt-2 mb-0">JPG, PNG, WebP, GIF, or BMP up to 4 MB.</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn-primary-action" id="bannerSubmitButton" type="submit">Create Banner</button></div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteBannerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="deleteBannerForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header"><h5 class="modal-title">Delete Banner</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
                <div class="modal-body">Delete <strong id="deleteBannerTitle"></strong>? This removes it from app banner feeds.</div>
                <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn btn-danger" type="submit">Delete</button></div>
            </form>
        </div>
    </div>
</div>

<div id="bannerLightbox" class="banner-lightbox" aria-hidden="true" role="dialog" aria-modal="true">
    <div class="banner-lightbox-panel">
        <button id="bannerLightboxClose" class="banner-lightbox-close" type="button" aria-label="Close image preview"><span class="material-symbols-outlined">close</span></button>
        <img id="bannerLightboxImage" src="" alt="">
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const storeUrl = @json(route('admin.banners.store'));
        const updateUrl = @json(route('admin.banners.update', ['banner' => '__BANNER__']));
        const destroyUrl = @json(route('admin.banners.destroy', ['banner' => '__BANNER__']));
        const oldMode = @json(old('_form_mode'));
        const oldBannerId = @json(old('_banner_id'));
        const oldValues = @json(old());
        const modalElement = document.getElementById('bannerModal');
        const bannerModal = bootstrap.Modal.getOrCreateInstance(modalElement);
        const deleteModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteBannerModal'));
        const bannerForm = document.getElementById('bannerForm');
        const bannerImage = document.getElementById('bannerImage');
        const bannerImageError = document.getElementById('bannerImageError');
        const preview = document.getElementById('bannerImagePreview');
        const urlFor = (template, id) => template.replace('__BANNER__', id);
        const previewPlaceholder = '<div class="banner-empty"><span class="material-symbols-outlined" style="font-size:40px;">add_photo_alternate</span><span class="admin-meta">Image preview</span></div>';
        const setPreview = url => preview.innerHTML = url ? `<img src="${url}" alt="">` : previewPlaceholder;
        const showImageError = message => {
            bannerImageError.textContent = message;
            bannerImageError.classList.add('show');
            bannerImage.classList.add('is-invalid');
        };
        const clearImageError = () => {
            bannerImageError.classList.remove('show');
            bannerImage.classList.remove('is-invalid');
        };

        const setForm = (mode, banner = {}) => {
            const editing = mode === 'edit';
            bannerForm.reset();
            bannerForm.action = editing ? urlFor(updateUrl, banner.id) : storeUrl;
            document.getElementById('bannerMethod').disabled = ! editing;
            document.getElementById('bannerFormMode').value = mode;
            document.getElementById('bannerId').value = banner.id ?? '';
            document.getElementById('bannerModalTitle').textContent = editing ? 'Edit Banner' : 'Add Banner';
            document.getElementById('bannerSubmitButton').textContent = editing ? 'Update Banner' : 'Create Banner';
            document.getElementById('bannerTitle').value = banner.title ?? '';
            document.getElementById('bannerRedirectUrl').value = banner.redirect_url ?? banner.redirectUrl ?? '';
            document.getElementById('bannerTargetApp').value = banner.target_app ?? banner.targetApp ?? 'both';
            document.getElementById('bannerStatus').value = banner.status ?? 'active';
            bannerImage.required = ! editing;
            clearImageError();
            setPreview(banner.image_url ?? banner.imageUrl ?? '');
        };

        document.getElementById('addBannerButton').addEventListener('click', () => {
            setForm('create');
            bannerModal.show();
        });

        document.querySelectorAll('.js-edit-banner').forEach(button => {
            button.addEventListener('click', () => {
                setForm('edit', button.dataset);
                bannerModal.show();
            });
        });

        document.querySelectorAll('.js-delete-banner').forEach(button => {
            button.addEventListener('click', () => {
                document.getElementById('deleteBannerForm').action = urlFor(destroyUrl, button.dataset.id);
                document.getElementById('deleteBannerTitle').textContent = button.dataset.title;
                deleteModal.show();
            });
        });

        bannerImage.addEventListener('change', event => {
            const file = event.target.files[0];

            clearImageError();

            if (file && file.size > 4 * 1024 * 1024) {
                event.target.value = '';
                setPreview('');
                showImageError('Image must be less than 4 MB.');
                return;
            }

            setPreview(file ? URL.createObjectURL(file) : '');
        });

        bannerForm.addEventListener('submit', event => {
            const file = bannerImage.files[0];

            if (file && file.size > 4 * 1024 * 1024) {
                event.preventDefault();
                showImageError('Image must be less than 4 MB.');
            }
        });

        const lightbox = document.getElementById('bannerLightbox');
        const lightboxImage = document.getElementById('bannerLightboxImage');
        const closeLightbox = () => {
            lightbox.classList.remove('show');
            lightbox.setAttribute('aria-hidden', 'true');
            lightboxImage.src = '';
        };

        document.querySelectorAll('.js-lightbox').forEach(button => {
            button.addEventListener('click', () => {
                lightboxImage.src = button.dataset.src;
                lightboxImage.alt = button.dataset.alt || 'Banner image';
                lightbox.classList.add('show');
                lightbox.setAttribute('aria-hidden', 'false');
            });
        });

        document.getElementById('bannerLightboxClose').addEventListener('click', closeLightbox);
        lightbox.addEventListener('click', event => {
            if (event.target === lightbox) {
                closeLightbox();
            }
        });
        document.addEventListener('keydown', event => {
            if (event.key === 'Escape' && lightbox.classList.contains('show')) {
                closeLightbox();
            }
        });

        if (oldMode) {
            setForm(oldMode, { ...oldValues, id: oldBannerId });
            bannerModal.show();
        }
    });
</script>

@include('admin.partials.footer')