@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;
        }
        .table-subtext {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #667085;
}
        .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;
        }
        
        .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;
        }
        </style>

    <div class="container-fluid content-inner pb-0">
        <div class="page-header d-flex justify-content-between">
            <h2 class="page-title mb-0">User Approval</h2>
        </div>

        <div class="row mt-3">
            <div class="col-lg-12">
                <div class="card p-3">
                    <h4 class="mb-3">Total Users: <span class="users">{{ $users->count() }} users</span></h4>
    
                    <!-- User Management Table -->
                    <div class="table-responsive mt-3">
                        <table class="table table-no-border" id="usermanagement">
                            <thead>
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Join&nbsp;Date&nbsp;&&nbsp;Referral</th>
                                    <th scope="col">Email&nbsp;Address</th>
                                    <th scope="col">Phone&nbsp;Number</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><div>{{ $user->referral_id ?? 'N/A' }}</div>
                                            <div class="table-subtext">{{ $user->created_at ?? 'N/A' }}</div>
                                        </td>
                                        <td>{{ $user->email ?? 'N/A' }}</td>
                                        <td>{{ $user->phone_number ?? 'N/A' }}</td>

                                        <td>
                                       <div class="d-flex justify-content-center">
                                               <a href="#"data-bs-toggle="modal"
                                               data-bs-target="#statusModal{{ $user->id }}Accept"><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="#statusModal{{ $user->id }}Reject"> <span class="badge-reject b-0 px-3 py-2">
                                                <img src="{{ asset('/assets') }}/images/reject.svg" alt="Reject" width="14"> Reject
                                            </span></a>
                                        </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- Status Confirmation Modals -->
                        @foreach ($users as $user)
                            <!-- Accept Modal -->
                            <div class="modal fade" id="statusModal{{ $user->id }}Accept" tabindex="-1"
                                aria-labelledby="statusModalLabel{{ $user->id }}Accept" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="statusModalLabel{{ $user->id }}Accept">
                                                Confirm Accept Action
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            Are you sure you want to accept <strong>{{ $user->name }}</strong>?
                                        </div>
                                        <div class="modal-footer">
                                            <form action="{{ route('user_status_update') }}"
                                                method="POST">
                                                @csrf
                                                <input type="text" name="id" value="{{ $user->id }}">
                                                <input type="text" name="status" value="accepted">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Confirm</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                            <!-- Reject Modal -->
                            <div class="modal fade" id="statusModal{{ $user->id }}Reject" tabindex="-1"
                                aria-labelledby="statusModalLabel{{ $user->id }}Reject" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="statusModalLabel{{ $user->id }}Reject">
                                                Confirm Reject Action
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            Are you sure you want to reject <strong>{{ $user->name }}</strong>?
                                        </div>
                                        <div class="modal-footer">
                                            <form action="{{ route('user_status_update') }}"
                                                method="POST">
                                                @csrf
                                                <input type="text" name="id" value="{{ $user->id }}">
                                                <input type="text" name="status" value="rejected">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Confirm</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        
                            </tbody>
                        </table>

                    </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>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var statusModals = document.querySelectorAll('[id^="statusModal"]');
        statusModals.forEach(function(modal) {
            modal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                var status = button.getAttribute('data-status');
                var userId = modal.getAttribute('id').replace('statusModal', '');
                var actionText = status === 'accepted' ? 'accept' : 'reject';
                document.getElementById('actionText' + userId).textContent = actionText;
                document.getElementById('statusInput' + userId).value = status;
            });
        });
    });
</script>