@extends('admin.layouts.master')

@section('title', 'Create Video')

@push('styles')
<style>
    .video-wizard-steps {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0 1rem;
        margin: 0 0 2rem;
        position: relative;
    }
    .video-wizard-steps::before {
        content: "";
        position: absolute;
        top: 18px;
        left: 2.5rem;
        right: 2.5rem;
        height: 2px;
        background: var(--bs-border-color);
        z-index: 0;
    }
    .video-wizard-steps li {
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    .video-wizard-steps .step-circle {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        background: #d6d6d6;
        color: #fff;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px #d6d6d6;
    }
    .video-wizard-steps .step-label {
        display: block;
        margin-top: .5rem;
        font-size: .875rem;
        color: #adb5bd;
        font-weight: 500;
    }
    .video-wizard-steps li.active .step-circle,
    .video-wizard-steps li.completed .step-circle {
        background: #9D6F52;
        box-shadow: 0 0 0 1px #9D6F52;
    }
    .video-wizard-steps li.active .step-label {
        color: #212529;
        font-weight: 600;
    }
    .video-wizard-steps li.completed .step-label {
        color: #9D6F52;
    }
    .video-preview-box {
        min-height: 220px;
        border: 2px dashed var(--bs-border-color);
        border-radius: .5rem;
        background: #f8f9fa;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #6c757d;
        padding: 1.5rem;
    }
    .wizard-actions {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--bs-border-color);
        text-align: center;
    }
    .required-mark { color: #dc3545; }
    .library-video-card, .slide-card {
        border: 2px solid var(--bs-border-color);
        border-radius: .75rem;
        overflow: hidden;
        cursor: pointer;
        transition: border-color .2s, box-shadow .2s, transform .15s;
        background: #fff;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .library-video-card:hover, .slide-card:hover {
        border-color: #9D6F52;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(33, 37, 41, .08);
    }
    .library-video-card.selected, .slide-card.selected {
        border-color: #9D6F52;
        box-shadow: 0 0 0 1px #9D6F52, 0 8px 24px rgba(157, 111, 82, .12);
    }
    .library-video-card.selected::after,
    .slide-card.selected::after {
        content: '✓';
        position: absolute;
        top: 8px;
        right: 8px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #9D6F52;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        z-index: 3;
        box-shadow: 0 2px 6px rgba(0,0,0,.2);
    }
    .library-video-card.is-unavailable {
        opacity: .72;
        cursor: not-allowed;
    }
    .library-video-card.is-unavailable:hover {
        transform: none;
        border-color: var(--bs-border-color);
        box-shadow: none;
    }
    .library-video-media {
        position: relative;
        background: #111;
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }
    .library-video-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #111;
        display: block;
    }
    .library-video-missing {
        height: 100%;
        min-height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #adb5bd;
        background: #f1f3f5;
        gap: .25rem;
        font-size: .75rem;
    }
    .library-video-body {
        padding: .65rem .75rem .8rem;
        display: flex;
        flex-direction: column;
        gap: .55rem;
        flex: 1;
    }
    .library-video-title {
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.3;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.3em;
    }
    .library-select-btn {
        width: 100%;
        font-size: .8rem;
        padding: .35rem .5rem;
    }
    .library-select-btn.active {
        background: #9D6F52 !important;
        border-color: #9D6F52 !important;
        color: #fff !important;
    }
    .library-video-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    .library-video-search {
        max-width: 280px;
    }
    .library-video-count {
        font-size: .8rem;
        color: #6c757d;
    }
    #libraryVideoGrid {
        max-height: min(68vh, 720px);
        overflow-y: auto;
        padding: .15rem .15rem .5rem;
        margin-bottom: .75rem;
    }
    .slide-card img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }
    .slide-card .slide-meta {
        padding: .4rem .55rem;
        font-size: .75rem;
        color: #6c757d;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
    }
    .main-image-preview {
        width: 100%;
        max-height: 240px;
        object-fit: cover;
        border-radius: .5rem;
        background: #f1f3f5;
    }
    #imagePreviewModal .modal-body {
        background: #111;
        text-align: center;
    }
    #imagePreviewModal img {
        max-width: 100%;
        max-height: 75vh;
        object-fit: contain;
    }
</style>
@endpush

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Create Memorial Video',
        'crumbs' => [
            ['label' => 'Memorials', 'url' => route('admin.funeral.index')],
            ['label' => 'Create Video'],
        ],
    ])

    <div class="card border-0 shadow-sm">
        <div class="card-body p-4">
            @php
                $labels = ['Setup', 'Video', 'Slides', 'Music', 'Finalize'];
            @endphp
            <ul class="video-wizard-steps">
                @foreach ($labels as $i => $label)
                    @php $n = $i + 1; @endphp
                    <li class="{{ $step == $n ? 'active' : ($step > $n ? 'completed' : '') }}">
                        <span class="step-circle">{{ $n }}</span>
                        <span class="step-label">{{ $label }}</span>
                    </li>
                @endforeach
            </ul>

            @if ($step == 1)
                <form method="POST"
                      action="{{ route('admin.funeral.video-create', $funeral->f_id) }}"
                      enctype="multipart/form-data"
                      id="videoStep1Form">
                    @csrf
                    <input type="hidden" name="step" value="1">
                    <input type="hidden" name="next_step" value="2">

                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label class="form-label">Introductory Text <span class="required-mark">*</span></label>
                                <input type="text" name="intro_text" class="form-control" maxlength="100"
                                       placeholder="In Loving Memory" value="{{ old('intro_text', $videoIntro) }}">
                                <div class="form-text">Required — max 100 characters</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Title <span class="required-mark">*</span></label>
                                <input type="text" name="title" class="form-control" maxlength="100"
                                       placeholder="Full Name" value="{{ old('title', $videoTitle) }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Subtitle <span class="required-mark">*</span></label>
                                <input type="text" name="subtitle" class="form-control" maxlength="50"
                                       placeholder="1990 – 2026" value="{{ old('subtitle', $videoSubtitle) }}">
                                <div class="form-text">Required — e.g. Birth Year – Year of Passing</div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <label class="form-label">
                                Main Image
                                @if (! $hasMainImage)
                                    <span class="required-mark">*</span>
                                @endif
                            </label>
                            <input type="file" name="main_image" id="mainImage" class="form-control mb-2"
                                   accept=".jpg,.jpeg,.png,.gif,image/*">
                            <div class="form-text mb-3">
                                @if ($hasMainImage)
                                    Memorial photo is already set. Choose a new file only if you want to update it.
                                @else
                                    JPG/PNG/GIF — max 10MB
                                @endif
                            </div>
                            <div class="video-preview-box" id="mainImagePreviewBox">
                                @if ($mainImageUrl)
                                    <img src="{{ $mainImageUrl }}" alt="Main image" class="main-image-preview" id="mainImagePreview">
                                @else
                                    <i class="ti ti-photo fs-1 text-muted mb-2"></i>
                                    <p class="fw-semibold mb-1">Main image preview</p>
                                    <small>Upload a main memorial image</small>
                                    <img src="" alt="" class="main-image-preview d-none" id="mainImagePreview">
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="wizard-actions">
                        <button type="submit" class="btn btn-primary px-4">Next <i class="ti ti-arrow-right ms-1"></i></button>
                    </div>
                </form>

            @elseif ($step == 2)
                <form method="POST" action="{{ route('admin.funeral.video-create', $funeral->f_id) }}" id="videoStep2Form">
                    @csrf
                    <input type="hidden" name="step" value="2">
                    <input type="hidden" name="next_step" value="3">
                    <input type="hidden" name="vm_id" id="vmIdInput" value="{{ $selectedVmId ?: '' }}">

                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h5 class="mb-1">Select Background Video</h5>
                            <p class="text-muted mb-0">Preview any clip, click Select, then continue.</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.video-master.index') }}" class="btn btn-light border btn-sm" target="_blank">
                                <i class="ti ti-list me-1"></i>Manage Videos
                            </a>
                            <a href="{{ route('admin.video-master.create') }}" class="btn btn-soft-primary btn-sm" target="_blank">
                                <i class="ti ti-plus me-1"></i>Add Video
                            </a>
                        </div>
                    </div>

                    @if ($libraryVideos->isEmpty())
                        <div class="video-preview-box mb-3">
                            <i class="ti ti-video-off fs-1 text-muted mb-2"></i>
                            <p class="mb-2 fw-semibold">No videos uploaded yet</p>
                            <p class="text-muted small mb-3">Add videos from the admin Videos page, then refresh this step.</p>
                            <a href="{{ route('admin.video-master.create') }}" class="btn btn-primary btn-sm">
                                <i class="ti ti-upload me-1"></i>Upload Video
                            </a>
                        </div>
                    @else
                        <div class="library-video-toolbar">
                            <div class="input-group library-video-search">
                                <span class="input-group-text bg-white"><i class="ti ti-search"></i></span>
                                <input type="search" id="libraryVideoSearch" class="form-control" placeholder="Search videos…" autocomplete="off">
                            </div>
                            <div class="library-video-count">
                                Showing <strong id="libraryVisibleCount">{{ $libraryVideos->count() }}</strong>
                                of {{ $libraryVideos->count() }} videos
                            </div>
                        </div>

                        <div class="row g-3" id="libraryVideoGrid">
                            @foreach ($libraryVideos as $libVideo)
                                @php
                                    $playable = is_file($libVideo->videoPath());
                                    $isSelected = (int) $selectedVmId === (int) $libVideo->vm_id;
                                @endphp
                                <div class="col-6 col-md-4 col-lg-3 col-xxl-2 library-video-col"
                                     data-name="{{ strtolower($libVideo->vm_name) }}">
                                    <div class="library-video-card {{ $isSelected ? 'selected' : '' }} {{ $playable ? '' : 'is-unavailable' }}"
                                         data-vm-id="{{ $libVideo->vm_id }}"
                                         data-playable="{{ $playable ? '1' : '0' }}"
                                         data-name="{{ $libVideo->vm_name }}">
                                        <div class="library-video-media">
                                            @if ($playable)
                                                <video src="{{ $libVideo->videoUrl() }}"
                                                       controls
                                                       preload="metadata"
                                                       playsinline
                                                       onclick="event.stopPropagation();"></video>
                                            @else
                                                <div class="library-video-missing">
                                                    <i class="ti ti-alert-circle fs-4 text-warning"></i>
                                                    <span>File missing</span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="library-video-body">
                                            <p class="library-video-title" title="{{ $libVideo->vm_name }}">{{ $libVideo->vm_name }}</p>
                                            <button type="button"
                                                    class="btn {{ $isSelected ? 'btn-primary library-select-btn active' : 'btn-outline-primary library-select-btn' }}"
                                                    data-vm-id="{{ $libVideo->vm_id }}"
                                                    @disabled(! $playable)>
                                                <i class="ti {{ $isSelected ? 'ti-circle-check' : 'ti-circle' }} me-1"></i>
                                                {{ $isSelected ? 'Selected' : 'Select' }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div id="libraryVideoEmptySearch" class="text-center text-muted py-4 d-none">
                            No videos match your search.
                        </div>
                        <div class="alert alert-light border mb-0 d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div>
                                Selected:
                                <strong id="selectedVideoLabel">
                                    @if ($selectedVmId)
                                        {{ optional($libraryVideos->firstWhere('vm_id', $selectedVmId))->vm_name ?: 'Video #'.$selectedVmId }}
                                    @else
                                        None — please select one video
                                    @endif
                                </strong>
                            </div>
                            <span class="badge bg-primary-subtle text-primary">Click a card or Select</span>
                        </div>
                    @endif

                    <div class="wizard-actions">
                        <a href="{{ route('admin.funeral.video-create', ['id' => $funeral->f_id, 'step' => 1]) }}" class="btn btn-light border me-2">
                            <i class="ti ti-arrow-left me-1"></i>Back
                        </a>
                        <button type="submit" class="btn btn-primary px-4" @disabled($libraryVideos->isEmpty())>
                            Next <i class="ti ti-arrow-right ms-1"></i>
                        </button>
                    </div>
                </form>

            @elseif ($step == 3)
                @php
                    $maxSlideImages = \App\Services\MemorialVideoGenerator::MAX_GALLERY_SLIDES;
                    $slideSeconds = (int) \App\Services\MemorialVideoGenerator::SLIDE_SECONDS;
                @endphp
                <form method="POST" action="{{ route('admin.funeral.upload-photo') }}" enctype="multipart/form-data" id="photoUploadForm">
                    @csrf
                    <input type="hidden" name="f_id" value="{{ $funeral->f_id }}">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <div>
                            <h5 class="mb-1">Slide Photos</h5>
                            <p class="text-muted mb-0">
                                Upload up to {{ $maxSlideImages }} images. Select up to {{ $maxSlideImages }} to use in the video ({{ $slideSeconds }} seconds each).
                                <strong>Selected: <span id="selectedSlideCount">{{ count($selectedSlides) }}</span>/{{ $maxSlideImages }}</strong>
                                / Uploaded: <span id="uploadedSlideCount">{{ $media->count() }}</span>/{{ $maxSlideImages }}
                                / Photo time: <strong id="selectedSlideDuration">0:00</strong>
                            </p>
                        </div>
                        <div class="d-flex gap-2">
                            @if ($media->count())
                                <button type="button" class="btn btn-soft-success btn-sm" id="toggleSelectAllSlides">
                                    <i class="ti ti-checks me-1"></i><span>Select All</span>
                                </button>
                            @endif
                            <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#uploadSlidePanel">
                                <i class="ti ti-upload me-1"></i>Upload Photo
                            </button>
                        </div>
                    </div>
                    <div class="collapse mb-4" id="uploadSlidePanel">
                        <div class="card bg-light border-0">
                            <div class="card-body">
                                <div class="row g-2 align-items-end">
                                    <div class="col-md-8">
                                        <input type="file" name="file" class="form-control" accept="image/*">
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn btn-primary w-100" @disabled($media->count() >= $maxSlideImages)>Add to Slides</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <form method="POST" action="{{ route('admin.funeral.video-create', $funeral->f_id) }}" id="videoStep3Form">
                    @csrf
                    <input type="hidden" name="step" value="3">
                    <input type="hidden" name="next_step" value="4">

                    <div class="row g-3 mb-4" id="slideGrid">
                        @forelse ($media as $item)
                            @php
                                $imgUrl = '/uploads/funeral_multiple/'.$funeral->f_id.'/'.$item->fi_image;
                                $isSelected = in_array((int) $item->fi_id, $selectedSlides, true);
                            @endphp
                            <div class="col-6 col-md-3 col-lg-2">
                                <div class="slide-card {{ $isSelected ? 'selected' : '' }}" data-fi-id="{{ $item->fi_id }}" data-img="{{ $imgUrl }}">
                                    <img src="{{ $imgUrl }}" alt="Slide">
                                    <div class="slide-meta">
                                        <label class="mb-0 d-flex align-items-center gap-1">
                                            <input type="checkbox" class="form-check-input slide-check" name="selected_slides[]" value="{{ $item->fi_id }}" @checked($isSelected)>
                                            Select
                                        </label>
                                        <button type="button" class="btn btn-link btn-sm p-0 preview-slide" title="Preview">
                                            <i class="ti ti-zoom-in"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="video-preview-box">
                                    <i class="ti ti-photo fs-1 text-muted mb-2"></i>
                                    <p class="mb-0">No slide photos yet. Upload photos to continue.</p>
                                </div>
                            </div>
                        @endforelse
                    </div>

                    <div class="wizard-actions">
                        <a href="{{ route('admin.funeral.video-create', ['id' => $funeral->f_id, 'step' => 2]) }}" class="btn btn-light border me-2">
                            <i class="ti ti-arrow-left me-1"></i>Back
                        </a>
                        <button type="submit" class="btn btn-primary px-4">Next <i class="ti ti-arrow-right ms-1"></i></button>
                    </div>
                </form>

            @elseif ($step == 4)
                <form method="POST" action="{{ route('admin.funeral.upload-music') }}" id="musicForm">
                    @csrf
                    <input type="hidden" name="f_id" value="{{ $funeral->f_id }}">
                    <h5 class="mb-3">Background Music</h5>
                    <div class="row g-3 align-items-end">
                        <div class="col-md-8">
                            <label class="form-label">Select Track <span class="required-mark">*</span></label>
                            <select name="track_id" class="form-select select2" data-placeholder="Choose a track">
                                <option value="">Select track</option>
                                @foreach ($tracks as $track)
                                    <option value="{{ $track->track_id }}" @selected((string) $funeral->f_track_id === (string) $track->track_id)>
                                        {{ $track->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">Save Music</button>
                        </div>
                    </div>
                </form>

                <div class="wizard-actions">
                    <a href="{{ route('admin.funeral.video-create', ['id' => $funeral->f_id, 'step' => 3]) }}" class="btn btn-light border me-2">
                        <i class="ti ti-arrow-left me-1"></i>Back
                    </a>
                    <button type="button" id="btnMusicNext" class="btn btn-primary px-4">
                        Next <i class="ti ti-arrow-right ms-1"></i>
                    </button>
                </div>

            @else
                <div class="row g-4 mb-4">
                    <div class="col-lg-5">
                        <div class="card bg-light border-0 h-100">
                            <div class="card-body">
                                <h6 class="text-uppercase text-muted fs-xxs mb-3">Preview Summary</h6>
                                <p class="mb-2"><strong>Intro:</strong> {{ $videoIntro }}</p>
                                <p class="mb-2"><strong>Title:</strong> {{ $videoTitle }}</p>
                                <p class="mb-2"><strong>Subtitle:</strong> {{ $videoSubtitle }}</p>
                                <p class="mb-2"><strong>Selected slides:</strong> {{ count($selectedSlides) }}</p>
                                <p class="mb-2"><strong>Music:</strong> {{ ! empty($funeral->f_track_id) ? 'Selected' : 'Not selected' }}</p>
                                @if ($mainImageUrl)
                                    <p class="mb-1 mt-3"><strong>Main image</strong></p>
                                    <img src="{{ $mainImageUrl }}" alt="Main" class="main-image-preview mt-1">
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <h6 class="text-uppercase text-muted fs-xxs mb-2">Selected theme video</h6>
                        @if ($backgroundVideoUrl)
                            <video
                                id="finalizeThemePreview"
                                controls
                                muted
                                autoplay
                                loop
                                playsinline
                                class="w-100 rounded"
                                style="max-height:320px;background:#000;object-fit:contain;"
                                src="{{ $backgroundVideoUrl }}"
                            ></video>
                            <p class="text-muted small mt-2 mb-0">This is the same theme background you chose in step 2. It will loop behind your photos and text.</p>
                        @else
                            <div class="video-preview-box">
                                <i class="ti ti-video fs-1 text-muted mb-2"></i>
                                <p class="mb-0">No theme video selected yet. Go back to step 2 and choose one.</p>
                            </div>
                        @endif
                    </div>
                </div>

                @php
                    $hasBgReady = (bool) $backgroundVideoUrl;
                    $hasSlidesReady = count($selectedSlides) > 0 || $hasMainImage;
                    $hasMusicReady = ! empty($funeral->f_track_id);
                    $canGenerate = $hasBgReady && $hasSlidesReady;
                @endphp

                <div id="generateInitialState">
                    <h5 class="mb-3">Generate Memorial Video</h5>
                    @if (! empty($existingVideo))
                        <div class="alert alert-warning py-2">
                            A video already exists. Generate again will replace it with a new one using your current selections.
                        </div>
                    @endif
                    <p class="text-muted mb-3">
                        Builds an MP4 from your theme, main image + name text, selected gallery photos, and selected song.
                    </p>

                    <ul class="list-unstyled mb-4">
                        <li class="mb-2">
                            <i class="ti ti-{{ $hasBgReady ? 'circle-check text-success' : 'circle-x text-danger' }} me-1"></i>
                            Theme / background video
                        </li>
                        <li class="mb-2">
                            <i class="ti ti-{{ $hasSlidesReady ? 'circle-check text-success' : 'circle-x text-danger' }} me-1"></i>
                            Main image &amp; slides ({{ count($selectedSlides) }} selected)
                        </li>
                        <li class="mb-2">
                            <i class="ti ti-{{ $hasMusicReady ? 'circle-check text-success' : 'alert-circle text-warning' }} me-1"></i>
                            Background music {{ $hasMusicReady ? '' : '(optional — generate without music if skipped)' }}
                        </li>
                    </ul>

                    <form id="finalizeForm">
                        @csrf
                        <input type="hidden" name="f_id" value="{{ $funeral->f_id }}">
                        <input type="hidden" name="fv_title" value="{{ $videoTitle }}">
                        <input type="hidden" name="fv_subtitle" value="{{ $videoSubtitle }}">
                        <input type="hidden" name="fv_intro_text" value="{{ $videoIntro }}">
                        <input type="hidden" name="track_id" value="{{ $funeral->f_track_id }}">
                        <input type="hidden" name="ajax" value="1">
                        <input type="hidden" name="force" value="1">

                        <div class="wizard-actions">
                            <a href="{{ route('admin.funeral.video-create', ['id' => $funeral->f_id, 'step' => 4]) }}" class="btn btn-light border me-2">
                                <i class="ti ti-arrow-left me-1"></i>Back
                            </a>
                            <button type="button" id="btnGenerateVideo" class="btn btn-primary px-4" @disabled(! $canGenerate)>
                                <i class="ti ti-movie me-1"></i>Generate Video
                            </button>
                        </div>
                    </form>
                </div>

                <div id="generateLoadingState" class="text-center py-5 d-none">
                    <h5 class="mb-3">Creating your memorial video…</h5>
                    <div class="display-6 fw-semibold text-primary mb-2" id="generateProgressPercent">0% complete</div>
                    <div class="progress mx-auto mb-2" style="height: 14px; max-width: 520px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" id="generateProgressBar"
                             role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
                    </div>
                    <p class="fw-medium mb-1" id="generateProgressStage">Starting…</p>
                    <p class="text-muted mb-0">This can take one to two minutes. Please keep this page open.</p>
                </div>

                <div id="generateErrorState" class="d-none">
                    <div class="alert alert-danger">
                        <h5 class="alert-heading mb-2">Generation failed</h5>
                        <p class="mb-0" id="generateErrorMessage"></p>
                    </div>
                    <div class="wizard-actions">
                        <button type="button" id="btnRetryGenerate" class="btn btn-primary px-4">
                            <i class="ti ti-refresh me-1"></i>Try Again
                        </button>
                    </div>
                </div>

                <div id="generateSuccessState" class="d-none">
                    <div class="alert alert-success mb-3">
                        <h5 class="alert-heading mb-1">Video ready</h5>
                        <p class="mb-0">Your memorial video was created and saved.</p>
                    </div>
                    <video id="generatedVideoPreview" controls class="w-100 rounded mb-3" style="max-height:360px;background:#000;"></video>
                    <div class="wizard-actions">
                        <a href="#" id="downloadGeneratedVideo" class="btn btn-light border me-2" download>
                            <i class="ti ti-download me-1"></i>Download
                        </a>
                        <a href="{{ route('admin.funeral.video-list', ['f_id' => $funeral->f_id]) }}" class="btn btn-primary px-4" id="goToVideoList">
                            View Video List
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Image Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-2">
                    <img src="" alt="Preview" id="imagePreviewModalImg">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    @if ($step == 1)
    $('#mainImage').on('change', function () {
        var file = this.files && this.files[0];
        if (!file) return;
        var img = document.getElementById('mainImagePreview');
        var box = document.getElementById('mainImagePreviewBox');
        if (!img) return;
        img.src = URL.createObjectURL(file);
        img.classList.remove('d-none');
        if (box) {
            box.querySelector('.ti-photo')?.remove();
            box.querySelector('p')?.remove();
            box.querySelector('small')?.remove();
        }
    });

    $('#videoStep1Form').validate({
        rules: {
            title: { required: true, minlength: 2, maxlength: 100 },
            subtitle: { required: true, maxlength: 50 },
            intro_text: { required: true, maxlength: 100 },
            main_image: {
                required: {{ !empty($hasMainImage) ? 'false' : 'true' }},
                extension: 'jpg,jpeg,png,gif',
                filesize: 10485760
            }
        },
        messages: {
            main_image: {
                required: 'Please upload a main image.',
                extension: 'Only jpg, jpeg, png, gif allowed',
                filesize: 'Image must be 10MB or less'
            }
        }
    });
    @endif

    @if ($step == 2)
    function selectLibraryVideo(id, name) {
        $('#vmIdInput').val(id);
        $('.library-video-card').removeClass('selected');
        $('.library-select-btn')
            .removeClass('btn-primary active')
            .addClass('btn-outline-primary')
            .each(function () {
                if (!$(this).prop('disabled')) {
                    $(this).html('<i class="ti ti-circle me-1"></i>Select');
                }
            });

        var $card = $('.library-video-card[data-vm-id="' + id + '"]');
        $card.addClass('selected');
        $card.find('.library-select-btn')
            .removeClass('btn-outline-primary')
            .addClass('btn-primary active')
            .html('<i class="ti ti-circle-check me-1"></i>Selected');
        $('#selectedVideoLabel').text(name || ('Video #' + id));
    }

    $(document).on('click', '.library-select-btn', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if ($(this).prop('disabled')) return;
        var id = $(this).data('vm-id');
        var name = $(this).closest('.library-video-card').data('name');
        selectLibraryVideo(id, name);
    });

    $(document).on('click', '.library-video-card', function (e) {
        if ($(e.target).closest('video, button, a').length) return;
        if ($(this).data('playable') != '1') return;
        selectLibraryVideo($(this).data('vm-id'), $(this).data('name'));
    });

    // Only one preview plays at a time
    $(document).on('play', '#libraryVideoGrid video', function () {
        var current = this;
        $('#libraryVideoGrid video').each(function () {
            if (this !== current) {
                this.pause();
            }
        });
    });

    $('#libraryVideoSearch').on('input', function () {
        var q = $.trim($(this).val()).toLowerCase();
        var visible = 0;
        $('.library-video-col').each(function () {
            var match = !q || String($(this).data('name') || '').indexOf(q) !== -1;
            $(this).toggleClass('d-none', !match);
            if (match) visible++;
        });
        $('#libraryVisibleCount').text(visible);
        $('#libraryVideoEmptySearch').toggleClass('d-none', visible > 0);
    });

    $('#videoStep2Form').on('submit', function (e) {
        var vmId = parseInt($('#vmIdInput').val() || '0', 10);
        if (!vmId) {
            e.preventDefault();
            Swal.fire('Select a video', 'Please select one playable video before continuing.', 'warning');
            return false;
        }
    });
    @endif

    @if ($step == 3)
    var MAX_SLIDES = {{ \App\Services\MemorialVideoGenerator::MAX_GALLERY_SLIDES }};
    var SLIDE_SECONDS = {{ (int) \App\Services\MemorialVideoGenerator::SLIDE_SECONDS }};

    function formatSlideDuration(seconds) {
        var m = Math.floor(seconds / 60);
        var s = seconds % 60;
        return m + ':' + (s < 10 ? '0' : '') + s;
    }

    function warnMaxSlides() {
        Swal.fire('Maximum ' + MAX_SLIDES + ' photos', 'You can select up to ' + MAX_SLIDES + ' photos for the video.', 'warning');
    }

    function refreshSelectedCount() {
        var count = $('#slideGrid .slide-check:checked').length;
        $('#selectedSlideCount').text(count);
        $('#selectedSlideDuration').text(formatSlideDuration(count * SLIDE_SECONDS));
        $('#slideGrid .slide-card').each(function () {
            var checked = $(this).find('.slide-check').is(':checked');
            $(this).toggleClass('selected', checked);
        });

        var total = $('#slideGrid .slide-check').length;
        var allSelected = total > 0 && count >= Math.min(total, MAX_SLIDES);
        $('#toggleSelectAllSlides')
            .data('all-selected', allSelected)
            .find('span').text(allSelected ? 'Deselect All' : 'Select All');
    }

    $(document).on('change', '.slide-check', function () {
        if (this.checked && $('#slideGrid .slide-check:checked').length > MAX_SLIDES) {
            this.checked = false;
            warnMaxSlides();
        }
        refreshSelectedCount();
    });

    $(document).on('click', '#toggleSelectAllSlides', function () {
        if ($(this).data('all-selected')) {
            $('#slideGrid .slide-check').prop('checked', false);
        } else {
            var room = MAX_SLIDES - $('#slideGrid .slide-check:checked').length;
            $('#slideGrid .slide-check:not(:checked)').each(function () {
                if (room <= 0) return false;
                this.checked = true;
                room--;
            });
        }
        refreshSelectedCount();
    });

    refreshSelectedCount();

    $(document).on('click', '.slide-card', function (e) {
        if ($(e.target).closest('.preview-slide, .slide-check, label').length) {
            return;
        }
        var $check = $(this).find('.slide-check');
        $check.prop('checked', ! $check.prop('checked')).trigger('change');
    });

    $(document).on('click', '.preview-slide', function (e) {
        e.preventDefault();
        e.stopPropagation();
        var url = $(this).closest('.slide-card').data('img');
        $('#imagePreviewModalImg').attr('src', url);
        bootstrap.Modal.getOrCreateInstance(document.getElementById('imagePreviewModal')).show();
    });

    $(document).on('dblclick', '.slide-card img', function () {
        var url = $(this).closest('.slide-card').data('img');
        $('#imagePreviewModalImg').attr('src', url);
        bootstrap.Modal.getOrCreateInstance(document.getElementById('imagePreviewModal')).show();
    });

    $('#photoUploadForm').validate({
        rules: {
            file: { required: true, extension: 'jpg,jpeg,png,gif', filesize: 10485760 }
        }
    });

    $('#videoStep3Form').on('submit', function (e) {
        if ($('#slideGrid .slide-check:checked').length < 1) {
            e.preventDefault();
            Swal.fire('Select slides', 'Please select at least one slide image.', 'warning');
            return false;
        }
        if ($('#slideGrid .slide-check:checked').length > MAX_SLIDES) {
            e.preventDefault();
            warnMaxSlides();
            return false;
        }
    });

    $('#photoUploadForm').on('submit', function (e) {
        e.preventDefault();
        if (! $(this).valid()) return false;
        var form = this;
        $.ajax({
            url: form.action,
            type: 'POST',
            data: new FormData(form),
            processData: false,
            contentType: false,
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            success: function () {
                window.location.reload();
            },
            error: function (xhr) {
                var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Upload failed';
                Swal.fire('Error', msg, 'error');
            }
        });
    });
    @endif

    @if ($step == 4)
    $('#musicForm').validate({
        rules: { track_id: { required: true } }
    });
    $('#musicForm').on('submit', function (e) {
        e.preventDefault();
        if (! $(this).valid()) return false;
        var form = this;
        $.ajax({
            url: form.action,
            type: 'POST',
            data: new FormData(form),
            processData: false,
            contentType: false,
            success: function () {
                Swal.fire('Success', 'Music saved', 'success');
            },
            error: function () {
                Swal.fire('Error', 'Could not save music', 'error');
            }
        });
    });

    // Next must save selected track first (otherwise song is missing from final video)
    $('#btnMusicNext').on('click', function () {
        if (! $('#musicForm').valid()) return;
        var trackId = $('select[name="track_id"]').val();
        if (! trackId) {
            Swal.fire('Music required', 'Please select a track before continuing.', 'warning');
            return;
        }
        var form = document.getElementById('musicForm');
        $.ajax({
            url: form.action,
            type: 'POST',
            data: new FormData(form),
            processData: false,
            contentType: false,
            success: function () {
                window.location.href = '{{ route('admin.funeral.video-create', ['id' => $funeral->f_id, 'step' => 5]) }}';
            },
            error: function () {
                Swal.fire('Error', 'Could not save music. Please try again.', 'error');
            }
        });
    });
    @endif

    @if ($step == 5)
    var generateRun = null;

    function setGenerateProgress(percent, stage) {
        if (! generateRun) {
            return;
        }
        percent = Math.max(0, Math.min(100, parseInt(percent, 10) || 0));
        if (percent > generateRun.percent) {
            generateRun.percent = percent;
            generateRun.changedAt = Date.now();
        }
        var shown = generateRun.percent;
        $('#generateProgressPercent').text(shown + '% complete');
        $('#generateProgressBar').css('width', shown + '%').attr('aria-valuenow', shown);
        if (stage) {
            $('#generateProgressStage').text(stage);
        }
    }

    function isActiveRun(run) {
        return run && run === generateRun && run.active;
    }

    function showGenerateError(msg) {
        if (generateRun) {
            generateRun.active = false;
        }
        $('#generateInitialState, #generateLoadingState, #generateSuccessState').addClass('d-none');
        $('#generateErrorMessage').text(msg || 'An unknown error occurred');
        $('#generateErrorState').removeClass('d-none');
    }

    function showGenerateSuccess(res) {
        setGenerateProgress(100, 'Video ready');
        if (generateRun) {
            generateRun.active = false;
        }
        $('#generateLoadingState').addClass('d-none');
        $('#generateSuccessState').removeClass('d-none');
        if (res.video_url) {
            $('#generatedVideoPreview').attr('src', res.video_url);
            $('#downloadGeneratedVideo').attr('href', res.video_url);
        }
        if (res.redirect) {
            $('#goToVideoList').attr('href', res.redirect);
        }

        Swal.fire({
            icon: 'success',
            title: 'Video created',
            text: (res && res.message) ? res.message : 'Memorial video created successfully.',
            timer: 1800,
            showConfirmButton: false
        }).then(function () {
            if (res && res.redirect) {
                window.location.href = res.redirect;
            }
        });
    }

    function generateMemorialVideo() {
        var fid = $('#finalizeForm input[name="f_id"]').val() || '';
        var runId = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
        var run = generateRun = {
            id: runId,
            active: true,
            percent: 0,
            changedAt: Date.now(),
            statusUrl: '/admin/funeral-video-generate-status?f_id=' + encodeURIComponent(fid)
                + '&run_id=' + encodeURIComponent(runId)
        };

        $('#generateInitialState, #generateErrorState, #generateSuccessState').addClass('d-none');
        $('#generateLoadingState').removeClass('d-none');
        setGenerateProgress(0, 'Starting…');

        $.ajax({
            url: '/admin/funeral-video-generate',
            type: 'POST',
            data: $('#finalizeForm').serialize() + '&run_id=' + encodeURIComponent(runId),
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function (res) {
                if (! isActiveRun(run) || (res && res.processing)) {
                    return;
                }
                if (res && res.success && (res.video_url || res.redirect)) {
                    showGenerateSuccess(res);
                    return;
                }
                showGenerateError((res && res.message) ? res.message : 'Video generation failed');
            },
            error: function (xhr, status, error) {
                if (! isActiveRun(run)) {
                    return;
                }
                // The render keeps going server-side (MAMP's FastCGI timeout returns 500/502/504
                // while FFmpeg still runs) — the status poll reports the real outcome.
                if (status === 'timeout' || xhr.status === 0 || xhr.status === 500 || xhr.status === 502 || xhr.status === 504) {
                    return;
                }
                var msg = 'Network or server error while generating video.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                } else if (xhr.status === 419) {
                    msg = 'Session expired. Please refresh the page and try again.';
                } else if (xhr.status === 404) {
                    msg = 'Generate endpoint not found. Run: php artisan route:clear';
                } else if (xhr.status) {
                    msg = 'Server error (HTTP ' + xhr.status + ')' + (error ? ': ' + error : '');
                }
                showGenerateError(msg);
            }
        });

        window.setTimeout(function () { pollGenerateStatus(run); }, 1000);
    }

    function pollGenerateStatus(run) {
        if (! isActiveRun(run)) {
            return;
        }
        if (Date.now() - run.changedAt > 5 * 60 * 1000) {
            showGenerateError('Video generation stopped responding. Please try Generate again.');
            return;
        }
        $.ajax({
            url: run.statusUrl,
            type: 'GET',
            dataType: 'json',
            cache: false,
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            success: function (res) {
                if (! isActiveRun(run)) {
                    return;
                }
                if (res && res.status === 'done') {
                    showGenerateSuccess(res);
                    return;
                }
                if (res && res.status === 'failed') {
                    showGenerateError(res.message || 'Video generation failed');
                    return;
                }
                if (res) {
                    setGenerateProgress(res.progress, res.message || 'Rendering video…');
                }
                window.setTimeout(function () { pollGenerateStatus(run); }, 1500);
            },
            error: function (xhr) {
                if (! isActiveRun(run)) {
                    return;
                }
                if (xhr.status === 404 && xhr.responseJSON && xhr.responseJSON.message) {
                    showGenerateError(xhr.responseJSON.message);
                    return;
                }
                window.setTimeout(function () { pollGenerateStatus(run); }, 3000);
            }
        });
    }

    $('#btnGenerateVideo, #btnRetryGenerate').on('click', function () {
        generateMemorialVideo();
    });
    @endif
})();
</script>
@endpush