@extends('User.layout')
<style>
    .dt-search {
        display: none !important;
    }

    .attention-grab-btn {
        background: linear-gradient(90deg, #ff416c, #ff4b2b) !important;
        color: #ffffff !important;
        font-weight: bold;
        font-size: 1.2rem;
        padding: 12px 30px;
        border-radius: 50px;
        border: none;
        box-shadow: 0 6px 15px rgba(255, 75, 43, 0.4);
        position: relative;
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .attention-grab-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 25px rgba(255, 75, 43, 0.6);
    }

    /* .attention-grab-btn::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: rgba(255,255,255,0.2);
    top: -10%;
    left: -10%;
    transform: rotate(45deg);
    transition: all 0.5s ease;
} */

    .attention-grab-btn:hover::before {
        top: -50%;
        left: -50%;
        transform: rotate(90deg);
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.5);
        }

        70% {
            box-shadow: 0 0 0 15px rgba(255, 75, 43, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
        }
    }

    .attention-grab-btn.pulse {
        animation: pulse 2s infinite;
    }
</style>
<style>
    /* Gradient Theme */
.card-gradient-blue {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: #fff;
    border: none;
    position: relative;
    overflow: hidden;
}

/* Soft glow effect */
.card-gradient-blue::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

/* Dark mode support */
[data-bs-theme="dark"] .card-gradient-blue {
    background: linear-gradient(135deg, #0b3d91, #061f4a);
}

/* Icon wrapper */
.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text hierarchy */
.card-title-sm {
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.8;
}

.card-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Hover interaction */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Dark mode shadow */
[data-bs-theme="dark"] .card-hover:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">



    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Wallet Deposit</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('user.wallet_transfer_history') }}"><button class="btn btn-primary">Wallet Transfer</button>
            </a>

            <a href="{{ route('user.wallet_request_form') }}" class="btn attention-grab-btn pulse">Add Fund </a>
        </div>
    </div>

  <div class="row g-4">

    <!-- Available Wallet -->
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card card-gradient-blue card-hover h-100 shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">

                <div>
                    <p class="card-title-sm mb-1 text-white text-uppercase">
                        Available Wallet
                    </p>
                    <h4 class="card-amount text-white mb-0">
                         {{ number_format($availableWallet, 2) }}
                    </h4>
                </div>

                <div class="card-icon">
                    <i class="ti tabler-wallet fs-3 text-white"></i>
                </div>

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

    <!-- Requested Wallet -->
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card card-gradient-blue card-hover h-100 shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">

                <div>
                    <p class="card-title-sm mb-1 text-white text-uppercase">
                        Wallet Requests
                    </p>
                    <h4 class="card-amount text-white mb-0">
                         {{ number_format($requestedWallet, 2) }}
                    </h4>
                </div>

                <div class="card-icon">
                    <i class="ti tabler-clock-hour-4 fs-3 text-white"></i>
                </div>

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

    <!-- Total Wallet -->
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card card-gradient-blue card-hover h-100 shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">

                <div>
                    <p class="card-title-sm mb-1 text-white text-uppercase">
                        Total Wallet
                    </p>
                    <h4 class="card-amount text-white mb-0">
                         {{ number_format($totalWallet, 2) }}
                    </h4>
                </div>

                <div class="card-icon">
                    <i class="ti tabler-coin fs-3 text-white"></i>
                </div>

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

</div>
    <div class="card p-0 mt-4">
<!--
        <div class="row mb-3 align-items-center p-3 g-2">

            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

            <div class="col-auto ms-auto d-flex gap-2 align-items-center">

                <div class="position-relative">
                    <input type="text" id="toDate" class="form-control ps-7" placeholder="Search...">
                    <i class="ti tabler-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                </div>

              <button class="btn btn-label-secondary">
    <i class="ti tabler-upload"></i>
    <span class="d-none d-sm-inline">&nbsp; Excel</span>
</button>

            </div>

        </div> -->
  <div class="row m-3 g-3 align-items-center justify-content-between">

                        <!-- LEFT -->
                        <div class="col-12 col-lg-auto">

                            <select id="pageLength" class="form-select">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="All">All</option>
                            </select>

                        </div>

                        <div class="col-12 col-lg-auto">

                            <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">


                                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">

                                <!-- <button class="btn btn-label-secondary">
                                    Export
                                </button> -->
                            </div>

                        </div>

                    </div>

        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table id="depositTable" class="table custom-table w-100">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>DATE</th>
                                    <!-- <th>NETWORK</th>
                                        <th>WALLET&nbsp;ADDRESS</th>
                                        <th>DEPOSIT&nbsp;USDT</th>
                                        <th>TOTAL&nbsp;DEPOSIT</th> -->
                                    <th>PAYOUT&nbsp;DETAILS</th>
                                    <th>AMOUNT</th>
                                    <th>TRANSACTION&nbsp;HASH</th>
                                    <th>RECEIPT</th>
                                    <th>STATUS</th>
                                    <th>REMARK</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

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

            const table = $('#depositTable').DataTable({

                ajax: "{{ route('user.wallet_data') }}",
                paging: true,
                searching: true,
                info: true,
                ordering: false,
                lengthChange: false,
                pageLength: 10,
                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Wallet History',
                    className: 'd-none'
                }],
                  columnDefs: [
        {
            targets: '_all',
            className: 'text-nowrap'
        }
    ],

                columns: [{
                    data: "DT_RowIndex",
                    name: "DT_RowIndex",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "date",
                    name: "date"
                },
                {
                    data: "payout_mode",
                    name: "payout_mode",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "amount",
                    name: "amount"
                },
                {
                    data: "tx_hash",
                    name: "tx_hash"
                },
                {
                    data: "receipt_view",
                    name: "receipt_view",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "status",
                    name: "status"
                },
                {
                    data: "remark",
                    name: "remark"
                }
                ]
            });

            // Custom Search
            $('#toDate').on('keyup change', function () {
                table.search(this.value).draw();
            });

            //  Custom Length
            $('#pageLength').on('change', function () {
                table.page.len(this.value).draw();
            });

            $('#excelExport').click(function () {
                table.button('.buttons-excel').trigger();
            });

        });
    </script>
    <script>
        function openImageModal(imgUrl) {
            document.getElementById("previewImage").src = imgUrl;
            let modal = new bootstrap.Modal(document.getElementById("imageViewModal"));
            modal.show();
        }
    </script>
@endsection