@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    .dataTables_info,
    .dataTables_paginate {
        padding: 0 18px 18px !important;
    }

    .dashboard-card {
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        padding: 26px;
        background: linear-gradient(135deg, #138fa7 0%, #0f6f82 100%);
        box-shadow:
            0 10px 30px rgba(19, 143, 167, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transition: all 0.35s ease;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .dashboard-card:hover {
        transform: translateY(-6px);
        box-shadow:
            0 20px 40px rgba(19, 143, 167, 0.35),
            0 0 20px rgba(255, 193, 7, 0.18);
    }

    .card-glow {
        position: absolute;
        top: -50px;
        right: -50px;
        width: 160px;
        height: 160px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.35) 0%, transparent 70%);
        border-radius: 50%;
    }

    .card-title {
        color: #fff !important;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 10px;
        letter-spacing: 0.4px;
    }

    .card-value {
        color: #fff;
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .card-icon {
        width: 68px;
        height: 68px;
        min-width: 68px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .card-icon i {
        color: #fff;
        font-size: 30px;
    }

    .card-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        padding: 6px 12px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
        backdrop-filter: blur(10px);
    }

    .card-badge i {
        font-size: 14px;
    }

    @media(max-width: 768px) {
        .dashboard-card {
            padding: 22px;
        }

        .card-value {
            font-size: 26px;
        }

        .card-icon {
            width: 58px;
            height: 58px;
            min-width: 58px;
        }

        .card-icon i {
            font-size: 24px;
        }
    }
</style>

<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5 class="page-title">
            <i class="ti tabler-crown text-warning me-2"></i>Gold Advance
        </h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('admin.gold_generate') }}" class="btn btn-primary">
            Generate Profit
        </a>
    </div>
</div>
<div class="row g-4 mb-3">

    <!-- Total Users -->
    <div class="col-xl-3 col-md-6 mb-3">
        <div class="dashboard-card">
            <div class="card-glow"></div>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="card-title">Total Users</p>
                    <h2 class="card-value">150</h2>
                    <span class="card-badge">
                        <i class="ti tabler-trending-up"></i> +12%
                    </span>
                </div>

                <div class="card-icon">
                    <i class="ti tabler-users"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Investment Count -->
    <div class="col-xl-3 col-md-6 mb-3">
        <div class="dashboard-card">
            <div class="card-glow"></div>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="card-title">Investment Count</p>
                    <h2 class="card-value">320</h2>
                    <span class="card-badge">
                        <i class="ti tabler-chart-bar"></i> Active
                    </span>
                </div>

                <div class="card-icon">
                    <i class="ti tabler-chart-pie"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Investment -->
    <div class="col-xl-3 col-md-6 mb-3">
        <div class="dashboard-card">
            <div class="card-glow"></div>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="card-title">Total Investment</p>
                    <h2 class="card-value">₹8.5L</h2>
                    <span class="card-badge">
                        <i class="ti tabler-wallet"></i> Revenue
                    </span>
                </div>

                <div class="card-icon">
                    <i class="ti tabler-cash-banknote"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Paid ROI -->
    <div class="col-xl-3 col-md-6 mb-3">
        <div class="dashboard-card">
            <div class="card-glow"></div>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="card-title">Paid ROI</p>
                    <h2 class="card-value">₹2.1L</h2>
                    <span class="card-badge">
                        <i class="ti tabler-check"></i> Completed
                    </span>
                </div>

                <div class="card-icon">
                    <i class="ti tabler-coins"></i>
                </div>
            </div>
        </div>
    </div>

</div>



<div class="card main-card mt-3">
    <div class="top-filter p-3">
        <div class="row g-3 align-items-end d-flex justify-content-end">

            <div class="col-lg-2 col-md-6">
                <label class="form-label">From Date</label>
                <input type="date" class="form-control">
            </div>

            <div class="col-lg-2 col-md-6">
                <label class="form-label">To Date</label>
                <input type="date" class="form-control">
            </div>

            <div class="col-lg-2 col-md-6">
                <label class="form-label">User Name</label>
                <input type="text" class="form-control" placeholder="Search user">
            </div>

            <div class="col-lg-1 col-md-6">
                <button class="btn btn-primary w-100">
                    <i class="ti tabler-search me-1"></i> Search
                </button>
            </div>


        </div>
    </div>
    <hr>
    <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 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">
            </div>

            <div class="col-lg-1 col-md-6">
                <button class="btn btn-label-secondary w-100">
                    <i class="ti tabler-download me-1"></i> Export
                </button>
            </div>

        </div>
    </div>

    <!-- <div class="top-filter p-3">
        <div class="row g-3 align-items-end d-flex justify-content-end">
            <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-lg-2 col-md-6">
                <label class="form-label">From Date</label>
                <input type="date" class="form-control">
            </div>

            <div class="col-lg-2 col-md-6">
                <label class="form-label">To Date</label>
                <input type="date" class="form-control">
            </div>

            <div class="col-lg-2 col-md-6">
                <label class="form-label">User Name</label>
                <input type="text" class="form-control" placeholder="Search user">
            </div>

            <div class="col-lg-1 col-md-6">
                <button class="btn btn-primary w-100">
                    <i class="ti tabler-search me-1"></i> Search
                </button>
            </div>
            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">
            </div>

            <div class="col-lg-1 col-md-6">
                <button class="btn btn-label-secondary w-100">
                    <i class="ti tabler-download me-1"></i> Export
                </button>
            </div>

        </div>
    </div> -->
    <div class="table-responsive table-wrap">
        <table class="table w-100" id="usersTable">
            <thead>
                <tr>
                    <th>Sno</th>
                    <th>User Details</th>
                    <th>Address</th>
                    <th>Phone</th>
                    <th>Investment</th>
                    <th>Daily ROI</th>
                    <th>ROI %</th>
                    <th>Remaining Days</th>
                    <th>Given Days</th>
                    <th>Bond</th>
                    <th>Change ROI</th>
                    <th>Action</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() {

        let table = $('#usersTable').DataTable({
            ajax: "{{ route('admin.gold_advance_data')}}",
            processing: true,
            serverSide: true,
            pageLength: 10,
            ordering: false,
            searching: true,
            info: true,
            lengthChange: false,

            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],
            columns: [

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },

                {
                    data: 'user_info',
                    name: 'user_info'
                },

                {
                    data: 'ref_info',
                    name: 'ref_info'
                },

                {
                    data: 'phone_number',
                    name: 'phone_number'
                },
                {
                    data: 'investment',
                    name: 'investment'
                },

                {
                    data: 'daily_roi',
                    name: 'daily_roi'
                },

                {
                    data: 'roi_percentage',
                    name: 'roi_percentage'
                },

                {
                    data: 'remaining_days',
                    name: 'remaining_days'
                },
                {
                    data: 'roi_given_days',
                    name: 'roi_given_days'
                },



                {
                    data: 'bond_info',
                    name: 'bond_info'
                },

                {
                    data: 'action',
                    name: 'action'
                },

                {
                    data: 'delete_info',
                    name: 'delete_info'
                }
            ]


        });

        $('#customSearch').keyup(function() {
            table.search($(this).val()).draw();
        });

        $('#pageLength').change(function() {
            table.page.len($(this).val()).draw();
        });



    });
</script>

@endsection