@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : [],
        $noCardView ?? true,
        [],
        $data ?? []
    )
)
@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="container-fluid mt-4">

    {{-- Instructions --}}
    <div class="mb-3">
        <span class="badge bg-primary"><i class="bx bx-info-circle"></i> View more info</span>
        <span class="badge bg-success"><i class="bx bx-pencil"></i> Edit record</span>
        <span class="badge bg-danger"><i class="bx bx-trash"></i> Delete record</span>
    </div>

    {{-- Tab Navigation --}}
    <div class="project-box mb-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <ul class="nav nav-tabs project-tab mb-0" id="lineItemTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a href="{{ route('residuals.residuals-line-items', ['tab' => 'line-items']) }}">
                        <button class="nav-link {{ ($activeTab ?? 'line-items') === 'line-items' ? 'active' : '' }} waves-effect" type="button">
                            Line Items
                        </button>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ route('residuals.residuals-line-items', ['tab' => 'recurring']) }}">
                        <button class="nav-link {{ ($activeTab ?? 'line-items') === 'recurring' ? 'active' : '' }} waves-effect" type="button">
                            Recurring Line Items
                        </button>
                    </a>
                </li>
            </ul>
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn green-btn-inner" data-bs-toggle="modal" data-bs-target="#importLineItemsModal">
                    <i class="bx bx-import me-1"></i> Line Item Importer
                </button>
                <button type="button" class="btn green-btn-inner" data-bs-toggle="modal" data-bs-target="#addLineItemModal">
                    <i class="bx bx-plus me-1"></i> Add Line Item
                </button>
            </div>
        </div>

        {{-- Tab Content --}}
        <div class="tab-content" id="lineItemTabContent">

            {{-- ============================================================ --}}
            {{-- Tab 1: Line Items (one-time, is_recurring = 0) --}}
            {{-- ============================================================ --}}
            @if(($activeTab ?? 'line-items') === 'line-items')
            <div class="tab-pane fade show active" id="pane-line-items" role="tabpanel">
                {{-- Controls row --}}
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="d-flex align-items-center gap-2">
                        <span class="small text-muted">Show</span>
                        <div class="project-form mb-0" style="width: 80px;">
                            <select class="form-select form-select-sm" id="lineItemPerPage">
                                <option value="10">10</option>
                                <option value="25" selected>25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <span class="small text-muted">entries</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <div class="project-form mb-0" style="width: 200px;">
                            <input type="text" class="form-control form-control-sm" id="lineItemSearch"
                                   placeholder="Search..." value="{{ request('search', '') }}">
                        </div>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="table-responsive project-table">
                    <table class="{{ \Config::get('view.table.table_class') }}">
                        <thead class="{{ \Config::get('view.table.table_head_class') }}">
                            <tr>
                                <th>Description</th>
                                <th>$</th>
                                <th>Expense</th>
                                <th>Income</th>
                                <th>Net</th>
                                <th>Type</th>
                                <th>Name</th>
                                <th width="12%" style="text-align: right;">Options</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data as $item)
                            <tr data-id="{{ $item->id }}">
                                <td>{{ $item->description }}</td>
                                <td>${{ number_format($item->amount, 2) }}</td>
                                <td>${{ number_format($item->expense, 2) }}</td>
                                <td>${{ number_format($item->income, 2) }}</td>
                                <td>${{ number_format($item->net, 2) }}</td>
                                <td>
                                    <span class="badge bg-{{ $item->type === 'addition' ? 'success' : 'warning' }}">
                                        {{ ucfirst($item->type) }}
                                    </span>
                                </td>
                                <td>{{ $item->user ? $item->user->first_name . ' ' . $item->user->last_name : ($item->agent_name ?: 'N/A') }}</td>
                                <td class="text-end">
                                    <span class="badge bg-primary btn-view-line-item" role="button" data-id="{{ $item->id }}" title="View">
                                        <i class="bx bx-show"></i>
                                    </span>
                                    <span class="badge bg-success btn-edit-line-item" role="button" data-id="{{ $item->id }}" title="Edit"
                                          data-description="{{ $item->description }}"
                                          data-amount="{{ $item->amount }}"
                                          data-type="{{ $item->type }}"
                                          data-month="{{ $item->line_item_month }}"
                                          data-year="{{ $item->line_item_year }}"
                                          data-user-type="{{ $item->user_type }}"
                                          data-user-id="{{ $item->user_id }}"
                                          data-merchant-id="{{ $item->merchant_id }}"
                                          data-merchant-name="{{ $item->merchant ? $item->merchant->dba : '' }}"
                                          data-is-recurring="{{ $item->is_recurring ? 1 : 0 }}">
                                        <i class="bx bx-pencil"></i>
                                    </span>
                                    <span class="badge bg-danger btn-delete-line-item" role="button" data-id="{{ $item->id }}" title="Delete">
                                        <i class="bx bx-trash"></i>
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted py-3">No data available in table</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                @if(isset($data) && method_exists($data, 'links'))
                    {{ $data->links() }}
                @endif
            </div>
            @endif

            {{-- ============================================================ --}}
            {{-- Tab 2: Recurring Line Items (is_recurring = 1) --}}
            {{-- ============================================================ --}}
            @if(($activeTab ?? 'line-items') === 'recurring')
            <div class="tab-pane fade show active" id="pane-recurring" role="tabpanel">
                {{-- Controls row --}}
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="d-flex align-items-center gap-2">
                        <span class="small text-muted">Show</span>
                        <div class="project-form mb-0" style="width: 80px;">
                            <select class="form-select form-select-sm" id="recurringPerPage">
                                <option value="10">10</option>
                                <option value="25" selected>25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <span class="small text-muted">entries</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                <i class="bx bx-export"></i> Export
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item export-recurring" href="#" data-format="csv"><i class="bx bx-file me-1"></i> CSV</a></li>
                                <li><a class="dropdown-item export-recurring" href="#" data-format="xls"><i class="bx bx-spreadsheet me-1"></i> XLS</a></li>
                            </ul>
                        </div>
                        <div class="project-form mb-0" style="width: 200px;">
                            <input type="text" class="form-control form-control-sm" id="recurringSearch"
                                   placeholder="Search..." value="{{ request('search', '') }}">
                        </div>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="table-responsive project-table">
                    <table class="{{ \Config::get('view.table.table_class') }}">
                        <thead class="{{ \Config::get('view.table.table_head_class') }}">
                            <tr>
                                <th>Created</th>
                                <th>Description</th>
                                <th>$</th>
                                <th>Expense</th>
                                <th>Income</th>
                                <th>Month</th>
                                <th>Year</th>
                                <th>Type</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data as $item)
                            <tr data-id="{{ $item->id }}">
                                <td>
                                    <span class="badge bg-light text-dark">{{ $item->created_at ? $item->created_at->format('m/d/Y') : 'N/A' }}</span>
                                </td>
                                <td>{{ $item->description }}</td>
                                <td>${{ number_format($item->amount, 2) }}</td>
                                <td>${{ number_format($item->expense, 2) }}</td>
                                <td>${{ number_format($item->income, 2) }}</td>
                                <td>{{ $item->line_item_month ? date('F', mktime(0,0,0,$item->line_item_month,1)) : 'N/A' }}</td>
                                <td>{{ $item->line_item_year ?: 'N/A' }}</td>
                                <td>
                                    <span class="badge bg-{{ $item->type === 'addition' ? 'success' : 'warning' }}">
                                        {{ ucfirst($item->type) }}
                                    </span>
                                </td>
                                <td>{{ $item->user ? $item->user->first_name . ' ' . $item->user->last_name : ($item->agent_name ?: 'N/A') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted py-3">No data available in table</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Bottom Filter Row --}}
                <div class="d-flex align-items-center flex-wrap gap-2 mt-3 pt-3 border-top">
                    <div class="project-form mb-0" style="width: 160px;">
                        <select class="form-select form-select-sm select2 no-search" id="recurringFilterProcessor">
                            <option value="">All Processors</option>
                            @foreach($processors ?? \App\Http\Controllers\Residuals\ResidualsController::$processors as $proc)
                                <option value="{{ $proc }}">{{ $proc }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="project-form mb-0" style="width: 130px;">
                        <select class="form-select form-select-sm select2 no-search" id="recurringFilterMonth">
                            <option value="">All Months</option>
                            @for($m = 1; $m <= 12; $m++)
                                <option value="{{ $m }}">{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="project-form mb-0" style="width: 100px;">
                        <select class="form-select form-select-sm select2 no-search" id="recurringFilterYear">
                            <option value="">All Years</option>
                            @for($y = date('Y') - 5; $y <= date('Y') + 1; $y++)
                                <option value="{{ $y }}">{{ $y }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="project-form mb-0" style="width: 200px;">
                        <input type="text" class="form-control form-control-sm" id="recurringFilterName"
                               placeholder="Merchant or User Name">
                    </div>
                </div>

                {{-- Pagination --}}
                @if(isset($data) && method_exists($data, 'links'))
                    {{ $data->links() }}
                @endif
            </div>
            @endif

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

{{-- Add Line Item Modal --}}
@include('admin.residuals.partials._modal-add-line-item')

{{-- Import Line Items Modal --}}
<div class="modal fade" id="importLineItemsModal" tabindex="-1" aria-labelledby="importLineItemsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background-color: var(--header-color, #16C4C0); color: #fff;">
                <h5 class="modal-title" id="importLineItemsModalLabel">Import Line Items</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="importLineItemsForm" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="alert alert-info mb-3">
                        <i class="bx bx-info-circle me-1"></i>
                        Use this line items import template:
                        <a href="{{ route('residuals.line-items.template-download') }}" class="fw-bold text-decoration-underline" id="downloadTemplateLink">Line Item Import Template</a>.
                    </div>
                    <p class="small text-muted mb-3">MID or Username are required to apply a line item.</p>
                    <div class="project-form">
                        <label>Choose File</label>
                        <input type="file" class="form-control" name="file" accept=".csv,.txt" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="bx bx-x"></i> Cancel</button>
                    <button type="submit" class="btn green-btn-inner"><i class="bx bx-upload"></i> Start Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('page_script')
<script>
window.ResidualsLineItemsConfig = {
    csrf: '{{ csrf_token() }}',
    activeTab: '{{ $activeTab ?? "line-items" }}',
    routes: {
        page: '{{ route("residuals.residuals-line-items") }}',
        list: '{{ route("residuals.line-items.list") }}',
        recurring: '{{ route("residuals.line-items.recurring") }}',
        store: '{{ route("residuals.line-items.store") }}',
        update: '{{ url("admin/residuals/line-items") }}',
        destroy: '{{ url("admin/residuals/line-items") }}',
        import: '{{ route("residuals.line-items.import") }}',
        templateDownload: '{{ route("residuals.line-items.template-download") }}',
    }
};
</script>
<script src="{{ asset('assets/js/residuals-line-items.js') }}?v={{ date('YmdHis') }}"></script>
@endpush