<style>
    .attr-wrapper { width: 100%; padding: 20px 0; font-family: 'Inter', sans-serif;}
    .view-header { text-align: center; margin-bottom: 40px; }
    .view-header h2 { font-weight: 800; color: #0f172a; margin-bottom: 5px; font-size:26px;}
    .view-header p { color: #64748b; font-weight: 500; font-size: 14px;}
    .view-header .icon-box { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: #e0f2fe; color: #0284c7; font-size: 24px; margin-bottom: 15px;}

    .custom-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid #e2e8f0; margin-bottom: 30px; padding-bottom: 10px;}
    .custom-tabs .tab-link { color: #64748b; font-weight: 700; font-size: 13px; padding: 10px 15px; cursor: pointer; border-radius: 8px; transition: 0.2s; background: #f8fafc; border: 1px solid #e2e8f0;}
    .custom-tabs .tab-link:hover { color: #0284c7; background: #e0f2fe; border-color: #bae6fd;}
    .custom-tabs .tab-link.active { color: #fff; background: #0284c7; border-color: #0284c7; }

    .tbl-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .tbl-header-bar h5 { font-weight: 800; color: #0f172a; margin: 0; font-size: 18px;}

    table.dataTable { width: 100% !important; margin: 0 !important; font-size: 13.5px; }
    table.dataTable thead th { background: #fff; color: #0284c7; padding: 15px; font-weight: 800; font-size: 11.5px; text-transform: uppercase; border-bottom: 2px solid #e2e8f0; text-align: left;}
    table.dataTable tbody td { padding: 15px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155;}
</style>

<div class="attr-wrapper">
    <div class="view-header">
        <div class="icon-box"><i class="fa-solid fa-layer-group"></i></div>
        <h2>Product Attributes & Dictionaries</h2>
        <p>Manage the baseline schemas that power the Master Product Catalog and Clinical Prescriptions.</p>
    </div>

    <!-- TABS -->
    <div class="custom-tabs" id="attrTabs">
        <button class="tab-link active" onclick="loadAttrTab('brand')">Commercial Brands</button>
        <button class="tab-link" onclick="loadAttrTab('manufacturer')">Manufacturers</button>
        <button class="tab-link" onclick="loadAttrTab('type')">Product Types</button>
        <button class="tab-link" onclick="loadAttrTab('category')">Item Categories</button>
        <button class="tab-link" onclick="loadAttrTab('uom')">Units of Measure</button>
        <button class="tab-link" onclick="loadAttrTab('therapeutic')">Therapeutic Classes</button>
        <button class="tab-link" onclick="loadAttrTab('formulation')">Formulations</button>
        <button class="tab-link" onclick="loadAttrTab('prescribing')">Prescribing Levels</button>
    </div>

    <div class="attr-tab-content bg-white p-4 rounded-3 border shadow-sm">
        
        <div id="tab_brand" class="attr-pane active">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-tag text-primary me-2"></i> Commercial Brands</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('brand')"><i class="fa-solid fa-plus me-1"></i> Add Brand</button>
            </div>
            <div class="table-responsive"><table id="tbl_brand" class="table table-hover"><thead><tr><th width="5%">#</th><th>Brand Name</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

        <div id="tab_manufacturer" class="attr-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-industry text-primary me-2"></i> Manufacturers</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('manufacturer')"><i class="fa-solid fa-plus me-1"></i> Add Manufacturer</button>
            </div>
            <div class="table-responsive"><table id="tbl_manufacturer" class="table table-hover"><thead><tr><th width="5%">#</th><th>Manufacturer Name</th><th>Country of Origin</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

        <div id="tab_type" class="attr-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-layer-group text-primary me-2"></i> Product Types</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('type')"><i class="fa-solid fa-plus me-1"></i> Add Type</button>
            </div>
            <div class="table-responsive"><table id="tbl_type" class="table table-hover"><thead><tr><th width="5%">#</th><th>Product Type Name</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

        <div id="tab_category" class="attr-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-folder-tree text-primary me-2"></i> Item Categories</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('category')"><i class="fa-solid fa-plus me-1"></i> Add Category</button>
            </div>
            <div class="table-responsive"><table id="tbl_category" class="table table-hover"><thead><tr><th width="5%">#</th><th>Category Name</th><th>Description</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

        <div id="tab_uom" class="attr-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-box-archive text-primary me-2"></i> Units of Measure (Base & Strength)</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('uom')"><i class="fa-solid fa-plus me-1"></i> Add UoM</button>
            </div>
            <div class="table-responsive"><table id="tbl_uom" class="table table-hover"><thead><tr><th width="5%">#</th><th>Unit Name</th><th>Symbol</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

        <div id="tab_therapeutic" class="attr-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-dna text-primary me-2"></i> Therapeutic Classes</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('therapeutic')"><i class="fa-solid fa-plus me-1"></i> Add Class</button>
            </div>
            <div class="table-responsive"><table id="tbl_therapeutic" class="table table-hover"><thead><tr><th width="5%">#</th><th>Class Name</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

        <div id="tab_formulation" class="attr-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-capsules text-primary me-2"></i> Drug Formulations</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('formulation')"><i class="fa-solid fa-plus me-1"></i> Add Formulation</button>
            </div>
            <div class="table-responsive"><table id="tbl_formulation" class="table table-hover"><thead><tr><th width="5%">#</th><th>Formulation Name</th><th>Symbol</th><th>Description</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

        <div id="tab_prescribing" class="attr-pane" style="display:none;">
            <div class="tbl-header-bar">
                <h5><i class="fa-solid fa-gavel text-primary me-2"></i> Prescribing Levels</h5>
                <button class="btn btn-primary fw-bold px-4 rounded-pill shadow-sm" onclick="openAttrModal('prescribing')"><i class="fa-solid fa-plus me-1"></i> Add Level</button>
            </div>
            <div class="table-responsive"><table id="tbl_prescribing" class="table table-hover"><thead><tr><th width="5%">#</th><th>Level Code</th><th>Description</th><th width="15%">Status</th><th class="text-end" width="15%">Action</th></tr></thead><tbody></tbody></table></div>
        </div>

    </div>
</div>

<!-- DYNAMIC MODALS -->
<div class="modal fade" id="mdl_brand" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_brand" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="brand" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-tag me-2"></i> Commercial Brand</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Brand Name <span class="text-danger">*</span></label><input type="text" name="brand_name" class="form-control fw-bold border-secondary" required></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<div class="modal fade" id="mdl_manufacturer" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_manufacturer" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="manufacturer" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-industry me-2"></i> Manufacturer</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Manufacturer Name <span class="text-danger">*</span></label><input type="text" name="manufacturer_name" class="form-control fw-bold border-secondary" required></div><div class="mb-3"><label class="fw-bold small mb-1">Country of Origin</label><input type="text" name="country_of_origin" class="form-control fw-bold border-secondary"></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<div class="modal fade" id="mdl_type" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_type" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="type" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-layer-group me-2"></i> Product Type</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Type Name <span class="text-danger">*</span></label><input type="text" name="type_name" class="form-control fw-bold border-secondary" required></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<div class="modal fade" id="mdl_category" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_category" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="category" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-folder-tree me-2"></i> Item Category</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Category Name <span class="text-danger">*</span></label><input type="text" name="category_name" class="form-control fw-bold border-secondary" required></div><div class="mb-3"><label class="fw-bold small mb-1">Description</label><input type="text" name="description" class="form-control fw-bold border-secondary"></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<div class="modal fade" id="mdl_uom" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_uom" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="uom" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-box-archive me-2"></i> Unit of Measure</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Unit Name <span class="text-danger">*</span></label><input type="text" name="unit_name" class="form-control fw-bold border-secondary" required></div><div class="mb-3"><label class="fw-bold small mb-1">Symbol (e.g. mg, Tab, Bag)</label><input type="text" name="unit_symbol" class="form-control fw-bold border-secondary"></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<div class="modal fade" id="mdl_therapeutic" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_therapeutic" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="therapeutic" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-dna me-2"></i> Therapeutic Class</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Class Name <span class="text-danger">*</span></label><input type="text" name="class_name" class="form-control fw-bold border-secondary" required></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<div class="modal fade" id="mdl_formulation" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_formulation" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="formulation" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-capsules me-2"></i> Drug Formulation</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Formulation Name <span class="text-danger">*</span></label><input type="text" name="formulation_name" class="form-control fw-bold border-secondary" required></div><div class="mb-3"><label class="fw-bold small mb-1">Symbol / Short Code</label><input type="text" name="formulation_symbol" class="form-control fw-bold border-secondary"></div><div class="mb-3"><label class="fw-bold small mb-1">Description</label><input type="text" name="description" class="form-control fw-bold border-secondary"></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<div class="modal fade" id="mdl_prescribing" tabindex="-1" data-bs-backdrop="static"><div class="modal-dialog modal-dialog-centered"><form id="frm_prescribing" class="modal-content border-0 shadow-lg rounded-4 attr-form" data-type="prescribing" onsubmit="event.preventDefault();"><div class="modal-header bg-dark text-white border-0"><h5 class="modal-title fw-bold"><i class="fa-solid fa-gavel me-2"></i> Prescribing Level</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="id"><div class="mb-3"><label class="fw-bold small mb-1">Level Code <span class="text-danger">*</span></label><input type="text" name="level_code" class="form-control fw-bold border-secondary text-uppercase" placeholder="e.g. A, B1" required></div><div class="mb-3"><label class="fw-bold small mb-1">Description</label><input type="text" name="description" class="form-control fw-bold border-secondary" placeholder="e.g. Primary Care"></div></div><div class="modal-footer border-0 bg-white"><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">Save</button></div></form></div></div>

<!-- CUSTOM APP MODALS (NO BROWSER ALERTS) -->
<div class="modal fade" id="appResponseModal" tabindex="-1" style="z-index: 1070;" data-bs-backdrop="static"><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>
<div class="modal fade" id="appConfirmModal" tabindex="-1" style="z-index: 1070;" data-bs-backdrop="static"><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 class="fa-solid fa-triangle-exclamation text-warning fa-4x mb-3"></i><h5 class="fw-bold text-dark" id="appConfTitle">Confirm</h5><p class="text-muted small" id="appConfMsg"></p><div class="d-flex justify-content-center gap-2 mt-4"><button type="button" class="btn btn-light fw-bold border" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-danger fw-bold px-4 shadow-sm" id="btnAppConfirm">Yes, Proceed</button></div></div></div></div></div>