@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 Styling */

  


    /* Action Icons */

    .btn-status {

        width: 28px;

        height: 28px;

        border-radius: 50%;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        border: 1px solid #ddd;

        background: white;

        transition: 0.3s;

    }



    .btn-accept {

        color: #28c76f;

        border-color: #28c76f;

    }



    .btn-reject {

        color: #ea5455;

        border-color: #ea5455;

    }



    .btn-accept:hover {

        background: #28c76f;

        color: white;

    }



    .btn-reject:hover {

        background: #ea5455;

        color: white;

    }



    /* Modal Styling */

    .modal-content {

        border-radius: 12px;

        border: none;

    }



    .modal-title {

        font-weight: 700;

        font-size: 1.5rem;

    }



    .modal-subtitle {

        color: #888;

        font-size: 0.9rem;

        margin-bottom: 20px;

    }



    .btn-yes {

        background-color: #31ce66;

        color: white;

        border: none;

        padding: 10px 40px;

        border-radius: 8px;

        font-weight: 600;

    }



    .btn-cancel {

        border: 1px solid #1a99d5;

        color: #1a99d5;

        background: white;

        padding: 10px 40px;

        border-radius: 8px;

    }



    .btn-submit {

        background-color: #1a99d5;

        color: white;

        border: none;

        padding: 10px 40px;

        border-radius: 8px;

    }
    .dt-search
    {
        display: none !important;
    }
        .dt-length
    {
        display: none !important;
    }
</style>



@section('content')


        <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">Advance Request</h6>

            </div>



            <a href="{{ route('admin.purchase_request_history') }}"
                class="btn btn-primary bg-info border-0 px-4">Report</a>

        </div>



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

            <div class="card-body">



<div class="row align-items-center">

    <!-- Left : Page Length -->
    <div class="col-auto">
        <select id="customLength" class="form-select form-select-sm mb-3" style="width:80px;">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
        </select>
    </div>

    <!-- Right Section -->
    <div class="col">
        <div class="d-flex justify-content-end align-items-center gap-2 flex-nowrap">

            <!-- Search -->
            <div class="input-group" style="width:200px;">
                <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">
            </div>


                    <button class="btn btn-secondary border"><i class="ti tabler-download"></i> Excel</button>

        </div>
    </div>

</div>
                <!--
                    <div class="d-flex justify-content-between mb-3">



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



                            <button class="btn btn-light border"><i class="ti tabler-upload"></i> Excel</button>

                        </div>

                    </div> -->



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

                            <th>ADVANCE AMOUNT</th>

                            <th>REMARK</th>

                            <th>STATUS</th>

                        </tr>

                    </thead>

                </table>

            </div>

        </div>




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

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

            <div class="modal-content rounded-4 text-center p-4 py-5">





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

                    @csrf





                    <input type="hidden" name="invest_id" id="accept_invest_id">



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

                        <h3 class="modal-title mb-2">Are you Sure !!</h3>

                        <p class="modal-subtitle mb-4">Are you Confirm to Accept ?</p>



                        <div class="d-flex justify-content-center gap-3 mt-4">

                            <button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal">

                                Cancel

                            </button>





                            <button type="submit" id="acceptSubmitBtn" class="btn btn-success w-100">

                                Yes, Sure

                            </button>

                        </div>

                    </div>



                </form>





            </div>

        </div>

    </div>

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

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

            <div class="modal-content p-4">



                <!-- FORM ADDED -->

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

                    @csrf



                    <input type="hidden" name="invest_id" id="reject_invest_id">



                    <div class="modal-body text-center">

                        <h3 class="modal-title">Are you Sure !!</h3>

                        <p class="modal-subtitle">Are you Confirm to Reject ?</p>



                        <div class="text-start mt-3">

                            <label class="form-label">Remark</label>

                            <textarea name="remark" id="reject_remark" class="form-control" rows="3" required
                                placeholder="Enter"></textarea>

                        </div>



                        <div class="d-flex justify-content-center gap-3 mt-4">

                            <button type="button" class="btn btn-outline-primary border px-5" data-bs-dismiss="modal">

                                Cancel

                            </button>



                            <!-- submit -->

                            <button type="submit" id="rejectSubmitBtn" class="btn btn-primary px-5">

                                Submit

                            </button>

                        </div>

                    </div>



                </form>

                <!-- FORM END -->



            </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 () {

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

                ajax: {
                    url: "{{ route('admin.investment_request_data') }}",
                    data: function (d) {
                        d.package = $('#packageFilter').val(); // send package filter
                    }
                },

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

                pageLength: 10,
                order: [[1, 'desc']]
            });

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

        });
    </script>

    <script>

        document.addEventListener("DOMContentLoaded", function () {



            // Pass ID to hidden input

            document.addEventListener('click', function (e) {

                if (e.target.closest('.btn-accept')) {

                    let id = e.target.closest('.btn-accept').getAttribute('data-id');

                    document.getElementById('accept_invest_id').value = id;

                }

            });



            // Disable button after submit

            let form = document.getElementById('acceptForm');



            if (form) {

                form.addEventListener('submit', function () {

                    let btn = document.getElementById('acceptSubmitBtn');

                    btn.disabled = true;

                    btn.innerText = "Processing...";

                });

            }



        });

    </script>

    <script>

        document.addEventListener('click', function (e) {



            if (e.target.closest('.btn-reject')) {

                let id = e.target.closest('.btn-reject').getAttribute('data-id');

                document.getElementById('reject_invest_id').value = id;

                document.getElementById('reject_remark').value = '';

            }



        });

    </script>

    <script>

        document.getElementById('rejectForm').addEventListener('submit', function () {



            let btn = document.getElementById('rejectSubmitBtn');

            btn.disabled = true;

            btn.innerText = "Processing...";



        });

    </script>

@endsection