@extends('user.layouts')

@section('title', 'Withdraw Request')

@section('header')

    <!-- DataTable CSS -->
    <link rel="stylesheet" type="text/css"
        href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

    <link rel="stylesheet" type="text/css"
        href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">

    <link rel="stylesheet" type="text/css"
        href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

@endsection

@section('content')

<div class="container-fluid page-wrapper">

    <div class="row">
        <div class="">
            <h3 class="page-top-heading">Withdraw Request</h3>
        </div>
    </div>

    <!-- Table Row -->
    <div class="row mt-4">
        <div class="col-lg-12">

            <div class="card datatable-card">

                <div class="card-body">

                    <table id="data-table" class="table nowrap align-middle" style="width:100%">

                        <thead>
                            <tr>
                                <th>SN</th>
                                <th>DATE</th>
                                <th>AGENT ID</th>
                                <th>NAME</th>
                                <th>PHONE NO</th>
                                <th>AC.HOLDER</th>
                                <th>AC.NO</th>
                                <th>IFSC</th>
                                <th>BANK NAME</th>
                                <th>BRANCH NAME</th>
                                <th>AMOUNT</th>
                                <th>TDS%</th>
                                <th>PAYABLE AMOUNT</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>

                        <tbody>

                            @foreach ($withdraw_request as $withdraw)

                                <tr>

                                    <td>{{ $loop->iteration }}</td>

                                    <td>{{ $withdraw->created_at->format('Y-m-d') }}</td>

                                    <td>{{ $user_data[$withdraw->id]->agent_code }}</td>

                                    <td>{{ $user_data[$withdraw->id]->name }}</td>

                                    <td>{{ $withdraw->phone_no }}</td>

                                    <td>{{ $withdraw->account_name }}</td>

                                    <td>{{ $withdraw->account_no }}</td>

                                    <td>{{ $withdraw->ifsc }}</td>

                                    <td>{{ $withdraw->bank_name }}</td>

                                    <td>{{ $withdraw->branch_name }}</td>


<td>{{ round($withdraw->amount) }}</td>
<td>{{ round($withdraw->tds) }}</td>
<td>{{ round($withdraw->payable_amount) }}</td>
                                    <td>

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

                                            <!-- Accept Button -->
                                            <button type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#AcceptModal"
                                                class="btn transparent-btn me-2"
                                                data-user-id="{{ $withdraw->id }}"
                                                onclick="setApproveId(this)">

                                                <i class="fa-solid fa-check tick-icon"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-placement="top"
                                                    data-bs-title="Accept">
                                                </i>

                                            </button>

                                            <!-- Reject Button -->
                                            <button type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#RejectModal"
                                                class="btn transparent-btn"
                                                data-user-id="{{ $withdraw->id }}"
                                                onclick="setDeclineId(this)">

                                                <i class="fa-solid fa-x x-icon"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-placement="top"
                                                    data-bs-title="Reject">
                                                </i>

                                            </button>

                                        </div>

                                    </td>

                                </tr>

                            @endforeach

                        </tbody>

                    </table>

                </div>

            </div>

        </div>
    </div>

</div>

<!-- ================= ACCEPT MODAL ================= -->

<div class="modal fade zoom-in"
    id="AcceptModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                <div class="row">

                    <div class="col-lg-12">

                        <div class="p-3">

                            <div class="text-center">

                                <img class="mb-3"
                                    src="{{ asset('/assets') }}/images/icons/check.svg">

                                <p class="my-4 are-you-sure">
                                    Are You Sure
                                </p>

                                <p class="text-muted my-2 are-you-sure-subtext">
                                    Are you sure want to Accept this?
                                </p>

                            </div>

                            <form action="{{ route('approve_withdraw') }}"
                                method="POST"
                                enctype="multipart/form-data"
                                id="acceptForm">

                                @csrf

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

                                <div class="mt-4 mb-3">

                                    <input type="text"
                                        name="remark"
                                        class="form-control"
                                        id="approve-remark"
                                        value="Your Request has been accepted">

                                </div>

                                <div class="d-flex align-items-center mt-4 mb-3">

                                    <button type="button"
                                        data-bs-dismiss="modal"
                                        class="btn btn-light cancel-btn me-3">

                                        Cancel

                                    </button>

                                    <button type="submit"
                                        class="btn btn-primary yes-btn">

                                        <i class="fa-regular fa-circle-check me-2"></i>

                                        Yes, Accept

                                    </button>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- ================= REJECT MODAL ================= -->

<div class="modal fade zoom-in"
    id="RejectModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title text-danger">
                    Reject Request
                </h5>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>

            </div>

            <div class="modal-body">

                <div class="row">

                    <div class="col-lg-12">

                        <div class="p-3">

                            <div class="text-center">

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

                            </div>

                            <form action="{{ route('decline_withdraw') }}"
                                method="POST"
                                enctype="multipart/form-data"
                                id="rejectForm">

                                @csrf

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

                                <div class="mt-4 mb-3">

                                    <input type="text"
                                        class="form-control"
                                        name="remark"
                                        id="remark"
                                        placeholder="Enter Remark"
                                        required>

                                </div>

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

                                    <button type="submit"
                                        class="btn btn-primary btn-red">

                                        <i class="fa-regular fa-circle-check me-2"></i>

                                        Reject

                                    </button>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection

@section('footer')

    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>

    <!-- Datatable JS -->
    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>

    <script type="text/javascript"
        src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>

    <script>

        // Set Approve ID
        function setApproveId(button) {

            let approveId = button.getAttribute('data-user-id');

            $('#approve_id').val(approveId);
        }

        // Set Decline ID
        function setDeclineId(button) {

            let declineId = button.getAttribute('data-user-id');

            $('#decline_id').val(declineId);
        }

        $(document).ready(function () {

            // Accept Form Submit
            $('#acceptForm').submit(function () {

                let submitBtn = $(this).find('button[type="submit"]');

                submitBtn.prop('disabled', true);

                submitBtn.html(`
                    <span class="spinner-border spinner-border-sm me-2"></span>
                    Submitting...
                `);

            });

            // Reject Form Submit
            $('#rejectForm').submit(function () {

                let submitBtn = $(this).find('button[type="submit"]');

                submitBtn.prop('disabled', true);

                submitBtn.html(`
                    <span class="spinner-border spinner-border-sm me-2"></span>
                    Submitting...
                `);

            });

        });

    </script>

@endsection