@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;
    }

    @media(max-width:768px) {
        .table-wrap {
            padding: 10px;
        }
    }
    .dashboard-card {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 18px;
        min-height: 130px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        transition: all 0.35s ease;
        color: #fff;
    }

    .dashboard-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    }

    /* Main Theme */
    .users-card,
    .investment-count-card,
    .total-investment-card,
    .roi-card {
        background: linear-gradient(257deg, #92c9d4, #138fa7);
    }

    /* Optional slight variations */
    .investment-count-card {
        background: linear-gradient(257deg, #8ed0df, #0c8aa4);
    }

    .total-investment-card {
        background: linear-gradient(257deg, #79c8d9, #117f96);
    }

    .roi-card {
        background: linear-gradient(257deg, #9cd8e3, #0f90a9);
    }

    .card-icon {
        width: 68px;
        height: 68px;
        min-width: 68px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    .card-content {
        flex: 1;
    }

    .card-title {
        display: block;
        font-size: 15px;
        font-weight: 500;
        opacity: 0.9;
        color: #fff !important;
        margin-bottom: 8px;
    }

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

    /* Decorative Circle */
    .dashboard-card::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        top: -40px;
        right: -40px;
    }

    /* Mobile Responsive */
    @media (max-width: 576px) {
        .dashboard-card {
            padding: 20px;
            min-height: 115px;
        }

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

        .card-icon i {
            font-size: 24px;
        }

        .card-value {
            font-size: 26px;
        }
    }
</style>

<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5 class="page-title"><button type="button" class="btn btn-icon bg-white me-2 waves-effect waves-light" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('admin.diamond_advance') }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M15 6l-6 6l6 6"></path>
                </svg>
            </a>
        </button>
            <i class="ti tabler-diamond text-primary me-2"></i>
            Diamond Advance
        </h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('admin.diamond_bdb_generate') }}" class="btn btn-primary">
            <i class="ti tabler-chart-bar me-1"></i> Generate GSBP
        </a>
          <a href="{{ route('admin.diamond_generate') }}" class="btn btn-primary">
            <i class="ti tabler-chart-bar me-1"></i> Generate Profit
        </a>

    </div>
</div>
<div class="row g-4">

    <!-- Total Users -->
    <div class="col-12 col-sm-6 col-xl-3 mb-3">
        <div class="dashboard-card users-card">
            <div class="card-icon">
                <i class="ti tabler-users"></i>
            </div>

            <div class="card-content">
                <span class="card-title">Total Users</span>
                <h3 class="card-value">150</h3>
            </div>
        </div>
    </div>

    <!-- Total Investment Count -->
    <div class="col-12 col-sm-6 col-xl-3 mb-3">
        <div class="dashboard-card investment-count-card">
            <div class="card-icon">
                <i class="ti tabler-chart-bar"></i>
            </div>

            <div class="card-content">
                <span class="card-title">Investment Count</span>
                <h3 class="card-value">320</h3>
            </div>
        </div>
    </div>

    <!-- Total Investment -->
    <div class="col-12 col-sm-6 col-xl-3 mb-3">
        <div class="dashboard-card total-investment-card">
            <div class="card-icon">
                <i class="ti tabler-currency-dollar"></i>
            </div>

            <div class="card-content">
                <span class="card-title">Total Investment</span>
                <h3 class="card-value">₹ 12.5L</h3>
            </div>
        </div>
    </div>

    <!-- Paid ROI -->
    <div class="col-12 col-sm-6 col-xl-3 mb-3">
        <div class="dashboard-card roi-card">
            <div class="card-icon">
                <i class="ti tabler-wallet"></i>
            </div>

            <div class="card-content">
                <span class="card-title">Paid ROI</span>
                <h3 class="card-value">₹ 4.8L</h3>
            </div>
        </div>
    </div>

</div>
<div class="card main-card mt-2">

    <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="table-responsive table-wrap">
        <table class="table w-100" id="usersTable">
            <thead>
                <tr>
                    <th>Sno</th>
                    <th>Date</th>
                    <th>User Details</th>
                    <th>Address</th>
                    <th>Phone</th>
                    <th>Referral</th>
                    <th>Investment</th>
                    <th>Pending</th>
                    <th>Profit</th>
                    <th>Deposited By</th>
                    <th>Action</th>
                    <th>Status</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.diamond_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: 'date',
                    name: 'date'
                },
                {
                    data: 'user_info',
                    name: 'user_info'
                },
                {
                    data: 'address',
                    name: 'address'
                },
                {
                    data: 'phone_info',
                    name: 'phone_info'
                },
                {
                    data: 'ref_info',
                    name: 'ref_info'
                },
                {
                    data: 'investment_info',
                    name: 'investment_info'
                },
                {
                    data: 'pending_info',
                    name: 'pending_info'
                },
                {
                    data: 'profit',
                    name: 'profit'
                },
                {
                    data: 'deposited_by',
                    name: 'deposited_by'
                },
                {
                    data: 'action',
                    name: 'action'
                },
                {
                    data: 'status',
                    name: 'status'
                }
            ]


        });

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

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

        // columns: [

        //     {
        //         data: null,
        //         render: function (data, type, row, meta) {
        //             return meta.row + 1;
        //         }
        //     },

        //     { data: 'date' },

        //     {
        //         data: null,
        //         render: function (data, type, row) {
        //             return `
        //                         <div class="d-flex flex-column gap-3">
        //                     <div class="title-sm">User Name : &nbsp;${row.name}</div>

        //                     <div class="title-sm">User ID : &nbsp;${row.id}</div>
        //                 </div>
        //             `;
        //         }
        //     },

        //     { data: 'address' },

        //     {
        //         data: 'phone',
        //         render: function (data) {
        //             return `<i class="ti tabler-phone me-1 text-primary"></i>${data}`;
        //         }
        //     },

        //     {
        //         data: null,
        //         render: function (data, type, row) {
        //             return `
        //                         <div class="d-flex flex-column gap-3">
        //                     <div class="title-sm">Referral Name : &nbsp;${row.ref_name}</div>

        //                     <div class="title-sm">Referral ID : &nbsp;${row.ref_id}</div>
        //                 </div>
        //             `;
        //         }
        //     },

        //     {
        //         data: 'investment',
        //         render: function (data) {
        //             return `<span class="amount"><i class="ti tabler-currency-rupee"></i>${data}</span>`;
        //         }
        //     },

        //     {
        //         data: 'pending',
        //         render: function (data) {
        //             return `<span class="badge bg-label-warning">${data}</span>`;
        //         }
        //     },

        //     {
        //         data: 'product',
        //         render: function (data) {
        //             return `<span class="badge bg-label-info">${data}</span>`;
        //         }
        //     },

        //     { data: 'by' },

        //     {
        //         data: null,
        //         render: function () {
        //             return `
        //                 <div class="d-flex gap-2 justify-content-center">
        //                     <button class="btn btn-label-info"  data-bs-toggle="modal" data-bs-target="#percentageModal">
        //                         <i class="ti tabler-edit"></i>
        //                     </button>

        //                     <button class="btn btn-label-danger"  data-bs-toggle="modal" data-bs-target="#delete">
        //                         <i class="ti tabler-trash"></i>
        //                     </button>
        //                 </div>
        //             `;
        //         }
        //     },

        //     {
        //         data: null,
        //         render: function () {
        //             return `<span class="badge bg-label-success">
        //                 <i class="ti tabler-check me-1"></i>Generated Successfully
        //             </span>`;
        //         }
        //     }

        // ]

    });
</script>

@endsection