@extends('layouts.app')

@section('content')
<div class="card">
  <div class="card-body">
    <h5 class="card-title">إضافة فترة عمل</h5>

    <form action="{{ route('periods.store') }}" method="POST">
      @csrf

      <div class="mb-3">
        <label>الموظف</label>
        <select name="employee_id" class="form-select" required>
          <option value="">اختر موظف</option>
          @foreach($employees as $emp)
            <option value="{{ $emp->id }}">{{ $emp->name }}</option>
          @endforeach
        </select>
      </div>

      <div class="row">
        <div class="col-md-4 mb-3">
          <label>تاريخ العمل</label>
          <input type="date" name="work_date" class="form-control" required value="{{ date('Y-m-d') }}">
        </div>

        <div class="col-md-4 mb-3">
          <label>بداية (ساعة:دقيقة)</label>
          <input type="time" name="start_time" class="form-control" required>
        </div>

        <div class="col-md-4 mb-3">
          <label>نهاية (ساعة:دقيقة)</label>
          <input type="time" name="end_time" class="form-control" required>
        </div>
      </div>

      <div class="mb-3">
        <label>ملاحظة (اختياري)</label>
        <textarea name="note" class="form-control" rows="2"></textarea>
      </div>

      <button class="btn btn-primary">أضف الفترة</button>
    </form>
  </div>
</div>

<hr>

<h5>قائمة الموظفين / الفترات الأخيرة</h5>
@foreach($employees as $emp)
  <div class="card mb-2">
    <div class="card-body">
      <strong>{{ $emp->name }}</strong>
      <div class="small text-muted">الفترات: {{ $emp->periods->count() }}</div>

      <ul>
        @foreach($emp->periods->sortByDesc('work_date') as $p)
          <li>
            {{ $p->work_date }} — {{ $p->start_time }} إلى {{ $p->end_time }} ({{ $p->total_minutes }} دقيقة)
            <form action="{{ route('periods.destroy', $p) }}" method="POST" style="display:inline">
              @csrf @method('DELETE')
              <button class="btn btn-sm btn-danger">حذف</button>
            </form>
          </li>
        @endforeach
      </ul>
    </div>
  </div>
@endforeach
@endsection