<style>
.add-prov-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; }

.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: #1e3a8a; box-shadow: 0 0 0 3px #eff6ff; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; background: #f8fafc; padding: 16px 20px; border-radius: 8px; border: 1px solid #e2e8f0; margin-top: 10px; }
.toggle-label { font-size: 14px; font-weight: 800; color: #1e293b; 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: #10b981; }
input:checked + .slider:before { transform: translateX(20px); }

.btn-submit { background: #1e3a8a; 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: #1e40af; }

#provNotificationBanner { 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.initAddProviderUI === 'function') {
        window.initAddProviderUI();
    } else {
        const s = document.createElement('script');
        s.src = '../../../assets/js/addCorporateInsuranceProvider.js?v=' + new Date().getTime();
        s.onload = () => window.initAddProviderUI();
        document.head.appendChild(s);
    }
    this.remove();
" style="display:none;">

<div class="add-prov-module">
    
    <div id="provNotificationBanner"></div>

    <div class="header-bar">
        <h2><i class="fa-solid fa-building-circle-check"></i> Register New Provider</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="addProviderForm">
        
        <div class="form-card">
            <div class="form-card-header">
                <i class="fa-solid fa-building"></i> Company Information
            </div>
            <div class="form-card-body">
                
                <div class="form-group" style="max-width: 600px;">
                    <label>Corporate Provider / HMO Name</label>
                    <input type="text" name="insurance_name" class="form-control" placeholder="e.g., Acacia Health Insurance, GLICO..." required>
                </div>

                <div class="toggle-row" style="max-width: 600px;">
                    <span class="toggle-label"><i class="fa-solid fa-power-off"></i> Set Provider as Active?</span>
                    <label class="switch">
                        <input type="checkbox" name="is_active" value="1" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                
                <p style="font-size: 12px; color: #64748b; max-width: 600px; margin-top: 10px; line-height: 1.5;">
                    <i class="fa-solid fa-circle-info"></i> Note: Once an HMO is saved and set to Active, it will instantly become available in the Service Catalog allowing you to map specific tariffs and procedures to it.
                </p>

            </div>
        </div>

        <button type="button" class="btn-submit" onclick="if(typeof window.saveNewProvider === 'function') window.saveNewProvider(this);" style="max-width: 600px;">
            <i class="fa-solid fa-floppy-disk"></i> Register Corporate Provider
        </button>
        <div style="height: 50px;"></div>
    </form>
</div>