@extends('layouts.app')

@section('content')

{{-- SUCCESS TOAST --}}
@if(session('success'))
    <div id="successToast">
        <i class="fa fa-check-circle"></i> {{ session('success') }}
    </div>
@endif

{{-- ERRORS --}}
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show mb-4">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@php
    $setting = \App\Models\SiteSetting::first();
    $activeTab = session('active_settings_tab', 'general');
@endphp

{{-- OUTER CARD --}}
<div class="card">

    {{-- Card Header with title --}}
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3>
            <i class="fa fa-arrow-circle-right"></i>
            Site Settings
        </h3>
    </div>

    {{-- Tab Navigation (mirrors the profile page nav-line-tabs style) --}}
    <div class="card-header border-bottom-0 px-0 pt-0 pb-0" style="border-top: 1px solid #f1f1f4;">
        <ul class="nav nav-tabs settings-tabs" id="settingsTabs" role="tablist">

            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeTab === 'general' ? 'active' : '' }}"
                   data-bs-toggle="tab" href="#tab_general" role="tab">
                    <i class="fa fa-globe tab-icon"></i> General
                </a>
            </li>

            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeTab === 'contact' ? 'active' : '' }}"
                   data-bs-toggle="tab" href="#tab_contact" role="tab">
                    <i class="fa fa-phone tab-icon"></i> Contact & Social
                </a>
            </li>

            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeTab === 'seo' ? 'active' : '' }}"
                   data-bs-toggle="tab" href="#tab_seo" role="tab">
                    <i class="fa fa-search tab-icon"></i> SEO
                </a>
            </li>

            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeTab === 'smtp' ? 'active' : '' }}"
                   data-bs-toggle="tab" href="#tab_smtp" role="tab">
                    <i class="fa fa-envelope tab-icon"></i> Global Settings
                </a>
            </li>

        </ul>
    </div>

    {{-- Tab Content --}}
    <div class="card-body pt-4">
        <div class="tab-content" id="settingsTabContent">

            {{-- ══════════════════════════════
                 TAB 1 — General & Branding
            ══════════════════════════════ --}}
            <div class="tab-pane fade {{ $activeTab === 'general' ? 'show active' : '' }}"
                 id="tab_general" role="tabpanel">

                <form method="POST" action="{{ route('admin.site.settings.update') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="active_tab" value="general">

                    {{-- General Information --}}
                    <div class="section-panel mb-4">
                        <div class="section-panel__header">
                            <i class="fa fa-info-circle"></i> General Information
                        </div>
                        <div class="section-panel__body">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="setting-label">Site Title</label>
                                    <input type="text" name="title" class="setting-input"
                                           value="{{ old('title', $setting->title ?? '') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="setting-label">Site Name</label>
                                    <input type="text" name="site_name" class="setting-input"
                                           value="{{ old('site_name', $setting->site_name ?? '') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Branding --}}
                    <div class="section-panel mb-4">
                        <div class="section-panel__header">
                            <i class="fa fa-image"></i> Branding
                        </div>
                        <div class="section-panel__body">
                            <div class="row g-4">

                                <div class="col-md-6">
                                    <label class="setting-label">Logo</label>
                                    @if(!empty($setting->logo))
                                        <div class="media-preview mb-2">
                                            <img src="{{ asset('uploads/site/'.$setting->logo) }}" height="40">
                                            <span class="media-label">Current Logo</span>
                                        </div>
                                    @endif
                                    <input type="file" name="logo" class="setting-input"
                                           accept="image/png,image/jpeg">
                                    <small class="text-muted">Allowed: JPG, PNG</small>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">Favicon</label>
                                    @if(!empty($setting->favicon))
                                        <div class="media-preview mb-2">
                                            <img src="{{ asset('uploads/site/'.$setting->favicon) }}" height="30">
                                            <span class="media-label">Current Favicon</span>
                                        </div>
                                    @endif
                                    <input type="file" name="favicon" class="setting-input"
                                           accept="image/png,image/x-icon,image/vnd.microsoft.icon">
                                    <small class="text-muted">Allowed: PNG, ICO</small>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fa fa-save me-1"></i> Save Changes
                        </button>
                    </div>

                </form>
            </div>


            {{-- ══════════════════════════════
                 TAB 2 — Contact & Social
            ══════════════════════════════ --}}
            <div class="tab-pane fade {{ $activeTab === 'contact' ? 'show active' : '' }}"
                 id="tab_contact" role="tabpanel">

                <form method="POST" action="{{ route('admin.site.settings.update') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="active_tab" value="contact">

                    {{-- Contact --}}
                    <div class="section-panel mb-4">
                        <div class="section-panel__header">
                            <i class="fa fa-phone"></i> Contact Information
                        </div>
                        <div class="section-panel__body">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="setting-label">Contact Number</label>
                                    <input type="text" name="contact_number" class="setting-input"
                                           value="{{ old('contact_number', $setting->contact_number ?? '') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="setting-label">Email</label>
                                    <input type="email" name="email" class="setting-input"
                                           value="{{ old('email', $setting->email ?? '') }}">
                                </div>
                                <div class="col-md-12">
                                    <label class="setting-label">Address</label>
                                    <textarea name="address" class="setting-input" rows="3">{{ old('address', $setting->address ?? '') }}</textarea>
                                </div>
                                <div class="col-md-12">
                                    <label class="setting-label">Location (Map Embed / URL)</label>
                                    <textarea name="location" class="setting-input" rows="2">{{ old('location', $setting->location ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Social Media --}}
                    <div class="section-panel mb-4">
                        <div class="section-panel__header">
                            <i class="fa fa-share-alt"></i> Social Media
                        </div>
                        <div class="section-panel__body">
                            <div class="row g-4">

                                <div class="col-md-6">
                                    <label class="setting-label">Facebook</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-facebook input-icon"></i>
                                        <input type="url" name="facebook" class="setting-input setting-input--icon"
                                               value="{{ old('facebook', $setting->facebook ?? '') }}"
                                               placeholder="https://facebook.com/...">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">Twitter / X</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-twitter input-icon"></i>
                                        <input type="url" name="twitter" class="setting-input setting-input--icon"
                                               value="{{ old('twitter', $setting->twitter ?? '') }}"
                                               placeholder="https://twitter.com/...">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">Instagram</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-instagram input-icon"></i>
                                        <input type="url" name="instagram" class="setting-input setting-input--icon"
                                               value="{{ old('instagram', $setting->instagram ?? '') }}"
                                               placeholder="https://instagram.com/...">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">LinkedIn</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-linkedin input-icon"></i>
                                        <input type="url" name="linkedin" class="setting-input setting-input--icon"
                                               value="{{ old('linkedin', $setting->linkedin ?? '') }}"
                                               placeholder="https://linkedin.com/...">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">Pinterest</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-pinterest input-icon"></i>
                                        <input type="url" name="pinterest" class="setting-input setting-input--icon"
                                               value="{{ old('pinterest', $setting->pinterest ?? '') }}"
                                               placeholder="https://pinterest.com/...">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fa fa-save me-1"></i> Save Changes
                        </button>
                    </div>

                </form>
            </div>


            {{-- ══════════════════════════════
                 TAB 3 — SEO
            ══════════════════════════════ --}}
            <div class="tab-pane fade {{ $activeTab === 'seo' ? 'show active' : '' }}"
                 id="tab_seo" role="tabpanel">

                <form method="POST" action="{{ route('admin.site.settings.update') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="active_tab" value="seo">

                    <div class="section-panel mb-4">
                        <div class="section-panel__header">
                            <i class="fa fa-search"></i> SEO Information
                        </div>
                        <div class="section-panel__body">
                            <div class="row g-4">
                                <div class="col-md-12">
                                    <label class="setting-label">Meta Title</label>
                                    <input type="text" name="meta_title" class="setting-input"
                                           value="{{ old('meta_title', $setting->meta_title ?? '') }}">
                                </div>
                                <div class="col-md-12">
                                    <label class="setting-label">Meta Keywords</label>
                                    <input type="text" name="meta_keywords" class="setting-input"
                                           value="{{ old('meta_keywords', $setting->meta_keywords ?? '') }}"
                                           placeholder="keyword1, keyword2, keyword3">
                                </div>
                                <div class="col-md-12">
                                    <label class="setting-label">Meta Description</label>
                                    <textarea name="meta_description" class="setting-input" rows="4">{{ old('meta_description', $setting->meta_description ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fa fa-save me-1"></i> Save Changes
                        </button>
                    </div>

                </form>
            </div>


            {{-- ══════════════════════════════
                 TAB 4 — Global Settings (SMTP + Toggles)
            ══════════════════════════════ --}}
            <div class="tab-pane fade {{ $activeTab === 'smtp' ? 'show active' : '' }}"
                 id="tab_smtp" role="tabpanel">

                <form method="POST" action="{{ route('admin.site.settings.update') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="active_tab" value="smtp">

                    {{-- Notification Toggles --}}
                    <div class="section-panel mb-4">
                        <div class="section-panel__header">
                            <i class="fa fa-bell"></i> Notification Channels
                        </div>
                        <div class="section-panel__body">
                            <div class="row g-4">

                                <div class="col-md-6">
                                    <div class="toggle-row">
                                        <div class="toggle-row__info">
                                            <span class="toggle-row__title">
                                                <i class="fa fa-envelope text-primary me-2"></i> Email Notifications
                                            </span>
                                            <span class="toggle-row__desc">Send booking confirmations and alerts via email</span>
                                        </div>
                                        <label class="toggle-switch">
                                            <input type="checkbox" name="enable_email" value="1"
                                                   {{ old('enable_email', $setting->enable_email ?? 1) ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="toggle-row">
                                        <div class="toggle-row__info">
                                            <span class="toggle-row__title">
                                                <i class="fab fa-whatsapp text-success me-2"></i> WhatsApp Notifications
                                            </span>
                                            <span class="toggle-row__desc">Send booking updates via WhatsApp</span>
                                        </div>
                                        <label class="toggle-switch">
                                            <input type="checkbox" name="enable_whatsapp" value="1"
                                                   {{ old('enable_whatsapp', $setting->enable_whatsapp ?? 1) ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    {{-- SMTP Settings --}}
                    <div class="section-panel mb-4">
                        <div class="section-panel__header">
                            <i class="fa fa-server"></i> SMTP Configuration
                            <span class="smtp-badge">Email Server</span>
                        </div>
                        <div class="section-panel__body">
                            <div class="row g-4">

                                <div class="col-md-8">
                                    <label class="setting-label">SMTP Host</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-server input-icon"></i>
                                        <input type="text" name="smtp_host" class="setting-input setting-input--icon"
                                               value="{{ old('smtp_host', $setting->smtp_host ?? '') }}"
                                               placeholder="smtp.gmail.com">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="setting-label">SMTP Port</label>
                                    <input type="text" name="smtp_port" class="setting-input"
                                           value="{{ old('smtp_port', $setting->smtp_port ?? '') }}"
                                           placeholder="587">
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">SMTP Username</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-user input-icon"></i>
                                        <input type="text" name="smtp_username" class="setting-input setting-input--icon"
                                               value="{{ old('smtp_username', $setting->smtp_username ?? '') }}"
                                               placeholder="your@email.com">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">SMTP Password</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-lock input-icon"></i>
                                        <input type="password" name="smtp_password" id="smtpPassword"
                                               class="setting-input setting-input--icon setting-input--pass"
                                               value="{{ old('smtp_password', $setting->smtp_password ?? '') }}"
                                               placeholder="App password or SMTP key">
                                        <button type="button" class="pass-toggle" onclick="toggleSmtpPass()" title="Show/Hide">
                                            <i class="fa fa-eye" id="smtpPassIcon"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">Encryption</label>
                                    <select name="smtp_encryption" class="setting-input setting-select">
                                        @foreach(['tls' => 'TLS (Recommended)', 'ssl' => 'SSL', 'none' => 'None'] as $val => $label)
                                            <option value="{{ $val }}"
                                                {{ old('smtp_encryption', $setting->smtp_encryption ?? 'tls') === $val ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="setting-label">Mail From Address</label>
                                    <input type="email"
                                        name="mail_from_address"
                                        class="setting-input"
                                        value="{{ old('mail_from_address', $setting->mail_from_address ?? '') }}"
                                        placeholder="noreply@example.com">
                                </div>  

                                <div class="col-md-6">
                                    <label class="setting-label">Mail From Name</label>
                                    <input type="text"
                                        name="mail_from_name"
                                        class="setting-input"
                                        value="{{ old('mail_from_name', $setting->mail_from_name ?? '') }}"
                                        placeholder="Ajyad">
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fa fa-save me-1"></i> Save Changes
                        </button>
                    </div>

                </form>
            </div>

        </div>{{-- /tab-content --}}
    </div>{{-- /card-body --}}

</div>{{-- /card --}}


<style>
    /* ---- Toast ---- */
    #successToast {
        position: fixed; bottom: 30px; left: 30px;
        background-color: #155724; color: #fff;
        padding: 12px 20px; border-radius: 6px;
        font-size: 14px; font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 9999; display: flex; align-items: center; gap: 8px;
        animation: fadeInUp 0.3s ease;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ---- Outer card header ---- */
    .card-header h3 {
        font-size: 16px; font-weight: 600; margin: 0;
        display: flex; align-items: center; gap: 8px;
    }

    /* ---- Tab Nav (mirrors profile page nav-line-tabs) ---- */
    .settings-tabs {
        display: flex;
        padding: 0 20px;
        border-bottom: 2px solid #f1f1f4;
        gap: 4px;
    }
    .settings-tabs .nav-link {
        display: flex; align-items: center; gap: 7px;
        padding: 14px 18px;
        font-size: 13px; font-weight: 600;
        color: #7e8299;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        border-radius: 0;
        background: transparent;
        transition: color 0.2s, border-color 0.2s;
        white-space: nowrap;
    }
    .settings-tabs .nav-link:hover {
        color: var(--bs-primary);
    }
    .settings-tabs .nav-link.active {
        color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
        background: transparent;
    }
    .tab-icon { font-size: 13px; }

    /* ---- Section panels ---- */
    .section-panel {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        overflow: hidden;
    }
    .section-panel__header {
        display: flex; align-items: center; gap: 8px;
        background: #f8f9fc;
        border-bottom: 1px solid #e9ecef;
        padding: 12px 18px;
        font-size: 13px; font-weight: 600; color: #333;
    }
    .section-panel__header .fa { color: var(--bs-primary); font-size: 14px; }
    .section-panel__body { padding: 20px 18px; }

    /* SMTP badge */
    .smtp-badge {
        margin-left: auto;
        background: #e8f5e9; color: #2e7d32;
        font-size: 11px; font-weight: 700;
        padding: 2px 10px; border-radius: 20px;
        letter-spacing: 0.3px;
    }

    /* ---- Inputs ---- */
    .setting-label {
        display: block; font-size: 13px; font-weight: 600;
        color: #444; margin-bottom: 6px;
    }
    .setting-input {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #dee2e6; border-radius: 10px;
        font-size: 14px; outline: none;
        background: #f8f9fc;
        transition: border-color 0.2s, box-shadow 0.2s; color: #333;
    }
    .setting-input:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
        background: #fff;
    }
    textarea.setting-input { resize: vertical; }
    .setting-select { appearance: auto; cursor: pointer; }

    /* Icon inputs */
    .input-icon-wrap { position: relative; }
    .input-icon {
        position: absolute; left: 14px; top: 50%;
        transform: translateY(-50%);
        color: #aaa; font-size: 14px; pointer-events: none;
    }
    .setting-input--icon { padding-left: 38px; }
    .setting-input--pass { padding-right: 42px; }

    /* Password toggle button */
    .pass-toggle {
        position: absolute; right: 12px; top: 50%;
        transform: translateY(-50%);
        background: none; border: none;
        color: #aaa; cursor: pointer; padding: 0; font-size: 14px;
        transition: color 0.2s;
    }
    .pass-toggle:hover { color: var(--bs-primary); }

    /* ---- Toggle switch ---- */
    .toggle-row {
        display: flex; align-items: center; justify-content: space-between;
        background: #f8f9fc;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 14px 18px;
        height: 100%;
    }
    .toggle-row__info { display: flex; flex-direction: column; gap: 3px; }
    .toggle-row__title { font-size: 13px; font-weight: 600; color: #333; }
    .toggle-row__desc  { font-size: 12px; color: #888; }

    .toggle-switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
        position: absolute; cursor: pointer;
        inset: 0; background: #dee2e6; border-radius: 24px;
        transition: 0.3s;
    }
    .toggle-slider::before {
        content: ''; position: absolute;
        width: 18px; height: 18px; left: 3px; bottom: 3px;
        background: #fff; border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .toggle-switch input:checked + .toggle-slider { background: var(--bs-primary); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }

    /* ---- Media preview ---- */
    .media-preview {
        display: inline-flex; align-items: center; gap: 10px;
        background: #f8f9fc; border: 1px solid #dee2e6;
        border-radius: 8px; padding: 8px 14px;
    }
    .media-label { font-size: 12px; color: #888; font-weight: 500; }
</style>

<script>
    // Toast dismiss
    setTimeout(function () {
        var t = document.getElementById('successToast');
        if (t) {
            t.style.transition = 'opacity 0.5s ease';
            t.style.opacity = '0';
            setTimeout(function () { t.remove(); }, 500);
        }
    }, 3000);

    // SMTP password toggle
    function toggleSmtpPass() {
        var inp  = document.getElementById('smtpPassword');
        var icon = document.getElementById('smtpPassIcon');
        if (inp.type === 'password') {
            inp.type = 'text';
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            inp.type = 'password';
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    }

    // Restore active tab from session after redirect
    document.addEventListener('DOMContentLoaded', function () {
        var tabMap = {
            'general': '[href="#tab_general"]',
            'contact': '[href="#tab_contact"]',
            'seo':     '[href="#tab_seo"]',
            'smtp':    '[href="#tab_smtp"]',
        };
        var sessionTab = "{{ session('active_settings_tab', 'general') }}";
        if (tabMap[sessionTab]) {
            var el = document.querySelector(tabMap[sessionTab]);
            if (el) new bootstrap.Tab(el).show();
        }
    });
</script>

@endsection