@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>
    .user-box {
        text-align: left;
    }

    .user-name {
        font-weight: 700;
        /* color: #111827; */
        margin-bottom: 4px;
    }

    .user-id {
        font-size: 13px;
        /* color: #6b7280; */
    }

    .amount {
        font-weight: 700;
        color: #059669;
    }

    .badge-soft-success {
        background: #dcfce7;
        color: #15803d;
        padding: 8px 12px;
        border-radius: 10px;
        font-weight: 700;
    }

    .badge-soft-warning {
        background: #fef3c7;
        color: #b45309;
        padding: 8px 12px;
        border-radius: 10px;
        font-weight: 700;
    }

    .action-btn {
        border-radius: 10px;
        font-size: 13px;
        padding: 7px 12px;
        font-weight: 600;
    }

    .dataTables_info,
    .dataTables_paginate {
        padding: 15px 18px !important;
    }

    @media(max-width:768px) {
        .table-wrap {
            padding: 0 10px 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;
        color: #fff !important;
        opacity: 0.9;
        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 mt-3 mb-3 m-2">
    <div class="col-auto">
        <h5 class="page-title">
            <i class="ti tabler-star me-2 text-primary"></i>Silver Advance
        </h5>
    </div>
      <div class="col-auto">
        <a href="{{ route('admin.silver_generate') }}" class="btn btn-primary">
           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-3">
<!--
    <div class="filter-section 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="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-wrap">
        <table class="table w-100" id="usersTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Date</th>
                    <th>User Details</th>
                    <th>Investment</th>
                    <th>Pending Days</th>
                    <th>Profit %</th>
                    <th>Paid 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() {

        const users = [{
                name: 'Rahul Sharma',
                id: 'USR1025',
                phone: '58',
                investment: '50000',
                product: '1%',
                paid: '20000',
                date: '28/08/2022'
            },
            {
                name: 'Amit Kumar',
                id: 'USR1026',
                phone: '32',
                investment: '85000',
                product: '1.5%',
                paid: '35000',
                date: '12/10/2022'
            }
        ];

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

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

                {
                    data: 'date',
                    name: 'date'
                },

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

                {
                    data: 'investment_info',
                    name: 'investment_info'
                },

                {
                    data: 'days_info',
                    name: 'days_info'
                },

                {
                    data: 'product_info',
                    name: 'product_info'
                },

                {
                    data: 'paid_info',
                    name: 'paid_info'
                },

                {
                    data: 'action',
                    name: 'action'
                }
            ]
        });

        $('#tableSearch').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="user-box">
        //                         <div class="user-name">
        //                             <i class="ti tabler-user me-1 text-primary"></i>${row.name}
        //                         </div>
        //                         <div class="user-id">
        //                             <i class="ti tabler-id me-1"></i>${row.id}
        //                         </div>
        //                     </div>
        //                 `;
        //         }
        //     },

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

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

        //     {
        //         data: 'product',
        //         render: function(data) {
        //             return `<strong class="text-primary">${data}</strong>`;
        //         }
        //     },

        //     {
        //         data: 'paid',
        //         render: function(data) {
        //             return `<a href={{ route('admin.paid_roi') }}><span class="badge bg-label-success"><i class="ti tabler-wallet me-1"></i>₹ ${data}</span></a>`;
        //         }
        //     },

        //     {
        //         data: null,
        //         render: function() {
        //             return `
        //                     <button class="btn btn-sm btn-primary action-btn" data-bs-toggle="modal" data-bs-target="#percentageModal">
        //                         <i class="ti tabler-edit me-1"></i>Change %
        //                     </button>
        //                 `;
        //         }
        //     }
        // ]

    });
</script>

@endsection