@extends('layouts.app')
@section('title', 'Opening Balance')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item">List</li>
    <li class="breadcrumb-item active">Opening Balance</li>
@endsection

@push('styles')
<style>
    #openingBalanceTabs .nav-link {
        font-size: 13px;
        font-weight: 500;
        color: #495057;
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        padding: 12px 18px;
        white-space: nowrap;
    }
    #openingBalanceTabs .nav-link:hover {
        color: var(--primary);
        background: var(--accent);
    }
    #openingBalanceTabs .nav-link.active {
        color: var(--primary);
        background: #fff;
        border-bottom-color: var(--primary-light);
        font-weight: 700;
    }
    .ob-table input.form-control {
        font-size: 13px;
        min-width: 110px;
    }
    .ob-table .text-money {
        font-variant-numeric: tabular-nums;
    }
    .ob-value-cell {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        color: #0a3622;
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Opening Balance</h1>
        <p class="page-subtitle">Enter starting balances for accounts, inventory items, customers, and vendors — each save posts a balanced journal with Opening Balance Equity</p>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body py-2 px-3">
        <div style="overflow-x:auto;-webkit-overflow-scrolling:touch">
            <ul class="nav flex-nowrap" id="openingBalanceTabs" role="tablist" style="min-width:max-content">
                @foreach($tabs as $key => $tab)
                    <li class="nav-item" role="presentation">
                        <a href="{{ route('masters.opening-balance.index', ['tab' => $key]) }}"
                           class="nav-link {{ $activeTab === $key ? 'active' : '' }}"
                           role="tab"
                           aria-selected="{{ $activeTab === $key ? 'true' : 'false' }}">
                            <i class="bi {{ $tab['icon'] }} me-1"></i>{{ $tab['label'] }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

<div class="tab-content">
    <div class="tab-pane fade show active" role="tabpanel">
        @include('masters.opening-balance.partials._' . $activeTab)
    </div>
</div>
@endsection