@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 rounded shadow-sm" style="background-color: #6F4E37; color: white;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}" style="color: white;">
                        <i class="bx bx-home-alt"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">Advances</li>
            </ol>
        </nav>
        <a href="{{ route('add.advance.form') }}" class="btn text-white d-flex align-items-center shadow-sm" style="background-color: #A67B5B;">
            <i class="bx bx-plus-circle me-2"></i> Add Advance
        </a>
    </div>

    <div class="card shadow border-0 rounded">
        <div class="card-body p-4">

            <div class="mb-3">
                <input type="text" id="transactionSearch" class="form-control" placeholder="Search...">
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <ul class="nav nav-tabs" id="advanceTabs" role="tablist">
                    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-all" type="button" role="tab">All</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-farmers" type="button" role="tab">Farmer Advances</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-buyers" type="button" role="tab">HCU Buyers</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-employees" type="button" role="tab">Staff Advances</button></li>
                </ul>

                <form method="GET" action="{{ route('advances.pdf') }}" target="_blank" class="mb-0 ms-3">
                    <button type="submit" class="btn btn-sm btn-outline-secondary">
                        <i class="bx bx-download me-1"></i> Download PDF
                    </button>
                </form>
            </div>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-all" role="tabpanel">
                    @include('admin.hope_coffee.partials.advance_table', ['advances' => $advances])
                </div>
                <div class="tab-pane fade" id="tab-farmers" role="tabpanel">
                    @include('admin.hope_coffee.partials.advance_table', ['advances' => $farmerAdvances])
                </div>
                <div class="tab-pane fade" id="tab-buyers" role="tabpanel">
                    @include('admin.hope_coffee.partials.advance_table', ['advances' => $buyerAdvances])
                </div>
                <div class="tab-pane fade" id="tab-employees" role="tabpanel">
                    @include('admin.hope_coffee.partials.advance_table', ['advances' => $employeeAdvances])
                </div>
            </div>

        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // expand/collapse
    document.querySelectorAll('.expand-account').forEach(function (el) {
        el.addEventListener('click', function (e) {
            e.stopPropagation();
            const row = this.closest('tr');
            const target = row.getAttribute('data-target');
            document.querySelectorAll('.' + target).forEach(tr => tr.classList.toggle('d-none'));
            this.querySelector('.toggle-icon')?.classList.toggle('bx-chevron-down');
            this.querySelector('.toggle-icon')?.classList.toggle('bx-chevron-right');
        });
    });

    // search only in the active tab
    const search = document.getElementById('transactionSearch');
    search.addEventListener('keyup', function () {
        const q = this.value.toLowerCase();
        const activePane = document.querySelector('.tab-pane.active.show') || document.querySelector('.tab-pane.active');
        if (!activePane) return;
        activePane.querySelectorAll('table tbody tr:not([class*="lines-"])').forEach(function (tr) {
            tr.style.display = tr.innerText.toLowerCase().includes(q) ? '' : 'none';
        });
    });
<<<<<<< HEAD
=======

    const urlParams = new URLSearchParams(window.location.search);
    const initialSearch = urlParams.get('search');
    if (initialSearch) {
        search.value = initialSearch;
        search.dispatchEvent(new Event('keyup'));
    }

    const initialTab = urlParams.get('tab');
    if (initialTab) {
        const tabBtn = document.querySelector(`[data-bs-target="#tab-${initialTab}"]`);
        if (tabBtn && typeof bootstrap !== 'undefined') {
            bootstrap.Tab.getOrCreateInstance(tabBtn).show();
        }
    }
>>>>>>> origin/main
});
</script>
@endsection