@extends(request()->has('_sphf_partial') ? 'theme.sphf.layouts.partial' : 'theme.sphf.layouts.app')

<style>
    .sphf-page-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sphf-page-tab {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #d1d5db;
    color: #374151;
    background: #fff;
    transition: all .15s;
}

.sphf-page-tab:hover { background: #f0fdf4; border-color: #0a9a4c; color: #0a9a4c; }
.sphf-page-tab.is-active { background: #0a9a4c; border-color: #0a9a4c; color: #fff; }
    </style>
@section('content')
<section class="sphf-page sphf-branch">
    <div class="sphf-page-tabs mt-2">
      <a href="{{ route('theme.sphf.executive') }}" class="sphf-page-tab">Executive</a>
      <a href="{{ route('theme.sphf.ageing') }}" class="sphf-page-tab">Ageing</a>
      <a href="{{ route('theme.sphf.branch') }}" class="sphf-page-tab is-active">Branch</a>
      <a href="{{ route('theme.sphf.ip-performance') }}" class="sphf-page-tab">IP Performance</a>
      <a href="{{ route('theme.sphf.ifi-view') }}" class="sphf-page-tab">IFI View</a>
      <div class="ml-auto">
         <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfBranchExportArea" data-export-file="SPHF_Branch_Report" data-export-bg="#f3f5f6">
            <i class="ki-filled ki-exit-down"></i>
            <span>Export</span>
        </button>
      </div>
    </div>
    <!-- <div class="sphf-page__heading-row">
        <div class="sphf-page__title-wrap">
            <h1 class="sphf-page__title">Branch Analysis</h1>
            <span class="sphf-page__badge">Updated 10-03-26</span>
        </div>
       
    </div> -->

    <div class="sphf-export-area" id="sphfBranchExportArea">
    @include('theme.sphf.partials.filter-bar', [
        'options' => $filterOptions ?? [],
        'selected' => $selectedFilters ?? [],
    ])

    <div class="sphf-branch-chart-grid">
        <article class="sphf-card sphf-card--wide" id="sphfBranchEfficiencyCard">
            <div class="sphf-card__header">
                <h3>Bank &amp; Branch Efficiency</h3>
            </div>
            <p class="sphf-ageing-card__sub">Performance metrics across regional sectors</p>
            <div id="sphfBranchEfficiencyChart" class="sphf-chart sphf-chart--line"></div>
        </article>

        <article class="sphf-card sphf-card--wide" id="sphfBranchMonthlyCard">
            <div class="sphf-card__header">
                <h3>Monthly Disbursement VS Withdrawl</h3>
            </div>
            <div id="sphfBranchMonthlyChart" class="sphf-chart sphf-chart--line"></div>
        </article>
    </div>

    <section class="sphf-table-card">
        <div class="sphf-table-card__header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
    <span>Branch Exception Table</span>
    <input type="text" id="sphfBranchTableSearch" class="sphf-modal__search" placeholder="Search Bank, Branch..." style="max-width:280px;">
</div>
        <div class="sphf-table-wrap">
            <table class="sphf-table sphf-branch-exception-table">
                <thead>
                    <tr>
                        <th>BANK</th>
                        <th>BRANCH</th>
                        <th>TOTAL DISBURSED</th>
                        <th>WITHDRAWAL</th>
                        <th>PENDING</th>
                        <th>WITHDRAWAL %</th>
                        <th>ISSUE FLAG</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>HBL</strong></td>
                        <td>Main City Br. 001</td>
                        <td><strong>PKR 12.4M</strong></td>
                        <td><strong>PKR 11.8M</strong></td>
                        <td>PKR 600K</td>
                        <td><strong>44.5%</strong></td>
                        <td><span class="sphf-status-tag is-escalated">Critical</span></td>
                    </tr>
                    <tr>
                        <td><strong>UBL</strong></td>
                        <td>North Hub Br. 422</td>
                        <td><strong>PKR 8.2M</strong></td>
                        <td><strong>PKR 3.4M</strong></td>
                        <td>PKR 4.8M</td>
                        <td><strong>92.3%</strong></td>
                        <td><span class="sphf-status-tag is-healthy">Review</span></td>
                    </tr>
                    <tr>
                        <td><strong>NBP</strong></td>
                        <td>District Central 99</td>
                        <td><strong>PKR 25.1M</strong></td>
                        <td><strong>PKR 18.2M</strong></td>
                        <td>PKR 6.9M</td>
                        <td><strong>72.5%</strong></td>
                        <td><span class="sphf-status-tag is-watch">Warning</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section class="sphf-table-card">
        <div class="sphf-table-card__header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
    <span>Drill-down Table: Exception and Delay Cases</span>
    <input type="text" id="sphfBranchDrillSearch" class="sphf-modal__search" placeholder="Search CNIC, Beneficiary..." style="max-width:280px;">
</div>
        <div class="sphf-table-wrap">
            <table class="sphf-table sphf-branch-drill-table">
                <thead>
                    <tr>
                        <th>BENEFICIARY/CNIC</th>
                        <th>IP</th>
                        <th>DISTRICT</th>
                        <th>TEHSIL</th>
                        <th>PENDING STAGE</th>
                        <th>AGEING DAYS</th>
                        <th>ALARM</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Ahmed Khan</strong><br><small>42101-2391231-1</small></td>
                        <td>Alpha IP</td>
                        <td>Karachi</td>
                        <td>Central</td>
                        <td><span class="sphf-stage-pill">VERIFICATION</span></td>
                        <td class="is-critical">142</td>
                        <td><span class="alarm-dot is-red"></span></td>
                    </tr>
                    <tr>
                        <td><strong>Sara Williams</strong><br><small>42101-9921122-4</small></td>
                        <td>Beta IP</td>
                        <td>Lahore</td>
                        <td>Model Town</td>
                        <td><span class="sphf-stage-pill">APPROVAL</span></td>
                        <td class="is-warning">98</td>
                        <td><span class="alarm-dot is-orange"></span></td>
                    </tr>
                    <tr>
                        <td><strong>John Doe</strong><br><small>42201-1122334-7</small></td>
                        <td>Alpha IP</td>
                        <td>Peshawar</td>
                        <td>City Center</td>
                        <td><span class="sphf-stage-pill">DISBURSEMENT</span></td>
                        <td class="is-warning">62</td>
                        <td><span class="alarm-dot is-yellow"></span></td>
                    </tr>
                    <tr>
                        <td><strong>Fatima Bi</strong><br><small>42101-3344556-9</small></td>
                        <td>Gamma IP</td>
                        <td>Quetta</td>
                        <td>Cantt</td>
                        <td><span class="sphf-stage-pill">AUDIT</span></td>
                        <td class="is-healthy">14</td>
                        <td><span class="alarm-dot is-green"></span></td>
                    </tr>
                </tbody>
            </table>
            <div class="sphf-table-footer">
                <span>Showing 4 of 18,204 exceptions</span>
                <div class="sphf-pager">
                    <a href="javascript:void(0)">Previous</a>
                    <span class="active">1</span><span>2</span><span>3</span>
                    <a href="javascript:void(0)">Next</a>
                </div>
            </div>
        </div>
    </section>
    </div>
</section>
@endsection

@section('scripts')
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
<script>
const branchTableSearch = document.getElementById('sphfBranchTableSearch');
if (branchTableSearch) {
    branchTableSearch.addEventListener('input', () => {
        const q = branchTableSearch.value.toLowerCase();
        document.querySelectorAll('.sphf-branch-exception-table tbody tr').forEach(row => {
            row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });
}

const branchDrillSearch = document.getElementById('sphfBranchDrillSearch');
if (branchDrillSearch) {
    branchDrillSearch.addEventListener('input', () => {
        const q = branchDrillSearch.value.toLowerCase();
        document.querySelectorAll('.sphf-branch-drill-table tbody tr').forEach(row => {
            row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
    });
}
</script>
@endsection