<?php
require_once '../../../dripend/includes/db.php';

// Fetch Providers
$providers = [];
$prov_res = $conn->query("SELECT id, insurance_name FROM insurance_type WHERE is_active = 1 ORDER BY insurance_name ASC");
if ($prov_res) {
    while($row = $prov_res->fetch_assoc()) {
        $providers[] = $row;
    }
}

// Fetch Services Grouped by Department
$services = [];
$srv_query = "
    SELECT s.id, s.service_name, d.department_name 
    FROM service_catalog s
    LEFT JOIN departments d ON s.department_id = d.id
    WHERE s.is_active = 1 
    ORDER BY d.department_name ASC, s.service_name ASC
";
$srv_res = $conn->query($srv_query);
if ($srv_res) {
    while($row = $srv_res->fetch_assoc()) {
        $dept = $row['department_name'] ? $row['department_name'] : 'General';
        $services[$dept][] = $row;
    }
}
?>

<style>
.map-module { width: 100%; animation: fadeIn 0.3s ease-in-out; font-family: "Segoe UI", system-ui, sans-serif; }
.header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.header-bar h2 { color: #1e3a8a; margin: 0; font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.btn-back { background: #fff; color: #334155; padding: 10px 18px; text-decoration: none; border-radius: 8px; font-weight: bold; border: 1px solid #e2e8f0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; }
.btn-back:hover { background: #f8fafc; }

.form-card { background: #ffffff; border-radius: 12px; margin-bottom: 24px; border: 1px solid #e2e8f0; box-shadow: 0 2px 5px rgba(0,0,0,0.02); overflow: hidden; }
.form-card-header { padding: 18px 24px; color: #1e3a8a; font-weight: 800; font-size: 15px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f1f5f9; background: #fafaf9; }
.form-card-body { padding: 24px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: 12px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.form-control { padding: 14px 16px; border-radius: 8px; border: 1px solid #cbd5e1; outline: none; font-size: 14px; width: 100%; box-sizing: border-box; color: #334155; font-weight: 600;}
.form-control:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }

.input-group { display: flex; align-items: center; }
.input-group-text { background: #f1f5f9; border: 1px solid #cbd5e1; border-right: none; padding: 14px 16px; border-radius: 8px 0 0 8px; font-weight: 800; color: #475569; font-size: 14px;}
.input-group .form-control { border-radius: 0 8px 8px 0; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; background: #fffbeb; padding: 16px 20px; border-radius: 8px; border: 1px solid #fde68a; margin-bottom: 20px; }
.toggle-label { font-size: 14px; font-weight: 800; color: #b45309; display: flex; align-items: center; gap: 8px; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 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: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #f59e0b; }
input:checked + .slider:before { transform: translateX(20px); }

.btn-submit { background: #f59e0b; color: #fff; border: none; padding: 16px; border-radius: 8px; font-weight: 800; font-size: 15px; cursor: pointer; width: 100%; transition: 0.2s; text-transform: uppercase; display: flex; justify-content: center; align-items: center; gap: 10px; }
.btn-submit:hover { background: #d97706; }

#mapNotificationBanner { display: none; padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; font-weight: 700; font-size: 14px; align-items: center; gap: 10px; }
</style>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="
    if (typeof window.initMapCorporateUI === 'function') {
        window.initMapCorporateUI();
    } else {
        const s = document.createElement('script');
        s.src = '../../../assets/js/map_corporate.js?v=' + new Date().getTime();
        s.onload = () => window.initMapCorporateUI();
        document.head.appendChild(s);
    }
    this.remove();
" style="display:none;">

<div class="map-module">
    
    <div id="mapNotificationBanner"></div>

    <div class="header-bar">
        <h2><i class="fa-solid fa-link"></i> Map Procedure to HMO</h2>
        <button onclick="if(typeof loadContent === 'function') { loadContent('Corporate Insurance', 'insurance/corporateInsurance.php', 'Insurance', 'system_setup', null, true); } else { window.location.href='?cat=system_setup&page=insurance/corporateInsurance.php'; }" class="btn-back">
            <i class="fa-solid fa-arrow-left"></i> Back to Matrix
        </button>
    </div>

    <form id="mapCorporateForm">
        
        <div class="form-card">
            <div class="form-card-header">
                <i class="fa-solid fa-file-contract"></i> 1. Select Entities
            </div>
            <div class="form-card-body">
                <div class="grid-2">
                    <div class="form-group">
                        <label>Corporate Provider / HMO</label>
                        <select name="insurance_type_id" class="form-control" required>
                            <option value="">-- Select Provider --</option>
                            <?php foreach($providers as $p): ?>
                                <option value="<?php echo $p['id']; ?>"><?php echo htmlspecialchars($p['insurance_name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>Hospital Procedure / Service</label>
                        <select name="service_id" class="form-control" required>
                            <option value="">-- Select Service --</option>
                            <?php foreach($services as $dept => $srvs): ?>
                                <optgroup label="--- <?php echo htmlspecialchars($dept); ?> ---">
                                    <?php foreach($srvs as $s): ?>
                                        <option value="<?php echo $s['id']; ?>"><?php echo htmlspecialchars($s['service_name']); ?></option>
                                    <?php endforeach; ?>
                                </optgroup>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-card">
            <div class="form-card-header">
                <i class="fa-solid fa-money-bill-wave"></i> 2. Financial Logic
            </div>
            <div class="form-card-body">
                
                <div class="form-group" style="max-width: 50%;">
                    <label>Agreed Provider Tariff (Cap)</label>
                    <div class="input-group">
                        <span class="input-group-text">GHS</span>
                        <input type="number" step="0.01" name="tariff_amount" class="form-control" placeholder="0.00" required>
                    </div>
                </div>

                <div class="toggle-row">
                    <span class="toggle-label"><i class="fa-solid fa-coins"></i> Does this provider require a Patient Co-Payment?</span>
                    <label class="switch">
                        <input type="checkbox" id="copayToggle" name="is_copay_required" value="1">
                        <span class="slider"></span>
                    </label>
                </div>

                <div id="copaySection" class="grid-2" style="display:none; padding: 20px; border: 1px dashed #fde68a; border-radius: 8px; background: #fffbeb; margin-bottom: 20px;">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="color:#b45309;">Adult Co-Payment</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background:#fff; border-color:#fde68a;">GHS</span>
                            <input type="number" step="0.01" name="copay_amount_adult" class="form-control" placeholder="0.00" style="border-color:#fde68a;">
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="color:#b45309;">Child Co-Payment</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background:#fff; border-color:#fde68a;">GHS</span>
                            <input type="number" step="0.01" name="copay_amount_child" class="form-control" placeholder="0.00" style="border-color:#fde68a;">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <button type="button" class="btn-submit" onclick="if(typeof window.saveCorporateMapping === 'function') window.saveCorporateMapping(this);">
            <i class="fa-solid fa-link"></i> Save Insurance Mapping
        </button>
        <div style="height: 50px;"></div>
    </form>
</div>