@extends('admin.layouts.masterlayout')

@section('title')
    User Management
@endsection

@section('head_title')
    User Management
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="manage-offers-flex">
            <h2>User List </h2>
            <div class="admin-tab-container">
                <ul class="nav nav-pills">
                </ul>
            </div>
            <div class="d-flex gap-3 align-items-center manage-search-container manage-search-container-artist">
                <div class="d-flex align-items-center gap-2 w-100  select-down">
                    <label for="Filter" class="mb-0 filter-label">Filter</label>
                    <div class="position-relative w-100  select-down ">
                        <select class="form-control select-menu" id="status_filter" name="status_filter">
                            <option value="all">All</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                            <option value="suspended">Suspended</option>
                            <option value="banned">Banned</option>
                        </select>
                        <div class="search-icon">
                            <img src="{{ asset('assets') }}/img/Filter.png" alt="">
                        </div>
                        <div class="down-icon">
                            <img src="{{ asset('assets') }}/img/arrow-down.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="position-relative w-100">
                    <input type="search" class="form-control" placeholder="Search User">
                    <div class="search-icon">
                        <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                    </div>
                </div>
                @if (authAdminUser()->can('user_management.create'))
                    <a href="{{ route('admin.user-management.create') }}" class="ct-btn text-center add-ct-btn"
                        title="Add User">Add
                        User
                    </a>
                @endif
            </div>
        </div>
        <div class="tab-content">
            <div class="" id="artist_data">
                <div class="ct-dashboard-table-container">
                    <div class="card p-2">
                        <div class="table-responsive">
                            <table class="table mb-0" id="userManagementTBL">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>User Name</th>
                                        <th>Email</th>
                                        <th>Phone Number</th>
                                        <th>Joined Date</th>
                                        <th>Total Bookings</th>
                                        <th>No Show</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal reset-modal reset-password-modal" id="resetPasswordModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <div><img src="{{ asset('assets') }}/img/reset-pwd-icon.png" alt="Reset Password Icon"></div>
                    <h2>Are you sure you want to reset the password?</h2>
                    <p>
                        A password reset email will be sent to
                        <b class="reset-user-email">example@email.com</b>.
                    </p>
                </div>
                <div class="text-center">
                    <div class="d-flex gap-3 submit-container justify-content-center mt-0">
                        <button type="button" class="ct-outline-btn" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="ct-btn reset-password-btn" data-reset-password-user-id="0">
                           <span>Send Email</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/js/dataTables.js') }}"></script>
    <script>
        $(document).ready(function() {

            function datTableReload(full_reload = 0) {
                if (full_reload == 0) {
                    userTBL.ajax.reload();
                } else {
                    userTBL.ajax.reload(null, false);
                }
            }

            $('.manage-search-container input[type="search"]').on('input', function() {
                var searchText = $(this).val(); // <-- get the value from input
                userTBL.search(searchText).draw(); // use it for DataTable search
            });

            $('#status_filter').on('change', function() {
                userTBL.ajax.reload();
            });

            $(document).on('click', '.delete-user', function() {
                var user_id = $(this).attr("data-id");
                $(".tattoo-delete-btn").attr('data-deleted-id', user_id);
                $('.tattoo-delete-modal').modal('show');
            });

            $(document).on('click', '.tattoo-delete-btn', function() {
                var user_id = $(this).attr("data-deleted-id");
                var url = "{{ route('admin.user-management.destroy', ['_id_']) }}".replace('_id_', user_id);

                if (user_id != "" || user_id != 0) {
                    $('.tattoo-delete-btn').attr('disabled');
                    $('.tattoo-delete-btn').addClass('loader-active');
                    $.ajax({
                        type: 'DELETE',
                        url: url,
                        success: function(response) {
                            $('.tattoo-delete-modal').modal('hide');
                            $('.tattoo-delete-btn').removeAttr('disabled');
                            $('.tattoo-delete-btn').removeClass('loader-active');
                            datTableReload(1);
                            if (response.status == true) {
                                custom_message('success', response.message);
                            } else {
                                custom_message('error', response.message);
                            }
                        }
                    });
                } else {
                    custom_message('error', "User not found");
                }
            });

            $(document).on('change', '.table-select-menu', function() {
                var status = $(this).val();
                var user_id = $(this).data("user-id");

                // Construct URL dynamically using route template
                var url = "{{ route('admin.user-management.update-status', ['_id_']) }}".replace('_id_', user_id);

                    $('.table-select-menu').prop('disabled', true);
                    setTimeout(function() {
                        $('.table-select-menu').prop('disabled', false);
                    }, 5000); // 5000ms = 5 seconds

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        status: status,
                        id: user_id
                    },
                    success: function(response) {
                        if (response.status == true) {
                            // Update the select's class based on status
                            $('.table-select-menu[data-user-id="' + user_id + '"]')
                                .removeClass('active inactive suspended banned')
                                .addClass(status);

                            custom_message('success', response.message);
                        } else {
                            custom_message('error', response.message);
                        }
                    },
                    error: function() {
                        custom_message('error',
                            'Something went wrong while updating the status.');
                    }
                });
            });

            // Trigger modal and pass user ID to the Send Email button
            $(document).on('click', '.reset-password', function() {
                var userId = $(this).data('id');
                var userEmail = $(this).data('email');

                $(".reset-password-btn").attr('data-reset-password-user-id', userId);
                $(".reset-user-email").text(userEmail); // Update the email text in the modal
                $('#resetPasswordModal').modal('show');
            });

            // Handle Reset Password AJAX Call
            $(document).on('click', '.reset-password-btn', function() {
                var userId = $(this).data('reset-password-user-id');

                if (!userId) {
                    custom_message('error', "User not found.");
                    return;
                }

                var resetPasswordUrl = "{{ route('admin.user-management.send-reset-password', ['_id_']) }}"
                    .replace('_id_', userId);

                $('.reset-password-btn').attr('disabled', true).addClass('loader-active');

                $.ajax({
                    type: 'POST',
                    url: resetPasswordUrl,
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#resetPasswordModal').modal('hide');
                        $('.reset-password-btn').removeAttr('disabled').removeClass(
                            'loader-active');
                        datTableReload(1);

                        if (response.status == true) {
                            custom_message('success', response.message);
                        } else {
                            custom_message('error', response.message);
                        }
                    },
                    error: function() {
                        $('#resetPasswordModal').modal('hide');
                        $('.reset-password-btn').removeAttr('disabled').removeClass(
                            'loader-active');
                        custom_message('error',
                            'An error occurred while sending the reset email.');
                    }
                });
            });

            // === DATA TABLE ===
            var userTBL = $('#userManagementTBL').DataTable({
                dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.user-management.index') }}',
                    data: function(d) {
                        d.status_filter = $('#status_filter').val();
                    }
                },
                order: [],
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'phone',
                        name: 'phone'
                    },
                    {
                        data: 'joining_date',
                        name: 'joining_date',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total_bookings',
                        name: 'total_bookings',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'no_show',
                        name: 'no_show',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });
    </script>
@endsection