@extends('layouts.app')
@section('content')
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            @include('layouts.flesh-message')
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">All User's New Email Changed List</h3>
                </div>
                <div class="box-body">
                    <div class="table_con">
                        <table id="emailChangeTable" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>@sortablelink('id', 'User ID')</th>
                                    <th>@sortablelink('old_email', 'Old Email')</th>
                                    <th>@sortablelink('new_email', 'New Email')</th>
                                    <th>@sortablelink('status', 'Status')</th>
                                    <th style="color:#3c8dbc;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($email_change as $user)
                                <tr>
                                    <td><a href="{{ url('/edituser/' . $user->user_id) }}" target="_blank">{{ $user->user_id }}</a></td>
                                    <td>{{ $user->old_email }}</td>
                                    <td>{{ $user->new_email }}</td>
                                    <td>{{ $user->status }}</td>
                                    <td style="width: 17%;">
                                        @if($user->status === 'pending')
                                        <!-- Approve Form -->
                                        <form id="approve-form-{{ $user->user_id }}" action="{{ url('/email-change-action/' . $user->user_id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <input type="hidden" name="action" value="approved">
                                            <button type="button" class="btn btn-success" onclick="confirmEmailChange('{{ $user->user_id }}','approved')">
                                                <i class="fa fa-check"></i> Approve
                                            </button>
                                        </form>

                                        <!-- Reject Form -->
                                        <form id="reject-form-{{ $user->user_id }}" action="{{ url('/email-change-action/' . $user->user_id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <input type="hidden" name="action" value="rejected">
                                            <button type="button" class="btn btn-danger" onclick="confirmEmailChange('{{ $user->user_id }}','rejected')">
                                                <i class="fa fa-times"></i> Reject
                                            </button>
                                        </form>

                                        @else
                                        <span class="badge badge-info">{{ $user->status }}</span>
                                        @endif
                                    </td>

                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- DataTables Initialization -->
<script>
    $(document).ready(function() {
        $('#emailChangeTable').DataTable({
            "paging": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
    });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    // function handleEmailChange(button, action) {
    //     const userId = $(button).data('user-id');
    //     const url = action === 'approve' ?
    //         `/approve-email-change/${userId}` :
    //         `/reject-email-change/${userId}`;

    //     $.ajax({
    //         url: url,
    //         method: 'POST', // Changed from GET to POST
    //         data: {
    //             _token: '{{ csrf_token() }}',
    //             action: action
    //         },
    //         success: function(response) {
    //             if (response.success) {
    //                 alert(response.message);
    //                 location.reload(); // Refresh the page
    //             } else {
    //                 alert('Error: ' + response.message);
    //             }
    //         },
    //         error: function(xhr) {
    //             alert('An error occurred. Please try again.');
    //         }
    //     });
    // }
    function confirmEmailChange(userId, action) {
        var title = (action === 'approved') ? 'Approve Request?' : 'Reject Request?';
        var text = (action === 'approved') ? 'Are you sure you want to approve this request?' : 'Are you sure you want to reject this request?';
        var confirmText = (action === 'approved') ? 'Yes, Approve' : 'Yes, Reject';

        swal({
            title: title,
            text: text,
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: (action === 'approved') ? "btn-success" : "btn-danger",
            confirmButtonText: confirmText,
            cancelButtonClass: "btn-default",
            cancelButtonText: "Cancel",
            closeOnConfirm: true,
            closeOnCancel: true
        },
        function(isConfirm) {
            if (isConfirm) {
                if (action === 'approved') {
                    $('#approve-form-' + userId).submit();
                } else {
                    $('#reject-form-' + userId).submit();
                }
            }
        });
    }
</script>




@endsection