@extends('admin.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <div class="row mb-3">
        <div class="row align-items-center justify-content-between">
            <div class="col-8 col-md-6 d-flex flex-start">
                <h4 class="page-top-heading text-center text-md-start">Bank Request</h4>
            </div>
            <div class="col-3 col-md-6 d-flex justify-content-center justify-content-md-end  mt-md-0">
                <a href="{{ route('admin.bank_request_history') }}" class="btn btn-primary">History</a>
            </div>
        </div>
        

        <div class="container my-4">
            <!-- Filter Section -->
          
            <form action="{{ route('bank_request_search') }}" method="POST" enctype="multipart/form-data">
                @csrf
    
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                <div class="d-flex gap-2 flex-wrap">
                    <div class="flex-grow-1">
                        <input type="date" class="form-control" name="from_date" placeholder="From Date" required>
                    </div>
                    <div class="flex-grow-1">
                        <input type="date" class="form-control" name="to_date" placeholder="To Date" required>
                    </div>
                  
            </div>
                <div class="d-flex gap-2 mt-2 mt-md-0">
                    <button type="submit" class="btn btn-primary">Search</button>
                    <a href="{{ route('admin.bank_request') }}" class="btn btn-secondary">Reset</a>
                 </div>
            </div>
            </form>
            <!-- Table Card -->
            <div class="card p-3">
                <div class="table-responsive">
                    <table id="bankRequestTable" class="table table-hover table-borderless">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Date</th>
                                <th>User ID</th>
                                <th>User Name</th>
                                <th>Bank</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        @php
                            $sn = 1;
                        @endphp
                        <tbody>
                            @foreach ($datatables as $data)
                                @php
                                    $userdetails = DB::table('users')
                                        ->where('user_id', $data->user_id)
                                        ->first();
                                @endphp
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $data->created_at }}</td>
                                    <td>{{ $data->user_id }}</td>
                                    <td>{{ $userdetails->name }}</td>
                                    <td>
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#viewBankDetails1"
                                            data-acc_holder_name="{{ $data->acc_holder_name }}"
                                            data-bank_name="{{ $data->bank_name }}" data-acc_no="{{ $data->acc_no }}"
                                            data-ifsc="{{ $data->ifsc }}" data-branch_name="{{ $data->branch_name }}">
                                            View
                                        </a>
                                    </td>
                                    <td>

                                        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#acceptModal"
                                            data-user-id="{{ $data->id }}" onclick="setAcceptId(this)">Accept</button>

                                        <button class="btn btn-danger ms-3" data-bs-toggle="modal"
                                            data-bs-target="#rejectModal" data-user-id="{{ $data->id }}"
                                            onclick="setRejectId(this)">Reject</button>
                                            
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- View Bank Details Modal -->
    <div class="modal fade" id="viewBankDetails1" tabindex="-1" aria-labelledby="viewBankDetailsLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewBankDetailsLabel">Bank Account Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p><strong>Account Holder Name:</strong> <span id="modalAccHolderName">John Thomas</span></p>
                    <p><strong>Bank Name:</strong> <span id="modalBankName">XYZ Bank</span></p>
                    <p><strong>Account Number:</strong> <span id="modalAccNo">1234567890</span></p>
                    <p><strong>IFSC Code:</strong> <span id="modalIfsc">XYZ123456</span></p>
                    <p><strong>Branch Name:</strong> <span id="modalBranchName">Main Branch</span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Accept Modal -->
    <div class="modal fade" id="acceptModal" tabindex="-1" aria-labelledby="acceptModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="acceptModalLabel">Accept Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>Do you want to accept the bank request?</p>
                </div>
                <form action="{{ route('accept_bank') }}" method="POST">
                    @csrf
                    <input type="hidden" id="accept_id" name="accept_id">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                        <button type="submit" class="btn btn-success">Yes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Reject Modal -->
    <div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rejectModalLabel">Reject Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>Do you want to reject the bank request?</p>
                </div>
                <form action="{{ route('reject_bank') }}" method="POST">
                    @csrf
                    <input type="hidden" id="reject_id" name="reject_id">
                    <input type="hidden" id="reject_id"  value="Request Rejected" name="remark">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                        <button type="submit" class="btn btn-danger">Yes</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.4/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#bankRequestTable').DataTable();
        });
    </script>
    <script>
        function setAcceptId(button) {
            var acceptId = button.getAttribute('data-user-id');
            document.getElementById('accept_id').value = acceptId;
        }
    </script>
    <script>
        function setRejectId(button) {
            var rejectId = button.getAttribute('data-user-id');
            document.getElementById('reject_id').value = rejectId;
        }
    </script>
    <script>
        // Listen for when the modal is about to be shown
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('viewBankDetails1');
            modal.addEventListener('show.bs.modal', function(event) {
                // Get the triggering anchor tag
                const triggerElement = event.relatedTarget;

                // Get data attributes from the clicked element
                const accHolderName = triggerElement.getAttribute('data-acc_holder_name');
                const bankName = triggerElement.getAttribute('data-bank_name');
                const accNo = triggerElement.getAttribute('data-acc_no');
                const ifsc = triggerElement.getAttribute('data-ifsc');
                const branchName = triggerElement.getAttribute('data-branch_name');

                // Update modal content
                modal.querySelector('#modalAccHolderName').textContent = accHolderName;
                modal.querySelector('#modalBankName').textContent = bankName;
                modal.querySelector('#modalAccNo').textContent = accNo;
                modal.querySelector('#modalIfsc').textContent = ifsc;
                modal.querySelector('#modalBranchName').textContent = branchName;
            });
        });
    </script>
@endsection