@extends('layouts.master')
@section('title', 'Sub Accounts — Index')

@section('content')
@include('partials.qi-styles')

<div class="qi-wrap">
    <nav class="qi-bc">
        <a href="{{ route('home') }}">Home</a>
        <span>›</span>
        <a href="{{ route('main-accounts.index') }}">Chart of Accounts</a>
        <span>›</span>
        <a href="{{ route('main-accounts.index') }}">Main Accounts</a>
        <span>›</span>
        <span>{{ $mainAccount->account_name }}</span>
        <span>›</span>
        <span class="qi-bc-current">Sub Accounts</span>
    </nav>

    <div class="qi-hero">
        <div>
            <h1>{{ $mainAccount->account_name }} — Sub Accounts</h1>
            <p>Unified sub-account view for {{ $mainAccount->code ?? $mainAccount->account_code }}.</p>
        </div>
        <div class="qi-badge">
            <div class="qi-badge-val">{{ $subAccounts->total() }}</div>
            <div class="qi-badge-lab">Records</div>
        </div>
    </div>

    @if(session('success'))
        <div class="qi-alert qi-alert-success">{{ session('success') }}</div>
    @endif

    <form method="GET" action="{{ route('chart-of-accounts.main-accounts.sub-accounts.index', $mainAccount) }}">
        <div class="qi-toolbar">
            <a href="{{ route('main-accounts.index') }}" class="qi-btn">← Back</a>
            <div class="qi-search">
                <input name="search" type="search" value="{{ request('search') }}" placeholder="Search...">
            </div>
            <div class="qi-toolbar-right">
                <a href="{{ route('subacc.add', ['id' => $mainAccount->id]) }}" class="qi-btn qi-btn-primary">+ Add Sub Account</a>
            </div>
        </div>

        <div class="qi-filters">
            <div>
                <label class="qi-filter-label" for="sub_table">Sub Table</label>
                <select class="qi-filter-control" name="sub_table" id="sub_table">
                    <option value="">All</option>
                    @foreach($subTables as $table)
                        <option value="{{ $table }}" @selected(request('sub_table') === $table)>{{ $table }}</option>
                    @endforeach
                </select>
            </div>
            <div class="qi-filter-actions">
                <button type="submit" class="qi-btn qi-btn-primary">Apply</button>
                <a href="{{ route('chart-of-accounts.main-accounts.sub-accounts.index', $mainAccount) }}" class="qi-btn">Reset</a>
            </div>
        </div>
    </form>

    <div class="qi-table" style="--qi-cols: repeat(4, minmax(120px, 1fr));">
        <div class="qi-thead">
            <div>Account Code</div>
            <div>Sub Name</div>
            <div>Sub Table</div>
            <div>Actions</div>
        </div>
        @forelse($subAccounts as $row)
            <div class="qi-trow">
                <div class="qi-cell" data-label="Account Code">{{ $row->account_code }}</div>
                <div class="qi-cell" data-label="Sub Name">{{ $row->sub_name }}</div>
                <div class="qi-cell" data-label="Sub Table"><span class="qi-status qi-status-draft">{{ $row->sub_table ?? 'sub_accounts' }}</span></div>
                <div class="qi-actions">
                    <span class="qi-act-view">View</span>
                    <a href="{{ route('subacc.add', ['id' => $mainAccount->id, 'sub_table' => $row->sub_table, 'sub_id' => $row->id]) }}" class="qi-act-edit">Edit</a>
                    <form action="{{ route('chart-of-accounts.main-accounts.sub-accounts.destroy', [$row->sub_table, $row->id]) }}" method="POST" onsubmit="return confirm('Delete this record?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="qi-act-delete">Delete</button>
                    </form>
                </div>
            </div>
        @empty
            <div class="qi-empty">No records found.</div>
        @endforelse
    </div>

    <div class="qi-pagination">{{ $subAccounts->withQueryString()->links() }}</div>
</div>
@endsection