<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }
require_once '../../dripend/includes/db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theatre & Surgery Manager | eRHAMS</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    
    <style>
        body { background-color: #f8fafc; margin: 0; overflow-x: hidden; font-family: 'Inter', sans-serif;}
        .main-content-wrapper { margin-left: 260px !important; padding: 2.5rem; width: calc(100% - 260px); min-height: 100vh; box-sizing: border-box; }
        @media (max-width: 992px) { .main-content-wrapper { margin-left: 0 !important; width: 100% !important; padding: 1.5rem; } }

        .dashboard-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 25px;}
        
        .view-toggle-group { display: flex; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
        .view-toggle-btn { background: transparent; border: none; padding: 10px 20px; font-size: 13.5px; font-weight: 700; color: #64748b; cursor: pointer; transition: 0.2s; }
        .view-toggle-btn.active { background: #e0f2fe; color: #0284c7; }
        .view-toggle-btn:hover:not(.active) { background: #f1f5f9; }

        /* Stats Cards */
        .stat-card { background: #fff; border-radius: 16px; padding: 25px; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); height: 100%;}
        .stat-icon { width: 65px; height: 65px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; color:#fff; flex-shrink: 0;}
        .stat-icon.orange { background: linear-gradient(135deg, #fbbf24, #d97706); }
        .stat-icon.green { background: linear-gradient(135deg, #10b981, #059669); }
        .stat-icon.blue { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
        .stat-icon.red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
        .stat-body h3 { font-size: 32px; font-weight: 800; margin: 0; color: #0f172a;}
        .stat-body p { font-size: 11px; font-weight: 800; color: #64748b; margin: 6px 0 0 0; text-transform: uppercase; letter-spacing: 0.5px; }

        /* Filter Bar - CSS GRID */
        .filter-bar { background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 30px; border: 1px solid #e2e8f0; }
        .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; align-items: end; }
        .filter-group { display: flex; flex-direction: column; gap: 8px; }
        .filter-group label { font-size: 11.5px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: 0.5px;}
        
        .input-control { padding: 12px 16px; border-radius: 10px; border: 1px solid #cbd5e1; outline: none; font-size:14px; font-weight: 600; background: #f8fafc; transition: 0.2s; width: 100%;}
        .input-control:focus { border-color: #0ea5e9; box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15); background:#fff;}
        .btn-filter { background: #10b981; color: #fff; border: none; border-radius: 10px; padding: 12px 20px; font-weight: 800; font-size: 14px; cursor: pointer; transition: 0.2s; height: 46px;}
        .btn-filter:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3); color:#fff;}
        
        /* LIST VIEW TABLE */
        .list-table-container { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow:hidden;}
        table.main-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
        table.main-table th { background: #f1f5f9; color: #475569; padding: 18px 24px; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px;}
        table.main-table td { padding: 16px 24px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
        .list-row { transition: 0.2s; background: #fff;}
        .list-row:hover { background: #f8fafc; }

        /* TILE VIEW (Spacious Grid) */
        .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 30px; }
        .tile-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 6px 20px rgba(0,0,0,0.03); display: flex; flex-direction: column; position: relative; overflow:hidden; transition: 0.3s;}
        .tile-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(0,0,0,0.06); }
        .tile-card.status-pending { border-top: 5px solid #f59e0b; background: #fffbeb;}
        .tile-card.status-scheduled { border-top: 5px solid #3b82f6; }
        .tile-card.status-progress { border-top: 5px solid #06b6d4; }
        
        .patient-avatar { width: 55px; height: 55px; border-radius: 50%; background: #e0f2fe; color: #0284c7; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex-shrink:0;}
        
        .tile-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; padding: 25px 25px 0 25px;}
        .tile-info { margin-bottom: 20px; flex: 1; padding: 0 25px; }
        .tile-info p { margin: 0 0 8px 0; font-size: 13.5px; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 10px;}
        .tile-info p i { width: 16px; text-align: center; color: #94a3b8; font-size: 14px;}

        .tile-actions { background: #f8fafc; padding: 15px 25px; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;}
        .full-chart-btn { background: #0f172a; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; font-size: 13px; text-decoration: none; transition: 0.2s; cursor:pointer;}
        .full-chart-btn:hover { background: #1e293b; color: #fff; }
        
        .nav-tabs .nav-link { font-weight: 700; color: #64748b; border: none; border-bottom: 3px solid transparent; padding: 12px 25px;}
        .nav-tabs .nav-link.active { color: #0ea5e9; border-bottom-color: #0ea5e9; background: transparent; }
        
        .select2-container { width: 100% !important; text-align: left; }
        .note-editor { background: #fff; border-radius: 8px; border: 1px solid #cbd5e1 !important; }
        .badge-outcome { font-size: 12px; padding: 8px 12px; font-weight: 800; letter-spacing: 0.5px; border-radius: 6px;}
    </style>
</head>
<body>

<?php include '../../dripend/statpages/sidebar.php'; ?>

<div class="main-content-wrapper">
    
    <div class="dashboard-header">
        <h3 class="fw-bold text-dark m-0" style="letter-spacing: -0.5px;">
            <i class="fa-solid fa-scalpel-line-dashed text-danger me-2"></i> Surgical Theatre Manager
        </h3>
        <div class="d-flex gap-3 align-items-center">
            <div class="view-toggle-group">
                <button class="view-toggle-btn active" onclick="toggleView('tile')" id="btnViewTile"><i class="fa-solid fa-grip me-1"></i> Tile View</button>
                <button class="view-toggle-btn" onclick="toggleView('list')" id="btnViewList"><i class="fa-solid fa-list me-1"></i> List View</button>
            </div>
        </div>
    </div>

    <!-- STATS ROW -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon orange"><i class="fa-solid fa-clock"></i></div>
                <div class="stat-body">
                    <h3 id="kpi_pending">0</h3>
                    <p>Total Active Queue</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon blue"><i class="fa-solid fa-calendar-day"></i></div>
                <div class="stat-body">
                    <h3 id="kpi_scheduled_today">0</h3>
                    <p>Scheduled For Today</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon red"><i class="fa-solid fa-truck-medical"></i></div>
                <div class="stat-body">
                    <h3 id="kpi_emergencies">0</h3>
                    <p>Active Emergencies</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-icon green"><i class="fa-solid fa-check-double"></i></div>
                <div class="stat-body">
                    <h3 id="kpi_completed_today">0</h3>
                    <p>Completed Today</p>
                </div>
            </div>
        </div>
    </div>

    <!-- TABS -->
    <ul class="nav nav-tabs mb-4" id="theatreTabs" role="tablist">
        <li class="nav-item">
            <button class="nav-link active" id="pending-tab" data-bs-toggle="tab" data-bs-target="#pending-pane" type="button"><i class="fa-solid fa-clipboard-list me-2"></i> Active Theatre Queue</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history-pane" type="button"><i class="fa-solid fa-clock-rotate-left me-2"></i> Completed Surgeries</button>
        </li>
    </ul>

    <div class="tab-content">
        <!-- PENDING QUEUE TAB -->
        <div class="tab-pane fade show active" id="pending-pane" tabindex="0">
            <div class="filter-bar">
                <div class="filter-grid">
                    <div class="filter-group">
                        <label>Request Date From</label>
                        <input type="date" id="q_start_date" class="input-control">
                    </div>
                    <div class="filter-group">
                        <label>Request Date To</label>
                        <input type="date" id="q_end_date" class="input-control">
                    </div>
                    <div class="filter-group" style="grid-column: span 2;">
                        <label>Urgency Level</label>
                        <select id="q_urgency" class="input-control">
                            <option value="ALL">All Levels</option>
                            <option value="Elective">Elective</option>
                            <option value="Urgent">Urgent</option>
                            <option value="Emergency">Emergency / STAT</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <button class="btn-filter w-100" onclick="loadTheatreQueue()"><i class="fa-solid fa-filter me-2"></i> Fetch Queue</button>
                    </div>
                </div>
            </div>

            <!-- EMPTY/LOADING STATES -->
            <div id="loading_state" class="text-center py-5" style="display:none;">
                <div class="spinner-border text-danger" style="width: 3rem; height: 3rem;"></div>
                <h5 class="fw-bold mt-3 text-muted">Retrieving Theatre Queue...</h5>
            </div>
            
            <div id="queue_empty_state" class="text-center py-5" style="background:#fff; border-radius:16px; border:1px dashed #cbd5e1;">
                <i class="fa-solid fa-bed-pulse fa-3x mb-3" style="color:#cbd5e1;"></i><br>
                <span class="fw-bold fs-5 text-dark">No Active Patients in Queue</span>
                <p class="text-muted mt-2">Adjust your filters or date range.</p>
            </div>

            <!-- TILE VIEW -->
            <div id="tile_view" class="tile-grid" style="display:none;"></div>

            <!-- LIST VIEW -->
            <div id="list_view" class="list-table-container" style="display:none;">
                <table class="main-table">
                    <thead>
                        <tr>
                            <th>Patient Identity</th>
                            <th>Procedure Details</th>
                            <th>Theatre Location</th>
                            <th>Urgency</th>
                            <th>Status</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody id="list_view_body"></tbody>
                </table>
            </div>

        </div>

        <!-- HISTORY TAB -->
        <div class="tab-pane fade" id="history-pane" tabindex="0">
            <div class="filter-bar">
                <div class="filter-grid">
                    <div class="filter-group">
                        <label>Completion Date From</label>
                        <input type="date" id="h_start_date" class="input-control">
                    </div>
                    <div class="filter-group">
                        <label>Completion Date To</label>
                        <input type="date" id="h_end_date" class="input-control">
                    </div>
                    <div class="filter-group">
                        <button class="btn-filter w-100" onclick="applyHistoryFilter()"><i class="fa-solid fa-filter me-2"></i> Retrieve History</button>
                    </div>
                </div>
            </div>

            <div class="list-table-container p-3" id="history_table_wrapper" style="display:none;">
                <table id="tblTheatreHistory" class="table table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>Completed On</th>
                            <th>Patient Details</th>
                            <th>Procedure</th>
                            <th>Primary Surgeon</th>
                            <th>Surgical Notes</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            
            <div id="history_empty_state" class="text-center py-5" style="background:#fff; border-radius:16px; border:1px dashed #cbd5e1;">
                <i class="fa-solid fa-clock-rotate-left fa-3x mb-3" style="color:#cbd5e1;"></i><br>
                <span class="fw-bold fs-5 text-dark">Apply Filters to View Past Surgeries</span>
            </div>
        </div>
    </div>
</div>

<!-- ========================================== -->
<!-- SCHEDULE SURGERY MODAL -->
<!-- ========================================== -->
<div class="modal fade" id="scheduleModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form id="frmScheduleSurgery" class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white border-0 p-4">
                <h5 class="modal-title fw-bold m-0"><i class="fa-solid fa-calendar-plus me-2"></i> Schedule Theatre Session</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <input type="hidden" name="action" value="schedule_surgery">
                <input type="hidden" name="req_id" id="sch_req_id">
                
                <div class="bg-white p-4 rounded-3 border shadow-sm mb-4">
                    <h6 class="fw-bold text-dark mb-1" id="sch_patient_name">Patient Name</h6>
                    <p class="text-primary fw-bold mb-0"><i class="fa-solid fa-scalpel-line-dashed me-1"></i> <span id="sch_procedure">Procedure</span></p>
                </div>

                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="small fw-bold text-dark mb-1">Schedule Date & Time <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="scheduled_date" id="sch_date" class="form-control fw-bold border-primary" required>
                    </div>
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        <label class="small fw-bold text-dark mb-1">Lead Surgeon <span class="text-danger">*</span></label>
                        <select name="surgeon_id" id="sch_surgeon" class="form-select border-dark select2-modal" required></select>
                    </div>
                    <div class="col-md-6">
                        <label class="small fw-bold text-dark mb-1">Anesthesiologist (Optional)</label>
                        <select name="anesthetist_id" id="sch_anes" class="form-select border-dark select2-modal"></select>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-white border-0 p-4">
                <button type="button" class="btn btn-light border fw-bold px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary fw-bold px-5 shadow-sm" id="btnSubmitSchedule"><i class="fa-solid fa-calendar-check me-2"></i> Confirm Schedule</button>
            </div>
        </form>
    </div>
</div>

<!-- ========================================== -->
<!-- COMPLETE SURGERY MODAL (With Rich Text) -->
<!-- ========================================== -->
<div class="modal fade" id="completeModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <form id="frmCompleteSurgery" class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-success text-white border-0 p-4">
                <h5 class="modal-title fw-bold m-0"><i class="fa-solid fa-check-double me-2"></i> Log Surgical Completion</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <input type="hidden" name="action" value="complete_surgery">
                <input type="hidden" name="comp_req_id" id="comp_req_id">
                
                <div class="bg-white p-3 rounded-3 border shadow-sm mb-4">
                    <span class="badge bg-success float-end shadow-sm">Completing Record</span>
                    <h5 class="fw-bold text-dark mb-1" id="comp_patient_name">Patient Name</h5>
                    <p class="text-muted fw-bold mb-0" id="comp_procedure">Procedure</p>
                    <hr>
                    <p class="text-danger small fw-bold mb-0"><i class="fa-solid fa-info-circle"></i> Marking this complete will return the patient to their active Ward Roster and free the Theatre Room.</p>
                </div>

                <div class="col-12">
                    <label class="small fw-bold text-dark mb-1">Post-Operative Surgical Notes <span class="text-danger">*</span></label>
                    <textarea name="surgical_notes" id="comp_notes" class="form-control rich-text-editor bg-white" required></textarea>
                </div>
            </div>
            <div class="modal-footer bg-white border-0 p-4">
                <button type="button" class="btn btn-light border fw-bold px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success fw-bold px-5 shadow-sm" id="btnSubmitComplete"><i class="fa-solid fa-save me-2"></i> Complete Surgery & Transfer Out</button>
            </div>
        </form>
    </div>
</div>

<!-- CUSTOM APPLICATION ALERT MODAL -->
<div class="modal fade" id="appResponseModal" tabindex="-1" style="z-index: 1060;">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px;">
            <div class="modal-body p-4 text-center">
                <i id="appResIcon" class="fa-solid fa-circle-check text-success fa-4x mb-3"></i>
                <h5 class="fw-bold text-dark" id="appResTitle">Success</h5>
                <p class="text-muted small" id="appResMsg"></p>
                <button type="button" id="appResBtn" class="btn btn-success fw-bold px-4 mt-2" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script src="/rimax/application/assets/js/theatreManager.js"></script>

</body>
</html>