@extends('layouts.app')

@section('title', 'إعدادات النظام')
@section('page_title', 'إعدادات النظام')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">الإعدادات العامة</h5>
            </div>
            <div class="card-body">
                <form id="generalSettingsForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">اسم النظام</label>
                                <input type="text" class="form-control" name="system_name" id="system_name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">اسم المستشفى/العيادة</label>
                                <input type="text" class="form-control" name="clinic_name" id="clinic_name">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">رقم الهاتف الرئيسي</label>
                                <input type="text" class="form-control" name="main_phone" id="main_phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">البريد الإلكتروني</label>
                                <input type="email" class="form-control" name="contact_email" id="contact_email">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">العنوان</label>
                        <textarea class="form-control" rows="2" name="address" id="address"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">ساعات العمل - من</label>
                                <input type="time" class="form-control" name="work_from" id="work_from">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">ساعات العمل - إلى</label>
                                <input type="time" class="form-control" name="work_to" id="work_to">
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">حفظ الإعدادات</button>
                </form>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">إعدادات المواعيد</h5>
            </div>
            <div class="card-body">
                <form id="appointmentSettingsForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">مدة الموعد الافتراضية (دقيقة)</label>
                                <select class="form-select" name="appointment_duration" id="appointment_duration">
                                    <option value="15">15 دقيقة</option>
                                    <option value="30">30 دقيقة</option>
                                    <option value="45">45 دقيقة</option>
                                    <option value="60">60 دقيقة</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">الحد الأقصى للمواعيد اليومية</label>
                                <input type="number" class="form-control" name="max_daily_appointments" id="max_daily_appointments">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">إشعار قبل الموعد (ساعة)</label>
                                <select class="form-select" name="notify_hours_before" id="notify_hours_before">
                                    <option value="1">ساعة واحدة</option>
                                    <option value="2">ساعتين</option>
                                    <option value="4">4 ساعات</option>
                                    <option value="24">24 ساعة</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">السماح بالحجز المسبق (يوم)</label>
                                <input type="number" class="form-control" name="allow_prebooking_days" id="allow_prebooking_days">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="allowOnlineBooking" name="allow_online_booking">
                            <label class="form-check-label" for="allowOnlineBooking">
                                السماح بالحجز الإلكتروني للمرضى
                            </label>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="requireConfirmation" name="require_confirmation">
                            <label class="form-check-label" for="requireConfirmation">
                                تأكيد المواعيد مطلوب
                            </label>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">حفظ إعدادات المواعيد</button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">معلومات النظام</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6>إصدار النظام</h6>
                    <p class="text-muted">SmartCare v1.0.0</p>
                </div>
                <div class="mb-3">
                    <h6>آخر تحديث</h6>
                    <p class="text-muted">{{ date('Y-m-d H:i') }}</p>
                </div>
                <div class="mb-3">
                    <h6>حالة قاعدة البيانات</h6>
                    <span class="badge bg-success">متصلة</span>
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">النسخ الاحتياطي</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6>آخر نسخة احتياطية</h6>
                    <p class="text-muted">{{ date('Y-m-d H:i', strtotime('-1 day')) }}</p>
                </div>
                <div class="mb-3">
                    <button class="btn btn-outline-primary w-100">
                        <i class="fas fa-download me-2"></i>إنشاء نسخة احتياطية
                    </button>
                </div>
                <div class="mb-3">
                    <button class="btn btn-outline-secondary w-100">
                        <i class="fas fa-upload me-2"></i>استعادة من نسخة احتياطية
                    </button>
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">إعدادات الأمان</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="twoFactorAuth" name="security_two_factor">
                        <label class="form-check-label" for="twoFactorAuth">
                            المصادقة الثنائية
                        </label>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="sessionTimeout" name="security_session_timeout_enabled">
                        <label class="form-check-label" for="sessionTimeout">
                            انتهاء الجلسة التلقائي
                        </label>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">مدة الجلسة (دقيقة)</label>
                    <input type="number" class="form-control" id="session_duration_minutes" name="session_duration_minutes">
                </div>
                <button id="saveSecuritySettings" class="btn btn-outline-warning w-100" type="button">
                    <i class="fas fa-shield-alt me-2"></i>حفظ إعدادات الأمان
                </button>
            </div>
        </div>
    </div>
</div>

<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

function fillValues(data) {
  // General
  document.getElementById('system_name').value = data.system_name || '';
  document.getElementById('clinic_name').value = data.clinic_name || '';
  document.getElementById('main_phone').value = data.main_phone || '';
  document.getElementById('contact_email').value = data.contact_email || '';
  document.getElementById('address').value = data.address || '';
  document.getElementById('work_from').value = data.work_from || '';
  document.getElementById('work_to').value = data.work_to || '';

  // Appointment
  if (data.appointment_duration) document.getElementById('appointment_duration').value = data.appointment_duration;
  if (data.notify_hours_before) document.getElementById('notify_hours_before').value = data.notify_hours_before;
  document.getElementById('max_daily_appointments').value = data.max_daily_appointments || '';
  document.getElementById('allow_prebooking_days').value = data.allow_prebooking_days || '';
  document.getElementById('allowOnlineBooking').checked = data.allow_online_booking === '1' || data.allow_online_booking === 1 || data.allow_online_booking === true;
  document.getElementById('requireConfirmation').checked = data.require_confirmation === '1' || data.require_confirmation === 1 || data.require_confirmation === true;

  // Security
  document.getElementById('twoFactorAuth').checked = data.security_two_factor === '1' || data.security_two_factor === 1 || data.security_two_factor === true;
  document.getElementById('sessionTimeout').checked = data.security_session_timeout_enabled === '1' || data.security_session_timeout_enabled === 1 || data.security_session_timeout_enabled === true;
  document.getElementById('session_duration_minutes').value = data.session_duration_minutes || '';
}

function formToJSON(form) {
  const fd = new FormData(form);
  const obj = {};
  fd.forEach((v, k) => { obj[k] = v; });
  // Checkboxes: ensure included when checked
  form.querySelectorAll('input[type="checkbox"]').forEach(cb => {
    obj[cb.name] = cb.checked ? '1' : '0';
  });
  return obj;
}

function saveSettings(data) {
  return fetch("{{ route('admin.settings.save') }}", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': csrfToken,
      'Accept': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(r => r.json());
}

// Load current values on page load
fetch("{{ route('admin.settings.data') }}")
  .then(r => r.json())
  .then(fillValues)
  .catch(() => {});

document.getElementById('generalSettingsForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const data = formToJSON(e.target);
  saveSettings(data).then(() => alert('تم حفظ الإعدادات العامة بنجاح')).catch(() => alert('تعذر الحفظ'));
});

document.getElementById('appointmentSettingsForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const data = formToJSON(e.target);
  saveSettings(data).then(() => alert('تم حفظ إعدادات المواعيد بنجاح')).catch(() => alert('تعذر الحفظ'));
});

document.getElementById('saveSecuritySettings').addEventListener('click', function() {
  const payload = {
    security_two_factor: document.getElementById('twoFactorAuth').checked ? '1' : '0',
    security_session_timeout_enabled: document.getElementById('sessionTimeout').checked ? '1' : '0',
    session_duration_minutes: document.getElementById('session_duration_minutes').value || null,
  };
  saveSettings(payload).then(() => alert('تم حفظ إعدادات الأمان بنجاح')).catch(() => alert('تعذر الحفظ'));
});
</script>
@endsection