@extends('layouts.app')
@section('title', 'مواعيد الدوام - DOTS HR Pro')

@push('styles')
<style>
.shift-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: all 0.2s;
}
.shift-card:hover { border-color: #1B2A4A; box-shadow: 0 4px 16px rgba(27,42,74,0.08); }
.shift-card.is-default { border-color: #22c55e; border-width: 2px; }
.shift-card.is-default::after {
    content: 'الافتراضي';
    position: absolute;
    top: -10px;
    right: 16px;
    background: #22c55e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
}
.shift-time-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}
.shift-time {
    text-align: center;
    flex: 1;
}
.shift-time .label { font-size: 11px; color: #94a3b8; margin-bottom: 2px; }
.shift-time .time { font-size: 20px; font-weight: 800; color: #1B2A4A; direction: ltr; }
.shift-time-arrow {
    color: #E8502F;
    font-size: 18px;
}
.shift-hours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: #64748b;
    margin-top: 8px;
}
.shift-hours strong { color: #1B2A4A; font-weight: 700; font-size: 16px; }
.shift-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    justify-content: center;
}
.shift-actions .btn { font-size: 13px; padding: 6px 14px; }
.shift-emp-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
}
.shifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
    background: #fff;
    border-radius: 16px;
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-header {
    padding: 20px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 { margin: 0; font-size: 18px; color: #1B2A4A; }
.modal-close {
    width: 32px; height: 32px;
    border: none; background: #f1f5f9;
    border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 16px;
    transition: all 0.2s;
}
.modal-close:hover { background: #fee2e2; color: #ef4444; }
.modal-body { padding: 20px 24px 24px; }

.time-input-group {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}
.time-input-group .form-group { flex: 1; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-clock" style="color:#E8502F;"></i> مواعيد الدوام</h1>
        <p class="page-subtitle">إدارة مواعيد الدوام الرسمية للشركة وتحديد ساعات العمل</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('settings.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع للإعدادات</a>
        <button class="btn btn-primary" onclick="openAddModal()"><i class="fas fa-plus"></i> إضافة دوام جديد</button>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> {{ session('error') }}</div>
@endif

@if($shifts->count() > 0)
<div class="shifts-grid">
    @foreach($shifts as $shift)
    <div class="shift-card {{ $shift->is_default ? 'is-default' : '' }}">
        <h4 style="margin:0;font-size:16px;font-weight:700;color:#1B2A4A;text-align:center">
            <i class="fas fa-business-time" style="color:#E8502F;margin-left:6px"></i>
            {{ $shift->name }}
        </h4>

        <div class="shift-time-block">
            <div class="shift-time">
                <div class="label">بداية الدوام</div>
                <div class="time">{{ \Carbon\Carbon::parse($shift->start_time)->format('h:i A') }}</div>
            </div>
            <div class="shift-time-arrow"><i class="fas fa-arrow-left"></i></div>
            <div class="shift-time">
                <div class="label">نهاية الدوام</div>
                <div class="time">{{ \Carbon\Carbon::parse($shift->end_time)->format('h:i A') }}</div>
            </div>
        </div>

        <div class="shift-hours">
            <i class="fas fa-hourglass-half" style="color:#E8502F"></i>
            <span>عدد الساعات: <strong>{{ $shift->total_hours }}</strong> ساعة</span>
        </div>

        <div class="shift-emp-count">
            <i class="fas fa-users"></i>
            {{ $shift->employees()->count() }} موظف مرتبط
        </div>

        <div class="shift-actions">
            <button class="btn btn-ghost btn-sm" onclick="openEditModal({{ json_encode($shift) }})">
                <i class="fas fa-edit"></i> تعديل
            </button>
            @if($shift->employees()->count() === 0)
            <form method="POST" action="{{ route('settings.shifts.destroy', $shift->id) }}" style="display:inline"
                  onsubmit="return confirm('هل أنت متأكد من حذف هذا الدوام؟')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-sm" style="color:#ef4444">
                    <i class="fas fa-trash"></i> حذف
                </button>
            </form>
            @endif
        </div>
    </div>
    @endforeach
</div>
@else
<div class="card">
    <div class="card-body" style="text-align:center;padding:48px">
        <i class="fas fa-clock" style="font-size:3rem;color:#cbd5e1;margin-bottom:16px;display:block"></i>
        <h3 style="color:#1B2A4A;margin:0 0 8px">لا توجد مواعيد دوام</h3>
        <p style="color:#64748b;margin:0 0 20px">ابدأ بإضافة موعد الدوام الرسمي للشركة</p>
        <button class="btn btn-primary" onclick="openAddModal()"><i class="fas fa-plus"></i> إضافة دوام جديد</button>
    </div>
</div>
@endif

{{-- نصيحة --}}
<div class="card" style="background:#fffbeb;border-color:#fbbf24">
    <div class="card-body" style="display:flex;gap:12px;align-items:flex-start">
        <i class="fas fa-lightbulb" style="color:#f59e0b;font-size:20px;margin-top:2px"></i>
        <div>
            <strong style="color:#92400e">ملاحظة:</strong>
            <span style="color:#78350f">مواعيد الدوام تُستخدم كمرجع لحساب الحضور والانصراف والتأخير والوقت الإضافي. يمكنك تعيين دوام محدد لكل موظف من صفحة تعديل بيانات الموظف. الدوام المحدد كـ "افتراضي" يُطبق على الموظفين الذين لم يتم تعيين دوام خاص لهم.</span>
        </div>
    </div>
</div>

{{-- Modal إضافة/تعديل --}}
<div class="modal-overlay" id="shiftModal">
    <div class="modal-box">
        <div class="modal-header">
            <h3 id="modalTitle"><i class="fas fa-clock" style="color:#E8502F;margin-left:8px"></i> إضافة دوام جديد</h3>
            <button class="modal-close" onclick="closeModal()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <form id="shiftForm" method="POST" action="{{ route('settings.shifts.store') }}">
                @csrf
                <div id="methodField"></div>

                <div class="form-group" style="margin-bottom:16px">
                    <label class="form-label">اسم الدوام <span style="color:#ef4444">*</span></label>
                    <input type="text" name="name" id="shiftName" class="form-input" placeholder="مثال: الدوام الصباحي" required>
                </div>

                <div class="time-input-group" style="margin-bottom:16px">
                    <div class="form-group" style="margin-bottom:0">
                        <label class="form-label">وقت البداية <span style="color:#ef4444">*</span></label>
                        <input type="time" name="start_time" id="shiftStart" class="form-input" required onchange="calcHours()">
                    </div>
                    <div class="form-group" style="margin-bottom:0">
                        <label class="form-label">وقت النهاية <span style="color:#ef4444">*</span></label>
                        <input type="time" name="end_time" id="shiftEnd" class="form-input" required onchange="calcHours()">
                    </div>
                </div>

                <div class="form-group" style="margin-bottom:16px">
                    <label class="form-label">عدد ساعات العمل <span style="color:#ef4444">*</span></label>
                    <input type="number" name="total_hours" id="shiftHours" class="form-input" step="0.5" min="1" max="24" value="8" required>
                    <small style="color:#64748b">يتم حسابها تلقائياً أو أدخلها يدوياً (بعد خصم ساعة الراحة مثلاً)</small>
                </div>

                <div class="form-group" style="margin-bottom:20px">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
                        <input type="checkbox" name="is_default" id="shiftDefault" value="1" style="width:18px;height:18px">
                        <span class="form-label" style="margin:0">تعيين كدوام افتراضي</span>
                    </label>
                    <small style="color:#64748b">الدوام الافتراضي يُطبق على جميع الموظفين الذين لم يتم تحديد دوام خاص لهم</small>
                </div>

                <div class="form-actions" style="display:flex;gap:8px;justify-content:flex-end">
                    <button type="button" class="btn btn-ghost" onclick="closeModal()">إلغاء</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn"><i class="fas fa-save"></i> حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openAddModal() {
    document.getElementById('modalTitle').innerHTML = '<i class="fas fa-plus-circle" style="color:#E8502F;margin-left:8px"></i> إضافة دوام جديد';
    document.getElementById('shiftForm').action = '{{ route("settings.shifts.store") }}';
    document.getElementById('methodField').innerHTML = '';
    document.getElementById('shiftName').value = '';
    document.getElementById('shiftStart').value = '';
    document.getElementById('shiftEnd').value = '';
    document.getElementById('shiftHours').value = '8';
    document.getElementById('shiftDefault').checked = false;
    document.getElementById('submitBtn').innerHTML = '<i class="fas fa-save"></i> حفظ';
    document.getElementById('shiftModal').classList.add('active');
}

function openEditModal(shift) {
    document.getElementById('modalTitle').innerHTML = '<i class="fas fa-edit" style="color:#E8502F;margin-left:8px"></i> تعديل الدوام';
    document.getElementById('shiftForm').action = '/settings/shifts/' + shift.id;
    document.getElementById('methodField').innerHTML = '<input type="hidden" name="_method" value="PUT">';
    document.getElementById('shiftName').value = shift.name;
    document.getElementById('shiftStart').value = shift.start_time ? shift.start_time.substring(0, 5) : '';
    document.getElementById('shiftEnd').value = shift.end_time ? shift.end_time.substring(0, 5) : '';
    document.getElementById('shiftHours').value = shift.total_hours;
    document.getElementById('shiftDefault').checked = shift.is_default ? true : false;
    document.getElementById('submitBtn').innerHTML = '<i class="fas fa-save"></i> تحديث';
    document.getElementById('shiftModal').classList.add('active');
}

function closeModal() {
    document.getElementById('shiftModal').classList.remove('active');
}

function calcHours() {
    var start = document.getElementById('shiftStart').value;
    var end = document.getElementById('shiftEnd').value;
    if (start && end) {
        var s = start.split(':').map(Number);
        var e = end.split(':').map(Number);
        var startMin = s[0] * 60 + s[1];
        var endMin = e[0] * 60 + e[1];
        if (endMin <= startMin) endMin += 24 * 60; // التعامل مع الدوام الليلي
        var diff = (endMin - startMin) / 60;
        document.getElementById('shiftHours').value = diff.toFixed(1);
    }
}

// إغلاق المودال بالنقر خارجه
document.getElementById('shiftModal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});
</script>
@endsection