<style>
/* Scoped styles to prevent dashboard bleed */
.fac-module { width: 100%; animation: fadeIn 0.3s ease-in-out; }

.fac-header-area { margin-bottom: 24px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px; }
.fac-page-title { font-size: 22px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fac-page-title i { color: #8b5cf6; } /* Violet accent for Clinics */
.fac-page-subtitle { font-size: 14px; color: #64748b; }

/* Layout */
.fac-split-layout { display: flex; gap: 24px; flex-wrap: wrap; align-items: stretch; }
.fac-panel { background: #fff; border-radius: 12px; padding: 24px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
.fac-panel-left { flex: 1; min-width: 320px; display: flex; flex-direction: column; }
.fac-panel-right { flex: 2.2; min-width: 500px; overflow-x: auto; }

.fac-panel-title { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; display:flex; align-items:center; gap:8px;}

/* Form Controls */
.fac-form-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.fac-form-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.fac-form-col label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

.fac-input { padding: 12px 14px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 13px; outline: none; width: 100%; background: #f8fafc; color: #1e293b; transition: 0.2s; font-weight: 500;}
.fac-input:focus { border-color: #8b5cf6; background: #fff; box-shadow: 0 0 0 3px #ede9fe; }

.fac-input-group { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; overflow: hidden; transition: 0.2s;}
.fac-input-group:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 3px #ede9fe; background: #fff;}
.fac-input-addon { padding: 12px 14px; background: #e2e8f0; color: #475569; font-weight: 700; font-size: 13px; border-right: 1px solid #cbd5e1; }
.fac-input-group input { flex: 1; border: none; padding: 12px 14px; background: transparent; outline: none; font-size: 13px; font-weight: 600;}

/* Toggle Switch */
.fac-toggle-container { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #e2e8f0; padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; transition: 0.2s;}
.fac-toggle-container:hover { background: #f8fafc; border-color: #cbd5e1; }
.fac-toggle-text { font-size: 13px; font-weight: 700; color: #1e293b; }
.fac-toggle-desc { font-size: 11px; color: #64748b; display: block; margin-top: 2px;}

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0;}
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #8b5cf6; }
input:checked + .slider:before { transform: translateX(18px); }

/* Buttons */
.fac-btn-primary { background: #8b5cf6; color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px;}
.fac-btn-primary:hover { background: #7c3aed; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2); }

/* Search Bar */
.fac-search-wrapper { position: relative; width: 100%; max-width: 300px; }
.fac-search-wrapper i { position: absolute; left: 14px; top: 11px; color: #94a3b8; }
.fac-search-wrapper input { padding-left: 38px; width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding-top: 9px; padding-bottom: 9px; font-size: 13px; outline: none; background: #f8fafc; transition: 0.2s; }
.fac-search-wrapper input:focus { border-color: #8b5cf6; background: #fff; box-shadow: 0 0 0 3px #ede9fe; }

/* Table */
.fac-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.fac-table th { padding: 14px; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.fac-table td { padding: 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155; }
.fac-table tr:hover td { background: #f8fafc; }

/* Badges */
.fac-badge { padding: 5px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.bg-opd { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.bg-specialty { background: #fae8ff; color: #a21caf; border: 1px solid #fbcfe8; }
.bg-ward { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.bg-green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.bg-red { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Action Icons */
.action-group { display: flex; gap: 6px; justify-content: flex-end; }
.btn-icon { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: 0.2s; }
.b-edit { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.b-toggle { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.b-delete { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.btn-icon:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* Notice Box */
.fac-notice { background: #eff6ff; border: 1px solid #bfdbfe; padding: 16px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; color: #1e3a8a; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start;}
.fac-notice i { font-size: 18px; color: #2563eb; margin-top: 2px;}
</style>

<div class="fac-module">
    <div class="fac-header-area">
        <div class="fac-page-title"><i class="fa-solid fa-stethoscope"></i> Clinic & Department Activation</div>
        <div class="fac-page-subtitle">Create organizational departments, activate specific routing clinics, and configure base consultation fees.</div>
    </div>

    <div class="fac-split-layout">
        
        <div class="fac-panel fac-panel-left">
            <div class="fac-panel-title" style="color: #8b5cf6;"><i class="fa-solid fa-plus-circle"></i> Create New Clinical Unit</div>
            
            <form id="clinicSetupForm">
                <div class="fac-form-row">
                    <div class="fac-form-col">
                        <label>Clinic / Ward Name <span style="color:#dc2626;">*</span></label>
                        <input type="text" class="fac-input" placeholder="e.g. Cardiology Clinic" required>
                    </div>
                </div>

                <div class="fac-form-row">
                    <div class="fac-form-col">
                        <label>Parent Department <span style="color:#dc2626;">*</span></label>
                        <select class="fac-input" required>
                            <option value="">-- Select Department --</option>
                            <option value="1">Internal Medicine</option>
                            <option value="2">Surgery</option>
                            <option value="3">Pediatrics</option>
                            <option value="4">Obstetrics & Gynecology (O&G)</option>
                            <option value="5">General OPD / Polyclinic</option>
                            <option value="add_new" style="color: #8b5cf6; font-weight: bold;">+ Add New Department</option>
                        </select>
                    </div>
                </div>

                <div class="fac-form-row">
                    <div class="fac-form-col">
                        <label>Unit Type</label>
                        <select class="fac-input">
                            <option value="OPD">General OPD / Walk-in</option>
                            <option value="SPECIALTY" selected>Specialty Clinic (Referral)</option>
                            <option value="WARD">Inpatient Ward (Admissions)</option>
                            <option value="EMERGENCY">Emergency Room (ER)</option>
                        </select>
                    </div>
                </div>

                <div class="fac-form-row">
                    <div class="fac-form-col">
                        <label>Standard Consultation Fee (Private)</label>
                        <div class="fac-input-group">
                            <span class="fac-input-addon">GHS</span>
                            <input type="number" step="0.01" placeholder="0.00" value="150.00">
                        </div>
                    </div>
                </div>

                <div class="fac-notice">
                    <i class="fa-solid fa-circle-info"></i>
                    <div>
                        <strong>Routing & Scheduling Rules</strong><br>
                        Toggle the settings below to dictate how front-desk staff can interact with this clinical unit.
                    </div>
                </div>

                <div class="fac-toggle-container">
                    <div>
                        <span class="fac-toggle-text">Requires Appointment</span>
                        <span class="fac-toggle-desc">Blocks direct walk-in queuing at front desk.</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>

                <div class="fac-toggle-container">
                    <div>
                        <span class="fac-toggle-text">Active for Routing</span>
                        <span class="fac-toggle-desc">Allows doctors to refer patients to this clinic.</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="border-top: 1px solid #e2e8f0; margin-top: 10px; padding-top: 20px;">
                    <button type="button" class="fac-btn-primary" onclick="testClinicSave(this)"><i class="fa-solid fa-layer-group"></i> Create Clinical Unit</button>
                </div>
            </form>
        </div>

        <div class="fac-panel fac-panel-right">
            
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px; flex-wrap:wrap; gap: 15px;">
                <div class="fac-panel-title" style="border:none; padding:0; margin:0;"><i class="fa-solid fa-network-wired"></i> Clinical Unit Directory</div>
                
                <div class="fac-search-wrapper">
                    <i class="fa-solid fa-search"></i>
                    <input type="text" id="clinicSearchInput" placeholder="Search clinics or departments...">
                </div>
            </div>
            
            <table class="fac-table" id="clinicTable">
                <thead>
                    <tr>
                        <th width="30%">Clinic / Ward Name</th>
                        <th width="25%">Parent Dept. & Type</th>
                        <th width="20%">Consult Fee</th>
                        <th width="10%">Status</th>
                        <th width="15%" style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="clinic-row">
                        <td>
                            <strong style="color:#1e293b; font-size:14px;">General OPD</strong>
                            <div style="font-size: 11px; color: #64748b; margin-top: 4px;"><i class="fa-solid fa-person-walking"></i> Walk-ins Allowed</div>
                        </td>
                        <td>
                            <div style="font-weight: 600; margin-bottom: 6px;">General Polyclinic</div>
                            <span class="fac-badge bg-opd">OPD</span>
                        </td>
                        <td>
                            <span style="font-family: monospace; font-weight: 700; font-size: 14px; color: #0f172a;">GHS 50.00</span>
                        </td>
                        <td><span class="fac-badge bg-green">Active</span></td>
                        <td>
                            <div class="action-group">
                                <a href="#" class="btn-icon b-edit" title="Edit"><i class="fa-solid fa-pen"></i></a>
                                <a href="#" class="btn-icon b-toggle" title="Deactivate"><i class="fa-solid fa-ban"></i></a>
                                <a href="#" class="btn-icon b-delete" title="Delete"><i class="fa-solid fa-trash"></i></a>
                            </div>
                        </td>
                    </tr>
                    
                    <tr class="clinic-row">
                        <td>
                            <strong style="color:#1e293b; font-size:14px;">Cardiology Clinic</strong>
                            <div style="font-size: 11px; color: #b45309; margin-top: 4px;"><i class="fa-regular fa-calendar-check"></i> Appointment Only</div>
                        </td>
                        <td>
                            <div style="font-weight: 600; margin-bottom: 6px;">Internal Medicine</div>
                            <span class="fac-badge bg-specialty">Specialty</span>
                        </td>
                        <td>
                            <span style="font-family: monospace; font-weight: 700; font-size: 14px; color: #0f172a;">GHS 250.00</span>
                        </td>
                        <td><span class="fac-badge bg-green">Active</span></td>
                        <td>
                            <div class="action-group">
                                <a href="#" class="btn-icon b-edit" title="Edit"><i class="fa-solid fa-pen"></i></a>
                                <a href="#" class="btn-icon b-toggle" title="Deactivate"><i class="fa-solid fa-ban"></i></a>
                                <a href="#" class="btn-icon b-delete" title="Delete"><i class="fa-solid fa-trash"></i></a>
                            </div>
                        </td>
                    </tr>

                    <tr class="clinic-row">
                        <td>
                            <strong style="color:#1e293b; font-size:14px;">Male Surgical Ward</strong>
                            <div style="font-size: 11px; color: #16a34a; margin-top: 4px;"><i class="fa-solid fa-bed-pulse"></i> Inpatient Admissions</div>
                        </td>
                        <td>
                            <div style="font-weight: 600; margin-bottom: 6px;">Surgery</div>
                            <span class="fac-badge bg-ward">Ward</span>
                        </td>
                        <td>
                            <span style="font-size: 12px; color: #64748b; font-style: italic;">Per Night Billing</span>
                        </td>
                        <td><span class="fac-badge bg-green">Active</span></td>
                        <td>
                            <div class="action-group">
                                <a href="#" class="btn-icon b-edit" title="Edit"><i class="fa-solid fa-pen"></i></a>
                                <a href="#" class="btn-icon b-toggle" title="Deactivate"><i class="fa-solid fa-ban"></i></a>
                                <a href="#" class="btn-icon b-delete" title="Delete"><i class="fa-solid fa-trash"></i></a>
                            </div>
                        </td>
                    </tr>

                    <tr class="clinic-row">
                        <td>
                            <strong style="color:#94a3b8; font-size:14px; text-decoration: line-through;">Dental Clinic</strong>
                            <div style="font-size: 11px; color: #94a3b8; margin-top: 4px;">Under Renovation</div>
                        </td>
                        <td>
                            <div style="font-weight: 600; margin-bottom: 6px; color:#94a3b8;">Surgery</div>
                            <span class="fac-badge bg-specialty" style="opacity: 0.5;">Specialty</span>
                        </td>
                        <td>
                            <span style="font-family: monospace; font-weight: 700; font-size: 14px; color: #94a3b8;">GHS 120.00</span>
                        </td>
                        <td><span class="fac-badge bg-red">Inactive</span></td>
                        <td>
                            <div class="action-group">
                                <a href="#" class="btn-icon b-edit" title="Edit"><i class="fa-solid fa-pen"></i></a>
                                <a href="#" class="btn-icon b-toggle" title="Activate"><i class="fa-solid fa-check"></i></a>
                                <a href="#" class="btn-icon b-delete" title="Delete"><i class="fa-solid fa-trash"></i></a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>

<script>
window.RimaxBaseUrl = "<?php echo defined('BASE_URL') ? BASE_URL : '/rimax/'; ?>";
// Live Search Filter for Directory
const searchInput = document.getElementById('clinicSearchInput');
if(searchInput) {
    searchInput.addEventListener('input', function(e) {
        let filter = e.target.value.toLowerCase();
        let rows = document.querySelectorAll('.clinic-row');

        rows.forEach(row => {
            // Search by Clinic Name (col 1) or Department (col 2)
            let clinicName = row.getElementsByTagName('td')[0].textContent || row.getElementsByTagName('td')[0].innerText;
            let deptName = row.getElementsByTagName('td')[1].textContent || row.getElementsByTagName('td')[1].innerText;
            
            if (clinicName.toLowerCase().indexOf(filter) > -1 || deptName.toLowerCase().indexOf(filter) > -1) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    });
}

// Dummy Form Save Simulation
function testClinicSave(btnElement) {
    const originalHTML = btnElement.innerHTML;
    btnElement.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving Unit...';
    btnElement.disabled = true;

    setTimeout(() => {
        btnElement.innerHTML = '<i class="fa-solid fa-check"></i> Unit Created';
        btnElement.style.backgroundColor = '#16a34a'; 
        
        setTimeout(() => {
            btnElement.innerHTML = originalHTML;
            btnElement.disabled = false;
            btnElement.style.backgroundColor = ''; 
            
            // Simulate form reset
            document.getElementById('clinicSetupForm').reset();
        }, 2000);
    }, 1000);
}
</script>