@extends('layouts.app')
@section('title', 'الهوية البصرية')

@push('styles')
<style>
/* ═══ Branding — br- prefix ═══ */
.br-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.br-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.br-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px}
.br-card h2{font-size:1.1rem;color:#1B2A4A;margin:0 0 20px;font-weight:700}
.br-form-group{margin-bottom:20px}
.br-form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.85rem;color:#374151}
.br-form-group input,.br-form-group select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem;box-sizing:border-box}
.br-form-group input:focus,.br-form-group select:focus{outline:none;border-color:#E8502F;box-shadow:0 0 0 3px rgba(232,80,47,.1)}
.br-form-group input[type="color"]{height:44px;padding:4px;cursor:pointer}
.br-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.br-btn-primary{background:#E8502F;color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:background .15s}
.br-btn-primary:hover{background:#d4431f}
.br-preview-header{padding:16px 24px;border-radius:8px;color:#fff;display:flex;align-items:center;gap:12px;transition:background .2s}
.br-color-swatch{width:40px;height:40px;border-radius:8px;border:2px solid #e2e8f0;display:inline-block;transition:background .2s}
.br-alert{padding:12px 20px;border-radius:8px;margin-bottom:16px;font-size:.9rem;display:flex;align-items:center;gap:8px}
.br-alert-success{background:#d1fae5;color:#065f46}
.br-alert-error{background:#fee2e2;color:#991b1b}
</style>
@endpush

@section('content')
<div class="br-header">
    <h1><i class="fas fa-palette" style="color:#E8502F;margin-left:8px"></i> الهوية البصرية</h1>
</div>

@if(session('success'))
<div class="br-alert br-alert-success">
    <i class="fa-solid fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if($errors->any())
<div class="br-alert br-alert-error">
    <i class="fa-solid fa-exclamation-circle"></i> {{ $errors->first() }}
</div>
@endif

<form action="/branding/update" method="POST" enctype="multipart/form-data">
    @csrf

    <div class="br-card">
        <h2><i class="fas fa-building" style="margin-left:6px;color:#E8502F"></i> معلومات الشركة</h2>
        <div class="br-form-group">
            <label>اسم الشركة</label>
            <input type="text" name="company_name" value="{{ $settings->company_name ?? '' }}" required placeholder="أدخل اسم الشركة">
        </div>
        <div class="br-form-group">
            <label>الشعار</label>
            <input type="file" name="logo" accept="image/png,image/jpeg,image/svg+xml">
            @if(!empty($settings->logo_path))
                <p style="margin-top:8px;font-size:.85rem;color:#64748b"><i class="fas fa-image" style="margin-left:4px"></i> الشعار الحالي: {{ basename($settings->logo_path) }}</p>
            @endif
        </div>
    </div>

    <div class="br-card">
        <h2><i class="fas fa-swatchbook" style="margin-left:6px;color:#E8502F"></i> الألوان</h2>
        <div class="br-form-row">
            <div class="br-form-group">
                <label>اللون الأساسي</label>
                <input type="color" name="primary_color" value="{{ $settings->primary_color ?? '#1B2A4A' }}" id="br-primaryColor">
            </div>
            <div class="br-form-group">
                <label>اللون الثانوي</label>
                <input type="color" name="secondary_color" value="{{ $settings->secondary_color ?? '#64748b' }}" id="br-secondaryColor">
            </div>
            <div class="br-form-group">
                <label>لون التمييز</label>
                <input type="color" name="accent_color" value="{{ $settings->accent_color ?? '#E8502F' }}" id="br-accentColor">
            </div>
        </div>
    </div>

    <div class="br-card">
        <h2><i class="fas fa-font" style="margin-left:6px;color:#E8502F"></i> الخط</h2>
        <div class="br-form-group">
            <label>عائلة الخط</label>
            <select name="font_family">
                <option value="Cairo" @if(($settings->font_family ?? '') == 'Cairo') selected @endif>Cairo</option>
                <option value="Tajawal" @if(($settings->font_family ?? '') == 'Tajawal') selected @endif>Tajawal</option>
                <option value="Almarai" @if(($settings->font_family ?? '') == 'Almarai') selected @endif>Almarai</option>
                <option value="Noto Sans Arabic" @if(($settings->font_family ?? '') == 'Noto Sans Arabic') selected @endif>Noto Sans Arabic</option>
            </select>
        </div>
    </div>

    <div class="br-card">
        <h2><i class="fas fa-image" style="margin-left:6px;color:#E8502F"></i> خلفية تسجيل الدخول</h2>
        <div class="br-form-group">
            <label>صورة الخلفية</label>
            <input type="file" name="login_background" accept="image/png,image/jpeg">
            @if(!empty($settings->login_background))
                <p style="margin-top:8px;font-size:.85rem;color:#64748b"><i class="fas fa-image" style="margin-left:4px"></i> الخلفية الحالية: {{ basename($settings->login_background) }}</p>
            @endif
        </div>
    </div>

    <div class="br-card">
        <h2><i class="fas fa-eye" style="margin-left:6px;color:#E8502F"></i> معاينة</h2>
        <div class="br-preview-header" id="br-previewHeader" style="background:{{ $settings->primary_color ?? '#1B2A4A' }}">
            <i class="fas fa-building" style="font-size:1.5rem"></i>
            <span style="font-size:1.1rem;font-weight:700">{{ $settings->company_name ?? 'اسم الشركة' }}</span>
        </div>
        <div style="margin-top:16px;display:flex;gap:12px;align-items:center">
            <div>
                <div class="br-color-swatch" id="br-swatchPrimary" style="background:{{ $settings->primary_color ?? '#1B2A4A' }}"></div>
                <div style="text-align:center;font-size:.75rem;color:#6b7280;margin-top:4px">أساسي</div>
            </div>
            <div>
                <div class="br-color-swatch" id="br-swatchSecondary" style="background:{{ $settings->secondary_color ?? '#64748b' }}"></div>
                <div style="text-align:center;font-size:.75rem;color:#6b7280;margin-top:4px">ثانوي</div>
            </div>
            <div>
                <div class="br-color-swatch" id="br-swatchAccent" style="background:{{ $settings->accent_color ?? '#E8502F' }}"></div>
                <div style="text-align:center;font-size:.75rem;color:#6b7280;margin-top:4px">تمييز</div>
            </div>
        </div>
    </div>

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

@push('scripts')
<script>
document.getElementById('br-primaryColor').addEventListener('input', function(e) {
    document.getElementById('br-previewHeader').style.background = e.target.value;
    document.getElementById('br-swatchPrimary').style.background = e.target.value;
});
document.getElementById('br-secondaryColor').addEventListener('input', function(e) {
    document.getElementById('br-swatchSecondary').style.background = e.target.value;
});
document.getElementById('br-accentColor').addEventListener('input', function(e) {
    document.getElementById('br-swatchAccent').style.background = e.target.value;
});
</script>
@endpush