@extends('admin.layout')

@section('heading', 'Settings, API & Analytics')

@section('content')
@php
    $mediaStorage = app(\App\Services\MediaStorageService::class);

    $logoUrl = !empty($s['logo'] ?? null)
        ? $mediaStorage->url($s['logo'])
        : null;

    $faviconUrl = !empty($s['favicon'] ?? null)
        ? $mediaStorage->url($s['favicon'])
        : null;
@endphp

<style>
    .settings-page {
        --sp-bg: #090b10;
        --sp-card: rgba(16, 19, 27, 0.94);
        --sp-card-soft: rgba(255, 255, 255, 0.035);
        --sp-border: rgba(255, 255, 255, 0.09);
        --sp-border-hover: rgba(255, 255, 255, 0.17);
        --sp-text: #f6f7fb;
        --sp-muted: #8e96a8;
        --sp-muted-light: #b7bdc9;
        --sp-primary: #ff2345;
        --sp-primary-light: #ff526d;
        --sp-primary-dark: #d90d31;
        --sp-success: #23d692;
        --sp-warning: #ffbe3d;
        --sp-danger: #ff6078;
        --sp-blue: #6685ff;
        --sp-radius: 22px;
        --sp-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);

        width: 100%;
        color: var(--sp-text);
    }

    .settings-page *,
    .settings-page *::before,
    .settings-page *::after {
        box-sizing: border-box;
    }

    .settings-shell {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .settings-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 21px 22px;
        border: 1px solid var(--sp-border);
        border-radius: 20px;
        background:
            radial-gradient(circle at 100% 0%, rgba(255, 35, 69, 0.12), transparent 32%),
            radial-gradient(circle at 0% 100%, rgba(102, 133, 255, 0.08), transparent 34%),
            rgba(12, 14, 20, 0.9);
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
    }

    .hero-title {
        display: flex;
        align-items: center;
        gap: 15px;
        min-width: 0;
    }

    .hero-icon {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 15px;
        color: #fff;
        background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary-dark));
        box-shadow: 0 13px 28px rgba(255, 35, 69, 0.24);
    }

    .hero-icon svg {
        width: 24px;
        height: 24px;
    }

    .hero-copy h1 {
        margin: 0;
        font-size: 23px;
        line-height: 1.2;
        letter-spacing: -0.03em;
    }

    .hero-copy p {
        margin: 6px 0 0;
        color: var(--sp-muted);
        font-size: 13px;
        line-height: 1.55;
    }

    .hero-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        padding: 9px 12px;
        border: 1px solid rgba(35, 214, 146, 0.18);
        border-radius: 999px;
        color: #bff8df;
        background: rgba(35, 214, 146, 0.08);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .hero-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sp-success);
        box-shadow: 0 0 12px rgba(35, 214, 146, 0.8);
    }

    .settings-layout {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }

    .settings-nav {
        position: sticky;
        top: 18px;
        padding: 14px;
        border: 1px solid var(--sp-border);
        border-radius: 18px;
        background: rgba(14, 17, 24, 0.92);
        box-shadow: var(--sp-shadow);
    }

    .settings-nav-title {
        margin: 2px 4px 12px;
        color: var(--sp-muted);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .settings-nav a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 12px;
        color: var(--sp-muted-light);
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        transition:
            color 0.2s ease,
            background 0.2s ease,
            transform 0.2s ease;
    }

    .settings-nav a:hover,
    .settings-nav a.is-active {
        color: #fff;
        background: rgba(255, 35, 69, 0.09);
        transform: translateX(2px);
    }

    .settings-nav a svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: var(--sp-primary-light);
    }

    .settings-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
        min-width: 0;
    }

    .settings-card {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--sp-border);
        border-radius: var(--sp-radius);
        background:
            linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
            var(--sp-card);
        box-shadow: var(--sp-shadow);
        scroll-margin-top: 18px;
    }

    .settings-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
        pointer-events: none;
    }

    .card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 22px;
        border-bottom: 1px solid rgba(255,255,255,.065);
    }

    .card-heading {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
    }

    .card-heading-icon {
        width: 39px;
        height: 39px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 12px;
        color: var(--sp-primary-light);
        background: rgba(255, 35, 69, 0.09);
        border: 1px solid rgba(255,255,255,.07);
    }

    .card-heading-icon svg {
        width: 19px;
        height: 19px;
    }

    .card-heading h2 {
        margin: 0;
        font-size: 16px;
        line-height: 1.35;
        letter-spacing: -0.015em;
    }

    .card-heading p {
        margin: 4px 0 0;
        color: var(--sp-muted);
        font-size: 12px;
        line-height: 1.5;
    }

    .card-badge {
        flex: 0 0 auto;
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,.075);
        border-radius: 999px;
        color: var(--sp-muted);
        background: rgba(255,255,255,.035);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .card-body {
        padding: 22px;
    }

    .field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px;
    }

    .field-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .field.full {
        grid-column: 1 / -1;
    }

    .field-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #e0e4ec;
        font-size: 12px;
        font-weight: 750;
    }

    .field-meta {
        color: #687080;
        font-size: 10px;
        font-weight: 600;
    }

    .setting-input,
    .setting-textarea,
    .setting-select {
        width: 100%;
        border: 1px solid rgba(255,255,255,.095);
        border-radius: 14px;
        outline: none;
        color: var(--sp-text);
        background: rgba(255,255,255,.045);
        box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
        font-size: 13px;
        transition:
            border-color 0.2s ease,
            background 0.2s ease,
            box-shadow 0.2s ease;
    }

    .setting-input,
    .setting-select {
        height: 50px;
        padding: 0 15px;
    }

    .setting-textarea {
        min-height: 122px;
        padding: 14px 15px;
        line-height: 1.65;
        resize: vertical;
    }

    .setting-textarea.code-field {
        min-height: 180px;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        font-size: 12px;
        tab-size: 4;
    }

    .setting-input::placeholder,
    .setting-textarea::placeholder {
        color: #606879;
    }

    .setting-input:hover,
    .setting-textarea:hover,
    .setting-select:hover {
        border-color: var(--sp-border-hover);
        background: rgba(255,255,255,.06);
    }

    .setting-input:focus,
    .setting-textarea:focus,
    .setting-select:focus {
        border-color: rgba(255,35,69,.72);
        background: rgba(255,255,255,.067);
        box-shadow:
            0 0 0 4px rgba(255,35,69,.09),
            0 10px 28px rgba(0,0,0,.15);
    }

    .input-wrap {
        position: relative;
    }

    .input-wrap .setting-input {
        padding-right: 48px;
    }

    .input-action {
        position: absolute;
        top: 50%;
        right: 10px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 10px;
        color: var(--sp-muted);
        background: transparent;
        cursor: pointer;
        transform: translateY(-50%);
        transition: color .2s ease, background .2s ease;
    }

    .input-action:hover {
        color: #fff;
        background: rgba(255,255,255,.08);
    }

    .input-action svg {
        width: 17px;
        height: 17px;
    }

    .field-help {
        margin: 0;
        color: var(--sp-muted);
        font-size: 10.5px;
        line-height: 1.55;
    }

    .field-error {
        margin: 0;
        color: var(--sp-danger);
        font-size: 11px;
        line-height: 1.45;
    }

    .media-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .media-box {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .media-preview {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 155px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.085);
        border-radius: 16px;
        background:
            linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
            #0a0c11;
    }

    .media-preview img {
        display: block;
        max-width: 80%;
        max-height: 115px;
        object-fit: contain;
    }

    .media-preview.favicon-preview img {
        max-width: 68px;
        max-height: 68px;
    }

    .media-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
        color: var(--sp-muted);
        text-align: center;
    }

    .media-empty svg {
        width: 38px;
        height: 38px;
        color: #555d6c;
    }

    .media-empty strong {
        color: var(--sp-muted-light);
        font-size: 12px;
    }

    .upload-box {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        padding: 13px;
        overflow: hidden;
        border: 1px dashed rgba(255,255,255,.16);
        border-radius: 14px;
        background: rgba(255,255,255,.025);
        cursor: pointer;
        transition: border-color .2s ease, background .2s ease;
    }

    .upload-box:hover {
        border-color: rgba(255,35,69,.48);
        background: rgba(255,35,69,.04);
    }

    .upload-box input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .upload-icon {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 11px;
        color: var(--sp-primary-light);
        background: rgba(255,35,69,.09);
    }

    .upload-icon svg {
        width: 19px;
        height: 19px;
    }

    .upload-copy {
        min-width: 0;
    }

    .upload-copy strong {
        display: block;
        overflow: hidden;
        margin-bottom: 3px;
        color: #dfe3eb;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .upload-copy span {
        display: block;
        color: var(--sp-muted);
        font-size: 10px;
    }

    .advanced-warning {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        margin-bottom: 18px;
        padding: 13px 14px;
        border: 1px solid rgba(255,190,61,.2);
        border-radius: 14px;
        color: #ffe8b8;
        background: rgba(255,190,61,.07);
        font-size: 11px;
        line-height: 1.55;
    }

    .advanced-warning svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        margin-top: 1px;
        color: var(--sp-warning);
    }

    .save-bar {
        position: sticky;
        bottom: 14px;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 16px;
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 17px;
        background: rgba(12,14,20,.92);
        box-shadow:
            0 22px 55px rgba(0,0,0,.43),
            0 1px 0 rgba(255,255,255,.05) inset;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .save-status {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: var(--sp-muted);
        font-size: 11px;
    }

    .save-status-icon {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 10px;
        color: var(--sp-success);
        background: rgba(35,214,146,.08);
    }

    .save-status-icon svg {
        width: 17px;
        height: 17px;
    }

    .save-status strong {
        display: block;
        margin-bottom: 2px;
        color: var(--sp-muted-light);
        font-size: 11px;
    }

    .save-button {
        min-width: 160px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 20px;
        border: 0;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary-dark));
        box-shadow:
            0 14px 30px rgba(255,35,69,.24),
            0 1px 0 rgba(255,255,255,.18) inset;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .save-button:hover {
        transform: translateY(-2px);
        box-shadow:
            0 18px 38px rgba(255,35,69,.33),
            0 1px 0 rgba(255,255,255,.2) inset;
    }

    .save-button:disabled {
        opacity: .72;
        cursor: not-allowed;
        transform: none;
    }

    .save-button svg,
    .save-spinner {
        width: 18px;
        height: 18px;
    }

    .save-spinner {
        display: none;
        border: 2px solid rgba(255,255,255,.35);
        border-top-color: #fff;
        border-radius: 50%;
        animation: settingsSpin .72s linear infinite;
    }

    .save-button.is-loading .save-spinner {
        display: inline-block;
    }

    .save-button.is-loading svg {
        display: none;
    }

    @keyframes settingsSpin {
        to { transform: rotate(360deg); }
    }

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

        .settings-nav {
            position: static;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 10px;
        }

        .settings-nav-title {
            display: none;
        }

        .settings-nav a {
            flex: 0 0 auto;
        }
    }

    @media (max-width: 760px) {
        .settings-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .field-grid,
        .field-grid.three,
        .media-grid {
            grid-template-columns: 1fr;
        }

        .card-header,
        .card-body {
            padding-left: 17px;
            padding-right: 17px;
        }

        .save-bar {
            align-items: stretch;
            flex-direction: column;
            bottom: 8px;
        }

        .save-button {
            width: 100%;
        }
    }

    @media (max-width: 450px) {
        .hero-icon,
        .card-heading-icon {
            display: none;
        }

        .settings-nav a {
            min-height: 40px;
            padding: 0 10px;
        }

        .card-badge,
        .hero-status {
            display: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .settings-page *,
        .settings-page *::before,
        .settings-page *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }
</style>

<div class="settings-page">
    <div class="settings-shell">

        <section class="settings-hero">
            <div class="hero-title">
                <span class="hero-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <circle cx="12" cy="12" r="3"></circle>
                        <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1.1-1.56 1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3a2 2 0 1 1 0-4h.09a1.7 1.7 0 0 0 1.56-1.1 1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1.1 1.56 1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.14.36.36.69.6 1 .3.28.68.42 1.1.4H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51.6Z"></path>
                    </svg>
                </span>

                <div class="hero-copy">
                    <h1>Settings, API &amp; Analytics</h1>
                    <p>Manage site identity, TMDB integration, tracking tools, footer content and advanced custom code.</p>
                </div>
            </div>

            <span class="hero-status">Configuration ready</span>
        </section>

        <div class="settings-layout">

            <nav class="settings-nav" aria-label="Settings sections">
                <div class="settings-nav-title">Navigation</div>

                <a href="#tmdb-settings" class="is-active">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M4 4h16v16H4z"></path>
                        <path d="M8 4v16"></path>
                        <path d="m13 9 4 3-4 3z"></path>
                    </svg>
                    TMDB Connection
                </a>


                <a href="#video-server-settings">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <rect x="3" y="5" width="18" height="14" rx="3"></rect>
                        <path d="m10 9 5 3-5 3z"></path>
                    </svg>
                    Video Servers
                </a>

                <a href="#analytics-settings">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M4 19V9"></path>
                        <path d="M10 19V5"></path>
                        <path d="M16 19v-7"></path>
                        <path d="M22 19H2"></path>
                    </svg>
                    Analytics
                </a>

                <a href="#site-settings">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <circle cx="12" cy="12" r="9"></circle>
                        <path d="M3 12h18"></path>
                        <path d="M12 3a15 15 0 0 1 0 18"></path>
                        <path d="M12 3a15 15 0 0 0 0 18"></path>
                    </svg>
                    Site Settings
                </a>

                <a href="#branding-settings">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <rect x="3" y="4" width="18" height="16" rx="3"></rect>
                        <circle cx="9" cy="10" r="2"></circle>
                        <path d="m21 15-5-5L5 20"></path>
                    </svg>
                    Branding
                </a>

                <a href="#footer-settings">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M4 5h16"></path>
                        <path d="M4 12h16"></path>
                        <path d="M4 19h10"></path>
                    </svg>
                    Footer
                </a>

                <a href="#advanced-settings">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="m8 9-4 3 4 3"></path>
                        <path d="m16 9 4 3-4 3"></path>
                        <path d="m14 5-4 14"></path>
                    </svg>
                    Advanced Code
                </a>
            </nav>

            <form
                id="settingsForm"
                class="settings-form"
                method="POST"
                enctype="multipart/form-data"
                action="{{ route('admin.settings.update') }}"
            >
                @csrf

                <section class="settings-card" id="tmdb-settings">
                    <div class="card-header">
                        <div class="card-heading">
                            <span class="card-heading-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <path d="M4 4h16v16H4z"></path>
                                    <path d="M8 4v16"></path>
                                    <path d="m13 9 4 3-4 3z"></path>
                                </svg>
                            </span>

                            <div>
                                <h2>TMDB Connection</h2>
                                <p>Configure your API key and preferred metadata language.</p>
                            </div>
                        </div>

                        <span class="card-badge">API</span>
                    </div>

                    <div class="card-body">
                        <div class="field-grid">
                            <div class="field">
                                <label class="field-label" for="tmdb_api_key">
                                    <span>TMDB API Key</span>
                                    <span class="field-meta">Private credential</span>
                                </label>

                                <div class="input-wrap">
                                    <input
                                        id="tmdb_api_key"
                                        type="password"
                                        name="tmdb_api_key"
                                        class="setting-input @error('tmdb_api_key') is-invalid @enderror"
                                        value="{{ old('tmdb_api_key', $s['tmdb_api_key'] ?? '') }}"
                                        autocomplete="new-password"
                                        spellcheck="false"
                                    >

                                    <button
                                        type="button"
                                        class="input-action"
                                        data-password-toggle="tmdb_api_key"
                                        aria-label="Show API key"
                                    >
                                        <svg class="eye-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
                                            <circle cx="12" cy="12" r="2.6"></circle>
                                        </svg>

                                        <svg class="eye-closed" style="display:none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <path d="m3 3 18 18"></path>
                                            <path d="M10.6 6.2A10.7 10.7 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-2.1 2.8"></path>
                                            <path d="M6.2 6.2C3.8 7.8 2.5 12 2.5 12s3.5 6 9.5 6a9 9 0 0 0 3.1-.5"></path>
                                        </svg>
                                    </button>
                                </div>

                                @error('tmdb_api_key')
                                    <p class="field-error">{{ $message }}</p>
                                @enderror

                                <p class="field-help">Used only by the server to import TMDB movie and TV-show data.</p>
                            </div>

                            <div class="field">
                                <label class="field-label" for="tmdb_language">
                                    <span>TMDB Data Language</span>
                                    <span class="field-meta">Example: en-US</span>
                                </label>

                                <input
                                    id="tmdb_language"
                                    name="tmdb_language"
                                    class="setting-input @error('tmdb_language') is-invalid @enderror"
                                    value="{{ old('tmdb_language', $s['tmdb_language'] ?? 'en-US') }}"
                                    placeholder="en-US"
                                >

                                @error('tmdb_language')
                                    <p class="field-error">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </section>


                <section class="settings-card" id="video-server-settings">
                    <div class="card-header">
                        <div class="card-heading">
                            <span class="card-heading-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <rect x="3" y="5" width="18" height="14" rx="3"></rect>
                                    <path d="m10 9 5 3-5 3z"></path>
                                </svg>
                            </span>
                            <div>
                                <h2>Video Servers</h2>
                                <p>Configure authorized or self-hosted embed templates. Change the domain here once and every imported title will use the new endpoint.</p>
                            </div>
                        </div>
                        <span class="card-badge">Player</span>
                    </div>

                    <div class="card-body">
                        <p class="field-help" style="margin-top:0">Movie placeholders: <code>{tmdb_id}</code>, <code>{imdb_id}</code>. TV placeholders: <code>{tmdb_id}</code>, <code>{imdb_id}</code>, <code>{season}</code>, <code>{episode}</code>.</p>
                        @foreach ([
                            'primary' => 'Primary Server',
                            'alternative' => 'Alternative Server',
                            'free' => 'Free Server',
                        ] as $providerKey => $providerLabel)
                            <div class="field-grid" style="margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)">
                                <div class="field full">
                                    <label class="field-label" for="embed_{{ $providerKey }}_name">{{ $providerLabel }} Name</label>
                                    <input id="embed_{{ $providerKey }}_name" name="embed_{{ $providerKey }}_name" class="setting-input" value="{{ old('embed_'.$providerKey.'_name', $s['embed_'.$providerKey.'_name'] ?? $providerLabel) }}">
                                </div>
                                <div class="field">
                                    <label class="field-label" for="embed_{{ $providerKey }}_movie_template">Movie Embed Template</label>
                                    <input id="embed_{{ $providerKey }}_movie_template" name="embed_{{ $providerKey }}_movie_template" class="setting-input" value="{{ old('embed_'.$providerKey.'_movie_template', $s['embed_'.$providerKey.'_movie_template'] ?? '') }}" placeholder="https://licensed-player.example/embed/movie/{tmdb_id}">
                                </div>
                                <div class="field">
                                    <label class="field-label" for="embed_{{ $providerKey }}_tv_template">TV Episode Embed Template</label>
                                    <input id="embed_{{ $providerKey }}_tv_template" name="embed_{{ $providerKey }}_tv_template" class="setting-input" value="{{ old('embed_'.$providerKey.'_tv_template', $s['embed_'.$providerKey.'_tv_template'] ?? '') }}" placeholder="https://licensed-player.example/embed/tv/{tmdb_id}/{season}/{episode}">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>

                <section class="settings-card" id="analytics-settings">
                    <div class="card-header">
                        <div class="card-heading">
                            <span class="card-heading-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <path d="M4 19V9"></path>
                                    <path d="M10 19V5"></path>
                                    <path d="M16 19v-7"></path>
                                    <path d="M22 19H2"></path>
                                </svg>
                            </span>

                            <div>
                                <h2>Analytics &amp; Webmaster</h2>
                                <p>Connect analytics, search verification and visitor-behavior tools.</p>
                            </div>
                        </div>

                        <span class="card-badge">Tracking</span>
                    </div>

                    <div class="card-body">
                        <div class="field-grid three">
                            <div class="field">
                                <label class="field-label" for="google_analytics_id">Google Analytics ID</label>
                                <input
                                    id="google_analytics_id"
                                    name="google_analytics_id"
                                    class="setting-input"
                                    value="{{ old('google_analytics_id', $s['google_analytics_id'] ?? '') }}"
                                    placeholder="G-XXXXXXXXXX"
                                >
                            </div>

                            <div class="field">
                                <label class="field-label" for="google_search_console_verification">Search Console Verification</label>
                                <input
                                    id="google_search_console_verification"
                                    name="google_search_console_verification"
                                    class="setting-input"
                                    value="{{ old('google_search_console_verification', $s['google_search_console_verification'] ?? '') }}"
                                    placeholder="Meta verification content only"
                                >
                            </div>

                            <div class="field">
                                <label class="field-label" for="microsoft_clarity_id">Microsoft Clarity ID</label>
                                <input
                                    id="microsoft_clarity_id"
                                    name="microsoft_clarity_id"
                                    class="setting-input"
                                    value="{{ old('microsoft_clarity_id', $s['microsoft_clarity_id'] ?? '') }}"
                                    placeholder="abc123xyz"
                                >
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-card" id="site-settings">
                    <div class="card-header">
                        <div class="card-heading">
                            <span class="card-heading-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <circle cx="12" cy="12" r="9"></circle>
                                    <path d="M3 12h18"></path>
                                    <path d="M12 3a15 15 0 0 1 0 18"></path>
                                    <path d="M12 3a15 15 0 0 0 0 18"></path>
                                </svg>
                            </span>

                            <div>
                                <h2>Site Settings</h2>
                                <p>Configure site identity and search-friendly content.</p>
                            </div>
                        </div>

                        <span class="card-badge">General</span>
                    </div>

                    <div class="card-body">
                        <div class="field-grid">
                            <div class="field full">
                                <label class="field-label" for="site_title">
                                    <span>Site Title</span>
                                    <span class="field-meta" id="siteTitleCounter"></span>
                                </label>

                                <input
                                    id="site_title"
                                    name="site_title"
                                    class="setting-input"
                                    maxlength="255"
                                    value="{{ old('site_title', $s['site_title'] ?? '') }}"
                                    placeholder="MovieDocks"
                                >
                            </div>

                            <div class="field full">
                                <label class="field-label" for="site_description">
                                    <span>Description</span>
                                    <span class="field-meta" id="siteDescriptionCounter"></span>
                                </label>

                                <textarea
                                    id="site_description"
                                    name="site_description"
                                    class="setting-textarea"
                                    maxlength="500"
                                    placeholder="Write a concise site description..."
                                >{{ old('site_description', $s['site_description'] ?? '') }}</textarea>
                            </div>

                            <div class="field full">
                                <label class="field-label" for="site_keywords">
                                    <span>Keywords</span>
                                    <span class="field-meta" id="siteKeywordsCounter"></span>
                                </label>

                                <textarea
                                    id="site_keywords"
                                    name="site_keywords"
                                    class="setting-textarea"
                                    maxlength="1000"
                                    placeholder="movies, tv shows, cinema"
                                >{{ old('site_keywords', $s['site_keywords'] ?? '') }}</textarea>

                                <p class="field-help">Separate keywords using commas.</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-card" id="branding-settings">
                    <div class="card-header">
                        <div class="card-heading">
                            <span class="card-heading-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <rect x="3" y="4" width="18" height="16" rx="3"></rect>
                                    <circle cx="9" cy="10" r="2"></circle>
                                    <path d="m21 15-5-5L5 20"></path>
                                </svg>
                            </span>

                            <div>
                                <h2>Logo &amp; Favicon</h2>
                                <p>Preview current Bunny Storage branding and upload replacements.</p>
                            </div>
                        </div>

                        <span class="card-badge">Bunny Storage</span>
                    </div>

                    <div class="card-body">
                        <div class="media-grid">
                            <div class="media-box">
                                <label class="field-label">Site Logo</label>

                                <div class="media-preview" id="logoPreviewBox">
                                    @if($logoUrl)
                                        <img id="logoPreview" src="{{ $logoUrl }}" alt="Current site logo">
                                    @else
                                        <div class="media-empty" id="logoEmpty">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
                                                <rect x="3" y="4" width="18" height="16" rx="3"></rect>
                                                <circle cx="9" cy="10" r="2"></circle>
                                                <path d="m21 15-5-5L5 20"></path>
                                            </svg>
                                            <strong>No logo uploaded</strong>
                                        </div>

                                        <img id="logoPreview" src="" alt="Logo preview" style="display:none">
                                    @endif
                                </div>

                                <label class="upload-box">
                                    <input id="logoInput" type="file" name="logo" accept="image/*">

                                    <span class="upload-icon">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <path d="M12 16V4"></path>
                                            <path d="m7 9 5-5 5 5"></path>
                                            <path d="M5 20h14"></path>
                                        </svg>
                                    </span>

                                    <span class="upload-copy">
                                        <strong id="logoFileName">Choose new logo</strong>
                                        <span>PNG, JPG, WebP, SVG or AVIF</span>
                                    </span>
                                </label>
                            </div>

                            <div class="media-box">
                                <label class="field-label">Favicon</label>

                                <div class="media-preview favicon-preview" id="faviconPreviewBox">
                                    @if($faviconUrl)
                                        <img id="faviconPreview" src="{{ $faviconUrl }}" alt="Current favicon">
                                    @else
                                        <div class="media-empty" id="faviconEmpty">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
                                                <rect x="5" y="5" width="14" height="14" rx="3"></rect>
                                                <path d="M9 9h6v6H9z"></path>
                                            </svg>
                                            <strong>No favicon uploaded</strong>
                                        </div>

                                        <img id="faviconPreview" src="" alt="Favicon preview" style="display:none">
                                    @endif
                                </div>

                                <label class="upload-box">
                                    <input id="faviconInput" type="file" name="favicon" accept="image/*">

                                    <span class="upload-icon">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <path d="M12 16V4"></path>
                                            <path d="m7 9 5-5 5 5"></path>
                                            <path d="M5 20h14"></path>
                                        </svg>
                                    </span>

                                    <span class="upload-copy">
                                        <strong id="faviconFileName">Choose new favicon</strong>
                                        <span>Recommended: 512 × 512 px</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-card" id="footer-settings">
                    <div class="card-header">
                        <div class="card-heading">
                            <span class="card-heading-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <path d="M4 5h16"></path>
                                    <path d="M4 12h16"></path>
                                    <path d="M4 19h10"></path>
                                </svg>
                            </span>

                            <div>
                                <h2>Footer Settings</h2>
                                <p>Manage footer text, contact details, column titles and designer credit.</p>
                            </div>
                        </div>

                        <span class="card-badge">Footer</span>
                    </div>

                    <div class="card-body">
                        <div class="field-grid">
                            <div class="field full">
                                <label class="field-label" for="footer_content">Footer About Text</label>
                                <textarea
                                    id="footer_content"
                                    name="footer_content"
                                    class="setting-textarea"
                                    placeholder="Write a short footer description..."
                                >{{ old('footer_content', $s['footer_content'] ?? '') }}</textarea>
                            </div>

                            <div class="field">
                                <label class="field-label" for="footer_phone">Footer Phone</label>
                                <input
                                    id="footer_phone"
                                    name="footer_phone"
                                    class="setting-input"
                                    value="{{ old('footer_phone', $s['footer_phone'] ?? '') }}"
                                    placeholder="+8801XXXXXXXXX"
                                >
                            </div>

                            <div class="field">
                                <label class="field-label" for="footer_useful_title">First Link Column Title</label>
                                <input
                                    id="footer_useful_title"
                                    name="footer_useful_title"
                                    class="setting-input"
                                    value="{{ old('footer_useful_title', $s['footer_useful_title'] ?? 'Useful Link') }}"
                                >
                            </div>

                            <div class="field">
                                <label class="field-label" for="footer_links_title">Second Link Column Title</label>
                                <input
                                    id="footer_links_title"
                                    name="footer_links_title"
                                    class="setting-input"
                                    value="{{ old('footer_links_title', $s['footer_links_title'] ?? 'Link') }}"
                                >
                            </div>

                            <div class="field">
                                <label class="field-label" for="footer_designer_name">Designer Name</label>
                                <input
                                    id="footer_designer_name"
                                    name="footer_designer_name"
                                    class="setting-input"
                                    value="{{ old('footer_designer_name', $s['footer_designer_name'] ?? '') }}"
                                    placeholder="Your company"
                                >
                            </div>

                            <div class="field full">
                                <label class="field-label" for="footer_designer_url">Designer Website URL</label>
                                <input
                                    id="footer_designer_url"
                                    type="url"
                                    name="footer_designer_url"
                                    class="setting-input"
                                    value="{{ old('footer_designer_url', $s['footer_designer_url'] ?? '') }}"
                                    placeholder="https://example.com"
                                >
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-card" id="advanced-settings">
                    <div class="card-header">
                        <div class="card-heading">
                            <span class="card-heading-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                    <path d="m8 9-4 3 4 3"></path>
                                    <path d="m16 9 4 3-4 3"></path>
                                    <path d="m14 5-4 14"></path>
                                </svg>
                            </span>

                            <div>
                                <h2>Advanced Code</h2>
                                <p>Inject trusted header, footer, CSS and JavaScript snippets.</p>
                            </div>
                        </div>

                        <span class="card-badge">Trusted admin only</span>
                    </div>

                    <div class="card-body">
                        <div class="advanced-warning">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                <path d="M12 3 2.5 20h19z"></path>
                                <path d="M12 9v4"></path>
                                <path d="M12 17h.01"></path>
                            </svg>

                            <span>
                                Incorrect HTML, CSS or JavaScript can break the public website.
                                Add code only from sources you trust.
                            </span>
                        </div>

                        <div class="field-grid">
                            <div class="field">
                                <label class="field-label" for="header_code">Header Code</label>
                                <textarea
                                    id="header_code"
                                    name="header_code"
                                    class="setting-textarea code-field"
                                    spellcheck="false"
                                    placeholder="<!-- Header scripts or meta tags -->"
                                >{{ old('header_code', $s['header_code'] ?? '') }}</textarea>
                            </div>

                            <div class="field">
                                <label class="field-label" for="footer_code">Footer Code</label>
                                <textarea
                                    id="footer_code"
                                    name="footer_code"
                                    class="setting-textarea code-field"
                                    spellcheck="false"
                                    placeholder="<!-- Footer scripts -->"
                                >{{ old('footer_code', $s['footer_code'] ?? '') }}</textarea>
                            </div>

                            <div class="field">
                                <label class="field-label" for="custom_css">Custom CSS</label>
                                <textarea
                                    id="custom_css"
                                    name="custom_css"
                                    class="setting-textarea code-field"
                                    spellcheck="false"
                                    placeholder="body { ... }"
                                >{{ old('custom_css', $s['custom_css'] ?? '') }}</textarea>
                            </div>

                            <div class="field">
                                <label class="field-label" for="custom_js">Custom JavaScript</label>
                                <textarea
                                    id="custom_js"
                                    name="custom_js"
                                    class="setting-textarea code-field"
                                    spellcheck="false"
                                    placeholder="document.addEventListener('DOMContentLoaded', () => { ... });"
                                >{{ old('custom_js', $s['custom_js'] ?? '') }}</textarea>
                            </div>
                        </div>
                    </div>
                </section>

                <div class="save-bar">
                    <div class="save-status">
                        <span class="save-status-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                <path d="M12 3 4.5 6v5.5c0 4.8 3.1 8.2 7.5 9.5 4.4-1.3 7.5-4.7 7.5-9.5V6z"></path>
                                <path d="m9 12 2 2 4-4"></path>
                            </svg>
                        </span>

                        <span>
                            <strong>Ready to save configuration</strong>
                            Settings and uploaded branding will be updated securely.
                        </span>
                    </div>

                    <button id="saveSettingsButton" type="submit" class="save-button">
                        <span class="save-spinner" aria-hidden="true"></span>

                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                            <path d="M5 4h12l2 2v14H5z"></path>
                            <path d="M8 4v6h8V4"></path>
                            <path d="M8 20v-6h8v6"></path>
                        </svg>

                        <span class="save-button-label">Save Settings</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const settingsForm = document.getElementById('settingsForm');
        const saveButton = document.getElementById('saveSettingsButton');

        if (settingsForm && saveButton) {
            settingsForm.addEventListener('submit', event => {
                if (!settingsForm.checkValidity()) {
                    event.preventDefault();
                    settingsForm.reportValidity();
                    return;
                }

                saveButton.disabled = true;
                saveButton.classList.add('is-loading');

                const label = saveButton.querySelector('.save-button-label');

                if (label) {
                    label.textContent = 'Saving...';
                }
            });
        }

        document.querySelectorAll('[data-password-toggle]').forEach(button => {
            button.addEventListener('click', () => {
                const input = document.getElementById(button.dataset.passwordToggle);

                if (!input) {
                    return;
                }

                const hidden = input.type === 'password';
                input.type = hidden ? 'text' : 'password';

                button.querySelector('.eye-open').style.display =
                    hidden ? 'none' : 'block';

                button.querySelector('.eye-closed').style.display =
                    hidden ? 'block' : 'none';

                button.setAttribute(
                    'aria-label',
                    hidden ? 'Hide API key' : 'Show API key'
                );

                input.focus();
            });
        });

        const setupCounter = (inputId, counterId, maximum = null) => {
            const input = document.getElementById(inputId);
            const counter = document.getElementById(counterId);

            if (!input || !counter) {
                return;
            }

            const update = () => {
                counter.textContent = maximum
                    ? `${input.value.length}/${maximum}`
                    : `${input.value.length} characters`;
            };

            input.addEventListener('input', update);
            update();
        };

        setupCounter('site_title', 'siteTitleCounter', 255);
        setupCounter('site_description', 'siteDescriptionCounter', 500);
        setupCounter('site_keywords', 'siteKeywordsCounter', 1000);

        const setupPreview = ({
            inputId,
            previewId,
            emptyId,
            fileNameId
        }) => {
            const input = document.getElementById(inputId);
            const preview = document.getElementById(previewId);
            const empty = document.getElementById(emptyId);
            const fileName = document.getElementById(fileNameId);

            if (!input || !preview) {
                return;
            }

            input.addEventListener('change', () => {
                const file = input.files?.[0];

                if (!file) {
                    return;
                }

                if (!file.type.startsWith('image/')) {
                    input.value = '';
                    window.alert('Please select a valid image file.');
                    return;
                }

                const objectUrl = URL.createObjectURL(file);

                preview.src = objectUrl;
                preview.style.display = 'block';

                if (empty) {
                    empty.style.display = 'none';
                }

                if (fileName) {
                    fileName.textContent = file.name;
                }

                preview.onload = () => {
                    URL.revokeObjectURL(objectUrl);
                };
            });
        };

        setupPreview({
            inputId: 'logoInput',
            previewId: 'logoPreview',
            emptyId: 'logoEmpty',
            fileNameId: 'logoFileName'
        });

        setupPreview({
            inputId: 'faviconInput',
            previewId: 'faviconPreview',
            emptyId: 'faviconEmpty',
            fileNameId: 'faviconFileName'
        });

        const navLinks = Array.from(
            document.querySelectorAll('.settings-nav a[href^="#"]')
        );

        const sections = navLinks
            .map(link => document.querySelector(link.getAttribute('href')))
            .filter(Boolean);

        const activateNav = () => {
            let activeSection = sections[0];

            sections.forEach(section => {
                if (section.getBoundingClientRect().top <= 120) {
                    activeSection = section;
                }
            });

            navLinks.forEach(link => {
                link.classList.toggle(
                    'is-active',
                    link.getAttribute('href') === `#${activeSection.id}`
                );
            });
        };

        window.addEventListener('scroll', activateNav, { passive: true });
        activateNav();

        navLinks.forEach(link => {
            link.addEventListener('click', event => {
                const target = document.querySelector(link.getAttribute('href'));

                if (!target) {
                    return;
                }

                event.preventDefault();

                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            });
        });
    });
</script>
@endsection
