@extends('layouts.admin')
@section('admin')

    <div class="row">
        <div class="col-xl-12">
            <div class="card settings-card">
                <div class="card-body">
                    <h4 class="card-title mb-4"><i class="fas fa-cog me-2"></i>Site Settings</h4>

                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs nav-tabs-custom nav-justified mb-4" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {{ request()->routeIs('admin.general.setting') ? 'active' : '' }}"
                               href="{{ route('admin.general.setting') }}">
                                <span class="d-none d-md-block"><i class="fas fa-cogs me-1"></i> General Setting</span>
                                <span class="d-md-none"><i class="fas fa-cogs"></i></span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {{ request()->routeIs('admin.coin.setting') ? 'active' : '' }}"
                               href="{{ route('admin.coin.setting') }}">
                                <span class="d-none d-md-block"><i class="fas fa-coins me-1"></i> Coin Setting</span>
                                <span class="d-md-none"><i class="fas fa-coins"></i></span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {{ request()->routeIs('admin.room.setting') ? 'active' : '' }}"
                               href="{{ route('admin.room.setting') }}">
                                <span class="d-none d-md-block"><i
                                        class="fas fa-door-open me-1"></i> Room Setting</span>
                                <span class="d-md-none"><i class="fas fa-door-open"></i></span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {{ request()->routeIs('admin.zegocloud.setting') ? 'active' : '' }}"
                               href="{{ route('admin.zegocloud.setting') }}">
                                <span class="d-none d-md-block"><i class="fas fa-video me-1"></i> Zegocloud</span>
                                <span class="d-md-none"><i class="fas fa-video"></i></span>
                            </a>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content p-4">
                        <!-- General Settings Content -->
                        <div class="tab-pane {{ request()->routeIs('admin.general.setting') ? 'active show' : 'fade' }}"
                             id="general" role="tabpanel">
                            <div class="settings-section">
                                <h5 class="mb-4"><i class="fas fa-info-circle me-2"></i>General Settings</h5>
                                <form action="{{ route('admin.general.setting.save') }}" method="post"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_name" class="form-label">Site Name</label>
                                                <input type="text" id="site_name" name="site_name"
                                                       value="{{ $setting->site_name ?? '' }}" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_email" class="form-label">Site Email</label>
                                                <input type="email" id="site_email" name="site_email"
                                                       value="{{ $setting->site_email ?? '' }}" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_logo" class="form-label">Site Logo</label>
                                                <div class="d-flex align-items-center mb-3">
                                                    @if(!empty($setting->site_logo) && file_exists($setting->site_logo))
                                                        <img src="{{ asset($setting->site_logo) }}"
                                                             class="img-thumbnail me-3"
                                                             style="height: 80px; width: 80px; object-fit: contain;">
                                                    @else
                                                        <div
                                                            class="bg-light d-flex align-items-center justify-content-center me-3"
                                                            style="height: 80px; width: 80px; border-radius: 8px;">
                                                            <i class="fas fa-image text-muted"
                                                               style="font-size: 24px;"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <input type="file" class="form-control" id="site_logo"
                                                               name="site_logo" style="width: auto;">
                                                        <small class="text-muted">Recommended: 200×200px PNG</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_icon" class="form-label">Site Icon (Favicon)</label>
                                                <div class="d-flex align-items-center mb-3">
                                                    @if(!empty($setting->site_icon) && file_exists($setting->site_icon))
                                                        <img src="{{ asset($setting->site_icon) }}"
                                                             class="img-thumbnail me-3"
                                                             style="height: 80px; width: 80px; object-fit: contain;">
                                                    @else
                                                        <div
                                                            class="bg-light d-flex align-items-center justify-content-center me-3"
                                                            style="height: 80px; width: 80px; border-radius: 8px;">
                                                            <i class="fas fa-image text-muted"
                                                               style="font-size: 24px;"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <input type="file" class="form-control" id="site_icon"
                                                               name="site_icon" style="width: auto;">
                                                        <small class="text-muted">Recommended: 32×32px ICO/PNG</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary px-4 py-2">
                                                <i class="fas fa-save me-2"></i>Save Changes
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Other tab panes would go here -->
                        <div class="tab-pane {{ request()->routeIs('admin.coin.setting') ? 'active show' : 'fade' }}"
                             id="coin" role="tabpanel">
                            <div class="settings-section">
                                <h5 class="mb-4"><i class="fas fa-info-circle me-2"></i>Coin Settings</h5>
                                <form action="{{ route('admin.general.setting.save') }}" method="post"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_name" class="form-label">Site Name</label>
                                                <input type="text" id="site_name" name="site_name"
                                                       value="{{ $setting->site_name ?? '' }}" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_email" class="form-label">Site Email</label>
                                                <input type="email" id="site_email" name="site_email"
                                                       value="{{ $setting->site_email ?? '' }}" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_logo" class="form-label">Site Logo</label>
                                                <div class="d-flex align-items-center mb-3">
                                                    @if(!empty($setting->site_logo) && file_exists($setting->site_logo))
                                                        <img src="{{ asset($setting->site_logo) }}"
                                                             class="img-thumbnail me-3"
                                                             style="height: 80px; width: 80px; object-fit: contain;">
                                                    @else
                                                        <div
                                                            class="bg-light d-flex align-items-center justify-content-center me-3"
                                                            style="height: 80px; width: 80px; border-radius: 8px;">
                                                            <i class="fas fa-image text-muted"
                                                               style="font-size: 24px;"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <input type="file" class="form-control" id="site_logo"
                                                               name="site_logo" style="width: auto;">
                                                        <small class="text-muted">Recommended: 200×200px PNG</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-4">
                                                <label for="site_icon" class="form-label">Site Icon (Favicon)</label>
                                                <div class="d-flex align-items-center mb-3">
                                                    @if(!empty($setting->site_icon) && file_exists($setting->site_icon))
                                                        <img src="{{ asset($setting->site_icon) }}"
                                                             class="img-thumbnail me-3"
                                                             style="height: 80px; width: 80px; object-fit: contain;">
                                                    @else
                                                        <div
                                                            class="bg-light d-flex align-items-center justify-content-center me-3"
                                                            style="height: 80px; width: 80px; border-radius: 8px;">
                                                            <i class="fas fa-image text-muted"
                                                               style="font-size: 24px;"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <input type="file" class="form-control" id="site_icon"
                                                               name="site_icon" style="width: auto;">
                                                        <small class="text-muted">Recommended: 32×32px ICO/PNG</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary px-4 py-2">
                                                <i class="fas fa-save me-2"></i>Save Changes
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="tab-pane {{ request()->routeIs('admin.room.setting') ? 'active show' : 'fade' }}"
                             id="room" role="tabpanel">
                            <!-- Room settings content would be here -->
                        </div>

                        <div
                            class="tab-pane {{ request()->routeIs('admin.zegocloud.setting') ? 'active show' : 'fade' }}"
                            id="zegocloud" role="tabpanel">
                            <!-- Zegocloud settings content would be here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .settings-card {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            border: none;
            border-radius: 0.75rem;
        }

        .nav-tabs-custom {
            border-bottom: 2px solid #e3e6f0;
        }

        .nav-tabs-custom .nav-item {
            margin-bottom: -2px;
        }

        .nav-tabs-custom .nav-link {
            border: none;
            border-bottom: 3px solid transparent;
            color: #858796;
            font-weight: 600;
            padding: 1rem 1.5rem;
            transition: all 0.3s;
        }

        .nav-tabs-custom .nav-link:hover {
            border-color: transparent;
            color: #4e73df;
            background-color: rgba(78, 115, 223, 0.05);
        }

        .nav-tabs-custom .nav-link.active {
            color: #4e73df;
            background-color: transparent;
            border-color: #4e73df;
        }

        .settings-section {
            padding: 1.5rem 0;
        }

        .form-label {
            font-weight: 600;
            color: #4e4e4e;
            margin-bottom: 0.5rem;
        }

        .form-control, .form-select {
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            border: 1px solid #d1d3e2;
        }

        .form-control:focus, .form-select:focus {
            border-color: #4e73df;
            box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

        .img-thumbnail {
            border-radius: 0.5rem;
            padding: 0.25rem;
            border: 1px solid #d1d3e2;
            transition: all 0.3s;
        }

        .img-thumbnail:hover {
            border-color: #4e73df;
        }

        .btn-primary {
            background-color: #4e73df;
            border-color: #4e73df;
            border-radius: 0.5rem;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
        }

        .btn-primary:hover {
            background-color: #3a5bc7;
            border-color: #3a5bc7;
        }
    </style>

    <!-- JavaScript to handle tab activation on page load -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Activate the appropriate tab based on current URL
            const currentUrl = window.location.href;
            const navLinks = document.querySelectorAll('.nav-tabs-custom .nav-link');

            navLinks.forEach(link => {
                if (link.href === currentUrl) {
                    link.classList.add('active');

                    // Also activate the corresponding tab pane
                    const targetId = link.getAttribute('href').split('/').pop();
                    const tabPane = document.getElementById(targetId);
                    if (tabPane) {
                        tabPane.classList.add('active', 'show');
                    }
                } else {
                    link.classList.remove('active');
                }
            });
        });
    </script>

@endsection