@extends('admin.layout.main')

@section('content')
    @push('meta')
        <meta name="csrf-token" content="{{ csrf_token() }}">
    @endpush

    @push('styles')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    @endpush

    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Settings</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Users</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="addUser">Add User</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Start Contentbar -->
    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title">Users Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="users_table" class="table-bordered category-table display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Role</th>
                                        <th>Created at</th>
                                        <th>Updated at</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add user Modal -->
    <div class="modal fade" id="createUserModal" tabindex="-1" role="dialog" aria-labelledby="createUserModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createUserModalLabel">Add User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createUserForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="course-name">Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="course-name">Email</label>
                            <input type="email" class="form-control" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="course-name">Password</label>
                            <input type="password" class="form-control" name="password" required>
                        </div>
                        <div class="form-group">
                            <label for="course-name">Role</label>
                            <select name="role_id" class="form-control">
                                @foreach ($roles as $role)
                                    <option value="{{ $role['id'] }}">{{ $role['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add User</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="updateUserModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateUserModalLabel">Update User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateUserForm">
                    <div class="modal-body">
                        <input type="hidden" id="user_id" name="user_id">
                        <div class="form-group">
                            <label for="course-name">Name</label>
                            <input type="text" class="form-control" name="name" id="name_update" required>
                        </div>
                        <div class="form-group">
                            <label for="course-name">Email</label>
                            <input type="email" class="form-control" name="email" id="email_update" required>
                        </div>
                        <div class="form-group">
                            <label for="course-name">Password</label>
                            <input type="password" class="form-control" name="password" required>
                        </div>
                        <div class="form-group">
                            <label for="course-name">Role</label>
                            <select name="role_id" class="form-control">
                                @foreach ($roles as $role)
                                    <option value="{{ $role['id'] }}">{{ $role['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    @push('scripts')
        <script>
            $(document).ready(function() {
                var table = $('#users_table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('user_list') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'role_name',
                            name: 'role_name'
                        },
                        {
                            data: 'created_at',
                            name: 'created_at',
                            render: function(data, type, row) {
                                return new Date(data).toLocaleDateString();
                            }
                        },
                        {
                            data: 'updated_at',
                            name: 'updated_at',
                            render: function(data, type, row) {
                                return new Date(data).toLocaleDateString();
                            }
                        },
                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                        <button type="button" class="btn btn-round btn-secondary" data-id="${row.id}" id="editUser"><i class="feather icon-edit"></i></button>
                        <button type="button" class="btn btn-round btn-danger" data-id="${row.id}" id="deleteUser"><i class="feather icon-trash-2"></i></button>
                    `;
                            }
                        }
                    ]
                });

                $('#addUser').on('click', function() {
                    $('#createUserModal').modal('show');
                });

                $('#createUserForm').on('submit', function(e) {
                    e.preventDefault();

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_user_form') }}",
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#createUserModal').modal('hide');
                                $('#users_table').DataTable().ajax.reload();
                                Swal.fire('Added!', 'The User has been added.', 'success');
                                $('#createUserForm')[0].reset();
                            } else {
                                // Handle API-specific errors
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            let errorMsg = 'Something went wrong.';

                            // Handle validation errors from the Laravel application
                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.message;
                                if (typeof errors === 'object') {
                                    errorMsg = '';
                                    for (let key in errors) {
                                        errorMsg += errors[key].join('<br>');
                                    }
                                } else {
                                    errorMsg = 'Validation failed.';
                                }
                            } else if (xhr.status === 500) {
                                // Handle server errors
                                errorMsg = 'Email should be unique: ' + xhr.responseJSON.message;
                            } else {
                                // Handle other HTTP errors
                                errorMsg = xhr.responseJSON.message || errorMsg;
                            }

                            Swal.fire('Error!', errorMsg, 'error');
                        }
                    });
                });


                $('body').on('click', '#deleteUser', function() {
                    var id = $(this).data('id');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        // Use 'warning' for better visibility
                        showCancelButton: true,

                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',

                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                type: "DELETE",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url: "{{ route('delete_user', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The User has been deleted.', 'success');
                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'An error occurred.', 'error');
                                }
                            });
                        }
                    });
                });

                $('body').on('click', '#editUser', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_user', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#updateUserModal').modal('hide');
                            } else {
                                var user = response.user;
                                $('#user_id').val(user.data.id);
                                $('#name_update').val(user.data.name);
                                $('#email_update').val(user.data.email);
                                $('#updateUserModal').modal('show');
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });
                $('#updateUserForm').on('submit', function(e) {
                    e.preventDefault();
                    var id = $('#user_id').val(); // Ensure this is set correctly

                    $.ajax({
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('update_user_form', ['id' => ':id']) }}".replace(':id', id),
                        data: $(this).serialize(),
                        success: function(response) {
                            $('#updateUserModal').modal('hide');
                            $('#users_table').DataTable().ajax
                        .reload(); // Make sure `table` is defined correctly
                            Swal.fire('Updated!', 'The User has been updated.', 'success');
                            $('#updateUserForm')[0].reset();
                        },
                        error: function(xhr) {
                            let errorMsg = 'Something went wrong.';

                            // Handle validation errors from the API
                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.message;
                                if (typeof errors === 'object') {
                                    errorMsg = '';
                                    for (let key in errors) {
                                        errorMsg += errors[key].join('<br>');
                                    }
                                } else {
                                    errorMsg = 'Validation failed.';
                                }
                            } else if (xhr.status === 500) {
                                // Handle server errors
                                errorMsg = 'Email should be unique: ' + xhr.responseJSON.message;
                            } else {
                                // Handle other HTTP errors
                                errorMsg = xhr.responseJSON.message || errorMsg;
                            }

                            Swal.fire('Error!', errorMsg, 'error');
                            console.log(xhr.responseText); // Log the full response for debugging
                        }
                    });
                });

            });
        </script>
    @endpush
@endsection