@extends('admin.layout')

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

    <style>
        .table-no-border {
            border: none;
        }

        .table-no-border th,
        .table-no-border td {
            border: none;
        }

        .table-responsive .dataTables_wrapper .dataTables_length select {
            padding: 8px 48px 8px 16px !important;
        }

        .users {
            font-family: Inter, sans-serif;
            font-weight: 500;
            font-size: 12px;
            line-height: 18px;
            letter-spacing: 0;
            text-align: center;
            color: #6941C6;
            background-color: #F9F5FF;
            padding: 2px 8px;
            border-radius: 16px;
        }

        .table-subtext {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0px;
            color: #667085;
        }

        .badge-approve {
            background-color: #ECFDF3;
            color: #027A48;
            padding: 6px 12px;
            border-radius: 12px;
            font-weight: 600;
            display: inline-block;
            border: none;
        }

        .badge-reject {
            background-color: #FEF3F2;
            color: #B42318;
            padding: 6px 12px;
            border-radius: 12px;
            font-weight: 600;
            display: inline-block;
            border: none;
        }

        .redeem {
            font-family: Inter;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0%;
            color: #1CE033;

        }
    </style>


    <div class="container-fluid content-inner pb-0">
        {{-- <div class="page-header d-flex justify-content-between">
            <h2 class="page-title mb-0">Membership Approval</h2>
        </div> --}}
        <div class="page-header d-flex justify-content-between align-items-center">
            <h2 class="page-title mb-0">Membership Approval</h2>
            <a href="{{ route('membership_history') }}"
                class="btn text-primary bg-white px-3 py-2 d-flex align-items-center gap-1"><svg width="20" height="21"
                    viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M9.99984 2.16675C14.6023 2.16675 18.3332 5.89758 18.3332 10.5001C18.3332 15.1026 14.6023 18.8334 9.99984 18.8334C5.39734 18.8334 1.6665 15.1026 1.6665 10.5001C1.6665 5.89758 5.39734 2.16675 9.99984 2.16675ZM9.99984 3.83341C8.23173 3.83341 6.53603 4.53579 5.28579 5.78604C4.03555 7.03628 3.33317 8.73197 3.33317 10.5001C3.33317 12.2682 4.03555 13.9639 5.28579 15.2141C6.53603 16.4644 8.23173 17.1667 9.99984 17.1667C11.7679 17.1667 13.4636 16.4644 14.7139 15.2141C15.9641 13.9639 16.6665 12.2682 16.6665 10.5001C16.6665 8.73197 15.9641 7.03628 14.7139 5.78604C13.4636 4.53579 11.7679 3.83341 9.99984 3.83341ZM9.99984 5.50008C10.2039 5.50011 10.401 5.57504 10.5535 5.71068C10.706 5.84631 10.8035 6.03321 10.8273 6.23591L10.8332 6.33341V10.1551L13.089 12.4109C13.2385 12.5609 13.3252 12.7621 13.3317 12.9737C13.3382 13.1854 13.2638 13.3915 13.1238 13.5503C12.9838 13.7091 12.7885 13.8087 12.5778 13.8287C12.367 13.8488 12.1565 13.7879 11.989 13.6584L11.9107 13.5892L9.41067 11.0892C9.28115 10.9596 9.19797 10.7909 9.174 10.6092L9.1665 10.5001V6.33341C9.1665 6.1124 9.2543 5.90044 9.41058 5.74416C9.56686 5.58788 9.77882 5.50008 9.99984 5.50008Z"
                        fill="#1C91C8" />
                </svg>
                History</a>
        </div>


        <div class="row mt-3">
            <div class="col-lg-12">
                <div class="card p-3">
                    <h4 class="mb-3">New Membership Users: <span class="users">{{ $users->count() }} users</span></h4>

                    <div class="table-responsive mt-3">


                        <table class="table table-no-border" id="usermanagement">
                            <thead>
                                <tr>
                                    <th scope="col">S/no</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Amount</th>
                                    <th scope="col">Applied Date</th>
                                    <th scope="col">Transaction ID</th>
                                    <th scope="col">Screenshot</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            <div>{{ $user->name }}</div>
                                            <div class="table-subtext">{{ $user->user_id ?? 'N/A' }}</div>
                                        </td>
                                        <td>
                                            {{ $user->amount }} <br>
                                            @if ($user->coin_redeem)
                                                <span class="redeem">{{ $user->coin_redeem }} Coin redeem</span>
                                            @endif
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($user->applied_date)->format('d M Y') }}</td>
                                        <td>{{ $user->transaction_id ?? 'N/A' }}</td>
                                        <td><a href="{{ asset($user->payment_image) }}" target="_blank">View Screenshot</a>
                                            {{-- <img src="{{ asset($user->payment_image) }}" alt="Payment Screenshot" width="100"> --}}
                                        </td>
                                        <td>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#AcceptModal"
                                                data-user-id="{{ $user->id }}" onclick="setAcceptId(this)">
                                                <span class="badge-approve b-0 px-3 py-2">
                                                    <img src="{{ asset('/assets') }}/images/tick.svg" alt="Approve"
                                                        width="14"> Approve
                                                </span>
                                            </a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#DeclineModal"
                                                data-user-id="{{ $user->id }}" onclick="setRejectId(this)">
                                                <span class="badge-reject b-0 px-3 py-2">
                                                    <img src="{{ asset('/assets') }}/images/reject.svg" alt="Reject"
                                                        width="14"> Reject
                                                </span>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

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

        <!-- Accept Modal -->
        <div class="modal fade zoom-in" id="AcceptModal" tabindex="-1" aria-labelledby="AcceptModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="text-center">
                            <img class="mb-3" style="height: 75px;" src="{{ asset('/assets/images/gif/accept.png') }}">
                            <p class="my-4 are-you-sure">Are You Sure</p>
                            <p class="text-muted my-2 are-you-sure-subtext">Are you sure you want to accept this order?</p>
                        </div>
                        <form action="{{ route('approve_membership') }}" method="POST" id="AcceptForm">
                            @csrf
                            <input type="hidden" id="accept_id" name="accept_id">
                            <div class="d-flex align-items-center mt-5 mb-3">
                                <button type="button" data-bs-dismiss="modal"
                                    class="btn btn-light cancel-btn me-3">Cancel</button>
                                <button type="button" class="btn btn-primary yes-btn" id="submitButton"
                                    onclick="AcceptButton(this)"><i class="fa-regular fa-circle-check me-2 "></i>Yes, Accept
                                    It!</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Decline Modal -->
        <div class="modal fade zoom-in" id="DeclineModal" tabindex="-1" aria-labelledby="DeclineModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="text-center">
                            <img class="mb-3" style="height:75px;" src="{{ asset('/assets/images/gif/reject.png') }}">
                            <p class="my-4 are-you-sure">Are You Sure</p>
                            <p class="text-muted my-2 are-you-sure-subtext">Are you sure you want to decline this order?</p>
                        </div>
                        <form action="{{ route('reject_membership') }}" method="POST" id="RejectForm">
                            @csrf
                            <input type="hidden" id="reject_id" name="reject_id">
                            <div class="d-flex align-items-center mt-5 mb-3">
                                <button type="button" data-bs-dismiss="modal"
                                    class="btn btn-light cancel-btn me-3">Cancel</button>
                                <button type="button" class="btn btn-primary yes-btn" id="submitButton"
                                    onclick="RejectButton(this)"><i class="fa-regular fa-circle-check me-2"></i>Yes,
                                    Decline It!</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

<!-- DataTable JS -->
<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 src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function() {
        $('#usermanagement').DataTable();
    });
</script>
<!-- Pagination -->
<div class="d-flex justify-content-between mt-3">
    {{ $users->links() }}
</div>

<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>
    function RejectButton(button) {
        button.disabled  = true;
        button.innerText = 'Processing...';
        document.getElementById('RejectForm').submit();
    }
</script>

<script>
    function AcceptButton(button) {
        button.disabled  = true;
        button.innerText = 'Processing...';
        document.getElementById('AcceptForm').submit();
    }
</script>