{{-- @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">

<style>
    /* Table Header Styling */

    #usersTable thead th {

        background: linear-gradient(to bottom, #1b97d3, #0E4E6D) !important;

        color: white;

        text-transform: uppercase;

        font-size: 0.75rem;

        font-weight: 600;

        padding: 12px;

        border: none;

        white-space: nowrap;

    }

    /* Table Body Styling */

    #usersTable tbody td {

        padding: 15px 12px;

        vertical-align: middle;

        border-bottom: 1px solid #f0f0f0;


    }

    /* Custom Search Box with Icon */

    .search-container {

        position: relative;

    }

    .search-container i {

        position: absolute;

        left: 10px;

        top: 50%;

        transform: translateY(-50%);

        color: #888;

    }

    .search-container input {

        padding-left: 35px !important;

        border-radius: 6px;

        border: 1px solid #ddd;

    }

    /* Pagination Right Alignment */

    .dataTables_wrapper .dataTables_paginate {

        float: right !important;

        padding-top: 1.25em;

    }

    /* Custom Excel Button */

    .btn-excel {

        background-color: #f3f4f7;

        border: 1px solid #ddd;


        font-weight: 500;

    }

    /* Badge/Status Styling as per image colors */

    .status-pending {

        color: #ff9f43;

        font-weight: 600;

    }

    .status-canceled {

        color: #ea5455;

        font-weight: 600;

    }

    .status-approved {

        color: #28c76f;

        font-weight: 600;

    }
</style>

@section('content')

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

<div class="container-fluid">

    <div class="row align-items-center justify-content-between mb-4 mt-3">

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

            <a href="{{ route('admin.purchase_advances') }}" class="btn btn-white btn-icon me-3 shadow-sm">

                <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 d="M15 6l-6 6l6 6" />

                </svg>

            </a>

            <h4 class="mb-0">Purchase Advance History</h4>

        </div>

    </div>

    <div class="card shadow-sm border-0">

        <div class="card-body p-3">

            <div class="row">

                <h5 class="mb-3">Filters</h5>

                <div class="d-flex justify-content-end gap-2">

                    <select id="packageFilter" class="form-select w-auto">

                        <option value="">Select Package</option>

                        <option value="Omiga Gold 22">Omiga Gold 22</option>

                        <option value="Omiga Gold 33">Omiga Gold 33</option>

                    </select>

                    <button class="btn btn-primary px-4" id="btnSearch">Search</button>

                </div>

            </div>

            <div class="row mt-2">

                <div class="d-flex justify-content-between align-items-center p-3">

                    <select id="customLength" class="form-select form-select-sm" style="width: 80px;">

                        <option value="10">10</option>

                        <option value="25">25</option>

                        <option value="50">50</option>

                    </select>

                    <div class="d-flex gap-2">

                        <div class="input-group">

                            <span class="input-group-text bg-white border-end-0"><i class="ti tabler-search"></i></span>

                            <input type="text" id="customSearch" class="form-control border-start-0"
                                placeholder="Search User">

                        </div>

                    </div>

                </div>

                <div class="table-responsive">

                    <table class="table w-100 mb-0" id="usersTable">

                        <thead class="table-primary-custom">

                            <tr>

                                <th>SNO</th>

                                <th>DATE</th>

                                <th>USER ID</th>

                                <th>USER NAME</th>

                                <th>PACKAGE</th>

                                <th>ADVANCE AMOUNT</th>

                                <th>RECEIPT</th>

                                <th>REMARK</th>

                                <th>ACTION</th>

                            </tr>

                        </thead>

                        <tbody></tbody>

                    </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>

<!-- DataTables Buttons -->

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

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

<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

<!-- Required for Excel -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<script>

    $(document).ready(function () {

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

            processing: true,

            serverSide: true,

            ajax: {

                url: "{{ route('admin.admin_investment_data') }}",

                data: function (d) {

                    d.package = $('#packageFilter').val(); // send filter to backend

                }

            },

            dom: 'Brt<"d-flex justify-content-between align-items-center p-3"ip>',

            buttons: [{

                extend: 'excelHtml5',

                text: '<i class="ti tabler-upload"></i> Excel',

                className: 'btn btn-light border',

                title: 'Purchase Advance History',

                exportOptions: {

                    columns: [0, 1, 2, 3, 4, 5, 7] // skip receipt image column

                }

            }],

            pageLength: 10,

            ordering: false,

            columns: [{

                data: 'DT_RowIndex',

                name: 'DT_RowIndex',

                orderable: false,

                searchable: false

            },

            {

                data: 'date',

                name: 'date'

            },

            {

                data: 'userId',

                name: 'user_id'

            },

            {

                data: 'userName',

                name: 'name'

            },

            {

                data: 'package',

                name: 'package'

            },

            {

                data: 'amount',

                name: 'amount',

                className: 'fw-bold'

            },

            {

                data: 'receipt',

                name: 'receipt',

                orderable: false,

                searchable: false

            },

            {

                data: 'remark',

                name: 'remark'

            },

            {

                data: 'action',

                name: 'action',

                orderable: false,

                searchable: false

            }

            ]

        });

        $('#btnSearch').on('click', function () {

            table.ajax.reload();

        });

        $('#customSearch').on('keyup', function () {

            table.search(this.value).draw();

        });

        // Page Length

        $('#customLength').on('change', function () {

            table.page.len(this.value).draw();

        });

    });

</script>

<script>

    $(document).on('click', '.deleteInvestment', function () {

        let id = $(this).data('id');

        $('#deleteInvestmentId').val(id);

    });

</script>

@endsection --}}







@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.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

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



<style>

    /* Status Colors */

    .status-pending {
        color: #ff9f43;
        font-weight: 600;
    }

    .status-canceled {
        color: #ea5455;
        font-weight: 600;
    }

    .status-approved {
        color: #28c76f;
        font-weight: 600;
    }



    /* Responsive adjustments */

    @media (max-width: 768px) {

        .filter-row {

            flex-direction: column;

            gap: 10px;

        }

        .filter-row div,
        .filter-row select,
        .filter-row button {

            width: 100% !important;

        }

    }
</style>



@section('content')

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




        <!-- <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">

            <h4 class="mb-0 fw-bold">Purchase Advance History</h4>

            <a href="{{ route('admin.purchase_advances') }}" class="btn btn-primary shadow-sm d-flex align-items-center">

                <i class="ti tabler-plus me-1"></i> <span class="d-none d-sm-inline">Purchase Advances</span><span class="d-sm-none">Add</span>

            </a>

        </div> -->

        <div class="d-flex justify-content-between align-items-center mb-3">

            <div class="d-flex align-items-center">

                <!-- <a href="{{ route('admin.advance_dashboard') }}" class="btn btn-white btn-icon me-3 shadow-sm">

                    <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 d="M15 6l-6 6l6 6" />

                    </svg>

                </a> -->

                <h6 class="mb-0">Purchase Advance Report</h6>
            </div>
            <div class="col-auto">
                <a href="{{ route('admin.purchase_advances') }}"
                    class="btn btn-primary shadow-sm d-flex align-items-center">

                    <i class="ti tabler-plus me-1"></i> <span class="d-none d-sm-inline">Purchase Advances</span><span
                        class="d-sm-none">Add</span>

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

        <div class="card shadow-sm border-0 mb-4">

            <div class="card-body">

                <h6 class="card-title mb-3 text-muted text-uppercase small fw-bold">Advanced Filters</h6>

                <div class="d-flex flex-wrap gap-2 filter-row">
<!-- 
                    <div style="min-width: 200px;">

                        <select id="packageFilter" class="form-select">

                            <option value="">All Packages</option>

                            <option value="Omiga Gold 22">Omiga Gold 22</option>

                            <option value="Omiga Gold 33">Omiga Gold 33</option>

                        </select>

                    </div> -->

                    <div class="flex-grow-1" style="max-width: 400px;">

                        <div class="input-group">

                            <span class="input-group-text border-end-0"><i class="ti tabler-search"></i></span>

                            <input type="text" id="customSearch" class="form-control border-start-0"
                                placeholder="Search by User ID or Name...">

                        </div>

                    </div>

                    <button class="btn btn-primary px-4" id="btnSearch">Apply Filter</button>

                    <button class="btn btn-label-secondary" type="reset">
                        Reset
                    </button>

                </div>

            </div>

        </div>



        <div class="card shadow-sm border-0">

            <div class="card-header py-3">

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">

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

                        <span class="text-muted small">Show</span>

                        <select id="customLength" class="form-select form-select-sm" style="width: 70px;">

                            <option value="10">10</option>

                            <option value="25">25</option>

                            <option value="50">50</option>

                        </select>

                    </div>

                    <div id="dt_buttons"></div>
                </div>

            </div>

            <div class="card-body p-0">

                <div class="table" style="overflow: auto;">

                    <table class="table w-100 nowrap" id="usersTable">

                        <thead>

                            <tr>

                                <th>SNO</th>

                                <th>DATE</th>

                                <th>USER ID</th>

                                <th>USER NAME</th>

                                <!-- <th>PACKAGE</th> -->

                                <th>ADVANCE AMOUNT</th>

                                <!-- <th>RECEIPT</th> -->

                                <!-- <th>REMARK</th> -->

                                <th>ACTION</th>

                            </tr>

                        </thead>

                        <tbody></tbody>

                    </table>

                </div>

            </div>

        </div>





    <div class="modal fade" id="deleteInvestmentModal" tabindex="-1">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content border-0 shadow text-center p-4">

                <div class="text-danger mb-3">

                    <i class="ti tabler-alert-circle fs-1"></i>

                </div>

                <h5 class="fw-bold">Confirm Deletion</h5>

                <p class="text-muted small">This action cannot be undone. Are you sure?</p>

                <form method="POST" action="{{ route('admin.investment_delete') }}" id="SubmitForm">

                    @csrf

                    <input type="hidden" name="id" id="deleteInvestmentId">

                    <div class="d-flex gap-2">

                        <button type="button" class="btn btn-light flex-fill" data-bs-dismiss="modal">Cancel</button>

                        <button type="submit" class="btn btn-danger flex-fill" id="submit_btn">Delete</button>

                    </div>

                </form>

            </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 src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

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

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>



    <script>

        $(document).ready(function () {

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

                processing: true,

                serverSide: true,

                autoWidth: false,

                ajax: {

                    url: "{{ route('admin.admin_investment_data') }}",

                    data: function (d) {

                        d.package = $('#packageFilter').val();

                        d.search_custom = $('#customSearch').val(); // if your backend handles custom filter keys

                    }

                },

                dom: 'Brt<"d-flex flex-wrap justify-content-between align-items-center p-3"ip>',

                buttons: [{

                    extend: 'excelHtml5',

                    text: '<i class="ti tabler-file-download me-1"></i> Export Excel',

                    className: 'btn btn-outline-secondary btn-sm',

                    title: 'Purchase Advance History',

                    exportOptions: { columns: [0, 1, 2, 3, 4, 5, 7] }

                }],

                pageLength: 10,

                ordering: false,

                columns: [

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

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

                    { data: 'userId', name: 'user_id' },

                    { data: 'userName', name: 'name' },

                    // { data: 'package', name: 'package' },

                    { data: 'amount', name: 'amount' },

                    // { data: 'receipt', name: 'receipt', orderable: false, searchable: false },

                    // { data: 'remark', name: 'remark' },

                    { data: 'action', name: 'action', orderable: false, searchable: false }

                ]

            });



            table.buttons().container().appendTo('#dt_buttons');



            $('#btnSearch').on('click', function () {

                table.search($('#customSearch').val()).draw();

            });

            $('#customSearch').on('keyup', function () {

                table.search(this.value).draw();

            });

            $('#customLength').on('change', function () {

                table.page.len(this.value).draw();

            });

            $(document).on('click', '.deleteInvestment', function () {

                $('#deleteInvestmentId').val($(this).data('id'));

            });

        });

    </script>

    <script>
        document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault(); // ✅ prevent double submit
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('SubmitForm').submit();
        });
    </script>

@endsection