@extends('admin.layouts.app')

@section('title', 'Resort Settings')
@section('page_title', 'Global Settings')

@section('content')
    <div class="page-heading">
        <div>
            <h1>Resort Settings</h1>

            <p>
                Manage resort identity, contact information, social links,
                booking preferences and SEO settings.
            </p>
        </div>
    </div>

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

        <div class="settings-layout">
            <aside class="settings-nav">
                <button class="settings-tab active" type="button" data-tab="identity">
                    Identity
                </button>

                <button class="settings-tab" type="button" data-tab="contact">
                    Contact Details
                </button>

                <button class="settings-tab" type="button" data-tab="location">
                    Location
                </button>

                <button class="settings-tab" type="button" data-tab="social">
                    Social Media
                </button>

                <button class="settings-tab" type="button" data-tab="booking">
                    Booking
                </button>

                <button class="settings-tab" type="button" data-tab="seo">
                    SEO
                </button>
            </aside>

            <div class="settings-content">
                <section class="settings-section active" id="tab-identity">
                    <div class="section-heading">
                        <h2>Resort Identity</h2>
                        <p>Primary brand name, tagline, logo and browser icon.</p>
                    </div>

                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label" for="resort_name">
                                Resort Name <span class="required">*</span>
                            </label>

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

                        <div class="form-group">
                            <label class="form-label" for="tagline">Tagline</label>

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

                        <div class="form-group">
                            <label class="form-label" for="logo">Resort Logo</label>

                            @if ($setting->logo)
                                <div class="current-image logo-preview">
                                    <img
                                        src="{{ asset('storage/'.$setting->logo) }}"
                                        alt="{{ $setting->resort_name }}"
                                    >
                                </div>
                            @endif

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

                            <div class="form-help">
                                JPG, PNG or WebP. Maximum size 2 MB.
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="favicon">Favicon</label>

                            @if ($setting->favicon)
                                <div class="current-image favicon-preview">
                                    <img
                                        src="{{ asset('storage/'.$setting->favicon) }}"
                                        alt="Favicon"
                                    >
                                </div>
                            @endif

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

                            <div class="form-help">
                                Recommended square image, preferably 64×64 pixels.
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="tab-contact">
                    <div class="section-heading">
                        <h2>Contact Details</h2>
                        <p>Official communication information displayed on the website.</p>
                    </div>

                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label" for="email">Email Address</label>

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

                        <div class="form-group">
                            <label class="form-label" for="primary_phone">
                                Primary Phone
                            </label>

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

                        <div class="form-group">
                            <label class="form-label" for="secondary_phone">
                                Secondary Phone
                            </label>

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

                        <div class="form-group">
                            <label class="form-label" for="whatsapp_number">
                                WhatsApp Number
                            </label>

                            <input
                                class="form-control"
                                id="whatsapp_number"
                                type="text"
                                name="whatsapp_number"
                                value="{{ old('whatsapp_number', $setting->whatsapp_number) }}"
                                placeholder="8801XXXXXXXXX"
                            >

                            <div class="form-help">
                                Use country code without spaces or plus sign.
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="tab-location">
                    <div class="section-heading">
                        <h2>Location Information</h2>
                        <p>Resort address, corporate office and Google Map.</p>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="resort_address">
                            Resort Address
                        </label>

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

                    <div class="form-group">
                        <label class="form-label" for="corporate_office_address">
                            Corporate Office Address
                        </label>

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

                    <div class="form-group">
                        <label class="form-label" for="google_map_embed">
                            Google Map Embed Code
                        </label>

                        <textarea
                            class="form-control code-textarea"
                            id="google_map_embed"
                            name="google_map_embed"
                            rows="7"
                            placeholder='<iframe src="https://www.google.com/maps/embed?..."></iframe>'
                        >{{ old('google_map_embed', $setting->google_map_embed) }}</textarea>

                        <div class="form-help">
                            Paste the complete Google Maps iframe embed code.
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="tab-social">
                    <div class="section-heading">
                        <h2>Social Media</h2>
                        <p>Add the complete URL of each official social profile.</p>
                    </div>

                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label" for="facebook_url">Facebook URL</label>

                            <input
                                class="form-control"
                                id="facebook_url"
                                type="url"
                                name="facebook_url"
                                value="{{ old('facebook_url', $setting->facebook_url) }}"
                            >
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="instagram_url">Instagram URL</label>

                            <input
                                class="form-control"
                                id="instagram_url"
                                type="url"
                                name="instagram_url"
                                value="{{ old('instagram_url', $setting->instagram_url) }}"
                            >
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="youtube_url">YouTube URL</label>

                            <input
                                class="form-control"
                                id="youtube_url"
                                type="url"
                                name="youtube_url"
                                value="{{ old('youtube_url', $setting->youtube_url) }}"
                            >
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="linkedin_url">LinkedIn URL</label>

                            <input
                                class="form-control"
                                id="linkedin_url"
                                type="url"
                                name="linkedin_url"
                                value="{{ old('linkedin_url', $setting->linkedin_url) }}"
                            >
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="tab-booking">
                    <div class="section-heading">
                        <h2>Booking Preferences</h2>
                        <p>Configure core reservation system preferences.</p>
                    </div>

                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label" for="currency">
                                Currency <span class="required">*</span>
                            </label>

                            <select class="form-control" id="currency" name="currency" required>
                                <option value="BDT" @selected(old('currency', $setting->currency) === 'BDT')>
                                    BDT — Bangladeshi Taka
                                </option>

                                <option value="USD" @selected(old('currency', $setting->currency) === 'USD')>
                                    USD — US Dollar
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="timezone">
                                Timezone <span class="required">*</span>
                            </label>

                            <select class="form-control" id="timezone" name="timezone" required>
                                <option
                                    value="Asia/Dhaka"
                                    @selected(old('timezone', $setting->timezone) === 'Asia/Dhaka')
                                >
                                    Asia/Dhaka
                                </option>
                            </select>
                        </div>

                        <div class="form-group full">
                            <label class="form-check">
                                <input type="hidden" name="booking_enabled" value="0">

                                <input
                                    type="checkbox"
                                    name="booking_enabled"
                                    value="1"
                                    @checked((bool) old('booking_enabled', $setting->booking_enabled))
                                >

                                <span>
                                    <strong>Enable Online Booking</strong><br>

                                    <small class="form-help">
                                        Guests can submit booking requests through the website.
                                    </small>
                                </span>
                            </label>
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="tab-seo">
                    <div class="section-heading">
                        <h2>Search Engine Optimization</h2>
                        <p>Default title and description for search engines.</p>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="seo_title">Default SEO Title</label>

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

                    <div class="form-group">
                        <label class="form-label" for="seo_description">
                            Default SEO Description
                        </label>

                        <textarea
                            class="form-control textarea"
                            id="seo_description"
                            name="seo_description"
                            rows="5"
                            maxlength="1000"
                        >{{ old('seo_description', $setting->seo_description) }}</textarea>
                    </div>
                </section>

                <div class="settings-footer">
                    <button class="btn btn-primary" type="submit">
                        Save All Settings
                    </button>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <style>
        .required {
            color: #c53030;
        }

        .settings-layout {
            display: grid;
            grid-template-columns: 230px minmax(0, 1fr);
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 13px;
            background: #fff;
            box-shadow: 0 7px 25px rgba(22, 42, 55, .04);
        }

        .settings-nav {
            padding: 18px;
            background: #f8fafb;
            border-right: 1px solid var(--border);
        }

        .settings-tab {
            width: 100%;
            padding: 13px 14px;
            border: 0;
            border-radius: 8px;
            cursor: pointer;
            background: transparent;
            color: #60727d;
            font-size: 13px;
            font-weight: 700;
            text-align: left;
        }

        .settings-tab:hover,
        .settings-tab.active {
            background: var(--navy);
            color: #fff;
        }

        .settings-content {
            min-width: 0;
        }

        .settings-section {
            display: none;
            padding: 30px;
        }

        .settings-section.active {
            display: block;
        }

        .section-heading {
            margin-bottom: 28px;
            padding-bottom: 18px;
            border-bottom: 1px solid var(--border);
        }

        .section-heading h2 {
            margin: 0 0 7px;
            font-family: Georgia, serif;
            font-size: 24px;
            font-weight: 500;
        }

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

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

        .code-textarea {
            min-height: 160px;
            resize: vertical;
            font-family: Consolas, monospace;
            font-size: 12px;
        }

        .file-input {
            padding: 9px;
        }

        .current-image {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
            overflow: hidden;
            border: 1px dashed #d6dee2;
            border-radius: 8px;
            background: #f8fafb;
        }

        .current-image img {
            max-width: 90%;
            max-height: 80px;
            object-fit: contain;
        }

        .favicon-preview {
            width: 100px;
        }

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

        .settings-footer {
            display: flex;
            justify-content: flex-end;
            padding: 20px 30px;
            border-top: 1px solid var(--border);
            background: #fafbfb;
        }

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

            .settings-nav {
                display: flex;
                gap: 5px;
                overflow-x: auto;
                border-right: 0;
                border-bottom: 1px solid var(--border);
            }

            .settings-tab {
                width: auto;
                white-space: nowrap;
            }

            .settings-section {
                padding: 22px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.querySelectorAll('.settings-tab').forEach(function (button) {
            button.addEventListener('click', function () {
                document.querySelectorAll('.settings-tab').forEach(function (tab) {
                    tab.classList.remove('active');
                });

                document.querySelectorAll('.settings-section').forEach(function (section) {
                    section.classList.remove('active');
                });

                button.classList.add('active');

                document
                    .getElementById('tab-' + button.dataset.tab)
                    .classList.add('active');
            });
        });
    </script>
@endpush