@extends('layouts.app')
@section('title', 'إضافة مناوبة جديدة')

@push('styles')
<style>
    .ssc-page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
    .ssc-page-header h1 { font-size:1.5rem; font-weight:700; color:#1B2A4A; margin:0; }
    .ssc-page-header h1 i { margin-left:8px; }
    .ssc-card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:1.5rem; max-width:700px; }
    .ssc-form-group { margin-bottom:1.25rem; }
    .ssc-form-group label { display:block; font-size:0.85rem; font-weight:600; color:#374151; margin-bottom:0.4rem; }
    .ssc-form-group select,
    .ssc-form-group input,
    .ssc-form-group textarea { width:100%; padding:0.6rem 0.75rem; border:1px solid #d1d5db; border-radius:8px; font-size:0.9rem; font-family:inherit; transition:border-color 0.15s; }
    .ssc-form-group select:focus,
    .ssc-form-group input:focus,
    .ssc-form-group textarea:focus { outline:none; border-color:#E8502F; box-shadow:0 0 0 3px rgba(232,80,47,0.1); }
    .ssc-form-group textarea { resize:vertical; min-height:80px; }
    .ssc-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .ssc-days-row { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.4rem; }
    .ssc-day-check { display:flex; align-items:center; gap:0.3rem; background:#f3f4f6; padding:0.4rem 0.75rem; border-radius:8px; font-size:0.85rem; cursor:pointer; transition:background 0.15s; }
    .ssc-day-check:has(input:checked) { background:#E8502F; color:#fff; }
    .ssc-day-check input { display:none; }
    .ssc-btn-primary { background:#E8502F; color:#fff; border:none; padding:0.6rem 1.5rem; border-radius:8px; font-size:0.9rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:0.5rem; transition:background 0.15s; }
    .ssc-btn-primary:hover { background:#d4441f; }
    .ssc-btn-ghost { background:transparent; color:#6b7280; border:1px solid #d1d5db; padding:0.6rem 1.25rem; border-radius:8px; font-size:0.9rem; font-weight:500; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; transition:all 0.15s; }
    .ssc-btn-ghost:hover { border-color:#9ca3af; color:#374151; }
    .ssc-form-actions { display:flex; gap:0.75rem; margin-top:1.5rem; }
    @media(max-width:640px) { .ssc-form-row { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
<div class="ssc-page-header">
    <h1><i class="fa-solid fa-calendar-days"></i> إضافة مناوبة جديدة</h1>
</div>

<div class="ssc-card">
    <form method="POST" action="/shift-schedules">
        @csrf

        <div class="ssc-form-group">
            <label>اسم المناوبة</label>
            <input type="text" name="name" required value="{{ old('name') }}" placeholder="مثال: الوردية الصباحية">
        </div>

        <div class="ssc-form-row">
            <div class="ssc-form-group">
                <label>وقت البداية</label>
                <input type="time" name="start_time" required value="{{ old('start_time', '08:00') }}">
            </div>
            <div class="ssc-form-group">
                <label>وقت النهاية</label>
                <input type="time" name="end_time" required value="{{ old('end_time', '16:00') }}">
            </div>
        </div>

        <div class="ssc-form-group">
            <label>مدة الاستراحة (بالدقائق)</label>
            <input type="number" name="break_duration" value="{{ old('break_duration', 60) }}" min="0" max="180">
        </div>

        <div class="ssc-form-group">
            <label>أيام العمل</label>
            <div class="ssc-days-row">
                <label class="ssc-day-check"><input type="checkbox" name="work_days[]" value="الأحد" checked> الأحد</label>
                <label class="ssc-day-check"><input type="checkbox" name="work_days[]" value="الإثنين" checked> الإثنين</label>
                <label class="ssc-day-check"><input type="checkbox" name="work_days[]" value="الثلاثاء" checked> الثلاثاء</label>
                <label class="ssc-day-check"><input type="checkbox" name="work_days[]" value="الأربعاء" checked> الأربعاء</label>
                <label class="ssc-day-check"><input type="checkbox" name="work_days[]" value="الخميس" checked> الخميس</label>
                <label class="ssc-day-check"><input type="checkbox" name="work_days[]" value="الجمعة"> الجمعة</label>
                <label class="ssc-day-check"><input type="checkbox" name="work_days[]" value="السبت"> السبت</label>
            </div>
        </div>

        <div class="ssc-form-group">
            <label>ملاحظات</label>
            <textarea name="notes" placeholder="ملاحظات إضافية (اختياري)">{{ old('notes') }}</textarea>
        </div>

        <div class="ssc-form-actions">
            <button type="submit" class="ssc-btn-primary"><i class="fa-solid fa-check"></i> حفظ المناوبة</button>
            <a href="/shift-schedules" class="ssc-btn-ghost"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
        </div>
    </form>
</div>
@endsection