@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" id="sphfBranchPage" data-ajax-url="{{ route('theme.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-export-area" id="sphfBranchExportArea">
        @include('theme.sphf.partials.filter-bar', [
        'options' => $filterOptions ?? [],
        'selected' => $selectedFilters ?? [],
        ])

        <div id="sphfBranchDynamicContent">
            @include('theme.sphf.pages.partials.branch-content', [
            'monthlyReleasedWithdrawl' => $monthlyReleasedWithdrawl ?? [],
            'bankEfficiencyChart' => $bankEfficiencyChart ?? [],
            'bankExceptionTable' => $bankExceptionTable ?? [],
            ])
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    window.sphfBranchPayload = {
        monthlyReleasedWithdrawl: @json($monthlyReleasedWithdrawl ?? []),
        bankEfficiencyChart: @json($bankEfficiencyChart ?? []),
    };
    window.sphfBranchAjaxUrl = @json(route('theme.sphf.branch'));
    window.sphfCascadeMap = @json($cascadeMap ?? []);

    document.addEventListener('DOMContentLoaded', function() {

        const tableEl = $('#bankExceptionTable');

        if ($.fn.DataTable.isDataTable(tableEl)) {
            tableEl.DataTable().destroy();
        }

        tableEl.DataTable({
            pageLength: 10,
            ordering: true,
            searching: false,
            lengthChange: true,
            info: true,
            responsive: true,
            autoWidth: false,
            order: [
                [5, 'desc']
            ],
            columnDefs: [{
                targets: [2, 3, 4, 5],
                className: 'text-end'
            }]
        });

    });
</script>
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
@endsection