@extends('layouts.app')
@section('title', 'الدخول الموحد SSO')

@push('styles')
<style>
.sso-wrapper {
    direction: rtl;
    font-family: 'Tajawal', 'Cairo', Tahoma, Arial, sans-serif;
    color: #1B2A4A;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.sso-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.sso-header h1 {
    font-size: 24px;
    font-weight: 800;
    color: #1B2A4A;
    margin: 0;
}

.sso-alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
}

.sso-alert-success {
    background: #e9f9ee;
    color: #1a7f3c;
    border: 1px solid #b9ecc9;
}

.sso-alert-error {
    background: #fdeceb;
    color: #b3271b;
    border: 1px solid #f5c6c1;
}

.sso-card {
    background: #fff;
    border: 1px solid #e5e7ee;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.05);
    margin-bottom: 20px;
}

.sso-card h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1B2A4A;
    margin: 0 0 20px;
}

.sso-form-group {
    margin-bottom: 20px;
}

.sso-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.sso-form-group input,
.sso-form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s;
}

.sso-form-group input:focus,
.sso-form-group select:focus {
    outline: none;
    border-color: #E8502F;
    box-shadow: 0 0 0 3px rgba(232, 80, 47, 0.1);
}

.sso-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .sso-form-row {
        grid-template-columns: 1fr;
    }
    .sso-providers-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.sso-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sso-toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    display: inline-block;
}

.sso-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sso-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.sso-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    right: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.sso-toggle-switch input:checked + .sso-toggle-slider {
    background: #10b981;
}

.sso-toggle-switch input:checked + .sso-toggle-slider::before {
    transform: translateX(-24px);
}

.sso-providers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sso-provider-card {
    border: 2px solid #e5e7ee;
    border-radius: 12px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.sso-provider-card:hover,
.sso-provider-card.sso-selected {
    border-color: #E8502F;
    background: #fef7f5;
}

.sso-provider-card i {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
    color: #1B2A4A;
}

.sso-provider-card span {
    font-size: 13px;
    font-weight: 600;
    color: #1B2A4A;
}

.sso-btn-submit {
    background: #E8502F;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(232, 80, 47, 0.25);
    transition: background 0.15s ease;
}

.sso-btn-submit:hover {
    background: #d1431f;
}

.sso-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
</style>
@endpush

@section('content')
<div class="sso-wrapper">
    <div class="sso-header">
        <h1><i class="fas fa-key" style="color:#E8502F;margin-left:8px"></i> الدخول الموحد (SSO)</h1>
    </div>

    @if(session('success'))
        <div class="sso-alert sso-alert-success"><i class="fas fa-check-circle" style="margin-left:6px"></i> {{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="sso-alert sso-alert-error"><i class="fas fa-exclamation-circle" style="margin-left:6px"></i> {{ session('error') }}</div>
    @endif

    @if($errors->any())
        <div class="sso-alert sso-alert-error">
            <i class="fas fa-exclamation-circle" style="margin-left:6px"></i> {{ $errors->first() }}
        </div>
    @endif

    <form action="/sso/update" method="POST">
        @csrf

        <div class="sso-card">
            <div class="sso-toggle-row">
                <div>
                    <h2 style="margin:0"><i class="fas fa-power-off" style="margin-left:6px;color:#E8502F"></i> تفعيل الدخول الموحد</h2>
                    <p style="color:#6b7280;font-size:13px;margin:6px 0 0">تتيح ميزة الدخول الموحد للموظفين تسجيل الدخول باستخدام حساباتهم المؤسسية</p>
                </div>
                <label class="sso-toggle-switch">
                    <input type="checkbox" name="is_enabled" value="1" {{ ($settings->is_enabled ?? false) ? 'checked' : '' }}>
                    <span class="sso-toggle-slider"></span>
                </label>
            </div>
        </div>

        <div class="sso-card">
            <h2><i class="fas fa-building" style="margin-left:6px;color:#E8502F"></i> مزود الخدمة</h2>
            <div class="sso-providers-grid">
                @php
                    $providers = [
                        'google' => ['fab fa-google', 'Google'],
                        'azure'  => ['fab fa-microsoft', 'Azure AD'],
                        'okta'   => ['fas fa-shield-alt', 'Okta'],
                        'saml'   => ['fas fa-lock', 'SAML'],
                    ];
                @endphp

                @foreach($providers as $val => $info)
                    <label class="sso-provider-card {{ ($settings->provider ?? '') == $val ? 'sso-selected' : '' }}"
                           onclick="document.querySelectorAll('.sso-provider-card').forEach(c=>c.classList.remove('sso-selected'));this.classList.add('sso-selected')">
                        <input type="radio" name="provider" value="{{ $val }}"
                            {{ ($settings->provider ?? '') == $val ? 'checked' : '' }}
                            style="display:none">
                        <i class="{{ $info[0] }}"></i>
                        <span>{{ $info[1] }}</span>
                    </label>
                @endforeach
            </div>
        </div>

        <div class="sso-card">
            <h2><i class="fas fa-plug" style="margin-left:6px;color:#E8502F"></i> إعدادات الاتصال</h2>

            <div class="sso-form-row">
                <div class="sso-form-group">
                    <label>Client ID (معرف العميل)</label>
                    <input type="text" name="client_id" value="{{ $settings->client_id ?? '' }}" dir="ltr" placeholder="أدخل معرف العميل">
                </div>
                <div class="sso-form-group">
                    <label>Client Secret (المفتاح السري)</label>
                    <input type="password" name="client_secret" value="{{ $settings->client_secret ?? '' }}" dir="ltr" placeholder="أدخل المفتاح السري">
                </div>
            </div>

            <div class="sso-form-row">
                <div class="sso-form-group">
                    <label>Tenant ID (معرف المستأجر)</label>
                    <input type="text" name="tenant_id" value="{{ $settings->tenant_id ?? '' }}" dir="ltr" placeholder="اختياري — لـ Azure AD">
                    <div class="sso-hint">مطلوب فقط عند استخدام Azure AD</div>
                </div>
                <div class="sso-form-group">
                    <label>النطاق (Domain)</label>
                    <input type="text" name="domain" value="{{ $settings->domain ?? '' }}" dir="ltr" placeholder="example.com">
                    <div class="sso-hint">نطاق الشركة للتحقق من البريد الإلكتروني</div>
                </div>
            </div>

            <div class="sso-form-group">
                <label>Metadata URL (رابط البيانات الوصفية)</label>
                <input type="url" name="metadata_url" value="{{ $settings->metadata_url ?? '' }}" dir="ltr" placeholder="https://...">
                <div class="sso-hint">مطلوب فقط عند استخدام SAML</div>
            </div>
        </div>

        <button type="submit" class="sso-btn-submit">
            <i class="fas fa-save"></i> حفظ الإعدادات
        </button>
    </form>
</div>
@endsection