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

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

    {{-- Tab Navigation --}}
    <ul class="nav nav-tabs project-tab mb-0" id="importTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link {{ ($activeTab ?? 'add-report') == 'add-report' ? 'active' : '' }}"
               href="{{ route('residuals.residuals-import', ['tab' => 'add-report']) }}"
               data-tab="add-report">
                <i class="bx bx-plus-circle me-1"></i> Add a New Report
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link {{ ($activeTab ?? '') == 'reports' ? 'active' : '' }}"
               href="{{ route('residuals.residuals-import', ['tab' => 'reports']) }}"
               data-tab="reports">
                <i class="bx bx-file me-1"></i> Imported Residual Reports
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link {{ ($activeTab ?? '') == 'mappings' ? 'active' : '' }}"
               href="{{ route('residuals.residuals-import', ['tab' => 'mappings']) }}"
               data-tab="mappings">
                <i class="bx bx-map me-1"></i> Manage Mappings
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link {{ ($activeTab ?? '') == 'custom-fees' ? 'active' : '' }}"
               href="{{ route('residuals.residuals-import', ['tab' => 'custom-fees']) }}"
               data-tab="custom-fees">
                <i class="bx bx-dollar-circle me-1"></i> Custom Fees
            </a>
        </li>
    </ul>

    {{-- Tab Content --}}
    <div class="tab-content mt-0">

        {{-- ================================================================
             Tab 1: Add a New Report
             ================================================================ --}}
        @if(($activeTab ?? 'add-report') == 'add-report')
        <div class="tab-pane fade show active" id="tab-add-report">
            <div class="project-box p-4">
                {{-- Options --}}
                <div class="mb-4">
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" id="identifyProcessor" name="identify_processor" value="1" checked>
                        <label class="form-check-label" for="identifyProcessor">
                            Identify processor by filename and previous uploads
                            <i class="bx bx-info-circle text-info" data-bs-toggle="tooltip" title="Auto-detect processor from filename pattern"></i>
                        </label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" id="adjustYearMonth" name="adjust_year_month" value="1" checked>
                        <label class="form-check-label" for="adjustYearMonth">
                            Adjust year and month based on your previous upload history
                            <i class="bx bx-info-circle text-info" data-bs-toggle="tooltip" title="Auto-detect report period from file data"></i>
                        </label>
                    </div>
                </div>

                {{-- Drag & Drop Upload Zone --}}
                <div class="upload-zone text-center p-5 mb-4" id="uploadZone"
                     style="border: 2px dashed #16C4C0; border-radius: 8px; background: #f8fffe; cursor: pointer;">
                    <div class="upload-zone-content">
                        <p class="mt-2 mb-1 text-muted">Drag and drop residual report here to upload, or</p>
                        <button type="button" class="btn green-btn-inner" id="btnBrowseFile">
                            <i class="bx bx-folder-open me-1"></i> Browse Residual Report
                        </button>
                        <input type="file" id="residualFileInput" name="file" accept=".csv,.xls,.xlsx" class="d-none">
                    </div>
                    {{-- Progress bar (hidden by default) --}}
                    <div class="upload-progress d-none mt-3" id="uploadProgress">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #16C4C0;"
                                 id="uploadProgressBar">0%</div>
                        </div>
                        <p class="small text-muted mt-1" id="uploadFileName"></p>
                    </div>
                </div>

                {{-- Post-Upload Configuration Card (hidden by default) --}}
                <div class="d-none" id="postUploadCard">
                    <div class="bg-light p-3 rounded mb-4 position-relative" style="border: 1px solid #ddd;">
                        {{-- File info row --}}
                        <div class="d-flex align-items-center mb-3">
                            <div class="me-3" style="position: relative; width: 40px; height: 40px;">
                                <svg viewBox="0 0 36 36" style="width: 40px; height: 40px; transform: rotate(-90deg);">
                                    <circle cx="18" cy="18" r="16" fill="none" stroke="#e0e0e0" stroke-width="3"></circle>
                                    <circle cx="18" cy="18" r="16" fill="none" stroke="#16C4C0" stroke-width="3"
                                            stroke-dasharray="100.5" stroke-dashoffset="0" id="uploadCircleProgress"></circle>
                                </svg>
                                <span class="position-absolute top-50 start-50 translate-middle small fw-bold" style="font-size: 10px;" id="uploadCircleText">100</span>
                            </div>
                            <div class="flex-grow-1">
                                <strong id="postUploadFileName"></strong><br>
                                <small class="text-muted" id="postUploadFileSize"></small>
                            </div>
                            <button type="button" class="btn btn-link text-danger p-0" id="btnRemoveUpload" title="Remove">
                                <i class="bx bx-x" style="font-size: 24px;"></i>
                            </button>
                        </div>

                        <input type="hidden" id="configReportId" value="">

                        {{-- Processor --}}
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Processor:</label>
                                <select class="form-select" id="configProcessor">
                                    <option value="">-- Select Processor --</option>
                                    @foreach($processorOptions ?? [] as $pId => $pName)
                                        <option value="{{ $pName }}">{{ $pName }}</option>
                                    @endforeach
                                    <option value="__new__">+ Add New Processor</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">File Formats:</label>
                                <div class="form-control-plaintext" id="configFileFormats">CSV, XLS, XLSX, MM101, TMSBO</div>
                            </div>
                        </div>

                        {{-- Month / Year --}}
                        <div class="row mb-3">
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Month:</label>
                                <select class="form-select" id="configMonth">
                                    @for($m = 1; $m <= 12; $m++)
                                        <option value="{{ $m }}" {{ $m == date('n') ? 'selected' : '' }}>{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <select class="form-select" id="configYear">
                                    @for($y = date('Y') - 5; $y <= date('Y') + 1; $y++)
                                        <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>{{ $y }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>

                        {{-- Deposit Month --}}
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Deposits Month:</label>
                                <select class="form-select" id="configDepositMonth">
                                    <option value="">Do Not Apply</option>
                                    @for($m = 1; $m <= 12; $m++)
                                        <option value="{{ date('Y') }}-{{ sprintf('%02d', $m) }}">{{ date('F', mktime(0,0,0,$m,1)) }} {{ date('Y') }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>

                        {{-- Buttons --}}
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-secondary" id="btnCancelImport">
                                <i class="bx bx-x me-1"></i> Cancel
                            </button>
                            <button type="button" class="btn green-btn-inner" id="btnStartImport">
                                <i class="bx bx-import me-1"></i> Import
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Mapping Not Found Section (hidden by default) --}}
                <div class="d-none" id="mappingNotFound">
                    <div class="project-box p-4">
                        <h5 class="text-danger fw-bold"><i class="bx bx-error me-1"></i> Residuals Mapping Not Found</h5>
                        <p class="text-muted">
                            The columns in <strong id="mnfFileName"></strong> do not match the saved mapping for <strong id="mnfProcessor"></strong>.
                        </p>
                        <p class="text-muted">If a different Processor should be selected, press <strong>Go Back</strong>.</p>
                        <p class="text-muted">To see the existing mappings, press <strong>View Mappings</strong>.</p>
                        <p class="text-muted">If this is a new residuals report, or there are updated columns in your file, press <strong>Create New Mapping</strong>.</p>

                        <div class="d-flex gap-2 mt-3">
                            <button type="button" class="btn btn-secondary" id="btnMnfGoBack">
                                <i class="bx bx-left-arrow-alt me-1"></i> Go Back
                            </button>
                            <button type="button" class="btn green-btn-inner" id="btnMnfViewMappings">
                                <i class="bx bx-show me-1"></i> View Mappings
                            </button>
                            <button type="button" class="btn btn-info text-white" id="btnMnfCreateMapping">
                                <i class="bx bx-plus me-1"></i> Create New Mapping
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Upload result area --}}
                <div class="upload-result d-none" id="uploadResult">
                    <div class="alert alert-success">
                        <i class="bx bx-check-circle me-1"></i>
                        <span id="uploadResultMessage"></span>
                    </div>
                </div>

            </div>

            {{-- Processing Files Section --}}
            @if(isset($processingFiles) && count($processingFiles) > 0)
            <div class="project-box p-3 mt-3" id="processingFilesSection">
                <h6 class="fw-bold mb-3">
                    Processing Files
                    <i class="bx bx-info-circle text-info" data-bs-toggle="tooltip" title="Files uploaded but not yet fully imported"></i>
                </h6>
                <div class="table-responsive project-table">
                    <table class="{{ \Config::get('view.table.table_class') }}" id="processingFilesTable">
                        <thead class="{{ \Config::get('view.table.table_head_class') }}">
                            <tr>
                                <th>ID</th>
                                <th>Filename</th>
                                <th>Date</th>
                                <th>Processor</th>
                                <th>Size</th>
                                <th>Uploaded</th>
                                <th>By</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($processingFiles as $pf)
                            <tr id="pf-row-{{ $pf->id }}">
                                <td>{{ $pf->id }}</td>
                                <td>
                                    <i class="bx bx-file me-1"></i>{{ $pf->file_name }}
                                    @if($pf->import_status == \App\Models\Residuals\ResidualReport::IMPORT_PROCESSING)
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" role="progressbar" style="width: 50%; background-color: #16C4C0;"></div>
                                    </div>
                                    @endif
                                </td>
                                <td>{{ $pf->year_month ? \Carbon\Carbon::createFromFormat('Y-m', $pf->year_month)->format('M Y') : '-' }}</td>
                                <td>{{ $pf->processor ?: '-' }}</td>
                                <td>{{ $pf->file_size ? number_format($pf->file_size / 1024, 2) . ' KB' : '-' }}</td>
                                <td>{{ $pf->created_at ? $pf->created_at->format('m/d/Y g:ia') : '-' }}</td>
                                <td>{{ $pf->user ? ($pf->user->first_name . ' ' . $pf->user->last_name) : '-' }}</td>
                                <td>
                                    @php $is = \App\Models\Residuals\ResidualReport::$importStatuses[$pf->import_status] ?? null; @endphp
                                    @if($is)
                                        <span class="badge bg-{{ $is['badge'] }}">{{ $is['name'] }}</span>
                                    @else
                                        <span class="badge bg-secondary">Unknown</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('residuals.import.mapping-configure', $pf->id) }}" class="btn btn-sm btn-info text-white">
                                        <i class="bx bx-show"></i> View
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger btn-pf-delete" data-id="{{ $pf->id }}">
                                        <i class="bx bx-trash"></i> Delete
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if(method_exists($processingFiles, 'links'))
                    <div class="mt-2">{{ $processingFiles->links() }}</div>
                @endif
            </div>
            @endif
        </div>
        @endif

        {{-- ================================================================
             Tab 2: Imported Residual Reports
             ================================================================ --}}
        @if(($activeTab ?? '') == 'reports')
        <div class="tab-pane fade show active" id="tab-reports">
            <div class="project-box p-3">
                {{-- Controls --}}
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <div class="project-form mb-0" style="width: 80px;">
                            <select class="form-select form-select-sm" id="reportsPerPage">
                                <option value="25">25</option>
                                <option value="50" selected>50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <span class="small text-muted">entries</span>
                        <div class="form-check ms-3 mb-0">
                            <input class="form-check-input" type="checkbox" id="showDeletedReports" name="show_deleted"
                                   {{ request('show_deleted') ? 'checked' : '' }}>
                            <label class="form-check-label small" for="showDeletedReports">Show Deleted Reports</label>
                        </div>
                    </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="reportsSearch"
                                   placeholder="Search..." value="{{ request('search') }}">
                        </div>
                    </div>
                </div>

                {{-- Reports DataTable --}}
                <div class="table-responsive project-table">
                    <table class="{{ \Config::get('view.table.table_class') }}" id="reportsTable">
                        <thead class="{{ \Config::get('view.table.table_head_class') }}">
                            <tr>
                                <th style="width: 30px;">
                                    <input type="checkbox" class="form-check-input" id="selectAllReports">
                                </th>
                                <th>ID #</th>
                                <th>Rows</th>
                                <th>Added</th>
                                <th>Rej</th>
                                <th>DA</th>
                                <th>Date</th>
                                <th>Processor</th>
                                <th>SysPrt</th>
                                <th>Created</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reports as $report)
                            <tr data-report-id="{{ $report->id }}">
                                <td>
                                    <input type="checkbox" class="form-check-input report-checkbox" value="{{ $report->id }}">
                                </td>
                                <td>{{ $report->id }}</td>
                                <td>{{ number_format($report->total_rows ?? 0) }}</td>
                                <td>{{ number_format($report->imported_count ?? 0) }}</td>
                                <td>{{ number_format($report->rejected_count ?? 0) }}</td>
                                <td>{{ $report->da_count ?? '-' }}</td>
                                <td>{{ $report->year_month ?? '-' }}</td>
                                <td>{{ $report->processor ?? '-' }}</td>
                                <td>{{ $report->sys_prt ?? '-' }}</td>
                                <td>
                                    @if($report->user)
                                        <span class="small">{{ $report->user->first_name ?? '' }} {{ $report->user->last_name ?? '' }}</span><br>
                                    @endif
                                    <span class="small text-muted">{{ $report->created_at ? $report->created_at->format('m/d/Y h:i A') : '-' }}</span>
                                </td>
                                <td>
                                    @if($report->status == 2)
                                        <span class="badge bg-success">Published</span>
                                    @else
                                        <span class="badge bg-warning text-dark">Unpublished</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-report-view"
                                                data-id="{{ $report->id }}" title="View">
                                            <i class="bx bx-show"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary btn-report-edit"
                                                data-id="{{ $report->id }}" title="Edit">
                                            <i class="bx bx-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-success btn-report-publish"
                                                data-id="{{ $report->id }}" data-status="{{ $report->status }}"
                                                title="{{ $report->status == 2 ? 'Unpublish' : 'Publish' }}">
                                            <i class="bx {{ $report->status == 2 ? 'bx-hide' : 'bx-check-circle' }}"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-report-delete"
                                                data-id="{{ $report->id }}" title="Delete">
                                            <i class="bx bx-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="12" class="text-center text-muted py-3">No imported reports found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                @if(isset($reports) && method_exists($reports, 'links'))
                    {{ $reports->links() }}
                @endif

                {{-- Mass Actions --}}
                <div class="project-box p-3 mt-3" id="massActionsPanel">
                    <h6 class="fw-bold mb-2">Mass Actions</h6>
                    <div class="d-flex flex-wrap align-items-end gap-3">
                        <div>
                            <span class="small text-muted">Records affected: </span>
                            <span class="badge bg-primary" id="massActionCount">0</span>
                        </div>
                        <div class="project-form mb-0" style="width: 160px;">
                            <label class="small">Action</label>
                            <select class="form-select form-select-sm" id="massActionType">
                                <option value="">-- Select Action --</option>
                                <option value="publish">Publish</option>
                                <option value="unpublish">Unpublish</option>
                                <option value="delete">Delete</option>
                            </select>
                        </div>
                        <div class="project-form mb-0" style="width: 160px;">
                            <label class="small">Processor</label>
                            <select class="form-select form-select-sm" id="massActionProcessor">
                                <option value="">-- All Processors --</option>
                                @foreach($processors ?? [] as $proc)
                                    <option value="{{ $proc }}">{{ $proc }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="project-form mb-0" style="width: 120px;">
                            <label class="small">Month</label>
                            <select class="form-select form-select-sm" id="massActionMonth">
                                <option value="">-- Month --</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: 90px;">
                            <label class="small">Year</label>
                            <select class="form-select form-select-sm" id="massActionYear">
                                <option value="">-- Year --</option>
                                @for($y = date('Y') - 5; $y <= date('Y') + 1; $y++)
                                    <option value="{{ $y }}">{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                        <div>
                            <button type="button" class="btn green-btn-inner btn-sm" id="btnMassAction">
                                <i class="bx bx-check me-1"></i> Update
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        @endif

        {{-- ================================================================
             Tab 3: Manage Mappings
             ================================================================ --}}
        @if(($activeTab ?? '') == 'mappings')
        <div class="tab-pane fade show active" id="tab-mappings">
            <div class="project-box p-3">
                <div class="table-responsive project-table">
                    <table class="{{ \Config::get('view.table.table_class') }}" id="mappingsTable">
                        <thead class="{{ \Config::get('view.table.table_head_class') }}">
                            <tr>
                                <th>Mapping Name</th>
                                <th>Processor</th>
                                <th>Modified</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($mappings as $mapping)
                            <tr data-mapping-id="{{ $mapping->id }}">
                                <td>{{ $mapping->name }}</td>
                                <td>{{ $mapping->processor }}</td>
                                <td>
                                    <span class="small">{{ $mapping->updated_at ? $mapping->updated_at->format('m/d/Y h:i A') : '-' }}</span>
                                    @if($mapping->createdBy)
                                        <br><span class="small text-muted">{{ $mapping->createdBy->first_name ?? '' }} {{ $mapping->createdBy->last_name ?? '' }}</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex flex-wrap gap-1">
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-mapping-view"
                                                data-id="{{ $mapping->id }}" title="View">
                                            <i class="bx bx-show me-1"></i> View
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary btn-mapping-edit"
                                                data-id="{{ $mapping->id }}" title="Edit">
                                            <i class="bx bx-edit me-1"></i> Edit
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-info btn-mapping-rename"
                                                data-id="{{ $mapping->id }}" data-name="{{ $mapping->name }}" title="Rename">
                                            <i class="bx bx-rename me-1"></i> Rename
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-warning btn-mapping-disable"
                                                data-id="{{ $mapping->id }}" title="Disable Template">
                                            <i class="bx bx-block me-1"></i> Disable template
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-success btn-mapping-link"
                                                data-id="{{ $mapping->id }}" title="Link">
                                            <i class="bx bx-link me-1"></i> Link
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-mapping-remove"
                                                data-id="{{ $mapping->id }}" title="Remove">
                                            <i class="bx bx-trash me-1"></i> Remove
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-3">No mappings found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

        {{-- ================================================================
             Tab 4: Custom Fees
             ================================================================ --}}
        @if(($activeTab ?? '') == 'custom-fees')
        <div class="tab-pane fade show active" id="tab-custom-fees">
            <div class="project-box p-3">
                <div class="d-flex justify-content-end mb-3">
                    <button type="button" class="btn green-btn-inner" id="btnAddCustomFee">
                        <i class="bx bx-plus me-1"></i> Add Custom Fee
                    </button>
                </div>

                <div class="table-responsive project-table">
                    <table class="{{ \Config::get('view.table.table_class') }}" id="customFeesTable">
                        <thead class="{{ \Config::get('view.table.table_head_class') }}">
                            <tr>
                                <th>Fee Name</th>
                                <th>Fee Type</th>
                                <th>Fee Value</th>
                                <th>Applies To</th>
                                <th>Processor</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($customFees as $fee)
                            <tr data-fee-id="{{ $fee->id }}">
                                <td>{{ $fee->fee_name }}</td>
                                <td>
                                    <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $fee->fee_type)) }}</span>
                                </td>
                                <td>
                                    @if($fee->fee_type === 'percentage')
                                        {{ number_format($fee->fee_value, 2) }}%
                                    @else
                                        ${{ number_format($fee->fee_value, 2) }}
                                    @endif
                                </td>
                                <td>{{ ucfirst($fee->applies_to ?? 'All') }}</td>
                                <td>{{ $fee->processor ?? 'All' }}</td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <button type="button" class="btn btn-sm btn-outline-secondary btn-fee-edit"
                                                data-id="{{ $fee->id }}" title="Edit">
                                            <i class="bx bx-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-fee-delete"
                                                data-id="{{ $fee->id }}" title="Delete">
                                            <i class="bx bx-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-3">No custom fees found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

    </div>
</div>
@endsection

@push('modals')
{{-- Add Custom Fee Modal --}}
<div class="modal fade" id="customFeeModal" tabindex="-1" aria-labelledby="customFeeModalLabel" 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="customFeeModalLabel">Add Custom Fee</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="customFeeForm" method="POST">
                <div class="modal-body">
                    <input type="hidden" name="fee_id" id="customFeeId">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="project-form">
                                <label>Fee Name</label>
                                <input type="text" class="form-control validate-required" name="fee_name" id="feeNameInput" placeholder="Enter fee name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="project-form">
                                <label>Fee Type</label>
                                <select class="form-select select2 no-search" name="fee_type" id="feeTypeInput">
                                    <option value="flat">Flat</option>
                                    <option value="percentage">Percentage</option>
                                    <option value="per_transaction">Per Transaction</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="project-form">
                                <label>Fee Value</label>
                                <input type="text" class="form-control validate-required only-numeric-decimal" name="fee_value" id="feeValueInput" placeholder="0.00">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="project-form">
                                <label>Applies To</label>
                                <select class="form-select select2 no-search" name="applies_to" id="feeAppliesToInput">
                                    <option value="all">All</option>
                                    <option value="income">Income</option>
                                    <option value="expense">Expense</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="project-form">
                                <label>Processor</label>
                                <select class="form-select select2 no-search" name="processor" id="feeProcessorInput">
                                    <option value="">All Processors</option>
                                    @foreach($processors ?? [] as $proc)
                                        <option value="{{ $proc }}">{{ $proc }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </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-check"></i> Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Rename Mapping Modal --}}
<div class="modal fade" id="renameMappingModal" tabindex="-1" aria-labelledby="renameMappingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header" style="background-color: var(--header-color, #16C4C0); color: #fff;">
                <h5 class="modal-title" id="renameMappingModalLabel">Rename Mapping</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="renameMappingForm" method="POST">
                <div class="modal-body">
                    <input type="hidden" name="mapping_id" id="renameMappingId">
                    <div class="project-form">
                        <label>Mapping Name</label>
                        <input type="text" class="form-control validate-required" name="name" id="renameMappingName" placeholder="Enter new name">
                    </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-check"></i> Rename</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Add New Processor Modal --}}
<div class="modal fade" id="addProcessorModal" tabindex="-1" aria-labelledby="addProcessorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header" style="background-color: var(--header-color, #16C4C0); color: #fff;">
                <h5 class="modal-title" id="addProcessorModalLabel">Add New Processor</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addProcessorForm" method="POST">
                <div class="modal-body">
                    <p class="text-muted small">Fill in the name of the processor.</p>
                    <div class="project-form mb-3">
                        <label class="fw-bold">Processor Name: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control validate-required" name="name" id="newProcessorName" placeholder="Processor name">
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" name="disable_templates" id="newProcessorDisableTemplates" value="1">
                        <label class="form-check-label" for="newProcessorDisableTemplates">Disable templates</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" name="include_sys_prins" id="newProcessorIncludeSysPrins" value="1">
                        <label class="form-check-label" for="newProcessorIncludeSysPrins">Include Sys Prins</label>
                    </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-plus"></i> Add</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush

@push('page_script')
<script>
window.ResidualsImportConfig = {
    csrf: '{{ csrf_token() }}',
    activeTab: '{{ $activeTab ?? "add-report" }}',
    routes: {
        importPage: '{{ route("residuals.residuals-import") }}',
        upload: '{{ route("residuals.import.upload") }}',
        configure: '{{ route("residuals.import.configure") }}',
        processorStore: '{{ route("residuals.import.processors.store") }}',
        mappingConfigure: '{{ url("admin/residuals/import/configure") }}',
        process: '{{ route("residuals.import.process") }}',
        reports: '{{ route("residuals.import.reports") }}',
        massAction: '{{ route("residuals.import.reports.mass-action") }}',
        publishReport: '{{ url("admin/residuals/import/reports") }}',
        destroyReport: '{{ url("admin/residuals/import/reports") }}',
        mappings: '{{ route("residuals.import.mappings") }}',
        mappingShow: '{{ url("admin/residuals/import/mappings") }}',
        mappingRename: '{{ url("admin/residuals/import/mappings") }}',
        mappingDestroy: '{{ url("admin/residuals/import/mappings") }}',
        customFees: '{{ route("residuals.import.custom-fees") }}',
        customFeeStore: '{{ route("residuals.import.custom-fees.store") }}',
        customFeeUpdate: '{{ url("admin/residuals/import/custom-fees") }}',
        customFeeDestroy: '{{ url("admin/residuals/import/custom-fees") }}',
        residualsIndex: '{{ route("residuals.index") }}',
    }
};
</script>
<script src="{{ asset('assets/js/residuals-import.js') }}?v={{ date('YmdHis') }}"></script>
@endpush