@extends('user.layouts')

@section('title', 'Withdraw Request History')

@section('header')

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

<style>
    /* =========================================================
       PAGE
    ========================================================= */

    .withdraw-history-page {
        padding-top: 20px;
        padding-bottom: 25px;
    }

    .withdraw-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 18px;
    }

    .withdraw-page-title {
        margin: 0;
        color: #1e293b;
        font-size: 24px;
        font-weight: 700;
    }

    .withdraw-page-subtitle {
        margin: 4px 0 0;
        color: #94a3b8;
        font-size: 11px;
    }

    .total-record-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        background: #fff;
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }


    /* =========================================================
       FILTER CARD
    ========================================================= */

    .filter-card {
        margin-bottom: 18px;
        overflow: hidden;
        border: 1px solid #e7ecf2;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
    }

    .filter-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 16px;
        border-bottom: 1px solid #eef2f6;
    }

    .filter-heading {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .filter-icon {
        width: 31px;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 7px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 10px;
    }

    .filter-title {
        margin: 0;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
    }

    .filter-description {
        margin-top: 2px;
        color: #94a3b8;
        font-size: 9px;
    }

    .filter-body {
        padding: 15px 16px 16px;
    }

    .filter-label {
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 8.5px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .filter-control {
        height: 37px !important;
        border: 1px solid #dde4ec !important;
        border-radius: 7px !important;
        background: #fff;
        color: #334155;
        font-size: 10px !important;
        box-shadow: none !important;
    }

    .filter-control:focus {
        border-color: #93b4f4 !important;
    }

    .filter-actions {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 14px;
    }

    .filter-search-btn,
    .filter-reset-btn {
        height: 36px;
        min-width: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 7px;
        font-size: 9.5px;
        font-weight: 700;
    }

    .filter-search-btn {
        border: 1px solid #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .filter-search-btn:hover {
        border-color: #1d4ed8;
        background: #1d4ed8;
        color: #fff;
    }

    .filter-reset-btn {
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #64748b;
    }

    .filter-reset-btn:hover {
        background: #f1f5f9;
        color: #334155;
    }


    /* =========================================================
       TABLE CARD
    ========================================================= */

    .history-card {
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden;
        border: 1px solid #e7ecf2;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
    }

    .history-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 13px 16px;
        border-bottom: 1px solid #eef2f6;
    }

    .history-title {
        margin: 0;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
    }

    .history-subtitle {
        margin-top: 2px;
        color: #94a3b8;
        font-size: 9px;
    }

    .result-count {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px;
        border-radius: 20px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 9px;
        font-weight: 700;
    }

    .history-card-body {
        min-height: 0 !important;
        padding: 14px 16px 15px;
    }

    .table-responsive {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
    }


    /* =========================================================
       DATATABLE WRAPPER
    ========================================================= */

    .dataTables_wrapper {
        width: 100%;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dataTables_wrapper > .row:first-child {
        min-height: 38px !important;
        margin: 0 0 12px !important;
        align-items: center !important;
    }

    .dataTables_wrapper > .row:last-child {
        margin: 11px 0 0 !important;
        align-items: center !important;
    }

    .dataTables_filter {
        display: none !important;
    }


    /* =========================================================
       EXPORT BUTTONS
    ========================================================= */

    .dt-buttons {
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 !important;
    }

    .dt-buttons .dt-button {
        min-height: 34px;
        margin: 0 !important;
        padding: 6px 12px !important;
        border-radius: 7px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .dt-buttons .excel-btn {
        border: 1px solid #bbf7d0 !important;
        background: #f0fdf4 !important;
        color: #15803d !important;
    }

    .dt-buttons .pdf-btn {
        border: 1px solid #fecaca !important;
        background: #fef2f2 !important;
        color: #dc2626 !important;
    }

    .dt-buttons .print-btn {
        border: 1px solid #bfdbfe !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    .dt-buttons .excel-btn:hover {
        background: #dcfce7 !important;
    }

    .dt-buttons .pdf-btn:hover {
        background: #fee2e2 !important;
    }

    .dt-buttons .print-btn:hover {
        background: #dbeafe !important;
    }


    /* =========================================================
       SHOW ENTRIES
    ========================================================= */

    .dataTables_length {
        display: flex;
        justify-content: flex-end;
        margin: 0 !important;
    }

    .dataTables_length label {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin: 0 !important;
        color: #64748b !important;
        font-size: 9px !important;
        white-space: nowrap;
    }

    .dataTables_length select {
        width: 70px !important;
        min-width: 70px !important;
        height: 34px !important;
        margin: 0 !important;
        border: 1px solid #dde4ec !important;
        border-radius: 7px !important;
        font-size: 9px !important;
        box-shadow: none !important;
    }


    /* =========================================================
       TABLE
    ========================================================= */

    #data-table {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse !important;
    }

    #data-table thead th {
        height: 45px !important;
        padding: 8px 9px !important;
        border: 1px solid #e4e9ef !important;
        background: #f4f7fa !important;
        color: #263238 !important;
        font-size: 8.5px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        vertical-align: middle !important;
        white-space: normal !important;
    }

    #data-table tbody tr {
        height: auto !important;
    }

    #data-table tbody td {
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 9px !important;
        border: 1px solid #edf0f3 !important;
        color: #475569;
        font-size: 9.5px !important;
        line-height: 1.35 !important;
        vertical-align: middle !important;
        white-space: nowrap;
    }

    #data-table tbody tr:hover {
        background: #fbfdff !important;
    }


    /* =========================================================
       COLUMN WIDTH
    ========================================================= */

    #data-table th:nth-child(1),
    #data-table td:nth-child(1) {
        width: 42px !important;
        min-width: 42px !important;
        text-align: center;
    }

    #data-table th:nth-child(2),
    #data-table td:nth-child(2) {
        width: 78px !important;
        min-width: 78px !important;
    }

    #data-table th:nth-child(3),
    #data-table td:nth-child(3) {
        width: 88px !important;
        min-width: 88px !important;
    }

    #data-table th:nth-child(4),
    #data-table td:nth-child(4) {
        width: 72px !important;
        min-width: 72px !important;
    }

    #data-table th:nth-child(5),
    #data-table td:nth-child(5) {
        width: 80px !important;
        min-width: 80px !important;
    }

    #data-table th:nth-child(6),
    #data-table td:nth-child(6) {
        width: 90px !important;
        min-width: 90px !important;
    }

    #data-table th:nth-child(7),
    #data-table td:nth-child(7) {
        width: 215px !important;
        min-width: 215px !important;
    }

    #data-table th:nth-child(8),
    #data-table td:nth-child(8) {
        width: 68px !important;
        min-width: 68px !important;
        text-align: right;
    }

    #data-table th:nth-child(9),
    #data-table td:nth-child(9) {
        width: 55px !important;
        min-width: 55px !important;
        text-align: right;
    }

    #data-table th:nth-child(10),
    #data-table td:nth-child(10) {
        width: 70px !important;
        min-width: 70px !important;
        text-align: right;
    }

    #data-table th:nth-child(11),
    #data-table td:nth-child(11) {
        width: 165px !important;
        min-width: 165px !important;
    }

    #data-table th:nth-child(12),
    #data-table td:nth-child(12) {
        width: 85px !important;
        min-width: 85px !important;
        text-align: center;
    }


    /* =========================================================
       SN
    ========================================================= */

    .sn-badge {
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 8.5px;
        font-weight: 700;
    }


    /* =========================================================
       DATE
    ========================================================= */

    .date-main {
        color: #334155;
        font-size: 9px;
        font-weight: 700;
    }

    .date-time {
        margin-top: 2px;
        color: #94a3b8;
        font-size: 7.5px;
    }


    /* =========================================================
       AGENT
    ========================================================= */

    .agent-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 8px;
        border-radius: 20px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 8px;
        font-weight: 700;
    }


    /* =========================================================
       PERSON
    ========================================================= */

    .person-name {
        color: #334155;
        font-size: 9.5px;
        font-weight: 700;
    }

    .phone-number {
        color: #475569;
        font-size: 9px;
        font-weight: 650;
    }


    /* =========================================================
       BANK DETAILS
    ========================================================= */

    .bank-details-box {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        padding: 7px 9px !important;
        border: 1px solid #e4e9ef !important;
        border-radius: 8px !important;
        background: #fbfcfe !important;
        white-space: normal !important;
    }

    .bank-name {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 5px;
        color: #1e293b;
        font-size: 8.5px;
        font-weight: 750;
    }

    .bank-name i {
        width: 19px;
        height: 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 5px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 7px;
    }

    .bank-detail-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        padding: 1px 0;
    }

    .bank-detail-label {
        flex-shrink: 0;
        color: #94a3b8;
        font-size: 7px;
        font-weight: 650;
    }

    .bank-detail-value {
        max-width: 135px;
        overflow: hidden;
        color: #475569;
        font-size: 7.5px;
        font-weight: 650;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bank-account-number {
        font-family: monospace;
    }

    .bank-detail-bottom {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 5px;
        padding-top: 5px;
        border-top: 1px solid #edf0f4;
        color: #64748b;
        font-size: 7px;
        line-height: 1.35;
    }

    .bank-detail-bottom strong {
        color: #475569;
        font-weight: 700;
    }


    /* =========================================================
       MONEY
    ========================================================= */

    .amount-text {
        color: #334155;
        font-size: 9px;
        font-weight: 750;
    }

    .tds-text {
        color: #b45309;
        font-size: 9px;
        font-weight: 700;
    }

    .payable-text {
        color: #15803d;
        font-size: 9px;
        font-weight: 750;
    }


    /* =========================================================
       REMARK
    ========================================================= */

    .remark-text {
        display: block;
        max-width: 150px;
        overflow: hidden;
        color: #64748b;
        font-size: 8px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =========================================================
       STATUS
    ========================================================= */

    .status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 5px 8px;
        border-radius: 20px;
        font-size: 8px;
        font-weight: 700;
    }

    .status-badge::before {
        width: 5px;
        height: 5px;
        flex-shrink: 0;
        border-radius: 50%;
        background: currentColor;
        content: "";
    }

    .status-approved {
        background: #ecfdf5;
        color: #15803d;
    }

    .status-rejected {
        background: #fef2f2;
        color: #dc2626;
    }


    /* =========================================================
       DATATABLE FOOTER
    ========================================================= */

    .dataTables_info {
        padding-top: 0 !important;
        color: #64748b !important;
        font-size: 8.5px !important;
    }

    .dataTables_paginate {
        padding-top: 0 !important;
        font-size: 8.5px !important;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: flex-end;
        margin: 0 !important;
    }

    .page-link {
        min-width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 8.5px !important;
    }


    /* =========================================================
       DARK MODE
    ========================================================= */

    body.dark-mode .filter-card,
    body.dark-mode .history-card,
    body.dark-mode .total-record-badge {
        border-color: #273449;
        background: #172033;
    }

    body.dark-mode .filter-card-header,
    body.dark-mode .history-card-header {
        border-color: #273449;
    }

    body.dark-mode .withdraw-page-title,
    body.dark-mode .filter-title,
    body.dark-mode .history-title,
    body.dark-mode .person-name,
    body.dark-mode .amount-text {
        color: #f1f5f9;
    }

    body.dark-mode .filter-control {
        border-color: #334155 !important;
        background: #111827;
        color: #e2e8f0;
    }

    body.dark-mode #data-table thead th {
        border-color: #334155 !important;
        background: #111827 !important;
        color: #cbd5e1 !important;
    }

    body.dark-mode #data-table tbody td {
        border-color: #273449 !important;
        color: #cbd5e1;
    }

    body.dark-mode .bank-details-box {
        border-color: #334155 !important;
        background: #111827 !important;
    }

    body.dark-mode .bank-name {
        color: #f1f5f9;
    }

    body.dark-mode .bank-detail-value,
    body.dark-mode .bank-detail-bottom {
        color: #cbd5e1;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 991px) {
        .history-card-body {
            padding: 12px;
        }

        .dataTables_length {
            margin-top: 8px !important;
            justify-content: flex-start;
        }

        .dataTables_length label {
            justify-content: flex-start;
        }
    }

    @media (max-width: 767px) {
        .withdraw-page-header,
        .history-card-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .withdraw-page-title {
            font-size: 20px;
        }

        .filter-actions {
            width: 100%;
        }

        .filter-search-btn,
        .filter-reset-btn {
            flex: 1;
        }

        .dt-buttons {
            width: 100%;
        }

        div.dataTables_wrapper div.dataTables_paginate ul.pagination {
            justify-content: flex-start;
            margin-top: 10px !important;
        }
    }
</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper withdraw-history-page">

    {{-- PAGE HEADER --}}
    <div class="withdraw-page-header">

        <div>
            <h3 class="withdraw-page-title">
                Withdraw History
            </h3>

            <p class="withdraw-page-subtitle">
                Search, filter and export withdraw request history
            </p>
        </div>

        <div class="total-record-badge">
            <i class="fa-solid fa-wallet"></i>

            <span>
                {{ count($withdraw_history) }} Total Requests
            </span>
        </div>

    </div>


    {{-- =====================================================
         FILTER
    ====================================================== --}}

    <div class="filter-card">

        <div class="filter-card-header">

            <div class="filter-heading">

                <div class="filter-icon">
                    <i class="fa-solid fa-filter"></i>
                </div>

                <div>
                    <h5 class="filter-title">
                        Search & Filter
                    </h5>

                    <div class="filter-description">
                        Find withdraw requests using the required filters
                    </div>
                </div>

            </div>

        </div>


        <div class="filter-body">

            <div class="row g-3">

                {{-- FROM DATE --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        From Date
                    </label>

                    <input
                        type="date"
                        id="from_date"
                        class="form-control filter-control">

                </div>


                {{-- TO DATE --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        To Date
                    </label>

                    <input
                        type="date"
                        id="to_date"
                        class="form-control filter-control">

                </div>


                {{-- AGENT --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Agent ID
                    </label>

                    <input
                        type="text"
                        id="agent_filter"
                        class="form-control filter-control"
                        placeholder="Enter agent ID">

                </div>


                {{-- NAME --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Name
                    </label>

                    <input
                        type="text"
                        id="name_filter"
                        class="form-control filter-control"
                        placeholder="Enter name">

                </div>


                {{-- PHONE --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Phone Number
                    </label>

                    <input
                        type="text"
                        id="phone_filter"
                        class="form-control filter-control"
                        placeholder="Phone number">

                </div>


                {{-- STATUS --}}
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                    <label class="filter-label">
                        Status
                    </label>

                    <select
                        id="status_filter"
                        class="form-select filter-control">

                        <option value="">
                            All Status
                        </option>

                        <option value="Approved">
                            Approved
                        </option>

                        <option value="Rejected">
                            Rejected
                        </option>

                    </select>

                </div>


                {{-- GENERAL SEARCH --}}
                <div class="col-xl-6 col-lg-6 col-md-8">

                    <label class="filter-label">
                        General Search
                    </label>

                    <input
                        type="text"
                        id="general_search"
                        class="form-control filter-control"
                        placeholder="Bank, account no, IFSC, branch, remark...">

                </div>

            </div>


            <div class="filter-actions">

                <button
                    type="button"
                    id="searchBtn"
                    class="btn filter-search-btn">

                    <i class="fa-solid fa-magnifying-glass"></i>
                    Search

                </button>


                <button
                    type="button"
                    id="resetBtn"
                    class="btn filter-reset-btn">

                    <i class="fa-solid fa-rotate-left"></i>
                    Reset

                </button>

            </div>

        </div>

    </div>


    {{-- =====================================================
         TABLE CARD
    ====================================================== --}}

    <div class="history-card">

        <div class="history-card-header">

            <div>
                <h5 class="history-title">
                    Withdraw Requests
                </h5>

                <div class="history-subtitle">
                    Complete withdrawal transaction history
                </div>
            </div>


            <div class="result-count">

                <i class="fa-solid fa-list"></i>

                <span id="filteredCount">
                    {{ count($withdraw_history) }}
                </span>

                Records

            </div>

        </div>


        <div class="history-card-body">

            <div class="table-responsive">

                <table
                    id="data-table"
                    class="table align-middle"
                    style="width:100%">

                    <thead>

                        <tr>

                            <th>SN</th>

                            <th>DATE</th>

                            <th>REQUEST DATE</th>

                            <th>AGENT ID</th>

                            <th>NAME</th>

                            <th>PHONE NO</th>

                            <th>BANK DETAILS</th>

                            <th>AMOUNT</th>

                            <th>TDS</th>

                            <th>PAYABLE</th>

                            <th>REMARK</th>

                            <th>STATUS</th>

                        </tr>

                    </thead>


                    <tbody>

                    @foreach ($withdraw_history as $history)

                        <tr>

                            {{-- SN --}}
                            <td>

                                <span class="sn-badge">
                                    {{ $loop->iteration }}
                                </span>

                            </td>


                            {{-- DATE --}}
                            <td
                                data-date="{{ optional($history->created_at)->format('Y-m-d') }}"
                                data-order="{{ optional($history->created_at)->timestamp ?? 0 }}">

                                @if($history->created_at)

                                    <div class="date-main">
                                        {{ $history->created_at->format('d-m-Y') }}
                                    </div>

                                    <div class="date-time">
                                        {{ $history->created_at->format('h:i A') }}
                                    </div>

                                @else
                                    -
                                @endif

                            </td>


                            {{-- REQUEST DATE --}}
                            <td
                                data-date="{{ optional($history->created_at)->format('Y-m-d') }}"
                                data-order="{{ optional($history->created_at)->timestamp ?? 0 }}">

                                @if($history->created_at)

                                    <div class="date-main">
                                        {{ $history->created_at->format('d-m-Y') }}
                                    </div>

                                    <div class="date-time">
                                        {{ $history->created_at->format('h:i A') }}
                                    </div>

                                @else
                                    -
                                @endif

                            </td>


                            {{-- AGENT --}}
                            <td>

                                <span class="agent-badge">
                                    {{ $history->agent_id ?? '-' }}
                                </span>

                            </td>


                            {{-- NAME --}}
                            <td>

                                <span class="person-name">
                                    {{ optional($history->user)->name ?? 'N/A' }}
                                </span>

                            </td>


                            {{-- PHONE --}}
                            <td>

                                <span class="phone-number">
                                    {{ $history->phone_no ?? '-' }}
                                </span>

                            </td>


                            {{-- BANK DETAILS --}}
                            <td
                                data-search="{{ trim(
                                    ($history->account_name ?? '') . ' ' .
                                    ($history->account_no ?? '') . ' ' .
                                    ($history->ifsc ?? '') . ' ' .
                                    ($history->bank_name ?? '') . ' ' .
                                    ($history->branch_name ?? '')
                                ) }}">

                                <div class="bank-details-box">

                                    <div class="bank-name">

                                        <i class="fa-solid fa-building-columns"></i>

                                        <span>
                                            {{ $history->bank_name ?? 'N/A' }}
                                        </span>

                                    </div>


                                    <div class="bank-detail-row">

                                        <span class="bank-detail-label">
                                            Holder
                                        </span>

                                        <span
                                            class="bank-detail-value"
                                            title="{{ $history->account_name ?? 'N/A' }}">

                                            {{ $history->account_name ?? 'N/A' }}

                                        </span>

                                    </div>


                                    <div class="bank-detail-row">

                                        <span class="bank-detail-label">
                                            A/C No
                                        </span>

                                        <span
                                            class="bank-detail-value bank-account-number"
                                            title="{{ $history->account_no ?? 'N/A' }}">

                                            {{ $history->account_no ?? 'N/A' }}

                                        </span>

                                    </div>


                                    <div class="bank-detail-bottom">

                                        <span>
                                            <strong>IFSC:</strong>
                                            {{ $history->ifsc ?? 'N/A' }}
                                        </span>

                                        <span>
                                            <strong>Branch:</strong>
                                            {{ $history->branch_name ?? 'N/A' }}
                                        </span>

                                    </div>

                                </div>

                            </td>


                            {{-- AMOUNT --}}
                            <td>

                                <span class="amount-text">
                                    ₹{{ number_format($history->amount ?? 0, 2) }}
                                </span>

                            </td>


                            {{-- TDS --}}
                            <td>

                                <span class="tds-text">
                                    ₹{{ number_format($history->tds ?? 0, 2) }}
                                </span>

                            </td>


                            {{-- PAYABLE --}}
                            <td>

                                <span class="payable-text">
                                    ₹{{ number_format($history->payable_amount ?? 0, 2) }}
                                </span>

                            </td>


                            {{-- REMARK --}}
                            <td>

                                <span
                                    class="remark-text"
                                    title="{{ $history->remark ?? '-' }}">

                                    {{ $history->remark ?? '-' }}

                                </span>

                            </td>


                            {{-- STATUS --}}
                            <td>

                                @if ($history->is_verified == 0)

                                    <span class="status-badge status-rejected">
                                        Rejected
                                    </span>

                                @else

                                    <span class="status-badge status-approved">
                                        Approved
                                    </span>

                                @endif

                            </td>

                        </tr>

                    @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

{{-- jQuery --}}
<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous">
</script>


{{-- DataTable --}}
<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js">
</script>


{{-- Export --}}
<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/jszip.min.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js">
</script>


<script>
$(document).ready(function () {

    /* =====================================================
       DESTROY EXISTING TABLE
    ====================================================== */

    if ($.fn.DataTable.isDataTable('#data-table')) {
        $('#data-table').DataTable().destroy();
    }


    /* =====================================================
       EXPORT CLEANER
    ====================================================== */

    function cleanExportText(data) {

        return $('<div>')
            .html(data)
            .text()
            .replace(/\s+/g, ' ')
            .trim();
    }


    function getBankExportText(node) {

        const bank =
            $(node)
                .find('.bank-name span')
                .text()
                .trim();

        const holder =
            $(node)
                .find('.bank-detail-row')
                .eq(0)
                .find('.bank-detail-value')
                .text()
                .trim();

        const account =
            $(node)
                .find('.bank-detail-row')
                .eq(1)
                .find('.bank-detail-value')
                .text()
                .trim();

        const bottom =
            $(node)
                .find('.bank-detail-bottom')
                .text()
                .replace(/\s+/g, ' ')
                .trim();

        return (
            'Bank: ' + bank +
            ' | Holder: ' + holder +
            ' | A/C: ' + account +
            ' | ' + bottom
        );
    }


    /* =====================================================
       DATE FILTER
    ====================================================== */

    $.fn.dataTable.ext.search.push(function (
        settings,
        data,
        dataIndex
    ) {

        if (settings.nTable.id !== 'data-table') {
            return true;
        }

        const fromDate = $('#from_date').val();

        const toDate = $('#to_date').val();

        const row =
            settings.aoData[dataIndex].nTr;

        const requestDate =
            $(row)
                .find('td:eq(2)')
                .attr('data-date');


        if (!requestDate) {
            return true;
        }


        if (
            fromDate &&
            requestDate < fromDate
        ) {
            return false;
        }


        if (
            toDate &&
            requestDate > toDate
        ) {
            return false;
        }


        return true;
    });


    /* =====================================================
       DATATABLE
    ====================================================== */

    const table =
        $('#data-table').DataTable({

            processing: true,

            responsive: false,

            scrollX: false,

            autoWidth: false,

            pageLength: 10,

            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, 'All']
            ],


            /* Latest first */

            order: [
                [2, 'desc']
            ],


            /* =================================================
               LAYOUT
            ================================================= */

            dom:
                "<'row align-items-center mb-2'" +

                    "<'col-lg-8 col-md-7 col-12'B>" +

                    "<'col-lg-4 col-md-5 col-12'l>" +

                ">" +

                "<'row'" +

                    "<'col-12'tr>" +

                ">" +

                "<'row align-items-center mt-2'" +

                    "<'col-md-6 col-12'i>" +

                    "<'col-md-6 col-12'p>" +

                ">",


            /* =================================================
               BUTTONS
            ================================================= */

            buttons: [

                /* EXCEL */

                {
                    extend: 'excelHtml5',

                    text:
                        '<i class="fa-solid fa-file-excel me-1"></i> Excel',

                    className:
                        'excel-btn',

                    title:
                        'Withdraw History',

                    filename: function () {

                        return (
                            'Withdraw_History_' +
                            new Date()
                                .toISOString()
                                .slice(0, 10)
                        );
                    },

                    exportOptions: {

                        columns: [
                            0, 1, 2, 3,
                            4, 5, 6, 7,
                            8, 9, 10, 11
                        ],

                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'all'
                        },

                        stripHtml: true,

                        format: {

                            body: function (
                                data,
                                row,
                                column,
                                node
                            ) {

                                if (column === 6) {
                                    return getBankExportText(node);
                                }

                                return cleanExportText(data);
                            }
                        }
                    }
                },


                /* PDF */

                {
                    extend: 'pdfHtml5',

                    text:
                        '<i class="fa-solid fa-file-pdf me-1"></i> PDF',

                    className:
                        'pdf-btn',

                    title:
                        'Withdraw History',

                    filename: function () {

                        return (
                            'Withdraw_History_' +
                            new Date()
                                .toISOString()
                                .slice(0, 10)
                        );
                    },

                    orientation:
                        'landscape',

                    pageSize:
                        'A4',

                    exportOptions: {

                        columns: [
                            0, 1, 2, 3,
                            4, 5, 6, 7,
                            8, 9, 10, 11
                        ],

                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'all'
                        },

                        stripHtml: true,

                        format: {

                            body: function (
                                data,
                                row,
                                column,
                                node
                            ) {

                                if (column === 6) {
                                    return getBankExportText(node);
                                }

                                return cleanExportText(data);
                            }
                        }
                    },


                    customize: function (doc) {

                        doc.pageOrientation =
                            'landscape';

                        doc.pageSize =
                            'A4';

                        doc.pageMargins = [
                            12,
                            20,
                            12,
                            22
                        ];

                        doc.defaultStyle = {
                            fontSize: 5.5
                        };


                        if (doc.content[0]) {

                            doc.content[0].alignment =
                                'center';

                            doc.content[0].fontSize =
                                13;

                            doc.content[0].bold =
                                true;

                            doc.content[0].margin = [
                                0,
                                0,
                                0,
                                10
                            ];
                        }


                        let tableNode = null;


                        for (
                            let i = 0;
                            i < doc.content.length;
                            i++
                        ) {

                            if (doc.content[i].table) {

                                tableNode =
                                    doc.content[i];

                                break;
                            }
                        }


                        if (tableNode) {

                            tableNode.table.headerRows =
                                1;


                            tableNode.table.widths = [

                                20, // SN
                                42, // Date
                                45, // Request
                                42, // Agent
                                50, // Name
                                50, // Phone
                                '*', // Bank
                                42, // Amount
                                34, // TDS
                                48, // Payable
                                60, // Remark
                                42  // Status
                            ];


                            tableNode.table.body.forEach(
                                function (
                                    row,
                                    rowIndex
                                ) {

                                    row.forEach(
                                        function (
                                            cell,
                                            columnIndex
                                        ) {

                                            cell.margin = [
                                                2,
                                                2,
                                                2,
                                                2
                                            ];


                                            if (rowIndex === 0) {

                                                cell.bold =
                                                    true;

                                                cell.fontSize =
                                                    5.5;

                                                cell.alignment =
                                                    'center';

                                            } else {

                                                cell.fontSize =
                                                    5.2;


                                                if (
                                                    columnIndex === 0 ||
                                                    columnIndex === 1 ||
                                                    columnIndex === 2 ||
                                                    columnIndex === 3 ||
                                                    columnIndex === 5 ||
                                                    columnIndex === 7 ||
                                                    columnIndex === 8 ||
                                                    columnIndex === 9 ||
                                                    columnIndex === 11
                                                ) {

                                                    cell.alignment =
                                                        'center';

                                                } else {

                                                    cell.alignment =
                                                        'left';
                                                }
                                            }
                                        }
                                    );
                                }
                            );
                        }


                        doc.footer =
                            function (
                                currentPage,
                                pageCount
                            ) {

                                return {

                                    columns: [

                                        {
                                            text:
                                                'Withdraw History',

                                            alignment:
                                                'left',

                                            fontSize:
                                                7,

                                            margin: [
                                                15,
                                                0,
                                                0,
                                                0
                                            ]
                                        },

                                        {
                                            text:
                                                'Page ' +
                                                currentPage +
                                                ' of ' +
                                                pageCount,

                                            alignment:
                                                'right',

                                            fontSize:
                                                7,

                                            margin: [
                                                0,
                                                0,
                                                15,
                                                0
                                            ]
                                        }

                                    ]
                                };
                            };
                    }
                },


                /* PRINT */

                {
                    extend: 'print',

                    text:
                        '<i class="fa-solid fa-print me-1"></i> Print',

                    className:
                        'print-btn',

                    title:
                        'Withdraw History',

                    exportOptions: {

                        columns: [
                            0, 1, 2, 3,
                            4, 5, 6, 7,
                            8, 9, 10, 11
                        ],

                        modifier: {
                            search: 'applied',
                            order: 'applied',
                            page: 'all'
                        },

                        stripHtml: true,

                        format: {

                            body: function (
                                data,
                                row,
                                column,
                                node
                            ) {

                                if (column === 6) {
                                    return getBankExportText(node);
                                }

                                return cleanExportText(data);
                            }
                        }
                    }
                }

            ],


            /* =================================================
               COLUMN SETTINGS
            ================================================= */

            columnDefs: [

                {
                    targets: 0,
                    width: '42px'
                },

                {
                    targets: 6,
                    width: '215px'
                },

                {
                    targets: [7, 8, 9],
                    className: 'text-end'
                }

            ],


            /* =================================================
               COUNT
            ================================================= */

            drawCallback: function () {

                const api =
                    this.api();

                const count =
                    api
                        .rows({
                            search: 'applied'
                        })
                        .count();

                $('#filteredCount')
                    .text(count);
            }

        });


    /* =====================================================
       FILTER FUNCTION
    ====================================================== */

    function applyFilters() {

        const agent =
            $('#agent_filter')
                .val()
                .trim();

        const name =
            $('#name_filter')
                .val()
                .trim();

        const phone =
            $('#phone_filter')
                .val()
                .trim();

        const status =
            $('#status_filter')
                .val();

        const general =
            $('#general_search')
                .val()
                .trim();


        /* Agent */

        table
            .column(3)
            .search(agent);


        /* Name */

        table
            .column(4)
            .search(name);


        /* Phone */

        table
            .column(5)
            .search(phone);


        /* Status */

        table
            .column(11)
            .search(
                status
                    ? '^' + status + '$'
                    : '',
                true,
                false
            );


        /* General */

        table.search(general);


        table.draw();
    }


    /* =====================================================
       SEARCH BUTTON
    ====================================================== */

    $('#searchBtn').on(
        'click',
        function () {

            applyFilters();
        }
    );


    /* =====================================================
       ENTER KEY
    ====================================================== */

    $(
        '#agent_filter,' +
        '#name_filter,' +
        '#phone_filter,' +
        '#general_search'
    ).on(
        'keypress',
        function (event) {

            if (event.which === 13) {

                event.preventDefault();

                applyFilters();
            }
        }
    );


    /* =====================================================
       STATUS
    ====================================================== */

    $('#status_filter').on(
        'change',
        function () {

            applyFilters();
        }
    );


    /* =====================================================
       DATE FILTER
    ====================================================== */

    $('#from_date, #to_date').on(
        'change',
        function () {

            table.draw();
        }
    );


    /* =====================================================
       RESET
    ====================================================== */

    $('#resetBtn').on(
        'click',
        function () {

            $('#from_date').val('');

            $('#to_date').val('');

            $('#agent_filter').val('');

            $('#name_filter').val('');

            $('#phone_filter').val('');

            $('#status_filter').val('');

            $('#general_search').val('');


            table.search('');

            table
                .columns()
                .search('');


            table
                .order([
                    [2, 'desc']
                ])
                .draw();
        }
    );

});
</script>

@endsection