@extends('layouts.admin')

@section('title', 'الإعدادات')

@section('content')
<div class="container-fluid">
    <div class="row">
        @include('components.admin-sidebar')
        <div class="col-md-9 col-lg-10">
            <div class="row mb-4">
                <div class="col-12">
                    <h2 class="fw-bold">إعدادات التطبيق</h2>
                    <p class="text-muted">إدارة جميع إعدادات التطبيق</p>
                </div>
            </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4" id="settingsTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button">
                <i class="fas fa-home"></i> إعدادات الرئيسية
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="chat-tab" data-bs-toggle="tab" data-bs-target="#chat" type="button">
                <i class="fas fa-comments"></i> إعدادات الدردشة
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="video-tab" data-bs-toggle="tab" data-bs-target="#video" type="button">
                <i class="fas fa-video"></i> إعدادات الفيديو
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="notification-tab" data-bs-toggle="tab" data-bs-target="#notification" type="button">
                <i class="fas fa-bell"></i> إعدادات الإشعارات
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="settingsTabContent">
        <!-- Home Settings -->
        <div class="tab-pane fade show active" id="home" role="tabpanel">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.settings.home') }}">
                        @csrf
                        
                        <h5 class="fw-bold mb-4">إعدادات الصفحة الرئيسية</h5>

                        <div class="mb-3">
                            <label class="form-label">عدد الفيديوهات المحملة</label>
                            <input type="number" name="no_of_vidoes_loaded" class="form-control" value="{{ $homeSettings->no_of_vidoes_loaded ?? 10 }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">خوارزمية الفيديوهات</label>
                            <select name="alg_videos" class="form-control">
                                <option value="alg1" {{ ($homeSettings->alg_videos ?? '') == 'alg1' ? 'selected' : '' }}>خوارزمية 1</option>
                                <option value="alg2" {{ ($homeSettings->alg_videos ?? '') == 'alg2' ? 'selected' : '' }}>خوارزمية 2</option>
                                <option value="random" {{ ($homeSettings->alg_videos ?? '') == 'random' ? 'selected' : '' }}>عشوائي</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">عرض الإعلانات</label>
                            <select name="view_ads" class="form-control">
                                <option value="yes" {{ ($homeSettings->view_ads ?? '') == 'yes' ? 'selected' : '' }}>نعم</option>
                                <option value="no" {{ ($homeSettings->view_ads ?? '') == 'no' ? 'selected' : '' }}>لا</option>
                            </select>
                        </div>

                        <hr>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> حفظ التغييرات
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Chat Settings -->
        <div class="tab-pane fade" id="chat" role="tabpanel">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.settings.chat') }}">
                        @csrf
                        
                        <h5 class="fw-bold mb-4">إعدادات الدردشة</h5>

                        <div class="mb-3">
                            <label class="form-label">مستوى المستخدم المطلوب</label>
                            <input type="number" name="level_id" class="form-control" value="{{ $chatSettings->level_id ?? 1 }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">إرسال الصوت</label>
                            <select name="voice" class="form-control">
                                <option value="yes" {{ ($chatSettings->voice ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($chatSettings->voice ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">إرسال الصور</label>
                            <select name="image" class="form-control">
                                <option value="yes" {{ ($chatSettings->image ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($chatSettings->image ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">إرسال المستندات</label>
                            <select name="document" class="form-control">
                                <option value="yes" {{ ($chatSettings->document ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($chatSettings->document ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">إرسال الفيديو</label>
                            <select name="video" class="form-control">
                                <option value="yes" {{ ($chatSettings->video ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($chatSettings->video ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">إرسال الموقع</label>
                            <select name="location" class="form-control">
                                <option value="yes" {{ ($chatSettings->location ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($chatSettings->location ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <hr>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> حفظ التغييرات
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Video Settings -->
        <div class="tab-pane fade" id="video" role="tabpanel">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.settings.video') }}">
                        @csrf
                        
                        <h5 class="fw-bold mb-4">إعدادات الفيديو</h5>

                        <div class="mb-3">
                            <label class="form-label">مستوى المستخدم المطلوب</label>
                            <input type="number" name="user_level" class="form-control" value="{{ $videoSettings->user_level ?? 1 }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">مدة الفيديو (بالثواني)</label>
                            <input type="number" name="video_duration" class="form-control" value="{{ $videoSettings->video_duration ?? 60 }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">تعديل الفيديو</label>
                            <select name="video_edit" class="form-control">
                                <option value="yes" {{ ($videoSettings->video_edit ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($videoSettings->video_edit ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">فيديو من الكاميرا</label>
                            <select name="video_from_cam" class="form-control">
                                <option value="yes" {{ ($videoSettings->video_from_cam ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($videoSettings->video_from_cam ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">فيديو من المعرض</label>
                            <select name="video_from_gallery" class="form-control">
                                <option value="yes" {{ ($videoSettings->video_from_gallery ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($videoSettings->video_from_gallery ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">صوت فقط</label>
                            <select name="sond_only" class="form-control">
                                <option value="yes" {{ ($videoSettings->sond_only ?? '') == 'yes' ? 'selected' : '' }}>مسموح</option>
                                <option value="no" {{ ($videoSettings->sond_only ?? '') == 'no' ? 'selected' : '' }}>ممنوع</option>
                            </select>
                        </div>

                        <hr>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> حفظ التغييرات
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Notification Settings -->
        <div class="tab-pane fade" id="notification" role="tabpanel">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.settings.notification') }}">
                        @csrf
                        
                        <h5 class="fw-bold mb-4">إعدادات الإشعارات</h5>

                        <div class="mb-3">
                            <label class="form-label">أيقونة الإشعار (URL)</label>
                            <input type="text" name="icon" class="form-control" value="{{ $notificationSettings->icon ?? '' }}" placeholder="https://example.com/icon.png">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">صوت الإشعار (URL)</label>
                            <input type="text" name="sound" class="form-control" value="{{ $notificationSettings->sound ?? '' }}" placeholder="https://example.com/sound.mp3">
                        </div>

                        <hr>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> حفظ التغييرات
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
</div>
@endsection