<?php
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>شبكة <?= e($facility['name_ar']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/pool-grid" class="btn btn-outline"><i data-lucide="arrow-right" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> رجوع</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<style>
.pg-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:8px;margin-bottom:16px;}
.pg-toolbar .date-nav{display:flex;align-items:center;gap:8px;}
.pg-toolbar .date-nav button{background:none;border:1px solid #D1D5DB;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;}
.pg-toolbar .date-nav button:hover{background:#F3F4F6;}
.pg-toolbar .date-nav input[type=date]{border:1px solid #D1D5DB;border-radius:6px;padding:6px 10px;font-size:14px;font-family:inherit;}
.pg-actions{display:flex;gap:8px;margin-right:auto;}
.pg-actions button{border:none;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit;}
.pg-actions button:disabled{opacity:.4;cursor:not-allowed;}
.pg-actions .btn-training{background:#DBEAFE;color:#1D4ED8;}
.pg-actions .btn-training:hover:not(:disabled){background:#BFDBFE;}
.pg-actions .btn-blocked{background:#F3F4F6;color:#374151;}
.pg-actions .btn-blocked:hover:not(:disabled){background:#E5E7EB;}
.pg-actions .btn-maintenance{background:#FEF3C7;color:#92400E;}
.pg-actions .btn-maintenance:hover:not(:disabled){background:#FDE68A;}
.pg-actions .btn-clear{background:#FEE2E2;color:#991B1B;}
.pg-actions .btn-clear:hover:not(:disabled){background:#FECACA;}
.pg-selection-info{font-size:13px;color:#6B7280;min-width:100px;text-align:center;}

.pg-wrapper{overflow-x:auto;border:1px solid #E5E7EB;border-radius:8px;background:#fff;}
.pg-table{width:100%;border-collapse:collapse;user-select:none;min-width:600px;}
.pg-table th,.pg-table td{border:1px solid #E5E7EB;padding:0;text-align:center;font-size:12px;}
.pg-table thead th{background:#F9FAFB;padding:10px 6px;font-weight:600;position:sticky;top:0;z-index:2;}
.pg-table thead th.pg-time-header{width:70px;min-width:70px;background:#F3F4F6;position:sticky;right:0;z-index:3;}
.pg-table tbody th{background:#F3F4F6;padding:8px 6px;font-weight:500;width:70px;min-width:70px;position:sticky;right:0;z-index:1;cursor:pointer;}
.pg-table tbody th:hover{background:#E5E7EB;}

.pg-cell{min-height:38px;cursor:crosshair;transition:background .1s;position:relative;padding:4px;}
.pg-cell:hover{outline:2px solid #93C5FD;outline-offset:-2px;z-index:1;}
.pg-cell.selected{outline:2px solid #2563EB;outline-offset:-2px;z-index:1;background:#EFF6FF !important;}
.pg-cell.status-free{background:#fff;}
.pg-cell.status-training{background:#DBEAFE;}
.pg-cell.status-hourly{background:#D1FAE5;}
.pg-cell.status-blocked{background:#F3F4F6;}
.pg-cell.status-maintenance{background:#FEF3C7;}
.pg-cell .cell-label{font-size:11px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pg-cell .cell-cap{font-size:10px;color:#6B7280;margin-top:1px;}

.pg-col-header{cursor:pointer;transition:background .15s;}
.pg-col-header:hover{background:#E5E7EB !important;}

.pg-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:#374151;flex-wrap:wrap;}
.pg-legend span{display:flex;align-items:center;gap:4px;}
.pg-legend .swatch{width:14px;height:14px;border-radius:3px;border:1px solid #D1D5DB;}

.pg-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.pg-modal-overlay.active{opacity:1;pointer-events:all;}
.pg-modal{background:#fff;border-radius:12px;padding:24px;width:400px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.pg-modal h3{margin:0 0 16px;font-size:18px;}
.pg-modal label{display:block;margin-bottom:4px;font-size:13px;font-weight:500;color:#374151;}
.pg-modal select,.pg-modal textarea{width:100%;border:1px solid #D1D5DB;border-radius:6px;padding:8px 10px;font-size:14px;font-family:inherit;margin-bottom:12px;}
.pg-modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.pg-modal .modal-actions button{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;}
.pg-modal .modal-actions .btn-confirm{background:#2563EB;color:#fff;border:none;}
.pg-modal .modal-actions .btn-cancel{background:#fff;color:#374151;border:1px solid #D1D5DB;}

.pg-loading{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;z-index:5;border-radius:8px;}
.pg-loading.hidden{display:none;}
.pg-spinner{width:32px;height:32px;border:3px solid #E5E7EB;border-top-color:#2563EB;border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
</style>

<!-- Toolbar -->
<div class="pg-toolbar">
    <div class="date-nav">
        <button id="pgPrevDay" title="اليوم السابق"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
        <input type="date" id="pgDate" value="<?= e($date) ?>">
        <button id="pgNextDay" title="اليوم التالي"><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
        <button id="pgToday" style="font-size:12px;">اليوم</button>
    </div>
    <div class="pg-selection-info" id="pgSelInfo">لا يوجد تحديد</div>
    <div class="pg-actions">
        <button class="btn-training" id="pgBtnTraining" disabled title="تعيين تدريب"><i data-lucide="users" style="width:14px;height:14px;vertical-align:middle;margin-left:2px;"></i> تدريب</button>
        <button class="btn-blocked" id="pgBtnBlocked" disabled title="حجب"><i data-lucide="lock" style="width:14px;height:14px;vertical-align:middle;margin-left:2px;"></i> حجب</button>
        <button class="btn-maintenance" id="pgBtnMaint" disabled title="صيانة"><i data-lucide="wrench" style="width:14px;height:14px;vertical-align:middle;margin-left:2px;"></i> صيانة</button>
        <button class="btn-clear" id="pgBtnClear" disabled title="مسح الحجوزات"><i data-lucide="x" style="width:14px;height:14px;vertical-align:middle;margin-left:2px;"></i> مسح</button>
    </div>
</div>

<!-- Grid Container -->
<div style="position:relative;">
    <div class="pg-loading hidden" id="pgLoading"><div class="pg-spinner"></div></div>
    <div class="pg-wrapper">
        <table class="pg-table" id="pgTable">
            <thead><tr id="pgHead"></tr></thead>
            <tbody id="pgBody"></tbody>
        </table>
    </div>
</div>

<!-- Legend -->
<div class="pg-legend">
    <span><span class="swatch" style="background:#fff;"></span> فارغ</span>
    <span><span class="swatch" style="background:#DBEAFE;"></span> تدريب</span>
    <span><span class="swatch" style="background:#D1FAE5;"></span> حجز ساعة</span>
    <span><span class="swatch" style="background:#F3F4F6;"></span> محجوب</span>
    <span><span class="swatch" style="background:#FEF3C7;"></span> صيانة</span>
</div>

<!-- Training Assignment Modal -->
<div class="pg-modal-overlay" id="pgModal">
    <div class="pg-modal">
        <h3 id="pgModalTitle">تعيين تدريب</h3>
        <div id="pgModalBody">
            <label for="pgGroupSelect">المجموعة</label>
            <select id="pgGroupSelect">
                <option value="">اختر مجموعة...</option>
                <?php foreach ($groups as $g): ?>
                <option value="<?= (int) $g['id'] ?>" data-coach="<?= e($g['coach_name'] ?? '') ?>" data-count="<?= (int) $g['current_count'] ?>/<?= (int) $g['max_capacity'] ?>">
                    <?= e($g['name_ar']) ?> — <?= e($g['coach_name'] ?? 'بدون مدرب') ?> (<?= (int) $g['current_count'] ?>/<?= (int) $g['max_capacity'] ?>)
                </option>
                <?php endforeach; ?>
            </select>
            <label for="pgNotes">ملاحظات (اختياري)</label>
            <textarea id="pgNotes" rows="2" placeholder="ملاحظات..."></textarea>
        </div>
        <div class="modal-actions">
            <button class="btn-cancel" id="pgModalCancel">إلغاء</button>
            <button class="btn-confirm" id="pgModalConfirm">تأكيد</button>
        </div>
    </div>
</div>

<script>
(function(){
    const FACILITY_ID = <?= (int) $facility['id'] ?>;
    const CSRF_TOKEN = '<?= e($_SESSION['_csrf_token'] ?? '') ?>';

    let gridState = null;
    let selectedCells = new Set();
    let isDragging = false;
    let dragStart = null;
    let dragMode = null; // 'select' or 'deselect'
    let pendingAction = null;

    const dateInput = document.getElementById('pgDate');
    const table = document.getElementById('pgTable');
    const head = document.getElementById('pgHead');
    const body = document.getElementById('pgBody');
    const loading = document.getElementById('pgLoading');
    const selInfo = document.getElementById('pgSelInfo');
    const btnTraining = document.getElementById('pgBtnTraining');
    const btnBlocked = document.getElementById('pgBtnBlocked');
    const btnMaint = document.getElementById('pgBtnMaint');
    const btnClear = document.getElementById('pgBtnClear');
    const modal = document.getElementById('pgModal');
    const modalTitle = document.getElementById('pgModalTitle');
    const modalBody = document.getElementById('pgModalBody');
    const modalConfirm = document.getElementById('pgModalConfirm');
    const modalCancel = document.getElementById('pgModalCancel');
    const groupSelect = document.getElementById('pgGroupSelect');
    const notesInput = document.getElementById('pgNotes');

    function currentDate() { return dateInput.value; }

    function setDate(d) {
        dateInput.value = d;
        loadGrid();
    }

    document.getElementById('pgPrevDay').addEventListener('click', function(){
        let d = new Date(currentDate());
        d.setDate(d.getDate() - 1);
        setDate(d.toISOString().slice(0,10));
    });
    document.getElementById('pgNextDay').addEventListener('click', function(){
        let d = new Date(currentDate());
        d.setDate(d.getDate() + 1);
        setDate(d.toISOString().slice(0,10));
    });
    document.getElementById('pgToday').addEventListener('click', function(){
        setDate(new Date().toISOString().slice(0,10));
    });
    dateInput.addEventListener('change', function(){ loadGrid(); });

    function showLoading(){ loading.classList.remove('hidden'); }
    function hideLoading(){ loading.classList.add('hidden'); }

    function cellKey(unitId, slotIdx){ return unitId + ':' + slotIdx; }

    function updateSelectionUI(){
        let count = selectedCells.size;
        selInfo.textContent = count > 0 ? count + ' خلية محددة' : 'لا يوجد تحديد';
        let hasSelection = count > 0;
        btnTraining.disabled = !hasSelection;
        btnBlocked.disabled = !hasSelection;
        btnMaint.disabled = !hasSelection;
        btnClear.disabled = !hasSelection;

        document.querySelectorAll('.pg-cell').forEach(function(el){
            let key = el.dataset.key;
            el.classList.toggle('selected', selectedCells.has(key));
        });
    }

    function clearSelection(){
        selectedCells.clear();
        updateSelectionUI();
    }

    function loadGrid(){
        showLoading();
        clearSelection();
        fetch('/api/sa/pool-grid/' + FACILITY_ID + '/state?date=' + encodeURIComponent(currentDate()), {
            headers: {'X-Requested-With': 'XMLHttpRequest'}
        })
        .then(function(r){ return r.json(); })
        .then(function(data){
            if(data.error){ alert(data.error); hideLoading(); return; }
            gridState = data;
            renderGrid();
            hideLoading();
        })
        .catch(function(e){ alert('خطأ في تحميل البيانات'); hideLoading(); });
    }

    function renderGrid(){
        if(!gridState) return;
        let units = gridState.units;
        let slots = gridState.slots;
        let grid = gridState.grid;

        // Header: time col + one col per lane
        let hhtml = '<th class="pg-time-header">الوقت</th>';
        for(let i = 0; i < units.length; i++){
            hhtml += '<th class="pg-col-header" data-unit-idx="' + i + '" data-unit-id="' + units[i].id + '">' + escHtml(units[i].name_ar) + '<br><span style="font-weight:400;font-size:10px;color:#6B7280;">سعة: ' + units[i].max_capacity + '</span></th>';
        }
        head.innerHTML = hhtml;

        // Body rows = time slots
        let bhtml = '';
        for(let s = 0; s < slots.length; s++){
            bhtml += '<tr>';
            bhtml += '<th data-slot-idx="' + s + '">' + slots[s].start + '<br><span style="font-size:10px;color:#9CA3AF;">' + slots[s].end + '</span></th>';
            for(let u = 0; u < units.length; u++){
                let unitId = units[u].id;
                let cellData = grid[unitId] ? grid[unitId][s] : null;
                let status = cellData ? cellData.status : 'free';
                let label = cellData ? cellData.label : '';
                let spots = cellData ? cellData.spots_used : 0;
                let max = cellData ? cellData.max_capacity : units[u].max_capacity;
                let key = cellKey(unitId, s);

                bhtml += '<td><div class="pg-cell status-' + status + '" data-key="' + key + '" data-unit-id="' + unitId + '" data-slot-idx="' + s + '">';
                if(label){
                    bhtml += '<div class="cell-label">' + escHtml(label) + '</div>';
                }
                if(status !== 'free' && status !== 'blocked' && status !== 'maintenance'){
                    bhtml += '<div class="cell-cap">' + spots + '/' + max + '</div>';
                }
                bhtml += '</div></td>';
            }
            bhtml += '</tr>';
        }
        body.innerHTML = bhtml;

        bindCellEvents();
        bindHeaderEvents();
    }

    function bindCellEvents(){
        let cells = document.querySelectorAll('.pg-cell');
        cells.forEach(function(el){
            el.addEventListener('mousedown', function(e){
                if(e.button !== 0) return;
                e.preventDefault();
                isDragging = true;
                let key = el.dataset.key;
                if(e.ctrlKey || e.metaKey){
                    if(selectedCells.has(key)){ selectedCells.delete(key); dragMode = 'deselect'; }
                    else { selectedCells.add(key); dragMode = 'select'; }
                } else if(e.shiftKey && selectedCells.size > 0) {
                    rectangleSelect(key);
                    dragMode = 'select';
                } else {
                    selectedCells.clear();
                    selectedCells.add(key);
                    dragMode = 'select';
                }
                dragStart = key;
                updateSelectionUI();
            });
            el.addEventListener('mouseenter', function(e){
                if(!isDragging) return;
                let key = el.dataset.key;
                if(dragMode === 'select') selectedCells.add(key);
                else selectedCells.delete(key);
                updateSelectionUI();
            });
        });
    }

    function bindHeaderEvents(){
        // Column headers — select whole lane
        document.querySelectorAll('.pg-col-header').forEach(function(th){
            th.addEventListener('click', function(e){
                let unitId = th.dataset.unitId;
                let slots = gridState.slots;
                let allSelected = true;
                for(let s = 0; s < slots.length; s++){
                    if(!selectedCells.has(cellKey(unitId, s))){ allSelected = false; break; }
                }
                for(let s = 0; s < slots.length; s++){
                    let k = cellKey(unitId, s);
                    if(allSelected) selectedCells.delete(k);
                    else selectedCells.add(k);
                }
                updateSelectionUI();
            });
        });

        // Row headers — select whole time slot
        document.querySelectorAll('tbody th[data-slot-idx]').forEach(function(th){
            th.addEventListener('click', function(e){
                let slotIdx = parseInt(th.dataset.slotIdx);
                let units = gridState.units;
                let allSelected = true;
                for(let u = 0; u < units.length; u++){
                    if(!selectedCells.has(cellKey(units[u].id, slotIdx))){ allSelected = false; break; }
                }
                for(let u = 0; u < units.length; u++){
                    let k = cellKey(units[u].id, slotIdx);
                    if(allSelected) selectedCells.delete(k);
                    else selectedCells.add(k);
                }
                updateSelectionUI();
            });
        });
    }

    function rectangleSelect(endKey){
        let startParts = dragStart ? dragStart.split(':') : endKey.split(':');
        let endParts = endKey.split(':');
        let units = gridState.units;
        let unitIds = units.map(function(u){ return String(u.id); });

        let startUnitIdx = unitIds.indexOf(startParts[0]);
        let endUnitIdx = unitIds.indexOf(endParts[0]);
        let startSlot = parseInt(startParts[1]);
        let endSlot = parseInt(endParts[1]);

        let minU = Math.min(startUnitIdx, endUnitIdx);
        let maxU = Math.max(startUnitIdx, endUnitIdx);
        let minS = Math.min(startSlot, endSlot);
        let maxS = Math.max(startSlot, endSlot);

        for(let u = minU; u <= maxU; u++){
            for(let s = minS; s <= maxS; s++){
                selectedCells.add(cellKey(unitIds[u], s));
            }
        }
    }

    document.addEventListener('mouseup', function(){
        isDragging = false;
        dragMode = null;
    });

    // Keyboard: Escape clears, Ctrl+A selects all
    document.addEventListener('keydown', function(e){
        if(e.key === 'Escape') clearSelection();
        if((e.ctrlKey || e.metaKey) && e.key === 'a' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA'){
            e.preventDefault();
            if(!gridState) return;
            gridState.units.forEach(function(u){
                gridState.slots.forEach(function(s, si){
                    selectedCells.add(cellKey(u.id, si));
                });
            });
            updateSelectionUI();
        }
    });

    // Action buttons
    btnTraining.addEventListener('click', function(){ showModal('training'); });
    btnBlocked.addEventListener('click', function(){ submitAction('blocked'); });
    btnMaint.addEventListener('click', function(){ submitAction('maintenance'); });
    btnClear.addEventListener('click', function(){
        if(!confirm('هل تريد مسح الحجوزات من الخلايا المحددة؟')) return;
        submitClear();
    });

    function showModal(action){
        pendingAction = action;
        if(action === 'training'){
            modalTitle.textContent = 'تعيين تدريب';
            document.getElementById('pgGroupSelect').parentElement.style.display = '';
            groupSelect.value = '';
            notesInput.value = '';
        }
        modal.classList.add('active');
    }

    function hideModal(){
        modal.classList.remove('active');
        pendingAction = null;
    }

    modalCancel.addEventListener('click', hideModal);
    modal.addEventListener('click', function(e){ if(e.target === modal) hideModal(); });

    modalConfirm.addEventListener('click', function(){
        if(pendingAction === 'training'){
            let gid = groupSelect.value;
            if(!gid){ alert('اختر مجموعة'); return; }
            submitAction('training', parseInt(gid), notesInput.value.trim());
        }
        hideModal();
    });

    function buildCellsPayload(){
        let cells = [];
        let units = gridState.units;
        let slots = gridState.slots;
        selectedCells.forEach(function(key){
            let parts = key.split(':');
            let unitId = parseInt(parts[0]);
            let slotIdx = parseInt(parts[1]);
            let slot = slots[slotIdx];
            if(slot){
                cells.push({
                    unit_id: unitId,
                    start_time: slot.start + ':00',
                    end_time: slot.end + ':00'
                });
            }
        });
        return cells;
    }

    function submitAction(action, groupId, notes){
        let cells = buildCellsPayload();
        if(!cells.length) return;
        showLoading();
        let payload = {
            date: currentDate(),
            action: action,
            cells: cells,
            group_id: groupId || null,
            notes: notes || ''
        };
        fetch('/api/sa/pool-grid/' + FACILITY_ID + '/assign', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        })
        .then(function(r){ return r.json(); })
        .then(function(data){
            if(data.error){ alert(data.error); hideLoading(); return; }
            let msg = 'تم التعيين: ' + (data.assigned || 0) + ' خلية';
            if(data.skipped) msg += ' | تم التخطي: ' + data.skipped;
            showToast(msg, 'success');
            loadGrid();
        })
        .catch(function(){ alert('خطأ في العملية'); hideLoading(); });
    }

    function submitClear(){
        let cells = buildCellsPayload();
        if(!cells.length) return;
        showLoading();
        fetch('/api/sa/pool-grid/' + FACILITY_ID + '/clear', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ date: currentDate(), cells: cells })
        })
        .then(function(r){ return r.json(); })
        .then(function(data){
            if(data.error){ alert(data.error); hideLoading(); return; }
            showToast('تم المسح: ' + (data.cleared || 0) + ' حجز', 'success');
            loadGrid();
        })
        .catch(function(){ alert('خطأ في العملية'); hideLoading(); });
    }

    function showToast(msg, type){
        let el = document.createElement('div');
        el.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:8px;font-size:14px;font-weight:500;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:opacity .3s;';
        if(type === 'success') el.style.background = '#D1FAE5', el.style.color = '#065F46';
        else el.style.background = '#FEE2E2', el.style.color = '#991B1B';
        el.textContent = msg;
        document.body.appendChild(el);
        setTimeout(function(){ el.style.opacity = '0'; setTimeout(function(){ el.remove(); }, 300); }, 3000);
    }

    function escHtml(s){
        if(!s) return '';
        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // Initial load
    loadGrid();
    if(typeof lucide !== 'undefined') lucide.createIcons();
})();
</script>

<?php $__template->endSection(); ?>
