@include('admin.layouts.header')
@include('admin.layouts.sidebar')

{{-- Select2 for searchable GL code dropdown --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
    /* ── Select2 Bootstrap theme fix ─────────────────────────────────── */
    .select2-container { width: 100% !important; }

    /* Selection box */
    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        position: relative;
    }

    /* Selected text */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px;
        padding-left: 0;
        padding-right: 40px;
        color: #495057;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    /* Placeholder text */
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #adb5bd;
        line-height: 38px;
    }

    /* Clear (×) button — positioned right of text, left of arrow */
    .select2-container--default .select2-selection--single .select2-selection__clear {
        position: absolute;
        right: 28px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        line-height: 1;
        color: #adb5bd;
        cursor: pointer;
        float: none;
        margin: 0;
        font-weight: bold;
    }
    .select2-container--default .select2-selection--single .select2-selection__clear:hover { 
        color: #495057; 
    }

    /* Dropdown arrow — pinned to far right */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #6c757d transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #6c757d transparent;
        border-width: 0 4px 5px 4px;
    }

    /* Dropdown panel */
    .select2-dropdown { border: 1px solid #ced4da; border-radius: 4px; z-index: 99999; }
    .select2-container--default .select2-search--dropdown .select2-search__field {
        border: 1px solid #ced4da;
        border-radius: 3px;
        padding: 5px 8px;
        outline: none;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #007bff; }

    /* ── GL Master loader ──────────────────────────────────────────────── */
    .gl-table-loader {
        text-align: center;
        padding: 40px 0;
        color: #6c757d;
    }
    .gl-table-loader .spinner-border { width: 2rem; height: 2rem; }
</style>

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center justify-content-between">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Odoo JV Configuration
                </h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="{{ url('admin/registry') }}" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">-</li>
                    <li class="m-nav__item">
                        <a href="{{ url('admin/registry') }}" class="m-nav__link">
                            <span class="m-nav__link-text">Registry</span>
                        </a>
                    </li>
                    <li class="m-nav__separator">-</li>
                    <li class="m-nav__item">
                        <span class="m-nav__link-text">Odoo Dashboard</span>
                    </li>
                </ul>
            </div>
            <div>
                <button type="button" class="btn btn-outline-primary mr-2" onclick="openGlMasterModal()">
                    <i class="la la-book"></i> GL Code Master
                </button>
                <button type="button" class="btn btn-primary" onclick="openSystemModal()">
                    <i class="la la-plus"></i> New Business
                </button>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->

    <div class="m-content">
        <!-- Systems Card -->
        <div class="m-portlet m-portlet--tabs">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            <i class="la la-sliders"></i> Business Names
                        </h3>
                    </div>
                </div>
                <div class="m-portlet__head-tools">
                    <ul class="nav nav-tabs m-tabs-line m-tabs-line--primary m-tabs-line--2x" role="tablist" id="system-tabs-list">
                        <!-- Populated by JS -->
                    </ul>
                </div>
            </div>

            <div class="m-portlet__body p-3">
                <!-- System Action Bar -->
                <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom" id="current-system-bar" style="display:none !important;">
                    <div>
                        <strong id="current-system-name" style="font-size: 1.1rem;"></strong>
                        <span id="current-system-slug" class="badge badge-secondary ml-2"></span>
                        <span id="current-system-desc" class="text-muted ml-3"></span>
                    </div>
                    <div>
                        <button class="btn btn-sm btn-outline-primary mr-1" onclick="openEditSystemModal()">
                            <i class="la la-edit"></i> Edit Business Name
                        </button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteCurrentSystem()">
                            <i class="la la-trash"></i> Delete Business Name
                        </button>
                    </div>
                </div>

                <!-- 2-Column Workspace: Left Sections & Steps | Right JV Entries -->
                <div class="row">
                    <!-- LEFT COLUMN: Sections & Steps -->
                    <div class="col-lg-5 col-md-12">
                        <!-- Partner Selector Card -->
                        <div class="m-portlet m-portlet--bordered mb-3" style="border: 1px solid #ebedf2;">
                            <div class="m-portlet__head" style="height: 45px; min-height: 45px;">
                                <div class="m-portlet__head-caption">
                                    <div class="m-portlet__head-title">
                                        <h4 class="m-portlet__head-text" style="font-size: 0.95rem;">
                                            <i class="la la-filter"></i> Configuration Level
                                        </h4>
                                    </div>
                                </div>
                            </div>
                            <div class="m-portlet__body p-3">
                                <!-- Config Level Radio Buttons -->
                                <div class="form-group mb-3">
                                    <div class="d-flex">
                                        <label class="m-radio m-radio--brand mr-4 mb-0">
                                            <input type="radio" name="config_level" value="system" checked onchange="onConfigLevelChange()">
                                            System Default
                                            <span></span>
                                        </label>
                                        <label class="m-radio m-radio--brand mb-0">
                                            <input type="radio" name="config_level" value="partner" onchange="onConfigLevelChange()">
                                            Partner-Specific
                                            <span></span>
                                        </label>
                                    </div>
                                </div>

                                <!-- Partner Dropdown (hidden by default) -->
                                <div class="form-group mb-2" id="partner-dropdown-group" style="display: none;">
                                    <label class="mb-1" style="font-size: 0.84rem; font-weight: 500;">Select Partner</label>
                                    <select class="form-control" id="config-partner-select">
                                        <option value="">-- Select Partner --</option>
                                    </select>
                                </div>

                                <!-- Partner Actions (shown when partner selected) -->
                                <div id="partner-actions-group" style="display: none;">
                                    <div id="clone-action" style="display: none;">
                                        <button class="btn btn-sm btn-outline-success btn-block" onclick="cloneToPartner()">
                                            <i class="la la-copy"></i> Clone from System Default
                                        </button>
                                        <small class="text-muted d-block mt-1">This partner has no configuration yet. Clone system default to get started.</small>
                                    </div>
                                    <div id="delete-action" style="display: none;">
                                        <button class="btn btn-sm btn-outline-danger btn-block" onclick="deletePartnerConfig()">
                                            <i class="la la-trash"></i> Delete Partner Configuration
                                        </button>
                                        <small class="text-muted d-block mt-1">Remove all partner-specific sections, steps, and entries.</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="m-portlet m-portlet--bordered mb-0" style="border: 1px solid #ebedf2;">
                            <div class="m-portlet__head" style="height: 50px;">
                                <div class="m-portlet__head-caption">
                                    <div class="m-portlet__head-title">
                                        <h4 class="m-portlet__head-text" style="font-size: 1rem;">
                                            Sections & JV Steps
                                        </h4>
                                    </div>
                                </div>
                                <div class="m-portlet__head-tools">
                                    <button class="btn btn-sm btn-outline-primary" onclick="openSectionModal()">
                                        <i class="la la-plus"></i> Add Section
                                    </button>
                                </div>
                            </div>
                            <div class="m-portlet__body p-2" id="sections-container" style="max-height: 700px; overflow-y: auto;">
                                <div class="text-center py-4 text-muted" id="sections-loading">
                                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                                    <p class="mt-2">Loading sections & steps...</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- RIGHT COLUMN: Selected Step Entries -->
                    <div class="col-lg-7 col-md-12">
                        <div class="m-portlet m-portlet--bordered mb-0" style="border: 1px solid #ebedf2;">
                            <div class="m-portlet__head" style="height: 50px;">
                                <div class="m-portlet__head-caption">
                                    <div class="m-portlet__head-title">
                                        <h4 class="m-portlet__head-text" style="font-size: 1rem;" id="entries-panel-title">
                                            Step Entries (GL Accounts)
                                        </h4>
                                    </div>
                                </div>
                                <div class="m-portlet__head-tools" id="entries-panel-tools" style="display: none;">
                                    <button class="btn btn-sm btn-primary" onclick="openEntryModal()">
                                        <i class="la la-plus"></i> Add Entry
                                    </button>
                                </div>
                            </div>
                            <div class="m-portlet__body p-3" id="entries-container">
                                <div class="text-center py-5 text-muted" id="no-step-selected-msg">
                                    <i class="la la-arrow-left fa-2x text-muted mb-2"></i>
                                    <h5>Select a Step</h5>
                                    <p class="text-muted">Click on any JV step from the left list to view and configure its GL account entries.</p>
                                </div>

                                <div id="selected-step-details" style="display: none;">
                                    <!-- Step Summary Banner -->
                                    <div class="p-3 mb-3 bg-light rounded d-flex align-items-center justify-content-between" style="border: 1px solid #e2e5ec;">
                                        <div>
                                            <h5 class="mb-1" id="step-info-title"></h5>
                                            <div>
                                                <span class="badge badge-info" id="step-info-voucher"></span>
                                                <span class="badge badge-success ml-1" id="step-info-status"></span>
                                            </div>
                                        </div>
                                        <div>
                                            <button class="btn btn-sm btn-outline-primary mr-1" onclick="openEditCurrentStepModal()">
                                                <i class="la la-edit"></i> Edit Step
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" onclick="deleteCurrentStep()">
                                                <i class="la la-trash"></i> Delete Step
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Entries Table -->
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover mb-0">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th style="width: 50px;">#</th>
                                                    <th style="width: 70px;">Type</th>
                                                    <th>Account Name</th>
                                                    <th style="width: 100px;">GL Code</th>
                                                    <th>Amount Field</th>
                                                    <th style="width: 90px;">Balancing Cr</th>
                                                    <th>Summary</th>
                                                    <th style="width: 90px;">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody id="entries-table-body">
                                                <!-- Entries injected via JS -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ==================== MODALS ==================== -->

<!-- System Modal -->
<div class="modal fade" id="modal-system" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-system-title">New Business</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form-system" onsubmit="saveSystem(event)">
                <input type="hidden" id="system-id">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Business Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="system-name" placeholder="e.g. DA, Credit Fair, Co-lending" required>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" id="system-desc" rows="3" placeholder="Brief description of this business..."></textarea>
                    </div>
                    <div class="form-group" id="system-active-group" style="display:none;">
                        <label class="d-flex align-items-center">
                            <input type="checkbox" id="system-active" checked class="mr-2"> Active
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Business Name</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Section Modal -->
<div class="modal fade" id="modal-section" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-section-title">New Section</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form-section" onsubmit="saveSection(event)">
                <input type="hidden" id="section-id">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Section Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="section-name" placeholder="e.g. Disbursement, Interest, Collections" required>
                    </div>
                    <div class="form-group">
                        <label>Sort Order</label>
                        <input type="number" class="form-control" id="section-sort" value="1" min="1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Section</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Step Modal -->
<div class="modal fade" id="modal-step" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-step-title">New JV Step</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form-step" onsubmit="saveStep(event)">
                <input type="hidden" id="step-id">
                <input type="hidden" id="step-section-id">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Step Key / ID <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="step-key" placeholder="e.g. emi_amount_received, disbursement_pv" required>
                        <small class="form-text text-muted">Unique step identifier used to map JV calculations.</small>
                    </div>
                    <div class="form-group">
                        <label>Voucher Type <span class="text-danger">*</span></label>
                        <select class="form-control" id="step-voucher-type" required>
                            <option value="Journal Voucher">Journal Voucher</option>
                            <option value="Payment Voucher">Payment Voucher</option>
                            <option value="Receipt Voucher">Receipt Voucher</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Sort Order</label>
                        <input type="number" class="form-control" id="step-sort" value="1" min="1">
                    </div>
                    <div class="form-group">
                        <label class="d-flex align-items-center">
                            <input type="checkbox" id="step-enabled" checked class="mr-2"> Enabled
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Step</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Entry Modal -->
<div class="modal fade" id="modal-entry" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-entry-title">New Entry</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form-entry" onsubmit="saveEntry(event)">
                <input type="hidden" id="entry-id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Type <span class="text-danger">*</span></label>
                                <select class="form-control" id="entry-type" required>
                                    <option value="Dr">Dr (Debit)</option>
                                    <option value="Cr">Cr (Credit)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <label>Sequence</label>
                                <input type="number" class="form-control" id="entry-seq" value="1" min="1">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label class="mb-0">GL Code <span class="text-danger">*</span></label>
                            <button type="button" class="btn btn-link btn-sm p-0" onclick="openAddGlCodeModal(true)" style="font-size: 0.8rem; text-decoration: none;">
                                <i class="la la-plus"></i> Add New GL Code
                            </button>
                        </div>
                        <select class="form-control" id="entry-gl-code" required>
                            <option value="">-- Select GL Code --</option>
                        </select>
                        <small class="form-text text-muted">Selecting a GL Code automatically fills the Account Name.</small>
                    </div>

                    <div class="form-group">
                        <label>Account Name (Ledger Name) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="entry-account" placeholder="e.g. Loans and Advances, Bank A/c, Interest Income" required>
                    </div>

                    <div class="form-group">
                        <label>Amount Field</label>
                        <input type="text" class="form-control" id="entry-amount-field" placeholder="e.g. disbursement_amount, interest_amount, emi_amount (optional)">
                        <small class="form-text text-muted">Freely configured amount field name from application/request.</small>
                    </div>

                    <div class="form-group">
                        <label class="d-flex align-items-center">
                            <input type="checkbox" id="entry-balancing" class="mr-2"> Is Balancing Credit (Auto-balances the debit sum)
                        </label>
                    </div>

                    <div class="form-group">
                        <label>Summary / Note</label>
                        <input type="text" class="form-control" id="entry-summary" placeholder="e.g. Disbursed Amount, Regular Interest">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Entry</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- GL Code Master List Modal -->
<div class="modal fade" id="modal-gl-master" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="max-width: 850px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="la la-book mr-1 text-primary"></i> GL Code Master Configuration
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
                    <div style="flex: 1; max-width: 420px;">
                        <div class="input-group input-group-sm">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="la la-search"></i></span>
                            </div>
                            <input type="text" id="gl-search-input" class="form-control form-control-sm" placeholder="Search by GL Code, Ledger Name, or GL Name..." onkeyup="filterGlTable()">
                        </div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-sm btn-primary" onclick="openAddGlCodeModal(false)">
                            <i class="la la-plus"></i> Add GL Code
                        </button>
                    </div>
                </div>

                <div class="table-responsive" style="max-height: 480px; overflow-y: auto;">
                    <table class="table table-striped table-bordered table-hover mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th style="width: 120px;">GL Code</th>
                                <th>Ledger Name</th>
                                <th>GL Name</th>
                                <th style="width: 90px;">Status</th>
                                <th style="width: 90px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="gl-master-table-body">
                            <tr>
                                <td colspan="6" class="gl-table-loader">
                                    <div class="spinner-border text-primary" role="status"></div>
                                    <div class="mt-2 small">Loading GL codes…</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Add / Edit GL Code Form Modal -->
<div class="modal fade" id="modal-gl-code-form" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-gl-code-form-title">Add GL Code</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form-gl-code" onsubmit="saveGlCode(event)">
                <input type="hidden" id="gl-form-id">
                <input type="hidden" id="gl-form-from-entry" value="0">
                <div class="modal-body">
                    <div class="form-group">
                        <label>GL Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="gl-form-code" placeholder="e.g. 133001, 100201" required>
                        <small class="form-text text-muted">Unique general ledger code used in Odoo accounting.</small>
                    </div>
                    <div class="form-group">
                        <label>Ledger Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="gl-form-ledger" placeholder="e.g. Loans A/c, ICICI Bank A/c, Interest Income" required>
                        <small class="form-text text-muted">Account/ledger name automatically populated in JV entries.</small>
                    </div>
                    <div class="form-group">
                        <label>GL Name (Description) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="gl-form-glname" placeholder="e.g. Loans and Advances, ICICI Bank Current Account" required>
                    </div>
                    <div class="form-group mb-0">
                        <label class="d-flex align-items-center mb-0">
                            <input type="checkbox" id="gl-form-active" checked class="mr-2"> Active
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn-save-gl-code">Save GL Code</button>
                </div>
            </form>
        </div>
    </div>
</div>

@include('admin.layouts.footer')

<style>
    /* Compact, proportional typography for clean enterprise UI */
    .m-portlet__head-text {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    .nav-tabs.m-tabs-line .nav-link {
        font-size: 0.86rem !important;
        font-weight: 500 !important;
        padding: 9px 14px !important;
    }
    .step-list-item {
        padding: 7px 10px;
        margin-bottom: 3px;
        border-radius: 4px;
        border: 1px solid #ebedf2;
        background: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background 0.15s ease;
    }
    .step-list-item:hover {
        background: #f7f8fa;
    }
    .step-list-item.active {
        background: #f0eeff;
        border-color: #5867dd;
    }
    .step-list-item strong {
        font-size: 0.85rem;
        font-weight: 600;
        color: #3f4047;
    }
    .section-card {
        border: 1px solid #ebedf2;
        border-radius: 4px;
        margin-bottom: 8px;
        background: #fff;
    }
    .section-header {
        padding: 7px 10px;
        background: #f7f8fa;
        border-bottom: 1px solid #ebedf2;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .section-header strong {
        font-size: 0.88rem;
        font-weight: 600;
        color: #3f4047;
    }
    #step-info-title {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
    }
    .table td, .table th {
        font-size: 0.84rem !important;
        padding: 7px 9px !important;
        vertical-align: middle !important;
    }
    .table thead th {
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        color: #575962 !important;
        background-color: #f7f8fa !important;
    }
    .badge {
        font-size: 0.72rem !important;
        font-weight: 500 !important;
        padding: 3px 6px !important;
    }
    .btn-sm {
        font-size: 0.78rem !important;
        padding: 3px 8px !important;
    }
    .form-group label {
        font-size: 0.84rem !important;
        font-weight: 500 !important;
        margin-bottom: 3px !important;
        color: #3f4047 !important;
    }
    .form-control {
        font-size: 0.84rem !important;
    }
    code {
        font-size: 0.82rem !important;
        color: #5867dd !important;
    }

    /* Fix transparent modal / popup issue */
    .modal {
        z-index: 10500 !important;
    }
    .modal-backdrop {
        z-index: 10450 !important;
        background-color: #000000 !important;
        opacity: 0.5 !important;
    }
    .modal-dialog {
        z-index: 10510 !important;
    }
    .modal-content {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid #ebedf2 !important;
        border-radius: 6px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        opacity: 1 !important;
    }
    .modal-header {
        background-color: #f7f8fa !important;
        border-bottom: 1px solid #ebedf2 !important;
        padding: 12px 18px !important;
        border-top-left-radius: 6px !important;
        border-top-right-radius: 6px !important;
    }
    .modal-header .modal-title {
        color: #3f4047 !important;
        font-weight: 600 !important;
        font-size: 1.05rem !important;
    }
    .modal-header .close {
        padding: 12px 18px !important;
        margin: -12px -18px -12px auto !important;
        cursor: pointer !important;
        outline: none !important;
    }
    .modal-header .close span {
        display: none !important;
    }
    .modal-body {
        background-color: #ffffff !important;
        padding: 20px !important;
        color: #3f4047 !important;
    }
    .modal-footer {
        background-color: #f7f8fa !important;
        border-top: 1px solid #ebedf2 !important;
        padding: 12px 20px !important;
        border-bottom-left-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
</style>

<script>
    // Global State
    var systems = [];
    var currentSystemId = null;
    var currentSections = [];
    var currentStepId = null;
    var currentStepData = null;
    var allGlCodes = [];
    
    // Partner state
    var currentPartnerId = null;
    var currentPartnerType = null;
    var currentPartnerHasConfig = false;
    var partnersList = [];
    
    // Caches to avoid redundant API calls
    var sectionsCache = {
        system: {},      // { systemId: sectionsData }
        partner: {}      // { "systemId_partnerId": sectionsData }
    };
    var stepsCache = {};        // { sectionId: stepsData }
    var entriesCache = {};      // { stepId: { step, data } }
    var partnerCheckCache = {}; // { "systemId_partnerId": boolean }
    var partnersCache = {};     // { systemId: partnersList }

    // Setup CSRF for all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });

    var glCodesLoaded = false;

    $(document).ready(function() {
        // Move modals to body to ensure no parent stacking context or transparency issues
        $('.modal').appendTo('body');
        loadSystems();
        // GL codes are lazy-loaded only when the entry modal is first opened

        // Init Select2 on the GL code dropdown (inside modal)
        $('#entry-gl-code').select2({
            dropdownParent: $('#modal-entry'),
            placeholder: '-- Search GL Code --',
            allowClear: true,
            width: '100%',
            templateResult: formatGlOption,
            templateSelection: formatGlSelection,
            matcher: glCodeMatcher
        }).on('change', function() {
            onGlCodeSelect(this);
        });
        
        // Init Select2 for partner dropdown
        $('#config-partner-select').select2({
            placeholder: '-- Select Partner --',
            allowClear: true,
            width: '100%'
        }).on('change', function() {
            onPartnerSelect();
        });
    });

    function formatGlOption(item) {
        if (!item.id) return item.text;
        var $opt = $(item.element);
        var ledger = $opt.data('ledger') || '';
        var glname = $opt.data('glname') || '';
        if (!ledger) return $('<span>').text(item.text);
        return $('<span><strong>' + item.id + '</strong> — ' + ledger +
               (glname && glname !== ledger ? ' <small class="text-muted">(' + glname + ')</small>' : '') + '</span>');
    }

    function formatGlSelection(item) {
        if (!item.id) return item.text;
        var $opt = $(item.element);
        var ledger = $opt.data('ledger') || '';
        return ledger ? item.id + ' — ' + ledger : item.text;
    }

    /**
     * Custom Select2 matcher: searches gl_code, ledger_name AND gl_name.
     * Select2's default only matches the option text content.
     */
    function glCodeMatcher(params, data) {
        // Always show the placeholder option
        if (!params.term || params.term.trim() === '') return data;

        var term = params.term.trim().toLowerCase();
        var $el   = $(data.element);
        var code   = String(data.id || '').toLowerCase();
        var ledger = String($el.data('ledger') || '').toLowerCase();
        var glname = String($el.data('glname') || '').toLowerCase();
        var text   = String(data.text || '').toLowerCase();

        if (code.indexOf(term) !== -1   ||
            ledger.indexOf(term) !== -1 ||
            glname.indexOf(term) !== -1 ||
            text.indexOf(term) !== -1) {
            return data;
        }
        return null;
    }

    // ── SYSTEMS ─────────────────────────────────────────────────────────────

    function loadSystems(selectedId) {
        $.get('/admin/odoo/config/systems', function(res) {
            if (res.status === 'success') {
                systems = res.data;
                renderSystemTabs();
                if (systems.length > 0) {
                    var targetId = selectedId || (systems[0] ? systems[0].id : null);
                    selectSystem(targetId);
                } else {
                    $('#sections-loading').html('<p class="text-muted">No systems found. Click "New System" above to create one.</p>');
                }
            }
        }).fail(function() {
            alert('Failed to load systems.');
        });
    }

    function renderSystemTabs() {
        var html = '';
        systems.forEach(function(s) {
            var activeClass = s.id === currentSystemId ? 'active' : '';
            html += '<li class="nav-item m-tabs__item">' +
                    '  <a class="nav-link m-tabs__link ' + activeClass + '" href="javascript:void(0);" onclick="selectSystem(' + s.id + ')">' +
                         s.name + ' <span class="badge badge-secondary ml-1">' + (s.steps_count || 0) + ' steps</span>' +
                    '  </a>' +
                    '</li>';
        });
        $('#system-tabs-list').html(html);
    }

    function selectSystem(systemId) {
        currentSystemId = systemId;
        renderSystemTabs();

        var system = systems.find(function(s) { return s.id === systemId; });
        if (system) {
            $('#current-system-bar').css('display', 'flex');
            $('#current-system-name').text(system.name);
            $('#current-system-slug').text(system.slug);
            $('#current-system-desc').text(system.description || '');
            
            // Store partner type from system slug
            currentPartnerType = system.slug;
        }

        // Reset partner state when switching systems
        currentPartnerId = null;
        currentPartnerHasConfig = false;
        $('input[name="config_level"][value="system"]').prop('checked', true);
        $('#partner-dropdown-group').hide();
        $('#partner-actions-group').hide();

        // Load partners for this system
        loadPartners(systemId);

        // Reset step view
        currentStepId = null;
        currentStepData = null;
        $('#selected-step-details').hide();
        $('#no-step-selected-msg').show();
        $('#entries-panel-tools').hide();

        loadSections(systemId);
    }

    function openSystemModal() {
        $('#modal-system-title').text('New System');
        $('#system-id').val('');
        $('#system-name').val('');
        $('#system-desc').val('');
        $('#system-active-group').hide();
        $('#modal-system').modal('show');
    }

    function openEditSystemModal() {
        var system = systems.find(function(s) { return s.id === currentSystemId; });
        if (!system) return;
        $('#modal-system-title').text('Edit System');
        $('#system-id').val(system.id);
        $('#system-name').val(system.name);
        $('#system-desc').val(system.description);
        $('#system-active').prop('checked', !!system.is_active);
        $('#system-active-group').show();
        $('#modal-system').modal('show');
    }

    function saveSystem(e) {
        e.preventDefault();
        var id = $('#system-id').val();
        var data = {
            name: $('#system-name').val(),
            description: $('#system-desc').val()
        };

        if (id) {
            data.is_active = $('#system-active').is(':checked') ? 1 : 0;
            $.ajax({
                url: '/admin/odoo/config/systems/' + id,
                type: 'PUT',
                data: data,
                success: function(res) {
                    $('#modal-system').modal('hide');
                    loadSystems(res.data.id);
                },
                error: function(xhr) {
                    alert('Error: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Failed to update system'));
                }
            });
        } else {
            $.post('/admin/odoo/config/systems', data, function(res) {
                $('#modal-system').modal('hide');
                loadSystems(res.data.id);
            }).fail(function(xhr) {
                alert('Error: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Failed to create system'));
            });
        }
    }

    function deleteCurrentSystem() {
        var system = systems.find(function(s) { return s.id === currentSystemId; });
        if (!system) return;
        if (!confirm('Are you sure you want to delete system "' + system.name + '" and all its sections, steps, and entries?')) return;

        $.ajax({
            url: '/admin/odoo/config/systems/' + system.id,
            type: 'DELETE',
            success: function() {
                loadSystems();
            },
            error: function() {
                alert('Failed to delete system.');
            }
        });
    }

    // ── PARTNER MANAGEMENT ──────────────────────────────────────────────────

    function loadPartners(systemId) {
        function renderPartnerOptions(data) {
            partnersList = data;
            var dropdown = $('#config-partner-select');
            var previousVal = dropdown.val();
            dropdown.empty().append('<option value="">-- Select Partner --</option>');
            
            partnersList.forEach(function(partner) {
                dropdown.append('<option value="' + partner.id + '">' + (partner.display_name || partner.name) + '</option>');
            });
            if (previousVal && partnersList.some(function(p) { return String(p.id) === String(previousVal); })) {
                dropdown.val(previousVal);
            }
            dropdown.trigger('change.select2');
        }

        if (partnersCache[systemId]) {
            renderPartnerOptions(partnersCache[systemId]);
            return;
        }

        $.get('/admin/odoo/config/systems/' + systemId + '/partners', function(res) {
            if (res.status === 'success') {
                partnersCache[systemId] = res.data;
                renderPartnerOptions(res.data);
            }
        }).fail(function() {
            console.error('Failed to load partners for system ' + systemId);
        });
    }

    function onConfigLevelChange() {
        var level = $('input[name="config_level"]:checked').val();
        
        // Reset step view
        currentStepId = null;
        currentStepData = null;
        $('#selected-step-details').hide();
        $('#no-step-selected-msg').show();
        $('#entries-panel-tools').hide();

        if (level === 'partner') {
            $('#partner-dropdown-group').show();
            var selectedPartnerId = $('#config-partner-select').val();
            if (selectedPartnerId) {
                onPartnerSelect();
            } else {
                $('#partner-actions-group').hide();
                currentPartnerId = null;
                currentPartnerHasConfig = false;
                $('#sections-container').html(
                    '<div class="text-center py-5 text-muted">' +
                    '  <i class="la la-user fa-3x mb-3 text-primary"></i>' +
                    '  <h5>Select a Partner</h5>' +
                    '  <p>Please select a partner from the dropdown above to view or configure partner-specific JV steps.</p>' +
                    '</div>'
                );
            }
        } else {
            // System default selected
            $('#partner-dropdown-group').hide();
            $('#partner-actions-group').hide();
            currentPartnerId = null;
            currentPartnerHasConfig = false;
            // Preserving the selected partner in #config-partner-select so switching back restores selection seamlessly
            
            // Reload sections for system default (use cache if available)
            if (currentSystemId) {
                loadSections(currentSystemId);
            }
        }
    }

    function onPartnerSelect() {
        var partnerId = $('#config-partner-select').val();
        
        if (!partnerId) {
            $('#partner-actions-group').hide();
            currentPartnerId = null;
            currentPartnerHasConfig = false;
            currentStepId = null;
            currentStepData = null;
            $('#selected-step-details').hide();
            $('#no-step-selected-msg').show();
            $('#entries-panel-tools').hide();

            var level = $('input[name="config_level"]:checked').val();
            if (level === 'partner') {
                $('#sections-container').html(
                    '<div class="text-center py-5 text-muted">' +
                    '  <i class="la la-user fa-3x mb-3 text-primary"></i>' +
                    '  <h5>Select a Partner</h5>' +
                    '  <p>Please select a partner from the dropdown above to view or configure partner-specific JV steps.</p>' +
                    '</div>'
                );
            }
            return;
        }
        
        currentPartnerId = partnerId;
        
        // Reset step view
        currentStepId = null;
        currentStepData = null;
        $('#selected-step-details').hide();
        $('#no-step-selected-msg').show();
        $('#entries-panel-tools').hide();

        var checkKey = currentSystemId + '_' + partnerId;
        
        function handlePartnerConfigStatus(hasConfig) {
            currentPartnerHasConfig = hasConfig;
            
            if (currentPartnerHasConfig) {
                // Show delete action
                $('#clone-action').hide();
                $('#delete-action').show();
                $('#partner-actions-group').show();
                
                // Load partner-specific sections
                loadSections(currentSystemId);
            } else {
                // Show clone action
                $('#delete-action').hide();
                $('#clone-action').show();
                $('#partner-actions-group').show();
                
                // Show empty state
                $('#sections-container').html(
                    '<div class="text-center py-5 text-muted">' +
                    '  <i class="la la-info-circle fa-3x mb-3 text-warning"></i>' +
                    '  <h5>No Configuration for This Partner</h5>' +
                    '  <p>This partner does not have a custom configuration yet.</p>' +
                    '  <p class="small">Click "Clone from System Default" above to create one.</p>' +
                    '</div>'
                );
            }
        }

        if (typeof partnerCheckCache[checkKey] !== 'undefined') {
            handlePartnerConfigStatus(partnerCheckCache[checkKey]);
            return;
        }
        
        // Check if partner has config
        $.get('/admin/odoo/config/systems/' + currentSystemId + '/partners/' + partnerId + '/check', {
            partner_type: currentPartnerType
        }, function(res) {
            if (res.status === 'success') {
                partnerCheckCache[checkKey] = res.has_config;
                handlePartnerConfigStatus(res.has_config);
            }
        }).fail(function() {
            alert('Failed to check partner configuration');
        });
    }

    function cloneToPartner() {
        if (!currentPartnerId || !currentSystemId) {
            alert('Please select a partner first');
            return;
        }
        
        if (!confirm('Clone the system default configuration to this partner? This will create a copy of all sections, steps, and entries.')) {
            return;
        }
        
        var btn = $('#clone-action button');
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Cloning...');
        
        $.post('/admin/odoo/config/clone-to-partner-dashboard', {
            system_id: currentSystemId,
            partner_id: currentPartnerId,
            partner_type: currentPartnerType
        }, function(res) {
            if (res.status === 'success') {
                alert('Configuration cloned successfully! ' + res.cloned.sections + ' sections, ' + 
                      res.cloned.steps + ' steps, ' + res.cloned.entries + ' entries.');
                currentPartnerHasConfig = true;
                
                // Invalidate partner cache and update check cache
                var cacheKey = currentSystemId + '_' + currentPartnerId;
                partnerCheckCache[cacheKey] = true;
                delete sectionsCache.partner[cacheKey];
                
                onPartnerSelect(); // Reload to show the cloned config
            }
        }).fail(function(xhr) {
            alert('Failed to clone configuration: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
        }).always(function() {
            btn.prop('disabled', false).html('<i class="la la-copy"></i> Clone from System Default');
        });
    }

    function deletePartnerConfig() {
        if (!currentPartnerId || !currentSystemId) {
            alert('No partner selected');
            return;
        }
        
        if (!confirm('Are you sure you want to delete ALL configuration for this partner? This will remove all sections, steps, and entries. This action cannot be undone.')) {
            return;
        }
        
        var btn = $('#delete-action button');
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Deleting...');
        
        $.ajax({
            url: '/admin/odoo/config/systems/' + currentSystemId + '/partners/' + currentPartnerId,
            type: 'DELETE',
            data: { partner_type: currentPartnerType },
            success: function(res) {
                if (res.status === 'success') {
                    alert('Partner configuration deleted successfully');
                    currentPartnerHasConfig = false;
                    
                    // Invalidate partner cache and update check cache
                    var cacheKey = currentSystemId + '_' + currentPartnerId;
                    partnerCheckCache[cacheKey] = false;
                    delete sectionsCache.partner[cacheKey];
                    
                    onPartnerSelect(); // Reload to show empty state
                }
            },
            error: function(xhr) {
                alert('Failed to delete configuration: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="la la-trash"></i> Delete Partner Configuration');
            }
        });
    }

    // ── SECTIONS & STEPS ────────────────────────────────────────────────────

    function loadSections(systemId, targetStepId, forceRefresh) {
        forceRefresh = forceRefresh || false;
        
        // Determine cache key
        var cacheKey;
        var useCache = false;
        
        if (currentPartnerId) {
            cacheKey = systemId + '_' + currentPartnerId;
            useCache = !forceRefresh && !!sectionsCache.partner[cacheKey];
        } else {
            cacheKey = systemId;
            useCache = !forceRefresh && !!sectionsCache.system[cacheKey];
        }
        
        // If cached data exists, use it immediately
        if (useCache) {
            currentSections = currentPartnerId ? sectionsCache.partner[cacheKey] : sectionsCache.system[cacheKey];
            renderSections(targetStepId);
            return;
        }
        
        // Show loading state
        $('#sections-container').html('<div class="text-center py-4 text-muted"><i class="fa fa-spinner fa-spin fa-2x"></i><p class="mt-2">Loading...</p></div>');

        var params = {};
        if (currentPartnerId) {
            params.partner_id = currentPartnerId;
            params.partner_type = currentPartnerType;
        }

        $.get('/admin/odoo/config/systems/' + systemId + '/sections', params, function(res) {
            if (res.status === 'success') {
                currentSections = res.data;
                
                // Cache the data
                if (currentPartnerId) {
                    sectionsCache.partner[cacheKey] = res.data;
                } else {
                    sectionsCache.system[cacheKey] = res.data;
                }
                
                renderSections(targetStepId);
            }
        }).fail(function() {
            $('#sections-container').html('<p class="text-danger p-3">Failed to load sections.</p>');
        });
    }

    function renderSections(targetStepId) {
        if (!currentSections || currentSections.length === 0) {
            $('#sections-container').html(
                '<div class="text-center py-5 text-muted">' +
                '  <p>No sections yet in this system.</p>' +
                '  <button class="btn btn-sm btn-outline-primary" onclick="openSectionModal()">' +
                '    <i class="la la-plus"></i> Add First Section' +
                '  </button>' +
                '</div>'
            );
            return;
        }

        var html = '';
        currentSections.forEach(function(sec) {
            var stepCount = (sec.steps && Array.isArray(sec.steps)) ? sec.steps.length : (sec.steps_count || 0);
            html += '<div class="section-card">' +
                    '  <div class="section-header">' +
                    '    <div>' +
                    '      <strong style="color: #3f4047;">' + sec.name + '</strong>' +
                    '      <span class="badge badge-secondary ml-1" id="sec-count-' + sec.id + '">' + stepCount + '</span>' +
                    '    </div>' +
                    '    <div>' +
                    '      <button class="btn btn-sm btn-outline-primary py-0 px-2 mr-1" title="Add Step" onclick="openAddStepModal(' + sec.id + ')">' +
                    '        <i class="la la-plus"></i> Step' +
                    '      </button>' +
                    '      <button class="btn btn-sm btn-outline-secondary py-0 px-2 mr-1" title="Edit Section" onclick="openEditSectionModal(' + sec.id + ', \'' + sec.name.replace(/'/g, "\\'") + '\', ' + sec.sort_order + ')">' +
                    '        <i class="la la-edit"></i>' +
                    '      </button>' +
                    '      <button class="btn btn-sm btn-outline-danger py-0 px-2" title="Delete Section" onclick="deleteSection(' + sec.id + ')">' +
                    '        <i class="la la-trash"></i>' +
                    '      </button>' +
                    '    </div>' +
                    '  </div>' +
                    '  <div class="p-2" id="steps-sec-' + sec.id + '">' +
                    '    <small class="text-muted"><i class="fa fa-spinner fa-spin"></i> Loading steps...</small>' +
                    '  </div>' +
                    '</div>';
        });

        $('#sections-container').html(html);

        // Load steps for each section (instant if eager-loaded or cached)
        currentSections.forEach(function(sec) {
            if (sec.steps && Array.isArray(sec.steps)) {
                renderStepsList(sec.id, sec.steps, targetStepId);
            } else {
                loadStepsForSection(sec.id, targetStepId);
            }
        });
    }

    function renderStepsList(sectionId, steps, targetStepId) {
        stepsCache[sectionId] = steps;
        $('#sec-count-' + sectionId).text(steps ? steps.length : 0);
        var container = $('#steps-sec-' + sectionId);

        if (!steps || steps.length === 0) {
            container.html('<small class="text-muted font-italic">No steps. Click "+ Step" to add one.</small>');
            return;
        }

        var html = '';
        steps.forEach(function(step) {
            var activeClass = step.id === currentStepId ? 'active' : '';
            var voucherBadge = step.voucher_type === 'Payment Voucher' ? 'badge-primary' : 'badge-info';
            var statusBadge = step.is_enabled ? '<span class="badge badge-success">On</span>' : '<span class="badge badge-secondary">Off</span>';

            html += '<div class="step-list-item ' + activeClass + '" id="step-item-' + step.id + '" onclick="selectStep(' + step.id + ')">' +
                    '  <div>' +
                    '    <strong>' + step.step_key + '</strong>' +
                    '    <div>' +
                    '      <span class="badge ' + voucherBadge + '" style="font-size:0.7rem;">' + step.voucher_type + '</span> ' +
                           statusBadge +
                    '    </div>' +
                    '  </div>' +
                    '  <i class="la la-angle-right text-muted"></i>' +
                    '</div>';
        });

        container.html(html);

        // Auto select target step or first step
        if (targetStepId) {
            var found = steps.find(function(s) { return s.id === targetStepId; });
            if (found) selectStep(found.id);
        } else if (!currentStepId && steps.length > 0 && currentSections[0] && currentSections[0].id === sectionId) {
            selectStep(steps[0].id);
        }
    }

    function loadStepsForSection(sectionId, targetStepId) {
        if (stepsCache[sectionId]) {
            renderStepsList(sectionId, stepsCache[sectionId], targetStepId);
            return;
        }

        $.get('/admin/odoo/config/sections/' + sectionId + '/steps', function(res) {
            if (res.status === 'success') {
                renderStepsList(sectionId, res.data, targetStepId);
            }
        });
    }

    function openSectionModal() {
        $('#modal-section-title').text('New Section');
        $('#section-id').val('');
        $('#section-name').val('');
        $('#section-sort').val((currentSections.length + 1));
        $('#modal-section').modal('show');
    }

    function openEditSectionModal(id, name, sortOrder) {
        $('#modal-section-title').text('Edit Section');
        $('#section-id').val(id);
        $('#section-name').val(name);
        $('#section-sort').val(sortOrder);
        $('#modal-section').modal('show');
    }

    function saveSection(e) {
        e.preventDefault();
        var id = $('#section-id').val();
        var data = {
            name: $('#section-name').val(),
            sort_order: $('#section-sort').val()
        };

        // Include partner context when partner is selected
        if (currentPartnerId) {
            data.partner_id = currentPartnerId;
            data.partner_type = currentPartnerType;
        }

        if (id) {
            $.ajax({
                url: '/admin/odoo/config/sections/' + id,
                type: 'PUT',
                data: data,
                success: function() {
                    $('#modal-section').modal('hide');
                    invalidateCache(); // Clear cache after modification
                    loadSections(currentSystemId, currentStepId, true); // Force refresh
                },
                error: function(xhr) {
                    alert('Error saving section: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
                }
            });
        } else {
            $.post('/admin/odoo/config/systems/' + currentSystemId + '/sections', data, function() {
                $('#modal-section').modal('hide');
                invalidateCache(); // Clear cache after modification
                loadSections(currentSystemId, null, true); // Force refresh
            }).fail(function(xhr) {
                alert('Error creating section: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
            });
        }
    }

    function deleteSection(id) {
        if (!confirm('Are you sure you want to delete this section and all its steps?')) return;
        $.ajax({
            url: '/admin/odoo/config/sections/' + id,
            type: 'DELETE',
            success: function() {
                invalidateCache(); // Clear cache after deletion
                loadSections(currentSystemId, null, true); // Force refresh
            },
            error: function() {
                alert('Failed to delete section.');
            }
        });
    }
    
    // Helper function to invalidate cache
    function invalidateCache() {
        if (currentPartnerId) {
            var cacheKey = currentSystemId + '_' + currentPartnerId;
            delete sectionsCache.partner[cacheKey];
        } else {
            delete sectionsCache.system[currentSystemId];
        }
        stepsCache = {};
        entriesCache = {};
    }

    // ── STEPS ───────────────────────────────────────────────────────────────

    function selectStep(stepId) {
        currentStepId = stepId;
        $('.step-list-item').removeClass('active');
        $('#step-item-' + stepId).addClass('active');

        if (entriesCache[stepId]) {
            currentStepData = entriesCache[stepId].step;
            renderStepEntries(entriesCache[stepId].step, entriesCache[stepId].data);
            return;
        }

        // Fetch step entries
        $.get('/admin/odoo/config/steps/' + stepId + '/entries', function(res) {
            if (res.status === 'success') {
                entriesCache[stepId] = { step: res.step, data: res.data };
                currentStepData = res.step;
                renderStepEntries(res.step, res.data);
            }
        }).fail(function() {
            alert('Failed to load step entries.');
        });
    }

    function renderStepEntries(step, entries) {
        $('#no-step-selected-msg').hide();
        $('#selected-step-details').show();
        $('#entries-panel-tools').show();

        // Populate step summary banner
        $('#step-info-title').text('Step: ' + step.step_key);
        $('#step-info-voucher').text(step.voucher_type);
        $('#step-info-status')
            .text(step.is_enabled ? 'Enabled' : 'Disabled')
            .removeClass('badge-success badge-secondary')
            .addClass(step.is_enabled ? 'badge-success' : 'badge-secondary');

        var tbody = $('#entries-table-body');
        if (!entries || entries.length === 0) {
            tbody.html('<tr><td colspan="8" class="text-center py-4 text-muted">No entries configured for this step yet. Click <strong>+ Add Entry</strong> above to add one.</td></tr>');
            return;
        }

        var html = '';
        entries.forEach(function(e) {
            var typeBadge = e.type === 'Dr' ? '<span class="badge badge-primary">Dr</span>' : '<span class="badge badge-success">Cr</span>';
            var balancingBadge = e.is_balancing_credit ? '<span class="badge badge-warning">Yes</span>' : '<span class="text-muted">No</span>';
            var amountFieldText = e.amount_field ? '<code>' + e.amount_field + '</code>' : '<span class="text-muted font-italic">(none / balancing)</span>';

            html += '<tr>' +
                    '  <td>' + e.sequence + '</td>' +
                    '  <td>' + typeBadge + '</td>' +
                    '  <td><strong>' + e.account + '</strong></td>' +
                    '  <td><code>' + e.gl_code + '</code></td>' +
                    '  <td>' + amountFieldText + '</td>' +
                    '  <td>' + balancingBadge + '</td>' +
                    '  <td>' + (e.summary || '<span class="text-muted">-</span>') + '</td>' +
                    '  <td>' +
                    '    <button class="btn btn-sm btn-outline-primary py-0 px-2 mr-1" title="Edit" onclick="openEditEntryModal(' + JSON.stringify(e).replace(/"/g, '&quot;') + ')">' +
                    '      <i class="la la-edit"></i>' +
                    '    </button>' +
                    '    <button class="btn btn-sm btn-outline-danger py-0 px-2" title="Delete" onclick="deleteEntry(' + e.id + ')">' +
                    '      <i class="la la-trash"></i>' +
                    '    </button>' +
                    '  </td>' +
                    '</tr>';
        });

        tbody.html(html);
    }

    function openAddStepModal(sectionId) {
        $('#modal-step-title').text('New JV Step');
        $('#step-id').val('');
        $('#step-section-id').val(sectionId);
        $('#step-key').val('');
        $('#step-voucher-type').val('Journal Voucher');
        $('#step-sort').val(1);
        $('#step-enabled').prop('checked', true);
        $('#modal-step').modal('show');
    }

    function openEditCurrentStepModal() {
        if (!currentStepData) return;
        $('#modal-step-title').text('Edit JV Step');
        $('#step-id').val(currentStepData.id);
        $('#step-section-id').val(currentStepData.section_id);
        $('#step-key').val(currentStepData.step_key);
        $('#step-voucher-type').val(currentStepData.voucher_type);
        $('#step-sort').val(currentStepData.sort_order);
        $('#step-enabled').prop('checked', !!currentStepData.is_enabled);
        $('#modal-step').modal('show');
    }

    function saveStep(e) {
        e.preventDefault();
        var id = $('#step-id').val();
        var sectionId = $('#step-section-id').val();
        var data = {
            step_key: $('#step-key').val().trim(),
            voucher_type: $('#step-voucher-type').val(),
            sort_order: $('#step-sort').val(),
            is_enabled: $('#step-enabled').is(':checked') ? 1 : 0
        };

        if (id) {
            $.ajax({
                url: '/admin/odoo/config/steps/' + id,
                type: 'PUT',
                data: data,
                success: function(res) {
                    $('#modal-step').modal('hide');
                    invalidateCache();
                    loadSections(currentSystemId, res.data.id, true);
                },
                error: function(xhr) {
                    alert('Error: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Failed to save step'));
                }
            });
        } else {
            $.post('/admin/odoo/config/sections/' + sectionId + '/steps', data, function(res) {
                $('#modal-step').modal('hide');
                invalidateCache();
                loadSections(currentSystemId, res.data.id, true);
            }).fail(function(xhr) {
                alert('Error: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Failed to create step'));
            });
        }
    }

    function deleteCurrentStep() {
        if (!currentStepData) return;
        if (!confirm('Are you sure you want to delete step "' + currentStepData.step_key + '" and all its entries?')) return;

        $.ajax({
            url: '/admin/odoo/config/steps/' + currentStepData.id,
            type: 'DELETE',
            success: function() {
                invalidateCache();
                loadSections(currentSystemId, null, true);
            },
            error: function() {
                alert('Failed to delete step.');
            }
        });
    }

    // ── ENTRIES ─────────────────────────────────────────────────────────────

    function openEntryModal() {
        $('#modal-entry-title').text('New Entry');
        $('#entry-id').val('');
        $('#entry-type').val('Dr');
        $('#entry-seq').val(1);
        $('#entry-account').val('');
        $('#entry-amount-field').val('');
        $('#entry-balancing').prop('checked', false);
        $('#entry-summary').val('');
        ensureGlCodesLoaded(function() {
            populateGlDropdown('');
            $('#modal-entry').modal('show');
        });
    }

    function openEditEntryModal(entry) {
        $('#modal-entry-title').text('Edit Entry');
        $('#entry-id').val(entry.id);
        $('#entry-type').val(entry.type);
        $('#entry-seq').val(entry.sequence);
        $('#entry-account').val(entry.account);
        $('#entry-amount-field').val(entry.amount_field || '');
        $('#entry-balancing').prop('checked', !!entry.is_balancing_credit);
        $('#entry-summary').val(entry.summary || '');
        ensureGlCodesLoaded(function() {
            populateGlDropdown(entry.gl_code);
            $('#modal-entry').modal('show');
        });
    }

    // Lazy-load GL codes once; call callback immediately if already loaded
    function ensureGlCodesLoaded(callback) {
        if (glCodesLoaded) {
            if (typeof callback === 'function') callback();
            return;
        }
        loadGlCodes(function() {
            glCodesLoaded = true;
            if (typeof callback === 'function') callback();
        });
    }

    function saveEntry(e) {
        e.preventDefault();
        var id = $('#entry-id').val();
        var data = {
            type: $('#entry-type').val(),
            sequence: $('#entry-seq').val(),
            account: $('#entry-account').val().trim(),
            gl_code: $('#entry-gl-code').val().trim(),
            amount_field: $('#entry-amount-field').val().trim() || null,
            is_balancing_credit: $('#entry-balancing').is(':checked') ? 1 : 0,
            summary: $('#entry-summary').val().trim() || null
        };

        if (id) {
            $.ajax({
                url: '/admin/odoo/config/entries/' + id,
                type: 'PUT',
                data: data,
                success: function() {
                    $('#modal-entry').modal('hide');
                    delete entriesCache[currentStepId];
                    selectStep(currentStepId);
                },
                error: function(xhr) {
                    alert('Error saving entry: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
                }
            });
        } else {
            $.post('/admin/odoo/config/steps/' + currentStepId + '/entries', data, function() {
                $('#modal-entry').modal('hide');
                delete entriesCache[currentStepId];
                selectStep(currentStepId);
            }).fail(function(xhr) {
                alert('Error creating entry: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
            });
        }
    }

    function deleteEntry(id) {
        if (!confirm('Are you sure you want to delete this entry?')) return;
        $.ajax({
            url: '/admin/odoo/config/entries/' + id,
            type: 'DELETE',
            success: function() {
                delete entriesCache[currentStepId];
                selectStep(currentStepId);
            },
            error: function() {
                alert('Failed to delete entry.');
            }
        });
    }

    // ── GL CODE MASTER ──────────────────────────────────────────────────────

    function loadGlCodes(callback) {
        $.get('/admin/odoo/config/gl-codes', function(res) {
            if (res.status === 'success') {
                allGlCodes = res.data || [];
                if (typeof callback === 'function') {
                    callback();
                }
            }
        }).fail(function() {
            console.error('Failed to load GL codes.');
        });
    }

    function populateGlDropdown(selectedCode) {
        var $select = $('#entry-gl-code');
        var currentVal = selectedCode !== undefined ? String(selectedCode) : String($select.val() || '');

        // Destroy existing Select2 instance before re-populating
        if ($select.hasClass('select2-hidden-accessible')) {
            $select.select2('destroy');
        }

        $select.empty();
        $select.append('<option value="">-- Search GL Code --</option>');

        var found = false;
        allGlCodes.forEach(function(item) {
            var itemCode = String(item.gl_code);
            var isSel = (itemCode === currentVal);
            if (isSel) found = true;

            // Only show active codes in the dropdown, or if this item is currently selected
            if (item.is_active || isSel) {
                var $opt = $('<option></option>')
                    .val(item.gl_code)
                    .text(item.gl_code + ' — ' + item.ledger_name)
                    .attr('data-ledger', item.ledger_name)
                    .attr('data-glname', item.gl_name);

                if (isSel) {
                    $opt.prop('selected', true);
                }
                $select.append($opt);
            }
        });

        // If the entry already had a legacy code not found in the master list, keep it
        if (currentVal && !found) {
            var $legacyOpt = $('<option></option>')
                .val(currentVal)
                .text(currentVal + ' (Legacy / Custom)')
                .attr('data-ledger', '')
                .attr('data-glname', '')
                .prop('selected', true);
            $select.append($legacyOpt);
        }

        // Re-initialise Select2 with custom multi-field matcher
        $select.select2({
            dropdownParent: $('#modal-entry'),
            placeholder: '🔍 Search by code, ledger name or GL name…',
            allowClear: true,
            width: '100%',
            templateResult: formatGlOption,
            templateSelection: formatGlSelection,
            matcher: glCodeMatcher
        }).on('change', function() {
            onGlCodeSelect(this);
        });

        // Set the value after Select2 init
        if (currentVal) {
            $select.val(currentVal).trigger('change.select2');
        }
    }

    function onGlCodeSelect(sel) {
        var opt = $(sel).find('option:selected');
        var ledger = opt.attr('data-ledger');
        if (ledger) {
            $('#entry-account').val(ledger);
        }
    }

    function openGlMasterModal() {
        $('#gl-search-input').val('');
        $('#modal-gl-master').modal('show');

        // Show loader
        $('#gl-master-table-body').html(
            '<tr><td colspan="6" class="gl-table-loader">' +
            '<div class="spinner-border text-primary" role="status"></div>' +
            '<div class="mt-2 small">Loading GL codes…</div>' +
            '</td></tr>'
        );

        ensureGlCodesLoaded(function() {
            renderGlMasterTable(allGlCodes);
        });
    }

    function renderGlMasterTable(list) {
        var tbody = $('#gl-master-table-body');
        if (!list || list.length === 0) {
            tbody.html('<tr><td colspan="6" class="text-center py-4 text-muted">No GL codes found. Click <strong>+ Add GL Code</strong> above to create one.</td></tr>');
            return;
        }

        var html = '';
        list.forEach(function(item, idx) {
            var statusBadge = item.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-secondary">Inactive</span>';
            var escapedItem = JSON.stringify(item).replace(/"/g, '&quot;');
            html += '<tr>' +
                    '  <td>' + (idx + 1) + '</td>' +
                    '  <td><code>' + item.gl_code + '</code></td>' +
                    '  <td><strong>' + item.ledger_name + '</strong></td>' +
                    '  <td>' + item.gl_name + '</td>' +
                    '  <td>' + statusBadge + '</td>' +
                    '  <td>' +
                    '    <button class="btn btn-sm btn-outline-primary py-0 px-2 mr-1" title="Edit" onclick="openEditGlCodeModal(' + escapedItem + ')">' +
                    '      <i class="la la-edit"></i>' +
                    '    </button>' +
                    '    <button class="btn btn-sm btn-outline-danger py-0 px-2" title="Delete" onclick="deleteGlCode(' + item.id + ', \'' + item.gl_code + '\')">' +
                    '      <i class="la la-trash"></i>' +
                    '    </button>' +
                    '  </td>' +
                    '</tr>';
        });

        tbody.html(html);
    }

    function filterGlTable() {
        var q = $('#gl-search-input').val().toLowerCase().trim();
        if (!q) {
            renderGlMasterTable(allGlCodes);
            return;
        }

        var filtered = allGlCodes.filter(function(item) {
            return String(item.gl_code).toLowerCase().indexOf(q) !== -1 ||
                   String(item.ledger_name).toLowerCase().indexOf(q) !== -1 ||
                   String(item.gl_name).toLowerCase().indexOf(q) !== -1;
        });

        renderGlMasterTable(filtered);
    }

    function openAddGlCodeModal(fromEntry) {
        $('#modal-gl-code-form-title').text('Add GL Code');
        $('#gl-form-id').val('');
        $('#gl-form-from-entry').val(fromEntry ? '1' : '0');
        $('#gl-form-code').val('');
        $('#gl-form-ledger').val('');
        $('#gl-form-glname').val('');
        $('#gl-form-active').prop('checked', true);
        $('#modal-gl-code-form').modal('show');
    }

    function openEditGlCodeModal(item) {
        $('#modal-gl-code-form-title').text('Edit GL Code');
        $('#gl-form-id').val(item.id);
        $('#gl-form-from-entry').val('0');
        $('#gl-form-code').val(item.gl_code);
        $('#gl-form-ledger').val(item.ledger_name);
        $('#gl-form-glname').val(item.gl_name);
        $('#gl-form-active').prop('checked', !!item.is_active);
        $('#modal-gl-code-form').modal('show');
    }

    function saveGlCode(e) {
        e.preventDefault();
        var id = $('#gl-form-id').val();
        var fromEntry = $('#gl-form-from-entry').val() === '1';
        var code = $('#gl-form-code').val().trim();
        var ledger = $('#gl-form-ledger').val().trim();
        var glName = $('#gl-form-glname').val().trim();
        var isActive = $('#gl-form-active').is(':checked') ? 1 : 0;

        var data = {
            gl_code: code,
            ledger_name: ledger,
            gl_name: glName,
            is_active: isActive
        };

        var url = id ? ('/admin/odoo/config/gl-codes/' + id) : '/admin/odoo/config/gl-codes';
        var method = id ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            type: method,
            data: data,
            success: function(res) {
                $('#modal-gl-code-form').modal('hide');
                loadGlCodes(function() {
                    if (fromEntry) {
                        // Select the newly added GL code in the entry modal and populate account
                        populateGlDropdown(code);
                        $('#entry-account').val(ledger);
                    } else {
                        // Refresh the GL Master table
                        filterGlTable();
                    }
                });
            },
            error: function(xhr) {
                alert('Error saving GL Code: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
            }
        });
    }

    function deleteGlCode(id, code) {
        if (!confirm('Are you sure you want to delete / deactivate GL Code "' + code + '"?')) return;
        $.ajax({
            url: '/admin/odoo/config/gl-codes/' + id,
            type: 'DELETE',
            success: function(res) {
                alert(res.message || 'GL Code deleted');
                loadGlCodes(function() {
                    filterGlTable();
                });
            },
            error: function(xhr) {
                alert('Failed to delete GL Code: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Error'));
            }
        });
    }
</script>