@extends('layouts.app')
@section('title', __('dashboard.sales_focus_settings_title'))
@section('page_heading', __('dashboard.sales_focus_settings_title'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
<a href="{{ route('dashboard.settings.general') }}" class="app-btn app-btn--secondary app-btn--sm">
    <i class="fa-solid fa-arrow-right"></i> رجوع
</a>
</div>

<form method="POST" action="{{ route('dashboard.sales-focus-settings.update') }}">
@csrf

{{-- Time Windows --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);margin-bottom:1.25rem">
    <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
        <i class="fa-solid fa-clock" style="color:var(--c-primary);margin-inline-end:.4rem"></i>نوافذ الوقت
    </div>
    <div class="kpi-grid-3" style="padding:1.25rem">

        @foreach([
            ['recent_reservations_minutes',       $reservationsWindowMinutes,       'fa-solid fa-calendar-check', '#eff6ff','#2563eb', 'آخر الحجوزات',       'عرض حجوزات المستخدم التي أنشأها خلال هذه المدة'],
            ['recent_sales_minutes',              $salesWindowMinutes,              'fa-solid fa-cart-shopping',  '#f0fdf4','#16a34a', 'آخر المبيعات',        'عرض مبيعات المستخدم التي أنشأها خلال هذه المدة'],
            ['recent_embroidery_orders_minutes',  $embroideryOrdersWindowMinutes,   'fa-solid fa-star',           '#fffbeb','#d97706', 'آخر طلبات التطريز',  'عرض طلبات التطريز التي أنشأها المستخدم خلال هذه المدة'],
        ] as [$name,$val,$ic,$bg,$cl,$lbl,$desc])
        <div style="background:var(--surface-50);border:1px solid var(--border);border-radius:12px;padding:1.25rem">
            <div style="display:flex;align-items:center;gap:.625rem;margin-bottom:.875rem">
                <div style="width:36px;height:36px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0">
                    <i class="{{ $ic }}"></i>
                </div>
                <div>
                    <div style="font-size:.85rem;font-weight:800;color:var(--text-primary)">{{ $lbl }}</div>
                    <div style="font-size:.7rem;color:var(--text-muted)">{{ $desc }}</div>
                </div>
            </div>
            <div style="display:flex;align-items:center;gap:.5rem">
                <input type="number" min="1" max="1440" name="{{ $name }}" class="app-input"
                       value="{{ old($name, $val) }}" style="flex:1">
                <span style="font-size:.78rem;font-weight:700;color:var(--text-muted);white-space:nowrap">دقيقة</span>
            </div>
            @error($name)<div class="app-field-error">{{ $message }}</div>@enderror
        </div>
        @endforeach

    </div>
</div>

{{-- Security --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);margin-bottom:1.25rem">
    <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
        <i class="fa-solid fa-shield-halved" style="color:#7c3aed;margin-inline-end:.4rem"></i>الأمان
    </div>
    <div style="padding:1.25rem">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.25rem;background:var(--surface-50);border:1px solid var(--border);border-radius:12px">
            <div style="display:flex;align-items:center;gap:.875rem">
                <div style="width:40px;height:40px;border-radius:10px;background:#faf5ff;color:#7c3aed;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0">
                    <i class="fa-solid fa-lock"></i>
                </div>
                <div>
                    <div style="font-size:.875rem;font-weight:800;color:var(--text-primary)">قفل تأمين الخروج</div>
                    <div style="font-size:.75rem;color:var(--text-muted);margin-top:.15rem">عند التفعيل يظهر قفل داخل شاشة التركيز يتطلب كلمة سر الإدارة للخروج</div>
                </div>
            </div>
            <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;flex-shrink:0">
                <input type="hidden" name="exit_lock_enabled" value="0">
                <input type="checkbox" name="exit_lock_enabled" value="1" id="exit_lock_enabled"
                       @checked(old('exit_lock_enabled', $exitLockEnabled))
                       style="width:18px;height:18px;cursor:pointer;accent-color:var(--c-primary)">
                <span style="font-size:.82rem;font-weight:700;color:var(--text-primary)">تفعيل</span>
            </label>
        </div>
    </div>
</div>

{{-- Actions --}}
<div style="display:flex;justify-content:flex-end;gap:.75rem">
    <a href="{{ route('dashboard.settings.general') }}" class="app-btn app-btn--secondary">رجوع</a>
    <button type="submit" class="app-btn app-btn--primary">
        <i class="fa-solid fa-check me-1"></i>حفظ الإعدادات
    </button>
</div>

</form>
@endsection