@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.2/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="row align-items-center justify-content-between mb-4 mt-3">
        <div class="col-auto d-flex align-items-center">
<h6 class="mb-0">
            <a href="{{ route('admin.purchase_request') }}" 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>
            Purchase Advance Report</h6>
        </div>
    </div>

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



            <!-- Search + Length -->
            <div class="row align-items-center g-2 mb-3">

                <!-- Left: Length -->
                <div class="col-12 col-lg-auto">
                    <select id="customLength" class="form-select form-select-sm">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>
                </div>

                <!-- Right Section -->
                <div class="col-12 col-lg">
                    <div class="d-flex flex-column flex-lg-row gap-2 justify-content-lg-end">

                        <!-- Search -->
                        <input type="text" id="customSearch" class="form-control" placeholder="Search User"
                            style="width:264px;">

                        <!-- Button -->
                        <button class="btn btn-secondary d-flex align-items-center justify-content-center gap-1">
                            <i class="ti tabler-download"></i> Excel
                        </button>

                    </div>
                </div>

            </div>
        </div>

        <div class="table-responsive">
            <table class="table w-100" 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>STATUS</th>
                    </tr>
                </thead>
            </table>
        </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://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script>
        $(document).ready(function () {

            var table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('admin.investment_status_data') }}",
                    data: function (d) {
                        d.status = $('#status').val();
                        d.package = $('#packageFilter').val();
                        d.search_value = $('#customSearch').val();
                    }
                },

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

                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: 'Export Excel',
                        className: 'd-none',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 7, 8]
                        }
                    }
                ],

                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'date' },
                    { data: 'user_id' },
                    { data: 'user_name' },
                    { data: 'package' },
                    { data: 'amount' },
                    { data: 'receipt', orderable: false, searchable: false },
                    { data: 'remark' },
                    { data: 'status', orderable: false, searchable: false }
                ]
            });

            // Trigger Excel Button
            $('#excelBtn').on('click', function () {
                table.button('.buttons-excel').trigger();
            });

            // Filter Button
            $('#btnSearch').on('click', function () {
                table.draw();
            });

            // Custom Search
            $('#customSearch').on('keyup', function () {
                table.draw();
            });

            // Page Length
            $('#customLength').on('change', function () {
                table.page.len(this.value).draw();
            });

        });
    </script>

@endsection