@extends('admin.layouts.app')

@section('title', 'Homepage Settings')
@section('page_title', 'Homepage CMS')

@section('content')
    <div class="page-heading">
        <div>
            <h1>Homepage Settings</h1>
            <p>Manage welcome, video and homepage section visibility.</p>
        </div>
    </div>

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

        <div class="homepage-grid">
            <div class="homepage-main">
                <div class="panel section-panel">
                    <div class="panel-header">
                        <div>
                            <h2 class="panel-title">Welcome Section</h2>
                            <p class="panel-subtitle">
                                Main introduction displayed below the hero slider.
                            </p>
                        </div>

                        <label class="toggle">
                            <input type="hidden" name="show_welcome_section" value="0">

                            <input
                                type="checkbox"
                                name="show_welcome_section"
                                value="1"
                                @checked(old(
                                    'show_welcome_section',
                                    $homepage->show_welcome_section
                                ))
                            >

                            <span>Show section</span>
                        </label>
                    </div>

                    <div class="panel-body">
                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label" for="welcome_small_title">
                                    Small Title
                                </label>

                                <input
                                    class="form-control"
                                    id="welcome_small_title"
                                    type="text"
                                    name="welcome_small_title"
                                    value="{{ old(
                                        'welcome_small_title',
                                        $homepage->welcome_small_title
                                    ) }}"
                                >
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="welcome_title">
                                    Main Title
                                </label>

                                <input
                                    class="form-control"
                                    id="welcome_title"
                                    type="text"
                                    name="welcome_title"
                                    value="{{ old(
                                        'welcome_title',
                                        $homepage->welcome_title
                                    ) }}"
                                >
                            </div>

                            <div class="form-group full">
                                <label class="form-label" for="welcome_description">
                                    Description
                                </label>

                                <textarea
                                    class="form-control textarea"
                                    id="welcome_description"
                                    name="welcome_description"
                                    rows="6"
                                >{{ old(
                                    'welcome_description',
                                    $homepage->welcome_description
                                ) }}</textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="welcome_button_text">
                                    Button Text
                                </label>

                                <input
                                    class="form-control"
                                    id="welcome_button_text"
                                    type="text"
                                    name="welcome_button_text"
                                    value="{{ old(
                                        'welcome_button_text',
                                        $homepage->welcome_button_text
                                    ) }}"
                                >
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="welcome_button_url">
                                    Button URL
                                </label>

                                <input
                                    class="form-control"
                                    id="welcome_button_url"
                                    type="text"
                                    name="welcome_button_url"
                                    value="{{ old(
                                        'welcome_button_url',
                                        $homepage->welcome_button_url
                                    ) }}"
                                    placeholder="/about-us"
                                >
                            </div>

                            <div class="form-group full">
                                <label class="form-label" for="welcome_image">
                                    Welcome Image
                                </label>

                                @if ($homepage->welcome_image)
                                    <div class="image-preview">
                                        <img
                                            src="{{ asset(
                                                'storage/'.$homepage->welcome_image
                                            ) }}"
                                            alt="Welcome section"
                                        >
                                    </div>
                                @endif

                                <input
                                    class="form-control"
                                    id="welcome_image"
                                    type="file"
                                    name="welcome_image"
                                    accept=".jpg,.jpeg,.png,.webp"
                                >

                                <div class="form-help">
                                    Recommended landscape image. Maximum 4 MB.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel section-panel">
                    <div class="panel-header">
                        <div>
                            <h2 class="panel-title">Video Section</h2>
                            <p class="panel-subtitle">
                                Promotional video and thumbnail displayed on homepage.
                            </p>
                        </div>

                        <label class="toggle">
                            <input type="hidden" name="show_video_section" value="0">

                            <input
                                type="checkbox"
                                name="show_video_section"
                                value="1"
                                @checked(old(
                                    'show_video_section',
                                    $homepage->show_video_section
                                ))
                            >

                            <span>Show section</span>
                        </label>
                    </div>

                    <div class="panel-body">
                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label" for="video_small_title">
                                    Small Title
                                </label>

                                <input
                                    class="form-control"
                                    id="video_small_title"
                                    type="text"
                                    name="video_small_title"
                                    value="{{ old(
                                        'video_small_title',
                                        $homepage->video_small_title
                                    ) }}"
                                >
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="video_title">
                                    Main Title
                                </label>

                                <input
                                    class="form-control"
                                    id="video_title"
                                    type="text"
                                    name="video_title"
                                    value="{{ old(
                                        'video_title',
                                        $homepage->video_title
                                    ) }}"
                                >
                            </div>

                            <div class="form-group full">
                                <label class="form-label" for="video_description">
                                    Description
                                </label>

                                <textarea
                                    class="form-control textarea"
                                    id="video_description"
                                    name="video_description"
                                    rows="4"
                                >{{ old(
                                    'video_description',
                                    $homepage->video_description
                                ) }}</textarea>
                            </div>

                            <div class="form-group full">
                                <label class="form-label" for="video_url">
                                    YouTube or Video URL
                                </label>

                                <input
                                    class="form-control"
                                    id="video_url"
                                    type="url"
                                    name="video_url"
                                    value="{{ old(
                                        'video_url',
                                        $homepage->video_url
                                    ) }}"
                                    placeholder="https://www.youtube.com/watch?v=..."
                                >
                            </div>

                            <div class="form-group full">
                                <label class="form-label" for="video_thumbnail">
                                    Video Thumbnail
                                </label>

                                @if ($homepage->video_thumbnail)
                                    <div class="image-preview">
                                        <img
                                            src="{{ asset(
                                                'storage/'.$homepage->video_thumbnail
                                            ) }}"
                                            alt="Video thumbnail"
                                        >
                                    </div>
                                @endif

                                <input
                                    class="form-control"
                                    id="video_thumbnail"
                                    type="file"
                                    name="video_thumbnail"
                                    accept=".jpg,.jpeg,.png,.webp"
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <aside>
                <div class="panel visibility-panel">
                    <div class="panel-header">
                        <h2 class="panel-title">Section Visibility</h2>
                    </div>

                    <div class="panel-body">
                        @php
                            $visibilityFields = [
                                'show_rooms_section' => [
                                    'Rooms & Suites',
                                    $homepage->show_rooms_section
                                ],
                                'show_offers_section' => [
                                    'Special Offers',
                                    $homepage->show_offers_section
                                ],
                                'show_facilities_section' => [
                                    'Facilities',
                                    $homepage->show_facilities_section
                                ],
                                'show_client_logos' => [
                                    'Client Logos',
                                    $homepage->show_client_logos
                                ],
                            ];
                        @endphp

                        @foreach ($visibilityFields as $field => [$label, $value])
                            <label class="visibility-option">
                                <input type="hidden" name="{{ $field }}" value="0">

                                <input
                                    type="checkbox"
                                    name="{{ $field }}"
                                    value="1"
                                    @checked(old($field, $value))
                                >

                                <span>{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="sticky-save">
                    <button class="btn btn-primary save-button" type="submit">
                        Save Homepage Settings
                    </button>
                </div>
            </aside>
        </div>
    </form>
@endsection

@push('styles')
    <style>
        .homepage-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 300px;
            gap: 22px;
            align-items: start;
        }

        .homepage-main {
            display: grid;
            gap: 22px;
        }

        .section-panel {
            overflow: hidden;
        }

        .panel-subtitle {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 12px;
        }

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

        .image-preview {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 210px;
            margin-bottom: 12px;
            overflow: hidden;
            border: 1px dashed var(--border);
            border-radius: 9px;
            background: #f7f9fa;
        }

        .image-preview img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #536873;
            font-size: 12px;
            font-weight: 700;
        }

        .toggle input,
        .visibility-option input {
            width: 17px;
            height: 17px;
            accent-color: var(--navy);
        }

        .visibility-panel {
            overflow: hidden;
        }

        .visibility-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 13px 0;
            border-bottom: 1px solid #edf0f2;
            color: #425563;
            font-size: 13px;
            font-weight: 700;
        }

        .visibility-option:last-child {
            border-bottom: 0;
        }

        .sticky-save {
            position: sticky;
            top: 20px;
            margin-top: 18px;
        }

        .save-button {
            width: 100%;
        }

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

            .sticky-save {
                position: static;
            }
        }
    </style>
@endpush