@extends('layouts.app')
@section('title', 'تعديل المناوبة')

@push('styles')
<style>
    .sse-page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
    .sse-page-header h1 { font-size:1.5rem; font-weight:700; color:#1B2A4A; margin:0; }
    .sse-card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:1.5rem; max-width:700px; }
    .sse-form-group { margin-bottom:1.25rem; }
    .sse-form-group label { display:block; font-size:0.85rem; font-weight:600; color:#374151; margin-bottom:0.4rem; }
    .sse-form-group select,
    .sse-form-group input,
    .sse-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; }
    .sse-form-group select:focus,
    .sse-form-group input:focus,
    .sse-form-group textarea:focus { outline:none; border-color:#E8502F; box-shadow:0 0 0 3px rgba(232,80,47,0.1); }
    .sse-form-group textarea { resize:vertical; min-height:80px; }
    .sse-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .sse-days-row { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.4rem; }
    .sse-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; }
    .sse-day-check:has(input:checked) { background:#E8502F; color:#fff; }
    .sse-day-check input { display:none; }
    .sse-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; }
    .sse-btn-primary:hover { background:#d4441f; }
    .sse-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; }
    .sse-btn-ghost:hover { border-color:#9ca3af; color:#374151; }
    .sse-form-actions { display:flex; gap:0.75rem; margin-top:1.5rem; }
    @media(max-width:640px) { .sse-form-row { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
<div class="sse-page-header">
    <h1><i class="fa-solid fa-pen-to-square"></i> تعديل المناوبة</h1>
</div>

<div class="sse-card">
    <form method="POST" action="/shift-schedules/{{ $shift->id }}">
        @csrf
        @method('PUT')

        <div class="sse-form-group">
            <label>اسم المناوبة</label>
            <input type="text" name="name" required value="{{ old('name', $shift->name) }}">
        </div>

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

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

        <div class="sse-form-group">
            <label>الحالة</label>
            <select name="is_active">
                <option value="1" {{ ($shift->is_active ?? 1) ? 'selected' : '' }}>نشط</option>
                <option value="0" {{ !($shift->is_active ?? 1) ? 'selected' : '' }}>غير نشط</option>
            </select>
        </div>

        <div class="sse-form-group">
            <label>ملاحظات</label>
            <textarea name="notes">{{ old('notes', $shift->notes ?? '') }}</textarea>
        </div>

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