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

@push('styles')
<style>
    .sss-page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
    .sss-page-header h1 { font-size:1.5rem; font-weight:700; color:#1B2A4A; margin:0; }
    .sss-card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:1.5rem; max-width:700px; }
    .sss-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
    .sss-detail-item { }
    .sss-detail-item.full { grid-column:1/-1; }
    .sss-detail-item label { display:block; font-size:0.8rem; font-weight:600; color:#6b7280; margin-bottom:0.25rem; }
    .sss-detail-item span { font-size:0.95rem; color:#1B2A4A; font-weight:500; }
    .sss-btn-ghost { background:transparent; color:#6b7280; border:1px solid #d1d5db; padding:0.5rem 1.25rem; border-radius:8px; font-size:0.875rem; font-weight:500; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; }
    .sss-btn-ghost:hover { border-color:#9ca3af; color:#374151; }
    .sss-btn-primary { background:#E8502F; color:#fff; border:none; padding:0.5rem 1.25rem; border-radius:8px; font-size:0.875rem; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; }
    .sss-btn-primary:hover { background:#d4441f; }
    @media(max-width:640px) { .sss-detail-grid { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
<div class="sss-page-header">
    <h1><i class="fa-solid fa-calendar-days"></i> تفاصيل المناوبة</h1>
    <div style="display:flex;gap:0.5rem;">
        <a href="/shift-schedules/{{ $shift->id }}/edit" class="sss-btn-primary"><i class="fa-solid fa-pen"></i> تعديل</a>
        <a href="/shift-schedules" class="sss-btn-ghost"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="sss-card">
    <div class="sss-detail-grid">
        <div class="sss-detail-item"><label>اسم المناوبة</label><span>{{ $shift->name ?? '—' }}</span></div>
        <div class="sss-detail-item"><label>الحالة</label><span>{{ ($shift->is_active ?? 1) ? 'نشط' : 'غير نشط' }}</span></div>
        <div class="sss-detail-item"><label>وقت البداية</label><span>{{ $shift->start_time ?? '—' }}</span></div>
        <div class="sss-detail-item"><label>وقت النهاية</label><span>{{ $shift->end_time ?? '—' }}</span></div>
        <div class="sss-detail-item"><label>مدة الاستراحة</label><span>{{ $shift->break_duration ?? 60 }} دقيقة</span></div>
        <div class="sss-detail-item"><label>أيام العمل</label><span>{{ $shift->work_days ?? '—' }}</span></div>
        <div class="sss-detail-item full"><label>ملاحظات</label><span>{{ $shift->notes ?? '—' }}</span></div>
    </div>
</div>
@endsection