@extends('admin.admin_dashboard')

@section('customcss')
<style>
    /* Metric KPI Cards */
    .kpi-card {
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
        border: 1px solid #e2e8f0;
        background: #ffffff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }
    .kpi-card .kpi-icon {
        width: 46px;
        height: 46px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .kpi-card .kpi-val {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        margin-top: 6px;
        color: #0f172a;
    }
    .kpi-card .kpi-sub {
        font-size: 12px;
        color: #64748b;
        margin-top: 3px;
        font-weight: 600;
    }

    /* Filter Badges */
    .filter-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        color: #334155;
    }

    /* Table styling */
    .table-transfers th {
        font-size: 11.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #334155;
        background: #f8fafc;
        vertical-align: middle;
        white-space: nowrap;
    }
    .table-transfers td {
        font-size: 13px;
        vertical-align: middle;
    }
    .account-pill {
        display: inline-block;
        font-size: 12px;
        line-height: 1.35;
    }
    .account-pill .acc-name {
        font-weight: 700;
        color: #0f172a;
    }
    .account-pill .acc-code {
        font-size: 11px;
        color: #64748b;
    }

    /* Transfer Arrow Badge */
    .transfer-badge-source {
        color: #dc2626;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .transfer-badge-dest {
        color: #059669;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* Action buttons in table */
    .btn-action-group .btn {
        padding: 4px 8px;
        font-size: 11.5px;
        border-radius: 5px;
        margin: 1px;
    }

    /* Full-width toggle animation */
    #tableCol {
        transition: all 0.3s ease;
    }

    /* Table Loading Spinner Overlay */
    #tableWrapper {
        position: relative;
        min-height: 200px;
        transition: opacity 0.2s ease;
    }
    #tableWrapper.is-loading {
        opacity: 0.5;
        pointer-events: none;
    }
    #tableLoadingOverlay {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        display: none;
        background: rgba(255, 255, 255, 0.85);
        padding: 12px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
    #tableWrapper.is-loading #tableLoadingOverlay {
        display: flex;
    }
</style>
@endsection

@section('admin')
<div class="content-body default-height">
    <div class="container-fluid">

        <!-- Page Header & Breadcrumbs -->
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Accounting</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Assets &amp; Fund Transfer</a></li>
            </ol>
        </div>

        <!-- Session Flash Alerts -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fa-solid fa-circle-check me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fa-solid fa-triangle-exclamation me-2"></i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Filter Card -->
        <div class="row">
            <div class="col-xl-12">
                <div class="filter cm-content-box box-primary mb-3">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-sharp fa-solid fa-filter me-2"></i>Filter &amp; Search Asset Transfers
                            <span class="badge bg-primary ms-2 @if(!request()->anyFilled(['search', 'status', 'from_account_id', 'to_account_id', 'start_date', 'end_date'])) d-none @endif" id="activeFilterAppliedBadge">Active Filters Applied</span>
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>

                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <form method="GET" action="{{ route('admin.accounting.asset_transfers.index') }}" id="transferFilterForm">
                                <input type="hidden" name="per_page" id="filterPerPageInput" value="{{ $perPage }}">

                                <div class="row g-3">
                                    <!-- Keyword Search -->
                                    <div class="col-xl-3 col-md-6">
                                        <label class="form-label fw-bold">Keyword / Transfer No</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light"><i class="fa-solid fa-magnifying-glass"></i></span>
                                            <input type="text" name="search" id="filterSearchInput" value="{{ request('search') }}"
                                                   class="form-control auto-filter-input" placeholder="Transfer #, purpose, or note..." autocomplete="off">
                                        </div>
                                    </div>

                                    <!-- Status Filter -->
                                    <div class="col-xl-2 col-md-6">
                                        <label class="form-label fw-bold">Status</label>
                                        <select name="status" class="form-control default-select auto-filter-select">
                                            <option value="">All Statuses</option>
                                            <option value="pending" @selected(request('status') === 'pending')>Pending Approval</option>
                                            <option value="approved" @selected(request('status') === 'approved')>Approved</option>
                                            <option value="rejected" @selected(request('status') === 'rejected')>Rejected</option>
                                        </select>
                                    </div>

                                    <!-- From Account Filter -->
                                    <div class="col-xl-2 col-md-6">
                                        <label class="form-label fw-bold">Source Account</label>
                                        <select name="from_account_id" class="form-control default-select auto-filter-select">
                                            <option value="">All Source Accounts</option>
                                            @foreach($assetAccounts as $acc)
                                                <option value="{{ $acc->id }}" @selected((string) request('from_account_id') === (string) $acc->id)>
                                                    {{ $acc->code }} - {{ $acc->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- To Account Filter -->
                                    <div class="col-xl-2 col-md-6">
                                        <label class="form-label fw-bold">Destination Account</label>
                                        <select name="to_account_id" class="form-control default-select auto-filter-select">
                                            <option value="">All Destination Accounts</option>
                                            @foreach($assetAccounts as $acc)
                                                <option value="{{ $acc->id }}" @selected((string) request('to_account_id') === (string) $acc->id)>
                                                    {{ $acc->code }} - {{ $acc->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Date Range (From - To) -->
                                    <div class="col-xl-3 col-md-12">
                                        <label class="form-label fw-bold">Date Range</label>
                                        <div class="input-group">
                                            <input type="date" name="start_date" value="{{ request('start_date') }}" class="form-control auto-filter-date" title="Start Date">
                                            <span class="input-group-text bg-light">to</span>
                                            <input type="date" name="end_date" value="{{ request('end_date') }}" class="form-control auto-filter-date" title="End Date">
                                        </div>
                                    </div>
                                </div>

                                <!-- Filter Action Buttons -->
                                <div class="d-flex justify-content-between align-items-center mt-3 pt-2 border-top flex-wrap gap-2">
                                    <div id="activeFilterBadgesContainer">
                                        @include('admin.accounting.asset_transfers.partials.active_badges')
                                    </div>

                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary btn-sm">
                                            <i class="fa fa-filter me-1"></i> Apply Filter
                                        </button>
                                        <a href="javascript:void(0);" id="btnResetFilter" class="btn btn-danger light btn-sm">
                                            <i class="fa fa-rotate-left me-1"></i> Reset
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Summary KPI Cards (Placed below filter) -->
        <div class="row">
            <!-- Total Transfers -->
            <div class="col-xl-3 col-sm-6">
                <div class="kpi-card">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-uppercase text-muted fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Total Requests</span>
                            <div class="kpi-val">{{ number_format($stats['total_count']) }}</div>
                            <div class="kpi-sub">All logged transfer entries</div>
                        </div>
                        <div class="kpi-icon" style="background: #eff6ff; color: #2563eb;">
                            <i class="fa-solid fa-money-bill-transfer"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Approved Volume -->
            <div class="col-xl-3 col-sm-6">
                <div class="kpi-card">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-uppercase text-muted fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Approved Transferred</span>
                            <div class="kpi-val text-success">BDT {{ number_format($stats['total_amount'], 2) }}</div>
                            <div class="kpi-sub">{{ $stats['approved_count'] }} Approved Transfer(s)</div>
                        </div>
                        <div class="kpi-icon" style="background: #ecfdf5; color: #059669;">
                            <i class="fa-solid fa-circle-check"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pending Requests -->
            <div class="col-xl-3 col-sm-6">
                <div class="kpi-card">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-uppercase text-muted fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Pending Approvals</span>
                            <div class="kpi-val text-warning">{{ $stats['pending_count'] }}</div>
                            <div class="kpi-sub">BDT {{ number_format($stats['pending_amount'], 2) }} Awaiting Action</div>
                        </div>
                        <div class="kpi-icon" style="background: #fffbeb; color: #d97706;">
                            <i class="fa-solid fa-clock-rotate-left"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rejected Requests -->
            <div class="col-xl-3 col-sm-6">
                <div class="kpi-card">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-uppercase text-muted fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Rejected / Declined</span>
                            <div class="kpi-val text-danger">{{ $stats['rejected_count'] }}</div>
                            <div class="kpi-sub">Cancelled Transfer Requests</div>
                        </div>
                        <div class="kpi-icon" style="background: #fef2f2; color: #dc2626;">
                            <i class="fa-solid fa-circle-xmark"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Workspace: Form on Left + History on Right -->
        <div class="row">
            <!-- Left: Request Asset Transfer Form -->
            <div class="col-xl-4 col-lg-5" id="formCol">
                <div class="filter cm-content-box box-primary">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-solid fa-paper-plane me-2 text-primary"></i>Request Asset Transfer
                        </div>
                    </div>

                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <form action="{{ route('admin.accounting.asset_transfers.store') }}" method="POST" id="transferRequestForm">
                                @csrf

                                <!-- Transfer Date -->
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Transfer Date <span class="text-danger">*</span></label>
                                    <input type="date" name="transfer_date" value="{{ old('transfer_date', now()->toDateString()) }}"
                                           class="form-control @error('transfer_date') is-invalid @enderror" required>
                                    @error('transfer_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <!-- From Asset Account -->
                                <div class="mb-3">
                                    <label class="form-label fw-bold">From Asset Account (Source) <span class="text-danger">*</span></label>
                                    <select name="from_account_id" id="fromAccountSelect"
                                            class="form-control @error('from_account_id') is-invalid @enderror" required>
                                        <option value="">-- Select Source Account --</option>
                                        @foreach($assetAccounts as $account)
                                            <option value="{{ $account->id }}" 
                                                data-balance="{{ $account->current_balance }}"
                                                data-name="{{ $account->name }}"
                                                data-code="{{ $account->code }}"
                                                @selected((string) old('from_account_id') === (string) $account->id)>
                                                {{ $account->code }} - {{ $account->name }} (Bal: {{ number_format($account->current_balance, 2) }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('from_account_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    
                                    <!-- Live Available Balance Card -->
                                    <div id="balanceDisplay" class="mt-2 p-2 bg-light rounded border" style="display: none;">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-muted small fw-bold">Current Account Balance:</span>
                                            <span id="balanceAmount" class="badge bg-primary fs-13">0.00</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- To Asset Account -->
                                <div class="mb-3">
                                    <label class="form-label fw-bold">To Asset Account (Destination) <span class="text-danger">*</span></label>
                                    <select name="to_account_id" id="toAccountSelect"
                                            class="form-control @error('to_account_id') is-invalid @enderror" required>
                                        <option value="">-- Select Destination Account --</option>
                                        @foreach($assetAccounts as $account)
                                            <option value="{{ $account->id }}"
                                                data-name="{{ $account->name }}"
                                                data-code="{{ $account->code }}"
                                                @selected((string) old('to_account_id') === (string) $account->id)>
                                                {{ $account->code }} - {{ $account->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('to_account_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <!-- Transfer Amount -->
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Transfer Amount (BDT) <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light fw-bold">BDT</span>
                                        <input type="text" inputmode="decimal" name="amount" id="transferAmountInput"
                                               value="{{ old('amount') }}" class="form-control @error('amount') is-invalid @enderror"
                                               placeholder="0.00" autocomplete="off" required>
                                    </div>
                                    <div id="balanceWarning" class="text-danger small mt-1 fw-bold" style="display: none;">
                                        <i class="fa fa-triangle-exclamation"></i> Warning: Transfer amount exceeds available balance!
                                    </div>
                                    @error('amount')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>

                                <!-- Purpose -->
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Purpose / Reason <span class="text-danger">*</span></label>
                                    <input type="text" name="purpose" value="{{ old('purpose') }}"
                                           class="form-control @error('purpose') is-invalid @enderror"
                                           placeholder="e.g. Bank to Cash replenishment, Petty cash transfer..." required>
                                    @error('purpose')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <!-- Optional Note -->
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Remarks / Internal Note</label>
                                    <textarea name="note" rows="2" class="form-control @error('note') is-invalid @enderror"
                                              placeholder="Any additional information...">{{ old('note') }}</textarea>
                                    @error('note')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <!-- Accounting Rule Info Box -->
                                <div class="p-2 mb-3 bg-light rounded border small">
                                    <div class="fw-bold text-dark mb-1"><i class="fa-solid fa-book-bookmark text-primary me-1"></i> Double-Entry Impact:</div>
                                    <div class="text-muted">Once approved by authority, the system will automatically record:</div>
                                    <div class="mt-1 font-monospace" style="font-size: 11px;">
                                        <span class="text-success fw-bold">Dr (+)</span> Destination Account<br>
                                        <span class="text-danger fw-bold">Cr (-)</span> Source Account
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary w-100 py-2">
                                    <i class="fa-solid fa-paper-plane me-1"></i> Submit Transfer Request
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Assets Transfer History Table -->
            <div class="col-xl-8 col-lg-7" id="tableCol">
                <div class="filter cm-content-box box-primary">
                    <div class="content-title SlideToolHeader d-flex justify-content-between align-items-center">
                        <div class="cpa">
                            <i class="fa-solid fa-clock-rotate-left me-2 text-primary"></i>Asset Transfers History
                            <span class="badge bg-secondary ms-2" id="totalRecordsBadge">{{ $transfers->total() }} Record(s)</span>
                        </div>
                        <div class="tools d-flex align-items-center gap-2">
                            <!-- Toggle Full Width Button -->
                            <button type="button" class="btn btn-light btn-xs text-muted" id="btnToggleFullWidth" title="Toggle Full Width View">
                                <i class="fa-solid fa-expand" id="iconToggleFullWidth"></i>
                            </button>
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>

                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <div id="tableWrapper">
                                <!-- Loading Spinner Overlay -->
                                <div id="tableLoadingOverlay" class="align-items-center justify-content-center">
                                    <div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>

                                <div id="tableContainer">
                                    @include('admin.accounting.asset_transfers.partials.table')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- ================= MODALS ================= -->

<!-- 1. Quick Transfer Details Modal -->
<div class="modal fade" id="transferDetailsModal" tabindex="-1" aria-labelledby="transferDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="transferDetailsModalLabel">
                    <i class="fa-solid fa-file-invoice text-primary me-2"></i>Transfer Details: <span id="modalTransferNo" class="text-primary fw-bold"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <!-- Status Bar -->
                <div class="d-flex justify-content-between align-items-center mb-3 p-3 bg-light rounded border">
                    <div>
                        <span class="text-muted small">Status:</span>
                        <div id="modalStatusBadge" class="mt-1"></div>
                    </div>
                    <div class="text-end">
                        <span class="text-muted small">Transfer Amount:</span>
                        <div id="modalAmount" class="fs-18 fw-bold text-success"></div>
                    </div>
                </div>

                <!-- Account Route -->
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <div class="p-3 border rounded h-100" style="border-left: 4px solid #ef4444 !important;">
                            <span class="text-danger small fw-bold text-uppercase"><i class="fa fa-arrow-up"></i> Source Account (Paid From)</span>
                            <div id="modalFromAccount" class="fw-bold mt-1 text-dark fs-14"></div>
                            <div id="modalFromCode" class="text-muted small"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-3 border rounded h-100" style="border-left: 4px solid #10b981 !important;">
                            <span class="text-success small fw-bold text-uppercase"><i class="fa fa-arrow-down"></i> Destination Account (Deposited To)</span>
                            <div id="modalToAccount" class="fw-bold mt-1 text-dark fs-14"></div>
                            <div id="modalToCode" class="text-muted small"></div>
                        </div>
                    </div>
                </div>

                <!-- Meta Details Table -->
                <table class="table table-bordered table-sm small mb-3">
                    <tbody>
                        <tr>
                            <th class="bg-light" style="width: 25%;">Transfer Date</th>
                            <td id="modalTransferDate"></td>
                            <th class="bg-light" style="width: 25%;">Journal Entry</th>
                            <td id="modalJournalEntry"></td>
                        </tr>
                        <tr>
                            <th class="bg-light">Requested By</th>
                            <td id="modalRequester"></td>
                            <th class="bg-light">Approved By</th>
                            <td id="modalApprover"></td>
                        </tr>
                        <tr>
                            <th class="bg-light">Purpose</th>
                            <td colspan="3" id="modalPurpose" class="fw-bold"></td>
                        </tr>
                        <tr>
                            <th class="bg-light">Internal Note</th>
                            <td colspan="3" id="modalNote"></td>
                        </tr>
                        <tr id="modalApprovalNoteRow" style="display: none;">
                            <th class="bg-light text-success" id="modalApprovalNoteLabel">Approval Note</th>
                            <td colspan="3" id="modalApprovalNote"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer bg-light">
                <a href="#" id="modalPrintInvoiceBtn" class="btn btn-primary" target="_blank">
                    <i class="fa fa-print me-1"></i> Open &amp; Print Invoice
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- 2. Approve Confirmation Modal -->
<div class="modal fade" id="approveModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title text-white" id="approveModalLabel">
                    <i class="fa-solid fa-circle-check me-2"></i>Approve Asset Transfer
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="approveForm" action="" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Are you sure you want to approve transfer <strong id="approveTransferNo" class="text-primary"></strong> for <strong id="approveAmount" class="text-success"></strong>?</p>
                    <div class="alert alert-info py-2 small">
                        <i class="fa-solid fa-info-circle me-1"></i>
                        Approving will immediately post the double-entry accounting journal into the General Ledger.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Approval Note (Optional)</label>
                        <textarea name="approved_note" id="approvedNoteTextarea" rows="6" class="form-control" placeholder="e.g. Verified and approved by authority... Write any relevant remarks, authorizations, or conditions here."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success text-white">
                        <i class="fa fa-check me-1"></i> Yes, Approve &amp; Post Entry
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 3. Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title text-white" id="rejectModalLabel">
                    <i class="fa-solid fa-circle-xmark me-2"></i>Reject Transfer Request
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="rejectForm" action="" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Are you sure you want to reject transfer <strong id="rejectTransferNo" class="text-danger"></strong>?</p>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Reason for Rejection <span class="text-danger">*</span></label>
                        <textarea name="reject_reason" rows="3" class="form-control" placeholder="Please specify why this transfer is being rejected..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fa fa-ban me-1"></i> Confirm Rejection
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 4. Transfer Summary Confirmation Modal (Triggered on Submit) -->
<div class="modal fade" id="transferSummaryModal" tabindex="-1" aria-labelledby="transferSummaryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title text-white" id="transferSummaryModalLabel">
                    <i class="fa-solid fa-clipboard-check me-2"></i>Confirm Asset Transfer Request
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <p class="text-muted small mb-3">
                    Please review the asset transfer details carefully before confirming. Once submitted, the request will be pending administrative approval.
                </p>

                <!-- Route Card -->
                <div class="p-3 mb-3 bg-light rounded border">
                    <div class="row align-items-center g-2 text-center">
                        <div class="col-5 text-start">
                            <span class="text-danger small fw-bold text-uppercase d-block mb-1">
                                <i class="fa fa-arrow-up"></i> Source Account
                            </span>
                            <div class="fw-bold text-dark fs-13 text-truncate" id="summaryModalFromAccount">-</div>
                            <small class="text-muted d-block" id="summaryModalFromCode"></small>
                            <span class="badge bg-secondary-light text-secondary mt-1" id="summaryModalFromBalance" style="font-size: 10px;"></span>
                        </div>
                        <div class="col-2 text-center">
                            <i class="fa-solid fa-arrow-right fs-18 text-primary"></i>
                        </div>
                        <div class="col-5 text-end">
                            <span class="text-success small fw-bold text-uppercase d-block mb-1">
                                <i class="fa fa-arrow-down"></i> Destination Account
                            </span>
                            <div class="fw-bold text-dark fs-13 text-truncate" id="summaryModalToAccount">-</div>
                            <small class="text-muted d-block" id="summaryModalToCode"></small>
                        </div>
                    </div>
                </div>

                <!-- Amount Box -->
                <div class="p-3 mb-3 text-center rounded border" style="background: #ecfdf5; border-color: #a7f3d0 !important;">
                    <span class="text-uppercase fw-bold text-muted small" style="letter-spacing: 0.5px;">Transfer Amount</span>
                    <div class="fs-22 fw-bold text-success mt-1" id="summaryModalAmount">BDT 0.00</div>
                    <div class="small mt-1" id="summaryModalRemainingBalance"></div>
                </div>

                <!-- Meta Details Table -->
                <table class="table table-bordered table-sm small mb-3">
                    <tbody>
                        <tr>
                            <th class="bg-light" style="width: 35%;">Transfer Date</th>
                            <td id="summaryModalDate" class="fw-bold"></td>
                        </tr>
                        <tr>
                            <th class="bg-light">Purpose</th>
                            <td id="summaryModalPurpose" class="fw-bold text-dark"></td>
                        </tr>
                        <tr id="summaryModalNoteRow" style="display: none;">
                            <th class="bg-light">Remarks / Note</th>
                            <td id="summaryModalNote"></td>
                        </tr>
                    </tbody>
                </table>

                <div class="alert alert-warning py-2 px-3 small mb-0 d-flex align-items-center gap-2">
                    <i class="fa-solid fa-triangle-exclamation fs-16 text-warning flex-shrink-0"></i>
                    <div>Once confirmed, journal entries will be posted to the General Ledger upon approval by the authorized officer.</div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fa fa-arrow-left me-1"></i> Cancel / Edit
                </button>
                <button type="button" class="btn btn-primary" id="btnConfirmSubmitTransfer">
                    <i class="fa fa-check me-1"></i> Confirm &amp; Submit Request
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('customjs')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. Live Balance Preview on Source Account Change
        const fromAccountSelect = document.getElementById('fromAccountSelect');
        const balanceDisplay = document.getElementById('balanceDisplay');
        const balanceAmount = document.getElementById('balanceAmount');
        const transferAmountInput = document.getElementById('transferAmountInput');
        const balanceWarning = document.getElementById('balanceWarning');

        function updateBalance() {
            if (!fromAccountSelect) return;
            const selectedOption = fromAccountSelect.options[fromAccountSelect.selectedIndex];
            if (!selectedOption || !selectedOption.value) {
                if (balanceDisplay) balanceDisplay.style.display = 'none';
                return;
            }

            const balance = parseFloat(selectedOption.dataset.balance || 0);
            if (balanceAmount) {
                balanceAmount.textContent = 'BDT ' + new Intl.NumberFormat('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(balance);
            }
            if (balanceDisplay) balanceDisplay.style.display = 'block';

            checkAmountAgainstBalance();
        }

        function checkAmountAgainstBalance() {
            if (!fromAccountSelect || !transferAmountInput) return;
            const selectedOption = fromAccountSelect.options[fromAccountSelect.selectedIndex];
            if (!selectedOption || !selectedOption.value) return;

            const balance = parseFloat(selectedOption.dataset.balance || 0);
            const amount = parseFloat(transferAmountInput.value || 0);

            if (amount > balance && amount > 0) {
                if (balanceWarning) balanceWarning.style.display = 'block';
            } else {
                if (balanceWarning) balanceWarning.style.display = 'none';
            }
        }

        if (fromAccountSelect) {
            fromAccountSelect.addEventListener('change', updateBalance);
            if (fromAccountSelect.value) {
                updateBalance();
            }
        }

        if (transferAmountInput) {
            // Filter non-numeric characters and ensure valid decimal point
            transferAmountInput.addEventListener('input', function() {
                let val = this.value.replace(/[^0-9.]/g, '');
                const parts = val.split('.');
                if (parts.length > 2) {
                    val = parts[0] + '.' + parts.slice(1).join('');
                }
                if (this.value !== val) {
                    this.value = val;
                }
                checkAmountAgainstBalance();
            });

            // Prevent wheel scroll
            transferAmountInput.addEventListener('wheel', function(e) {
                e.preventDefault();
            }, { passive: false });
        }

        // ==========================================
        // 2. AJAX Auto-Filtering & Pagination System
        // ==========================================
        const filterForm = $('#transferFilterForm');
        let activeFilterAjax = null;
        let searchDebounceTimer = null;

        function fetchFilteredResults(targetUrl = null) {
            const formAction = filterForm.attr('action') || window.location.pathname;
            let finalUrl = targetUrl;

            if (!finalUrl) {
                const serialized = filterForm.serialize();
                finalUrl = formAction + (serialized ? '?' + serialized : '');
            }

            // Show loading state
            $('#tableWrapper').addClass('is-loading');

            // Abort previous in-flight AJAX request
            if (activeFilterAjax && activeFilterAjax.readyState !== 4) {
                activeFilterAjax.abort();
            }

            activeFilterAjax = $.ajax({
                url: finalUrl,
                type: 'GET',
                dataType: 'json',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    if (response && response.success) {
                        if (response.table_html !== undefined) {
                            $('#tableContainer').html(response.table_html);
                        }
                        if (response.badges_html !== undefined) {
                            $('#activeFilterBadgesContainer').html(response.badges_html);
                        }
                        if (response.total_count !== undefined) {
                            $('#totalRecordsBadge').text(response.total_count + ' Record(s)');
                        }
                        if (response.has_active_filters) {
                            $('#activeFilterAppliedBadge').removeClass('d-none');
                        } else {
                            $('#activeFilterAppliedBadge').addClass('d-none');
                        }

                        // Update browser URL without reloading
                        if (window.history && window.history.pushState) {
                            window.history.pushState(null, '', finalUrl);
                        }
                    }
                },
                error: function(xhr, status, error) {
                    if (status !== 'abort') {
                        console.error('Error fetching asset transfers:', error);
                    }
                },
                complete: function() {
                    $('#tableWrapper').removeClass('is-loading');
                }
            });
        }

        // A. Debounced Keyword Search (350ms)
        $('#filterSearchInput').on('input keyup', function() {
            clearTimeout(searchDebounceTimer);
            searchDebounceTimer = setTimeout(function() {
                fetchFilteredResults();
            }, 350);
        });

        // B. Auto Filter on Dropdowns (Status, From Account, To Account)
        $('.auto-filter-select').on('change', function() {
            fetchFilteredResults();
        });

        // C. Auto Filter on Date Inputs
        $('.auto-filter-date').on('change', function() {
            fetchFilteredResults();
        });

        // D. Delegated Dynamic Per Page Selector
        $(document).on('change', '#perPageSelector', function() {
            $('#filterPerPageInput').val($(this).val());
            fetchFilteredResults();
        });

        // E. Delegated AJAX Pagination Links
        $(document).on('click', '.ajax-pagination a, #tableContainer .pagination a', function(e) {
            e.preventDefault();
            const pageUrl = $(this).attr('href');
            if (pageUrl && pageUrl !== '#' && !pageUrl.startsWith('javascript')) {
                fetchFilteredResults(pageUrl);
            }
        });

        // F. Delegated Active Filter Badge Remove (&times;)
        $(document).on('click', '.filter-badge-remove', function(e) {
            e.preventDefault();
            const clearTarget = $(this).data('clear');
            if (clearTarget === 'search') {
                $('#filterSearchInput').val('');
            } else if (clearTarget === 'status') {
                $('select[name="status"]').val('');
            } else if (clearTarget === 'from_account_id') {
                $('select[name="from_account_id"]').val('');
            } else if (clearTarget === 'to_account_id') {
                $('select[name="to_account_id"]').val('');
            } else if (clearTarget === 'dates') {
                $('input[name="start_date"]').val('');
                $('input[name="end_date"]').val('');
            }

            if (typeof $.fn.niceSelect !== 'undefined') {
                $('.default-select').niceSelect('update');
            }
            fetchFilteredResults();
        });

        // G. Reset Button Handler
        $('#btnResetFilter').on('click', function(e) {
            e.preventDefault();
            filterForm.find('input[name="search"]').val('');
            filterForm.find('input[name="start_date"]').val('');
            filterForm.find('input[name="end_date"]').val('');
            filterForm.find('select').val('');
            if (typeof $.fn.niceSelect !== 'undefined') {
                $('.default-select').niceSelect('update');
            }
            fetchFilteredResults(filterForm.attr('action'));
        });

        // H. Intercept Form Submit -> Trigger AJAX
        filterForm.on('submit', function(e) {
            e.preventDefault();
            fetchFilteredResults();
        });

        // I. Handle Browser Back / Forward
        window.addEventListener('popstate', function() {
            fetchFilteredResults(window.location.href);
        });

        // 3. Toggle Full-Width View for History Table
        const btnToggleFullWidth = document.getElementById('btnToggleFullWidth');
        const iconToggleFullWidth = document.getElementById('iconToggleFullWidth');
        const formCol = document.getElementById('formCol');
        const tableCol = document.getElementById('tableCol');
        let isFullWidth = false;

        if (btnToggleFullWidth && formCol && tableCol) {
            btnToggleFullWidth.addEventListener('click', function() {
                isFullWidth = !isFullWidth;
                if (isFullWidth) {
                    formCol.style.display = 'none';
                    tableCol.className = 'col-xl-12 col-lg-12';
                    iconToggleFullWidth.className = 'fa-solid fa-compress';
                    btnToggleFullWidth.title = 'Restore Side-by-Side View';
                } else {
                    formCol.style.display = 'block';
                    tableCol.className = 'col-xl-8 col-lg-7';
                    iconToggleFullWidth.className = 'fa-solid fa-expand';
                    btnToggleFullWidth.title = 'Toggle Full Width View';
                }
            });
        }

        // 4. Submit Interception -> Open Transfer Summary Confirmation Modal
        const transferRequestForm = document.getElementById('transferRequestForm');
        const transferSummaryModalEl = document.getElementById('transferSummaryModal');
        let transferSummaryModal = null;
        if (transferSummaryModalEl && typeof bootstrap !== 'undefined') {
            transferSummaryModal = new bootstrap.Modal(transferSummaryModalEl);
        }
        let isConfirmedSubmit = false;

        if (transferRequestForm) {
            transferRequestForm.addEventListener('submit', function(e) {
                if (isConfirmedSubmit) {
                    return true;
                }
                e.preventDefault();

                const dateInput = transferRequestForm.querySelector('input[name="transfer_date"]');
                const fromSelect = document.getElementById('fromAccountSelect');
                const toSelect = document.getElementById('toAccountSelect');
                const amountInput = document.getElementById('transferAmountInput');
                const purposeInput = transferRequestForm.querySelector('input[name="purpose"]');
                const noteInput = transferRequestForm.querySelector('textarea[name="note"]');

                const dateVal = dateInput ? dateInput.value : '';
                const fromVal = fromSelect ? fromSelect.value : '';
                const toVal = toSelect ? toSelect.value : '';
                const amountVal = amountInput ? amountInput.value.trim() : '';
                const purposeVal = purposeInput ? purposeInput.value.trim() : '';
                const noteVal = noteInput ? noteInput.value.trim() : '';

                if (!dateVal) {
                    alert('Please select a valid Transfer Date.');
                    if (dateInput) dateInput.focus();
                    return;
                }
                if (!fromVal) {
                    alert('Please select a Source (From) Asset Account.');
                    if (fromSelect) fromSelect.focus();
                    return;
                }
                if (!toVal) {
                    alert('Please select a Destination (To) Asset Account.');
                    if (toSelect) toSelect.focus();
                    return;
                }
                if (fromVal === toVal) {
                    alert('Source and Destination accounts cannot be the same. Please select different accounts.');
                    if (toSelect) toSelect.focus();
                    return;
                }

                const numAmount = parseFloat(amountVal);
                if (isNaN(numAmount) || numAmount <= 0) {
                    alert('Please enter a valid transfer amount greater than 0.');
                    if (amountInput) amountInput.focus();
                    return;
                }

                if (!purposeVal) {
                    alert('Please enter the Purpose / Reason for this asset transfer.');
                    if (purposeInput) purposeInput.focus();
                    return;
                }

                // Populate Summary Modal
                const fromOpt = fromSelect.options[fromSelect.selectedIndex];
                const toOpt = toSelect.options[toSelect.selectedIndex];
                const fromBalance = parseFloat(fromOpt.dataset.balance || 0);
                const remaining = fromBalance - numAmount;

                const fromName = fromOpt.dataset.name || fromOpt.textContent.trim();
                const fromCode = fromOpt.dataset.code ? 'Code: ' + fromOpt.dataset.code : '';
                const toName = toOpt.dataset.name || toOpt.textContent.trim();
                const toCode = toOpt.dataset.code ? 'Code: ' + toOpt.dataset.code : '';

                document.getElementById('summaryModalFromAccount').textContent = fromName;
                document.getElementById('summaryModalFromCode').textContent = fromCode;
                document.getElementById('summaryModalFromBalance').textContent = 'Current Balance: BDT ' + fromBalance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});

                document.getElementById('summaryModalToAccount').textContent = toName;
                document.getElementById('summaryModalToCode').textContent = toCode;

                document.getElementById('summaryModalAmount').textContent = 'BDT ' + numAmount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});

                const remainingEl = document.getElementById('summaryModalRemainingBalance');
                if (remaining < 0) {
                    remainingEl.innerHTML = `<span class="text-danger fw-bold"><i class="fa fa-triangle-exclamation"></i> Warning: Overdraw by BDT ${Math.abs(remaining).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>`;
                } else {
                    remainingEl.innerHTML = `<span class="text-muted">Estimated Remaining Balance in Source: <strong>BDT ${remaining.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></span>`;
                }

                document.getElementById('summaryModalDate').textContent = dateVal;
                document.getElementById('summaryModalPurpose').textContent = purposeVal;

                const noteRow = document.getElementById('summaryModalNoteRow');
                if (noteVal) {
                    document.getElementById('summaryModalNote').textContent = noteVal;
                    noteRow.style.display = '';
                } else {
                    noteRow.style.display = 'none';
                }

                if (transferSummaryModal) {
                    transferSummaryModal.show();
                }
            });

            const btnConfirmSubmit = document.getElementById('btnConfirmSubmitTransfer');
            if (btnConfirmSubmit) {
                btnConfirmSubmit.addEventListener('click', function() {
                    isConfirmedSubmit = true;
                    this.disabled = true;
                    this.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> Submitting...';
                    transferRequestForm.submit();
                });
            }
        }
    });

    // 4. Modal Functions (Global scope for onclick triggers)
    function openApproveModal(transferId, transferNo, amount) {
        const form = document.getElementById('approveForm');
        form.action = `/admin/accounting/asset-transfers/${transferId}/approve`;
        document.getElementById('approveTransferNo').textContent = transferNo;
        document.getElementById('approveAmount').textContent = 'BDT ' + amount;
        form.reset();
        
        const modal = new bootstrap.Modal(document.getElementById('approveModal'));
        modal.show();
    }

    function openRejectModal(transferId, transferNo) {
        const form = document.getElementById('rejectForm');
        form.action = `/admin/accounting/asset-transfers/${transferId}/reject`;
        document.getElementById('rejectTransferNo').textContent = transferNo;
        form.reset();

        const modal = new bootstrap.Modal(document.getElementById('rejectModal'));
        modal.show();
    }

    function openDetailsModal(transfer) {
        document.getElementById('modalTransferNo').textContent = transfer.transfer_no || '-';
        document.getElementById('modalAmount').textContent = 'BDT ' + (parseFloat(transfer.amount) || 0).toLocaleString('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });

        // Status Badge
        const status = (transfer.status || '').toLowerCase();
        let badgeHtml = '';
        if (status === 'approved') {
            badgeHtml = '<span class="badge bg-success"><i class="fa fa-check-circle me-1"></i>Approved</span>';
        } else if (status === 'pending') {
            badgeHtml = '<span class="badge bg-warning text-dark"><i class="fa fa-clock me-1"></i>Pending</span>';
        } else if (status === 'rejected') {
            badgeHtml = '<span class="badge bg-danger"><i class="fa fa-circle-xmark me-1"></i>Rejected</span>';
        } else {
            badgeHtml = `<span class="badge bg-secondary">${status}</span>`;
        }
        document.getElementById('modalStatusBadge').innerHTML = badgeHtml;

        // Accounts
        document.getElementById('modalFromAccount').textContent = transfer.from_account ? transfer.from_account.name : 'N/A';
        document.getElementById('modalFromCode').textContent = transfer.from_account ? 'Code: ' + transfer.from_account.code : '';
        document.getElementById('modalToAccount').textContent = transfer.to_account ? transfer.to_account.name : 'N/A';
        document.getElementById('modalToCode').textContent = transfer.to_account ? 'Code: ' + transfer.to_account.code : '';

        // Dates & Meta
        document.getElementById('modalTransferDate').textContent = transfer.transfer_date ? transfer.transfer_date.split('T')[0] : '-';
        document.getElementById('modalJournalEntry').textContent = transfer.journal_entry ? transfer.journal_entry.entry_no : 'Pending Approval';
        document.getElementById('modalRequester').textContent = transfer.requester ? transfer.requester.name : 'System';
        document.getElementById('modalApprover').textContent = transfer.approver ? transfer.approver.name : '-';
        document.getElementById('modalPurpose').textContent = transfer.purpose || '-';
        document.getElementById('modalNote').textContent = transfer.note || '-';

        // Approval note / Rejection reason
        const approvalRow = document.getElementById('modalApprovalNoteRow');
        const approvalLabel = document.getElementById('modalApprovalNoteLabel');
        if (transfer.approved_note) {
            document.getElementById('modalApprovalNote').textContent = transfer.approved_note;
            if (status === 'rejected') {
                if (approvalLabel) {
                    approvalLabel.textContent = 'Rejection Reason';
                    approvalLabel.className = 'bg-light text-danger';
                }
            } else {
                if (approvalLabel) {
                    approvalLabel.textContent = 'Approval Note';
                    approvalLabel.className = 'bg-light text-success';
                }
            }
            approvalRow.style.display = '';
        } else {
            approvalRow.style.display = 'none';
        }

        // Invoice Print Link
        document.getElementById('modalPrintInvoiceBtn').href = `/admin/accounting/asset-transfers/${transfer.id}/invoice`;

        const modal = new bootstrap.Modal(document.getElementById('transferDetailsModal'));
        modal.show();
    }
</script>
@endsection