@extends('admin.layouts.app')

@section('title', 'Upload Movie')

@section('content')
<style>
    :root{
        --bg:#0b0b0f;
        --panel:#121218;
        --panel-2:#171720;
        --line:#2a2a36;
        --text:#f5f5f7;
        --muted:#9ca3af;
        --red:#e50914;
        --red-2:#b20710;
        --green:#16a34a;
        --yellow:#f59e0b;
        --blue:#2563eb;
        --radius:18px;
        --shadow:0 20px 45px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }

    body {
        background: linear-gradient(180deg, #09090c 0%, #101018 100%);
        color: var(--text);
    }

    .upload-shell {
        max-width: 1450px;
        margin: 0 auto;
        padding: 28px;
    }

    .upload-topbar {
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:16px;
        margin-bottom:22px;
        flex-wrap:wrap;
    }

    .upload-title h1{
        margin:0;
        font-size:32px;
        font-weight:800;
        letter-spacing:-0.02em;
    }

    .upload-title p{
        margin:6px 0 0;
        color:var(--muted);
        font-size:14px;
    }

    .top-actions{
        display:flex;
        gap:12px;
        flex-wrap:wrap;
    }

    .btn-netflix,
    .btn-dark,
    .btn-outline{
        border:none;
        border-radius:12px;
        padding:12px 18px;
        font-weight:700;
        font-size:14px;
        cursor:pointer;
        transition:.2s ease;
        text-decoration:none;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
    }

    .btn-netflix{
        background:linear-gradient(180deg, #ef1723 0%, #c50812 100%);
        color:white;
        box-shadow:0 12px 24px rgba(229,9,20,.25);
    }

    .btn-netflix:hover{ transform:translateY(-1px); }

    .btn-dark{
        background:#1d1d27;
        color:#fff;
    }

    .btn-outline{
        background:transparent;
        color:#d1d5db;
        border:1px solid #343444;
    }

    .layout-grid{
        display:grid;
        grid-template-columns: 1.2fr .8fr;
        gap:22px;
    }

    @media (max-width: 1100px){
        .layout-grid{
            grid-template-columns:1fr;
        }
    }

    .panel{
        background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.01) 100%), var(--panel);
        border:1px solid rgba(255,255,255,.06);
        border-radius:var(--radius);
        box-shadow:var(--shadow);
        overflow:hidden;
    }

    .panel-header{
        padding:18px 22px;
        border-bottom:1px solid rgba(255,255,255,.06);
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        flex-wrap:wrap;
    }

    .panel-header h2{
        margin:0;
        font-size:18px;
        font-weight:800;
    }

    .panel-header span{
        color:var(--muted);
        font-size:13px;
    }

    .panel-body{
        padding:22px;
    }

    .form-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px;
    }

    .form-grid-3{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        gap:16px;
    }

    .form-grid-1{
        display:grid;
        grid-template-columns:1fr;
        gap:16px;
    }

    @media (max-width: 768px){
        .form-grid,
        .form-grid-3{
            grid-template-columns:1fr;
        }
    }

    .field{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .field label{
        font-size:13px;
        font-weight:700;
        color:#e5e7eb;
    }

    .field small{
        color:var(--muted);
        font-size:12px;
    }

    .control,
    .field select,
    .field textarea,
    .field input[type="text"],
    .field input[type="number"],
    .field input[type="date"],
    .field input[type="url"],
    .field input[type="file"]{
        width:100%;
        background:var(--panel-2);
        border:1px solid #2f2f3c;
        color:#fff;
        border-radius:12px;
        padding:14px 15px;
        font-size:14px;
        outline:none;
        transition:.2s ease;
    }

    .field textarea{
        min-height:130px;
        resize:vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus{
        border-color:#5757ff;
        box-shadow:0 0 0 4px rgba(87,87,255,.12);
    }

    .toggle-row{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
    }

    .toggle-card{
        background:var(--panel-2);
        border:1px solid #2f2f3c;
        border-radius:14px;
        padding:14px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:14px;
    }

    .toggle-card strong{
        display:block;
        font-size:14px;
    }

    .toggle-card span{
        color:var(--muted);
        font-size:12px;
    }

    @media (max-width:768px){
        .toggle-row{
            grid-template-columns:1fr;
        }
    }

    .switch{
        position:relative;
        width:52px;
        height:30px;
        display:inline-block;
    }

    .switch input{ display:none; }

    .slider{
        position:absolute;
        inset:0;
        background:#3b3b48;
        border-radius:999px;
        cursor:pointer;
        transition:.2s;
    }

    .slider:before{
        content:"";
        position:absolute;
        width:22px;
        height:22px;
        left:4px;
        top:4px;
        background:#fff;
        border-radius:50%;
        transition:.2s;
    }

    .switch input:checked + .slider{
        background:var(--red);
    }

    .switch input:checked + .slider:before{
        transform:translateX(22px);
    }

    .dropzone{
        border:1.5px dashed #3a3a4a;
        background:linear-gradient(180deg, rgba(229,9,20,.06) 0%, rgba(255,255,255,.02) 100%);
        border-radius:16px;
        padding:22px;
    }

    .dropzone h3{
        margin:0 0 6px;
        font-size:15px;
        font-weight:800;
    }

    .dropzone p{
        margin:0 0 14px;
        color:var(--muted);
        font-size:13px;
    }

    .preview-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
        margin-top:14px;
    }

    .preview-card{
        background:#0f0f15;
        border:1px solid #2d2d39;
        border-radius:14px;
        overflow:hidden;
    }

    .preview-box{
        background:#111;
        min-height:180px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#6b7280;
        font-size:13px;
        position:relative;
    }

    .preview-box img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .preview-label{
        padding:10px 12px;
        border-top:1px solid #2d2d39;
        font-size:12px;
        color:#d1d5db;
    }

    .check-grid{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
        margin-top:8px;
    }

    @media (max-width:768px){
        .check-grid{
            grid-template-columns:1fr;
        }
    }

    .check-item{
        display:flex;
        gap:10px;
        align-items:flex-start;
        background:#171720;
        border:1px solid #2d2d39;
        border-radius:12px;
        padding:12px;
    }

    .status-box{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:12px;
    }

    .status-item{
        background:#171720;
        border:1px solid #2e2e3b;
        border-radius:14px;
        padding:16px;
    }

    .status-item b{
        display:block;
        font-size:13px;
        margin-bottom:6px;
        color:#e5e7eb;
    }

    .status-item span{
        font-size:12px;
        color:var(--muted);
    }

    .error-box{
        background:rgba(239,68,68,.10);
        border:1px solid rgba(239,68,68,.35);
        color:#fecaca;
        border-radius:14px;
        padding:16px 18px;
        margin-bottom:18px;
    }

    .error-box ul{
        margin:10px 0 0 18px;
    }

    .sticky-side{
        position:sticky;
        top:18px;
    }

    .mini-list{
        display:grid;
        gap:12px;
    }

    .mini-card{
        padding:14px;
        background:#16161f;
        border:1px solid #2d2d39;
        border-radius:14px;
    }

    .mini-card h4{
        margin:0 0 6px;
        font-size:14px;
    }

    .mini-card p{
        margin:0;
        font-size:12px;
        color:var(--muted);
        line-height:1.55;
    }

    .footer-actions{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        flex-wrap:wrap;
        margin-top:22px;
    }

    .tag-pill{
        display:inline-flex;
        align-items:center;
        padding:7px 10px;
        border-radius:999px;
        font-size:12px;
        background:rgba(229,9,20,.12);
        border:1px solid rgba(229,9,20,.25);
        color:#fecaca;
    }

    .file-selected-box{
        background:#121722;
        border:1px solid #273143;
        border-radius:12px;
        padding:14px;
        color:#cbd5e1;
        font-size:13px;
        line-height:1.6;
    }

    .file-selected-box strong{
        color:#fff;
    }

    .hint-list{
        margin:8px 0 0;
        padding-left:18px;
        color:#9ca3af;
        font-size:12px;
    }

    .source-toggle-grid{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
    }

    @media (max-width:768px){
        .source-toggle-grid{
            grid-template-columns:1fr;
        }
    }

    .source-card{
        position:relative;
        background:#171720;
        border:1px solid #2d2d39;
        border-radius:14px;
        padding:16px;
        cursor:pointer;
        transition:.2s ease;
    }

    .source-card.active{
        border-color:#e50914;
        box-shadow:0 0 0 3px rgba(229,9,20,.10);
    }

    .source-card input{
        position:absolute;
        opacity:0;
        pointer-events:none;
    }

    .source-card strong{
        display:block;
        font-size:14px;
        margin-bottom:4px;
    }

    .source-card span{
        color:var(--muted);
        font-size:12px;
        line-height:1.5;
    }

    .hidden-source{
        display:none;
    }
</style>

<div class="upload-shell">
    <form action="{{ route('admin.movies.store') }}" method="POST" enctype="multipart/form-data" id="movieUploadForm">
        @csrf

        <div class="upload-topbar">
            <div class="upload-title">
                <h1>Upload New Movie</h1>
                <p>Netflix-style admin publishing flow with FTP source selection and external streaming links.</p>
            </div>

            <div class="top-actions">
                <a href="{{ route('admin.movies.index') }}" class="btn-outline">Back to Movies</a>
                <button type="submit" name="save_action" value="draft" class="btn-dark">Save as Draft</button>
                <button type="submit" name="save_action" value="publish" class="btn-netflix">Publish Movie</button>
            </div>
        </div>

        @if ($errors->any())
            <div class="error-box">
                <strong>Upload form has some problems:</strong>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="layout-grid">
            <div>
                <div class="panel">
                    <div class="panel-header">
                        <div>
                            <h2>Basic Details</h2>
                            <span>Main title information and SEO-friendly content data.</span>
                        </div>
                        <span class="tag-pill">Movie Metadata</span>
                    </div>

                    <div class="panel-body">
                        <div class="form-grid">
                            <div class="field">
                                <label for="title">Movie Title</label>
                                <input class="control" type="text" id="title" name="title" value="{{ old('title') }}" placeholder="e.g. Extraction 3" required>
                            </div>

                            <div class="field">
                                <label for="slug">Slug</label>
                                <input class="control" type="text" id="slug" name="slug" value="{{ old('slug') }}" placeholder="auto-generated-from-title">
                                <small>Leave blank if you want to generate it automatically.</small>
                            </div>
                        </div>

                        <div class="form-grid-1" style="margin-top:16px;">
                            <div class="field">
                                <label for="description">Description / Synopsis</label>
                                <textarea id="description" name="description" placeholder="Write a strong Netflix-style synopsis...">{{ old('description') }}</textarea>
                            </div>
                        </div>

                        <div class="form-grid-3" style="margin-top:16px;">
                            <div class="field">
                                <label for="release_year">Release Year</label>
                                <input class="control" type="number" id="release_year" name="release_year" value="{{ old('release_year') }}" min="1900" max="2100" placeholder="2026">
                            </div>

                            <div class="field">
                                <label for="duration">Duration (minutes)</label>
                                <input class="control" type="number" id="duration" name="duration" value="{{ old('duration') }}" min="1" placeholder="125">
                            </div>

                            <div class="field">
                                <label for="age_rating">Age Rating</label>
                                <select id="age_rating" name="age_rating">
                                    <option value="">Select rating</option>
                                    <option value="G" @selected(old('age_rating')==='G')>G</option>
                                    <option value="PG" @selected(old('age_rating')==='PG')>PG</option>
                                    <option value="PG-13" @selected(old('age_rating')==='PG-13')>PG-13</option>
                                    <option value="16+" @selected(old('age_rating')==='16+')>16+</option>
                                    <option value="18+" @selected(old('age_rating')==='18+')>18+</option>
                                    <option value="R" @selected(old('age_rating')==='R')>R</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-grid-3" style="margin-top:16px;">
                            <div class="field">
    <label for="language">Language</label>
    <select id="language" name="language" class="control">
        <option value="">Select language</option>
        @foreach(($languages ?? collect())->where('is_active', true) as $language)
            <option value="{{ $language->name }}" @selected(old('language') === $language->name)>
                {{ $language->name }}
                @if(!empty($language->code))
                    ({{ strtoupper($language->code) }})
                @endif
            </option>
        @endforeach
    </select>
    <small>Languages are loaded from Admin → Languages.</small>
</div>

                            <div class="field">
                                <label for="country">Country</label>
                                <input class="control" type="text" id="country" name="country" value="{{ old('country') }}" placeholder="USA">
                            </div>

                            <div class="field">
                                <label for="imdb_rating">IMDb / Rating</label>
                                <input class="control" type="number" step="0.1" min="0" max="10" id="imdb_rating" name="imdb_rating" value="{{ old('imdb_rating') }}" placeholder="8.4">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel" style="margin-top:22px;">
                    <div class="panel-header">
                        <div>
                            <h2>Media Assets</h2>
                            <span>Upload artwork and choose either server file or external video link.</span>
                        </div>
                        <span class="tag-pill">Poster + Backdrop + Video Source</span>
                    </div>

                    <div class="panel-body">
                        <div class="dropzone">
                            <h3>Artwork Upload</h3>
                            <p>Use a vertical poster for card layout and a wide backdrop for hero/banner sections.</p>

                            <div class="form-grid">
                                <div class="field">
                                    <label for="poster">Poster Image</label>
                                    <input type="file" id="poster" name="poster" accept="image/*">
                                    <small>Recommended: 1000x1500 or similar portrait ratio.</small>
                                </div>

                                <div class="field">
                                    <label for="backdrop">Backdrop Image</label>
                                    <input type="file" id="backdrop" name="backdrop" accept="image/*">
                                    <small>Recommended: 1920x1080 landscape banner.</small>
                                </div>
                            </div>

                            <div class="preview-grid">
                                <div class="preview-card">
                                    <div class="preview-box" id="posterPreview">Poster preview</div>
                                    <div class="preview-label">Poster Preview</div>
                                </div>

                                <div class="preview-card">
                                    <div class="preview-box" id="backdropPreview">Backdrop preview</div>
                                    <div class="preview-label">Backdrop Preview</div>
                                </div>
                            </div>
                        </div>

                        <div class="field" style="margin-top:18px;">
                            <label>Movie Source Type</label>
                            <div class="source-toggle-grid">
                                <label class="source-card" id="serverSourceCard">
                                    <input type="radio" name="source_type" value="server" {{ old('source_type', 'server') === 'server' ? 'checked' : '' }}>
                                    <strong>Server File</strong>
                                    <span>Select a movie already uploaded by FTP inside <strong>public/uploads/movies</strong>.</span>
                                </label>

                                <label class="source-card" id="externalSourceCard">
                                    <input type="radio" name="source_type" value="external" {{ old('source_type') === 'external' ? 'checked' : '' }}>
                                    <strong>External Link</strong>
                                    <span>Use Vimeo, Bunny, Cloudflare Stream, direct MP4, or M3U8 link.</span>
                                </label>
                            </div>
                        </div>

                        <div id="serverSourceWrap" style="margin-top:18px;">
                            <div class="form-grid">
                                <div class="field">
                                    <label for="video_file">Movie File From Server</label>
                                    <select id="video_file" name="video_file" class="control">
                                        <option value="">Select uploaded movie file</option>
                                        @foreach(($videoFiles ?? []) as $file)
                                            <option
                                                value="{{ $file['path'] }}"
                                                data-url="{{ $file['url'] }}"
                                                data-name="{{ $file['name'] }}"
                                                data-size="{{ $file['size_human'] }}"
                                                @selected(old('video_file') === $file['path'])
                                            >
                                                {{ $file['name'] }} ({{ $file['size_human'] }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <small>This list is loaded from public/uploads/movies</small>

                                    @if(empty($videoFiles) || count($videoFiles) === 0)
                                        <ul class="hint-list">
                                            <li>No video files found yet.</li>
                                            <li>Upload movie files into <strong>playmax247.com/public/uploads/movies</strong></li>
                                            <li>Refresh this page after upload.</li>
                                        </ul>
                                    @endif
                                </div>

                                <div class="field">
                                    <label for="trailer_url">Trailer URL</label>
                                    <input class="control" type="url" id="trailer_url" name="trailer_url" value="{{ old('trailer_url') }}" placeholder="https://youtube.com/watch?v=...">
                                </div>
                            </div>

                            <div style="margin-top:16px;">
                                <div class="file-selected-box" id="selectedFileBox">
                                    <strong>No movie file selected yet.</strong><br>
                                    Choose a file from the server file list.
                                </div>
                            </div>
                        </div>

                        <div id="externalSourceWrap" style="margin-top:18px;">
                            <div class="form-grid">
                                <div class="field">
                                    <label for="external_video_url">External Movie Link</label>
                                    <input
                                        class="control"
                                        type="url"
                                        id="external_video_url"
                                        name="external_video_url"
                                        value="{{ old('external_video_url') }}"
                                        placeholder="https://player.vimeo.com/video/123456789"
                                    >
                                    <small>Paste Vimeo player link, Bunny URL, Cloudflare Stream URL, direct MP4, or M3U8 link.</small>
                                </div>

                                <div class="field">
                                    <label for="trailer_url_external">Trailer URL</label>
                                    <input class="control" type="url" id="trailer_url_external" value="{{ old('trailer_url') }}" disabled>
                                    <small>Use the Trailer URL field above. This side is only for layout balance.</small>
                                </div>
                            </div>

                            <div style="margin-top:16px;">
                                <div class="file-selected-box">
                                    <strong>External Source Tips:</strong><br>
                                    Vimeo example: <span style="color:#93c5fd;">https://player.vimeo.com/video/123456789</span><br>
                                    Direct MP4 example: <span style="color:#93c5fd;">https://cdn.example.com/movie.mp4</span><br>
                                    HLS example: <span style="color:#93c5fd;">https://cdn.example.com/movie.m3u8</span>
                                </div>
                            </div>
                        </div>

                        <div class="form-grid" style="margin-top:16px;">
                            <div class="field">
                                <label for="download_url">Optional Download URL</label>
                                <input class="control" type="url" id="download_url" name="download_url" value="{{ old('download_url') }}" placeholder="https://yourcdn.com/download/movie.mp4">
                            </div>

                            <div class="field">
                                <label for="subtitle_url">Subtitle URL</label>
                                <input class="control" type="url" id="subtitle_url" name="subtitle_url" value="{{ old('subtitle_url') }}" placeholder="https://yourcdn.com/subtitles/movie.vtt">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel" style="margin-top:22px;">
                    <div class="panel-header">
                        <div>
                            <h2>Catalog & Discovery</h2>
                            <span>Control where and how this title appears on your platform.</span>
                        </div>
                        <span class="tag-pill">Visibility</span>
                    </div>

                    <div class="panel-body">
                        <div class="toggle-row">
                            <div class="toggle-card">
                                <div>
                                    <strong>Featured Title</strong>
                                    <span>Show on homepage hero or top shelf.</span>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" name="is_featured" value="1" @checked(old('is_featured'))>
                                    <span class="slider"></span>
                                </label>
                            </div>

                            <div class="toggle-card">
                                <div>
                                    <strong>Trending</strong>
                                    <span>Push into trending or spotlight row.</span>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" name="is_trending" value="1" @checked(old('is_trending'))>
                                    <span class="slider"></span>
                                </label>
                            </div>

                            <div class="toggle-card">
                                <div>
                                    <strong>Members Only</strong>
                                    <span>Require subscription before playback.</span>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" name="is_premium" value="1" @checked(old('is_premium', true))>
                                    <span class="slider"></span>
                                </label>
                            </div>

                            <div class="toggle-card">
                                <div>
                                    <strong>Published</strong>
                                    <span>Make title publicly visible immediately.</span>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" name="is_published" value="1" @checked(old('is_published'))>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="field" style="margin-top:18px;">
                            <label>Genres</label>
                            <div class="check-grid">
                                @forelse(($genres ?? []) as $genre)
                                    <label class="check-item">
                                        <input type="checkbox" name="genres[]" value="{{ $genre->id }}"
                                            {{ in_array($genre->id, old('genres', [])) ? 'checked' : '' }}>
                                        <div>
                                            <strong style="display:block; font-size:14px;">{{ $genre->name }}</strong>
                                            <span style="font-size:12px; color:#9ca3af;">Attach this title to {{ $genre->name }}</span>
                                        </div>
                                    </label>
                                @empty
                                    <div class="check-item" style="grid-column:1/-1;">
                                        <div>
                                            <strong>No genres found</strong>
                                            <span style="display:block; color:#9ca3af; font-size:12px;">
                                                Create genres first in admin before assigning categories.
                                            </span>
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        </div>

                        <div class="form-grid" style="margin-top:18px;">
                            <div class="field">
                                <label for="tags">Tags / Keywords</label>
                                <input class="control" type="text" id="tags" name="tags" value="{{ old('tags') }}" placeholder="action, thriller, spy, prison, revenge">
                                <small>Comma-separated tags for search and filtering.</small>
                            </div>

                            <div class="field">
                                <label for="publish_date">Publish Date</label>
                                <input class="control" type="date" id="publish_date" name="publish_date" value="{{ old('publish_date') }}">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="footer-actions">
                    <div style="color:#9ca3af; font-size:13px;">
                        Tip: choose FTP server file or external link depending on where the movie is hosted.
                    </div>

                    <div class="top-actions">
                        <button type="submit" name="save_action" value="draft" class="btn-dark">Save Draft</button>
                        <button type="submit" name="save_action" value="publish" class="btn-netflix">Publish Now</button>
                    </div>
                </div>
            </div>

            <div>
                <div class="sticky-side">
                    <div class="panel">
                        <div class="panel-header">
                            <div>
                                <h2>Publishing Status</h2>
                                <span>Quick quality checklist before going live.</span>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div class="status-box">
                                <div class="status-item">
                                    <b>Artwork</b>
                                    <span>Poster + backdrop recommended</span>
                                </div>
                                <div class="status-item">
                                    <b>Playback</b>
                                    <span>Server file or external link required</span>
                                </div>
                                <div class="status-item">
                                    <b>SEO</b>
                                    <span>Title + slug + synopsis</span>
                                </div>
                            </div>

                            <div class="mini-list" style="margin-top:18px;">
                                <div class="mini-card">
                                    <h4>Recommended Flow</h4>
                                    <p>Choose source type → add artwork → add metadata → save draft → test playback → publish.</p>
                                </div>

                                <div class="mini-card">
                                    <h4>Server File</h4>
                                    <p>Best for FTP-uploaded files stored in your own hosting under public/uploads/movies.</p>
                                </div>

                                <div class="mini-card">
                                    <h4>External Link</h4>
                                    <p>Use for Vimeo, Bunny, Cloudflare Stream, direct MP4, or HLS m3u8 links.</p>
                                </div>

                                <div class="mini-card">
                                    <h4>Auto Slug Preview</h4>
                                    <p id="slugPreviewText">Slug will appear here as you type the movie title.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel" style="margin-top:18px;">
                        <div class="panel-header">
                            <div>
                                <h2>Notes</h2>
                                <span>Optional production metadata.</span>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div class="form-grid-1">
                                <div class="field">
                                    <label for="cast">Cast</label>
                                    <input class="control" type="text" id="cast" name="cast" value="{{ old('cast') }}" placeholder="Actor 1, Actor 2, Actor 3">
                                </div>

                                <div class="field">
                                    <label for="director">Director</label>
                                    <input class="control" type="text" id="director" name="director" value="{{ old('director') }}" placeholder="Director name">
                                </div>

                                <div class="field">
                                    <label for="status">Internal Status</label>
                                    <select id="status" name="status">
                                        <option value="draft" @selected(old('status')==='draft')>Draft</option>
                                        <option value="review" @selected(old('status')==='review')>In Review</option>
                                        <option value="published" @selected(old('status')==='published')>Published</option>
                                    </select>
                                </div>

                                <div class="field">
                                    <label for="admin_notes">Admin Notes</label>
                                    <textarea id="admin_notes" name="admin_notes" placeholder="Private internal notes for editors...">{{ old('admin_notes') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    const titleInput = document.getElementById('title');
    const slugInput = document.getElementById('slug');
    const slugPreviewText = document.getElementById('slugPreviewText');
    const videoFileSelect = document.getElementById('video_file');
    const selectedFileBox = document.getElementById('selectedFileBox');
    const serverWrap = document.getElementById('serverSourceWrap');
    const externalWrap = document.getElementById('externalSourceWrap');
    const serverCard = document.getElementById('serverSourceCard');
    const externalCard = document.getElementById('externalSourceCard');

    function makeSlug(value) {
        return value
            .toLowerCase()
            .trim()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-');
    }

    function updateSlugFromTitle() {
        if (!slugInput.dataset.touched) {
            slugInput.value = makeSlug(titleInput.value);
        }
        slugPreviewText.textContent = slugInput.value
            ? 'Slug: ' + slugInput.value
            : 'Slug will appear here as you type the movie title.';
    }

    titleInput?.addEventListener('input', updateSlugFromTitle);

    slugInput?.addEventListener('input', function () {
        slugInput.dataset.touched = '1';
        slugPreviewText.textContent = slugInput.value
            ? 'Slug: ' + slugInput.value
            : 'Slug will appear here as you type the movie title.';
    });

    function bindImagePreview(inputId, previewId) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);

        input?.addEventListener('change', function(e) {
            const file = e.target.files?.[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(event) {
                preview.innerHTML = `<img src="${event.target.result}" alt="preview">`;
            };
            reader.readAsDataURL(file);
        });
    }

    function updateSelectedFileBox() {
        if (!videoFileSelect) return;

        const selectedOption = videoFileSelect.options[videoFileSelect.selectedIndex];

        if (!selectedOption || !selectedOption.value) {
            selectedFileBox.innerHTML = `
                <strong>No movie file selected yet.</strong><br>
                Choose a file from the server file list.
            `;
            return;
        }

        const name = selectedOption.dataset.name || selectedOption.textContent;
        const size = selectedOption.dataset.size || 'Unknown';
        const url = selectedOption.dataset.url || '';

        selectedFileBox.innerHTML = `
            <strong>Selected File:</strong> ${name}<br>
            <strong>Size:</strong> ${size}<br>
            <strong>Playback URL:</strong><br>
            <span style="word-break: break-all; color:#93c5fd;">${url}</span>
        `;
    }

    function updateSourceMode() {
        const selected = document.querySelector('input[name="source_type"]:checked')?.value || 'server';

        if (selected === 'external') {
            serverWrap.style.display = 'none';
            externalWrap.style.display = 'block';
            serverCard.classList.remove('active');
            externalCard.classList.add('active');
        } else {
            serverWrap.style.display = 'block';
            externalWrap.style.display = 'none';
            serverCard.classList.add('active');
            externalCard.classList.remove('active');
        }
    }

    document.querySelectorAll('input[name="source_type"]').forEach(el => {
        el.addEventListener('change', updateSourceMode);
    });

    videoFileSelect?.addEventListener('change', updateSelectedFileBox);

    bindImagePreview('poster', 'posterPreview');
    bindImagePreview('backdrop', 'backdropPreview');

    updateSlugFromTitle();
    updateSelectedFileBox();
    updateSourceMode();
</script>
@endsection