@extends('admin.layouts.app')
@section('panel')
    <div class="row mb-none-30">
        <div class="col-lg-8 col-md-12 mb-30">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.homepage.items.store') }}" method="POST" enctype="multipart/form-data" id="heroItemForm">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="title" class="font-weight-bold">@lang('Item Title')</label>
                                    <input type="text" name="title" id="title" placeholder="Enter title" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="status" class="font-weight-bold">@lang('Status')</label>
                                    <select name="status" id="status" class="form-control">
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="priority" class="font-weight-bold">@lang('Priority')</label>
                                    <input type="number" min="0" max="100000" name="priority" id="priority" class="form-control" value="0">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="is_default" class="font-weight-bold">@lang('Use As Default Hero Item')</label>
                                    <select name="is_default" id="is_default" class="form-control">
                                        <option value="0" selected>No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                    <small class="text-muted">When Yes, this item is the global default and type selection is disabled.</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="type_id" class="font-weight-bold">@lang('Type')</label>
                                    <select name="type_id" id="type_id" class="form-control">
                                        @foreach ($types as $type)
                                            <option value="{{ $type->id }}">Row {{ $type->layout_row ?? 1 }} · {{ $type->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="image" class="font-weight-bold">@lang('Item Icon (for chips)')</label>
                                    <input type="file" name="image" id="image" class="form-control" accept="image/*">
                                    <small class="text-muted">Recommended for non-default items.</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="hero_media_type" class="font-weight-bold">@lang('Hero Media Type')</label>
                                    <select name="hero_media_type" id="hero_media_type" class="form-control">
                                        <option value="image" selected>Image</option>
                                        <option value="video">Video</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="hero_media_light" class="font-weight-bold">@lang('Hero Media (Light Mode)')</label>
                                    <input type="file" name="hero_media_light" id="hero_media_light" class="form-control" accept="image/*,video/mp4,video/webm,video/ogg,video/quicktime">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="hero_media_dark" class="font-weight-bold">@lang('Hero Media (Dark Mode)')</label>
                                    <input type="file" name="hero_media_dark" id="hero_media_dark" class="form-control" accept="image/*,video/mp4,video/webm,video/ogg,video/quicktime">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="hero_logo_light" class="font-weight-bold">@lang('Hero Logo (Light)')</label>
                                    <input type="file" name="hero_logo_light" id="hero_logo_light" class="form-control" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="hero_logo_dark" class="font-weight-bold">@lang('Hero Logo (Dark)')</label>
                                    <input type="file" name="hero_logo_dark" id="hero_logo_dark" class="form-control" accept="image/png,image/jpeg,image/webp,image/svg+xml">
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="background_image" class="font-weight-bold">@lang('Legacy Fallback Background')</label>
                                    <input type="file" name="background_image" id="background_image" class="form-control" accept="image/*,video/mp4,video/webm,video/ogg,video/quicktime">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="hero_title" class="font-weight-bold">@lang('Hero Title')</label>
                                    <input type="text" name="hero_title" id="hero_title" class="form-control" placeholder="Big title for hero">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="hero_button_text" class="font-weight-bold">@lang('Hero Button Text')</label>
                                    <input type="text" name="hero_button_text" id="hero_button_text" class="form-control" placeholder="Explore now">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="hero_button_url" class="font-weight-bold">@lang('Hero Button URL')</label>
                                    <input type="text" name="hero_button_url" id="hero_button_url" class="form-control" placeholder="/category/wow-gold">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="hero_description" class="font-weight-bold">@lang('Hero Description')</label>
                                    <textarea name="hero_description" id="hero_description" rows="3" class="form-control" placeholder="Short supporting text"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row my-4">
                            <div class="col text-end">
                                <button type="submit" class="btn btn--primary btn-global">@lang('Create')</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-12 mb-30">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">@lang('Live Preview')</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex gap-2 mb-3">
                        <button type="button" class="btn btn-sm btn--primary" data-mode="light">Light</button>
                        <button type="button" class="btn btn-sm btn--dark" data-mode="dark">Dark</button>
                    </div>
                    <div class="d-flex gap-2 mb-3">
                        <button type="button" class="btn btn-sm btn-outline--primary" data-viewport="desktop">Desktop</button>
                        <button type="button" class="btn btn-sm btn-outline--primary" data-viewport="tablet">Tablet</button>
                        <button type="button" class="btn btn-sm btn-outline--primary" data-viewport="mobile">Mobile</button>
                    </div>

                    <div id="heroPreviewWrapper" class="hero-preview light desktop">
                        <div class="hero-preview-media" id="heroPreviewMedia"></div>
                        <div class="hero-preview-overlay"></div>
                        <div class="hero-preview-content">
                            <div class="hero-preview-headline">
                                <img id="heroPreviewLogo" alt="logo" style="display:none;" />
                                <h4 id="heroPreviewTitle">Hero title</h4>
                            </div>
                            <p id="heroPreviewDescription">Hero description appears here.</p>
                            <button type="button" id="heroPreviewButton">Explore</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('breadcrumb-plugins')
    <a href="{{ route('admin.homepage.items.index') }}" class="btn btn-sm btn--primary ">@lang('Back')</a>
@endpush

@push('style')
    <style>
        .hero-preview {
            position: relative;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.35);
            min-height: 260px;
            transition: all .25s ease;
        }
        .hero-preview.desktop { max-width: 100%; }
        .hero-preview.tablet { max-width: 80%; margin-inline: auto; }
        .hero-preview.mobile { max-width: 62%; margin-inline: auto; }
        .hero-preview.light { background: rgba(255, 255, 255, .78); }
        .hero-preview.dark { background: rgba(10, 15, 30, .78); border-color: rgba(255,255,255,.15); }

        .hero-preview-media {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #94a3b8, #cbd5e1);
        }
        .hero-preview-media img,
        .hero-preview-media video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .hero-preview-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(15,23,42,.2), rgba(15,23,42,.65));
        }
        .hero-preview-content {
            position: relative;
            z-index: 2;
            padding: 18px;
            color: #fff;
        }
        .hero-preview-headline {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .hero-preview-headline img {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            object-fit: contain;
            background: rgba(255,255,255,.85);
            padding: 4px;
        }
        .hero-preview h4 {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
        }
        .hero-preview p {
            font-size: 12px;
            margin-bottom: 12px;
            opacity: .95;
            min-height: 30px;
        }
        .hero-preview button {
            border: 0;
            border-radius: 999px;
            background: #7c3aed;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 8px 14px;
        }
    </style>
@endpush

@push('script')
    <script>
        (function () {
            const form = document.getElementById('heroItemForm');
            if (!form) return;

            let mode = 'light';
            let viewport = 'desktop';

            const defaultToggle = document.getElementById('is_default');
            const typeSelect = document.getElementById('type_id');

            const previewWrapper = document.getElementById('heroPreviewWrapper');
            const previewMedia = document.getElementById('heroPreviewMedia');
            const previewTitle = document.getElementById('heroPreviewTitle');
            const previewDescription = document.getElementById('heroPreviewDescription');
            const previewButton = document.getElementById('heroPreviewButton');
            const previewLogo = document.getElementById('heroPreviewLogo');

            const titleInput = document.getElementById('hero_title');
            const descriptionInput = document.getElementById('hero_description');
            const buttonInput = document.getElementById('hero_button_text');

            const lightMedia = document.getElementById('hero_media_light');
            const darkMedia = document.getElementById('hero_media_dark');
            const fallbackMedia = document.getElementById('background_image');
            const lightLogo = document.getElementById('hero_logo_light');
            const darkLogo = document.getElementById('hero_logo_dark');

            function setMode(nextMode) {
                mode = nextMode;
                previewWrapper.classList.remove('light', 'dark');
                previewWrapper.classList.add(mode);
                renderPreview();
            }

            function setViewport(nextViewport) {
                viewport = nextViewport;
                previewWrapper.classList.remove('desktop', 'tablet', 'mobile');
                previewWrapper.classList.add(viewport);
            }

            function toggleDefaultState() {
                const isDefault = defaultToggle.value === '1';
                typeSelect.disabled = isDefault;
                if (isDefault) {
                    typeSelect.setAttribute('data-disabled-by-default', '1');
                } else {
                    typeSelect.removeAttribute('data-disabled-by-default');
                }
            }

            function pickFileInput(lightInput, darkInput, fallbackInput) {
                const selected = mode === 'dark' ? darkInput : lightInput;
                if (selected?.files?.[0]) return selected.files[0];

                const opposite = mode === 'dark' ? lightInput : darkInput;
                if (opposite?.files?.[0]) return opposite.files[0];

                if (fallbackInput?.files?.[0]) return fallbackInput.files[0];

                return null;
            }

            function renderMedia() {
                const mediaFile = pickFileInput(lightMedia, darkMedia, fallbackMedia);
                previewMedia.innerHTML = '';

                if (!mediaFile) return;

                const url = URL.createObjectURL(mediaFile);
                if (mediaFile.type.startsWith('video/')) {
                    const video = document.createElement('video');
                    video.src = url;
                    video.autoplay = true;
                    video.loop = true;
                    video.muted = true;
                    video.playsInline = true;
                    previewMedia.appendChild(video);
                    return;
                }

                const image = document.createElement('img');
                image.src = url;
                image.alt = 'Hero media preview';
                previewMedia.appendChild(image);
            }

            function renderLogo() {
                const logoFile = pickFileInput(lightLogo, darkLogo, null);
                if (!logoFile) {
                    previewLogo.style.display = 'none';
                    previewLogo.removeAttribute('src');
                    return;
                }

                previewLogo.src = URL.createObjectURL(logoFile);
                previewLogo.style.display = 'inline-block';
            }

            function renderPreview() {
                previewTitle.textContent = titleInput.value || 'Hero title';
                previewDescription.textContent = descriptionInput.value || 'Hero description appears here.';
                previewButton.textContent = buttonInput.value || 'Explore';
                renderMedia();
                renderLogo();
            }

            document.querySelectorAll('[data-mode]').forEach((button) => {
                button.addEventListener('click', () => setMode(button.dataset.mode));
            });

            document.querySelectorAll('[data-viewport]').forEach((button) => {
                button.addEventListener('click', () => setViewport(button.dataset.viewport));
            });

            [titleInput, descriptionInput, buttonInput, lightMedia, darkMedia, fallbackMedia, lightLogo, darkLogo]
                .forEach((element) => element && element.addEventListener('input', renderPreview));

            defaultToggle.addEventListener('change', toggleDefaultState);
            toggleDefaultState();
            renderPreview();
        })();
    </script>
@endpush