@extends('layouts.app')

@section('title','Ledgers')

@section('breadcrumb')
<li class="breadcrumb-item active">Ledgers</li>
@endsection

@section('content')
<div id="fees-page" class="page-content">
    <h1 class="mb-4">Ledgers</h1>
    <ul class="nav nav-tabs mb-4" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="income_ledger" data-bs-toggle="tab" data-bs-target="#income-ledger" type="button" role="tab">Income Ledger</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link " id="expense_ledger" data-bs-toggle="tab" data-bs-target="#expense-ledger" type="button" role="tab">Expense Ledger</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link " id="vendor_ledger" data-bs-toggle="tab" data-bs-target="#vendor-ledger" type="button" role="tab">Vendor Ledger</button>
        </li>
    </ul>

    <div class="tab-content">

        <div class="tab-pane fade show active" id="income-ledger" role="tabpanel">
            @include('ledgers.income')
        </div>
        <div class="tab-pane fade" id="expense-ledger" role="tabpanel">
            @include('ledgers.expense')
        </div>
        <div class="tab-pane fade" id="vendor-ledger" role="tabpanel">
            @include('ledgers.vendor')
        </div>
    </div>
</div>
@endsection