@extends('layouts.app')
@section('title', isset($schedule) ? 'تعديل جدول الورديات - DOTS HR Pro' : 'إنشاء جدول ورديات - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ isset($schedule) ? 'تعديل جدول الورديات' : 'إنشاء جدول ورديات جديد' }}</h1>
        <p class="page-subtitle">{{ isset($schedule) ? 'تعديل بيانات الجدول وتوزيع الورديات' : 'حدد الفترة والموظفين ووزّع الورديات' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('shift-schedules.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

@if($errors->any())
<div style="background: var(--danger-light); border: 1px solid var(--danger); padding: 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; color: var(--danger)">
    <ul style="margin:0; padding-right: 1.2rem">
        @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
    </ul>
</div>
@endif

<form method="POST" action="{{ isset($schedule) ? route('shift-schedules.update', $schedule->id) : route('shift-schedules.store') }}" id="scheduleForm">
    @csrf
    @if(isset($schedule)) @method('PUT') @endif

    <div class="card" style="margin-bottom: 1.5rem">
        <div class="card-header"><h3><i class="fas fa-info-circle"></i> بيانات الجدول</h3></div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">اسم الجدول</label>
                    <input type="text" name="name" value="{{ old('name', $schedule->name ?? '') }}" class="form-input" placeholder="مثال: جدول شهر سبتمبر - قسم تقنية المعلومات" required>
                </div>
                <div class="form-group">
                    <label class="form-label">القسم</label>
                    <select name="department_id" id="departmentSelect" class="form-select">
                        <option value="">كل الأقسام</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('department_id', $schedule->department_id ?? '') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">تاريخ البداية</label>
                    <input type="date" name="start_date" id="startDate" value="{{ old('start_date', isset($schedule) ? $schedule->start_date->format('Y-m-d') : '') }}" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label required">تاريخ النهاية</label>
                    <input type="date" name="end_date" id="endDate" value="{{ old('end_date', isset($schedule) ? $schedule->end_date->format('Y-m-d') : '') }}" class="form-input" required>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-textarea" rows="2">{{ old('notes', $schedule->notes ?? '') }}</textarea>
            </div>
        </div>
    </div>

    <div class="card" style="margin-bottom: 1.5rem">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem">
            <h3><i class="fas fa-th"></i> توزيع الورديات</h3>
            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
                <select id="bulkShiftSelect" class="form-select" style="width: auto; min-width: 160px">
                    <option value="">اختر وردية</option>
                    @foreach($workShifts as $shift)
                        <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                    @endforeach
                    <option value="day_off">إجازة</option>
                </select>
                <button type="button" id="applyAllBtn" class="btn btn-secondary" title="تطبيق الوردية المحددة على كل الخلايا"><i class="fas fa-fill-drip"></i> تطبيق على الكل</button>
                <button type="button" id="applyWeekBtn" class="btn btn-secondary" title="تطبيق نمط الأسبوع الأول على بقية الفترة"><i class="fas fa-redo"></i> تطبيق نمط أسبوعي</button>
            </div>
        </div>
        <div class="card-body" style="padding: 0">
            <div id="gridPlaceholder" style="padding: 2rem; text-align: center; color: var(--text-muted)">
                <i class="fas fa-calendar-plus" style="font-size: 2rem; margin-bottom: 0.5rem; display: block"></i>
                حدد تاريخ البداية والنهاية لعرض جدول التوزيع
            </div>
            <div id="gridContainer" style="display: none; overflow-x: auto"></div>
        </div>
    </div>

    <div class="form-actions" style="margin-top: 1rem">
        <button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-save"></i> {{ isset($schedule) ? 'حفظ التعديلات' : 'حفظ الجدول' }}</button>
        <a href="{{ route('shift-schedules.index') }}" class="btn btn-ghost btn-lg">إلغاء</a>
    </div>
</form>

<style>
.shift-grid { border-collapse: collapse; width: 100%; min-width: 600px; }
.shift-grid th, .shift-grid td { border: 1px solid var(--border); padding: 0.35rem; text-align: center; font-size: 0.82rem; vertical-align: middle; }
.shift-grid thead th { background: var(--surface); position: sticky; top: 0; z-index: 2; padding: 0.5rem 0.35rem; white-space: nowrap; }
.shift-grid thead th.date-header { min-width: 90px; }
.shift-grid thead th.emp-header { position: sticky; right: 0; z-index: 3; background: var(--surface); min-width: 150px; text-align: right; padding-right: 0.75rem; }
.shift-grid tbody td.emp-cell { position: sticky; right: 0; z-index: 1; background: var(--surface); text-align: right; padding-right: 0.75rem; font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.shift-grid tbody td.entry-cell { padding: 0.15rem; }
.shift-grid .cell-select { width: 100%; border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.25rem; font-size: 0.78rem; background: #fff; cursor: pointer; text-align: center; }
.shift-grid .cell-select.is-day-off { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 5px, #e8e8e8 5px, #e8e8e8 10px); color: var(--text-muted); font-weight: 600; }
.shift-grid .cell-select.has-shift { background: var(--primary-light); color: var(--primary); font-weight: 500; }
.shift-grid .friday-col { background: rgba(var(--danger-rgb, 220,53,69), 0.04); }
.day-name { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startDateEl   = document.getElementById('startDate');
    const endDateEl     = document.getElementById('endDate');
    const deptSelect    = document.getElementById('departmentSelect');
    const gridContainer = document.getElementById('gridContainer');
    const gridPlaceholder = document.getElementById('gridPlaceholder');
    const bulkSelect    = document.getElementById('bulkShiftSelect');

    const workShifts = @json($workShifts->map(fn($s) => ['id' => $s->id, 'name' => $s->name])->values());
    const allEmployees = @json($employees->map(fn($e) => ['id' => $e->id, 'name' => $e->full_name, 'department_id' => $e->department_id])->values());
    const existingEntries = @json($existingEntries ?? []);

    const dayNames = ['الأحد','الإثنين','الثلاثاء','الأربعاء','الخميس','الجمعة','السبت'];

    function getDates(start, end) {
        const dates = [];
        let current = new Date(start);
        const last = new Date(end);
        while (current <= last) {
            dates.push(new Date(current));
            current.setDate(current.getDate() + 1);
        }
        return dates;
    }

    function formatDate(d) {
        return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
    }

    function buildGrid() {
        const startDate = startDateEl.value;
        const endDate = endDateEl.value;
        if (!startDate || !endDate || startDate > endDate) {
            gridContainer.style.display = 'none';
            gridPlaceholder.style.display = 'block';
            return;
        }

        const deptId = deptSelect.value;
        const employees = deptId ? allEmployees.filter(e => e.department_id == deptId) : [...allEmployees];
        const dates = getDates(startDate, endDate);

        if (employees.length === 0) {
            gridContainer.innerHTML = '<div style="padding:2rem;text-align:center;color:var(--text-muted)"><i class="fas fa-users" style="font-size:2rem;display:block;margin-bottom:0.5rem"></i>لا يوجد موظفون في هذا القسم</div>';
            gridContainer.style.display = 'block';
            gridPlaceholder.style.display = 'none';
            return;
        }

        if (dates.length > 62) {
            gridContainer.innerHTML = '<div style="padding:2rem;text-align:center;color:var(--warning)"><i class="fas fa-exclamation-triangle" style="font-size:2rem;display:block;margin-bottom:0.5rem"></i>الفترة طويلة جداً (أكثر من شهرين). يرجى تقليلها.</div>';
            gridContainer.style.display = 'block';
            gridPlaceholder.style.display = 'none';
            return;
        }

        let html = '<table class="shift-grid"><thead><tr><th class="emp-header">الموظف</th>';
        dates.forEach(d => {
            const isFriday = d.getDay() === 5;
            html += '<th class="date-header' + (isFriday ? ' friday-col' : '') + '">' +
                    String(d.getDate()).padStart(2,'0') + '/' + String(d.getMonth()+1).padStart(2,'0') +
                    '<span class="day-name">' + dayNames[d.getDay()] + '</span></th>';
        });
        html += '</tr></thead><tbody>';

        let entryIndex = 0;
        employees.forEach(emp => {
            html += '<tr><td class="emp-cell">' + emp.name + '</td>';
            dates.forEach(d => {
                const dateStr = formatDate(d);
                const key = emp.id + '-' + dateStr;
                const existing = existingEntries[key] || null;
                const isFriday = d.getDay() === 5;

                let selectedVal = '';
                let cellClass = '';
                if (existing) {
                    if (existing.is_day_off) {
                        selectedVal = 'day_off';
                        cellClass = 'is-day-off';
                    } else if (existing.work_shift_id) {
                        selectedVal = existing.work_shift_id;
                        cellClass = 'has-shift';
                    }
                }

                html += '<td class="entry-cell' + (isFriday ? ' friday-col' : '') + '">';
                html += '<select class="cell-select' + (cellClass ? ' ' + cellClass : '') + '" ' +
                        'data-emp="' + emp.id + '" data-date="' + dateStr + '" data-idx="' + entryIndex + '" ' +
                        'onchange="cellChanged(this)">';
                html += '<option value="">—</option>';
                workShifts.forEach(s => {
                    html += '<option value="' + s.id + '"' + (selectedVal == s.id ? ' selected' : '') + '>' + s.name + '</option>';
                });
                html += '<option value="day_off"' + (selectedVal === 'day_off' ? ' selected' : '') + '>إجازة</option>';
                html += '</select></td>';
                entryIndex++;
            });
            html += '</tr>';
        });

        html += '</tbody></table>';
        gridContainer.innerHTML = html;
        gridContainer.style.display = 'block';
        gridPlaceholder.style.display = 'none';
    }

    window.cellChanged = function(select) {
        select.className = 'cell-select';
        if (select.value === 'day_off') {
            select.classList.add('is-day-off');
        } else if (select.value) {
            select.classList.add('has-shift');
        }
    };

    // Apply bulk shift to all cells
    document.getElementById('applyAllBtn').addEventListener('click', function() {
        const val = bulkSelect.value;
        if (!val) { alert('اختر وردية أولاً'); return; }
        document.querySelectorAll('.cell-select').forEach(sel => {
            sel.value = val;
            cellChanged(sel);
        });
    });

    // Apply weekly pattern: copy first 7 days pattern across the range
    document.getElementById('applyWeekBtn').addEventListener('click', function() {
        const rows = gridContainer.querySelectorAll('tbody tr');
        rows.forEach(row => {
            const cells = row.querySelectorAll('.cell-select');
            if (cells.length <= 7) return;
            const pattern = [];
            for (let i = 0; i < 7 && i < cells.length; i++) {
                pattern.push(cells[i].value);
            }
            for (let i = 7; i < cells.length; i++) {
                cells[i].value = pattern[i % 7];
                cellChanged(cells[i]);
            }
        });
    });

    startDateEl.addEventListener('change', buildGrid);
    endDateEl.addEventListener('change', buildGrid);
    deptSelect.addEventListener('change', buildGrid);

    // Build on load if editing
    @if(isset($schedule))
        buildGrid();
    @endif

    // On submit, collect entries into hidden inputs
    document.getElementById('scheduleForm').addEventListener('submit', function(e) {
        // Remove old hidden inputs
        document.querySelectorAll('.entry-hidden').forEach(el => el.remove());

        const selects = document.querySelectorAll('.cell-select');
        let idx = 0;
        selects.forEach(sel => {
            if (!sel.value) return;
            const empId = sel.dataset.emp;
            const date = sel.dataset.date;
            const isDayOff = sel.value === 'day_off';
            const shiftId = isDayOff ? '' : sel.value;

            const form = document.getElementById('scheduleForm');
            function addHidden(name, value) {
                const inp = document.createElement('input');
                inp.type = 'hidden'; inp.name = name; inp.value = value;
                inp.className = 'entry-hidden';
                form.appendChild(inp);
            }

            addHidden('entries[' + idx + '][employee_id]', empId);
            addHidden('entries[' + idx + '][date]', date);
            if (shiftId) addHidden('entries[' + idx + '][work_shift_id]', shiftId);
            addHidden('entries[' + idx + '][is_day_off]', isDayOff ? '1' : '0');
            idx++;
        });
    });
});
</script>
@endsection