@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">

                        <div class="tab-pane {{ request()->routeIs('admin.room.setting') ? 'active show' : 'fade' }}"
                            id="room" role="tabpanel">
                            <div class="settings-section">
                                <h5 class="mb-4"><i class="fas fa-info-circle me-2"></i>Room Settings</h5>
                                <form action="{{ route('admin.room.setting.save') }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                            <div class="col">
                                                <div class="mb-4">
                                                    <label for="site_name" class="form-label">All User Room (%)
                                                        Reward</label>
                                                    <input type="number" id="site_name" name="room_host_percentage"
                                                        value="{{ $setting->room_host_percentage ?? '' }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="mb-4">
                                                    <label for="site_email" class="form-label">Voice Room Owner (%)
                                                        Reward</label>
                                                    <input type="number" id="site_email" name="room_user_percentage"
                                                        value="{{ $setting->room_user_percentage ?? '' }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="mb-4">
                                                    <label for="site_email" class="form-label">CP Gift(%)</label>
                                                    <input type="number" id="site_email" name="cp_gift_percentage"
                                                        value="{{ $setting->cp_gift_percentage ?? '' }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="mb-4">
                                                    <label for="site_email" class="form-label">Custom Theme Upload
                                                        Coin</label>
                                                    <input type="number" id="site_email" name="custom_theme_upload_coin"
                                                        value="{{ $setting->custom_theme_upload_coin ?? '' }}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="mb-4">
                                                    <label for="site_email" class="form-label">Family Fees</label>
                                                    <input type="number" id="site_email" name="family_fees"
                                                        value="{{ $setting->family_fees ?? '' }}" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="mb-4">
                                                    <label for="site_email" class="form-label">Custom Theme Upload
                                                        Title</label>
                                                    <input type="text" id="site_email"
                                                        name="custom_theme_upload_title" value="{!! $setting->custom_theme_upload_title !!}"
                                                        class="form-control">
                                                </div>
                                            </div>
                                        <div class="col-md-12">
                                            <div class="mb-4">
                                                <label for="site_email" class="form-label">Custom Theme Upload
                                                    Sub-Title</label>
                                                <input type="text" id="site_email"
                                                    name="custom_theme_upload_sub_title" value="{!! $setting->custom_theme_upload_sub_title !!}"
                                                    class="form-control">
                                            </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.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