@extends('User.layout')

<style>
    .wallet-card{
        border:none;
        border-radius:18px;
        padding:22px;
        color:#fff;
        position:relative;
        overflow:hidden;
        cursor:pointer;
        transition:0.4s ease;
        box-shadow:0 10px 25px rgba(0,0,0,0.12);
        animation:fadeUp 1s ease forwards;
        opacity:0;
        background:linear-gradient(-45deg,#138fa7,#0d6e82,#19a9c5,#138fa7);
        background-size:400% 400%;
    }

    /* Card entry delay */
    .col-md-4:nth-child(1) .wallet-card{
        animation:fadeUp 1s ease forwards, gradientMove 6s ease infinite;
        animation-delay:0.2s;
    }

    .col-md-4:nth-child(2) .wallet-card{
        animation:fadeUp 1s ease forwards, gradientMove 6s ease infinite;
        animation-delay:0.4s;
    }

    .col-md-4:nth-child(3) .wallet-card{
        animation:fadeUp 1s ease forwards, gradientMove 6s ease infinite;
        animation-delay:0.6s;
    }

    .wallet-card:hover{
        transform:translateY(-8px) scale(1.02);
        box-shadow:0 20px 35px rgba(19,143,167,0.35);
    }

    /* Floating circles */
    .wallet-card::before{
        content:'';
        position:absolute;
        width:140px;
        height:140px;
        background:rgba(255,255,255,0.12);
        border-radius:50%;
        top:-40px;
        right:-40px;
        animation:floatCircle 4s ease-in-out infinite;
    }

    .wallet-card::after{
        content:'';
        position:absolute;
        width:90px;
        height:90px;
        background:rgba(255,255,255,0.08);
        border-radius:50%;
        bottom:-20px;
        left:-20px;
        animation:floatCircle 5s ease-in-out infinite;
    }

    .wallet-title{
        font-size:15px;
        font-weight:600;
        letter-spacing:0.5px;
        margin-bottom:10px;
        opacity:0.95;
        position:relative;
        z-index:2;
    }

    .wallet-amount{
        font-size:30px;
        font-weight:700;
        margin:0;
        position:relative;
        color: #fff;
        z-index:2;
    }

    .wallet-icon{
        font-size:34px;
        opacity:0.9;
        position:relative;
        z-index:2;
    }

    /* Fade Up */
    @keyframes fadeUp{
        from{
            opacity:0;
            transform:translateY(30px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }

    /* Moving Gradient */
    @keyframes gradientMove{
        0%{ background-position:0% 50%; }
        50%{ background-position:100% 50%; }
        100%{ background-position:0% 50%; }
    }

    /* Floating Bubble */
    @keyframes floatCircle{
        0%,100%{ transform:translateY(0px); }
        50%{ transform:translateY(12px); }
    }
</style>

@section('content')
<h6>Product Wallet</h6>
<div class="row g-4">

    <div class="col-md-4">
        <div class="wallet-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="wallet-title">Available Wallet</div>
                    <h2 class="wallet-amount">₹15,250</h2>
                </div>
                <i class="ti tabler-wallet wallet-icon"></i>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="wallet-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="wallet-title">Total Wallet</div>
                    <h2 class="wallet-amount">₹42,800</h2>
                </div>
                <i class="ti tabler-chart-line wallet-icon"></i>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="wallet-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="wallet-title">Debitted Wallet</div>
                    <h2 class="wallet-amount">₹8,900</h2>
                </div>
                <i class="ti tabler-arrow-down wallet-icon"></i>
            </div>
        </div>
    </div>

</div>
  <div class="card mt-5">

        <div class="top-filter p-3">
            <div class="row g-3 align-items-end d-flex justify-content-between">
                <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>
                        <option value="All">All</option>
                    </select>
                </div>

                <div class="col-md-3 mb-3 ms-auto">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search table...">
                </div>


            </div>

        </div>
        <div class="table-responsive table-wrap">
            <table class="table w-100" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>Wallet Credit</th>
                        <th>Total Amount</th>
                        <th>Package</th>
                        <th>Income Type</th>
                        <th>Remark</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </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 users = [];

            $('#usersTable').DataTable({
                data: users,
                pageLength: 10,
                ordering: false,
                searching: true,
                info: true,
                lengthChange: false,
                language: {
                    emptyTable: "No data available in this table"
                }
            });

        });
    </script>
@endsection