@extends('layout.app')
@section('title', 'Users | Waiting Room')

@section('content')
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{{ __('translations.Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.Users') }}</a></li>
        </ol>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">{{ __('translations.Users') }}</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="usersTable" class="display">
                            <thead>
                            <tr>
                                <th>{{ __('translations.No.') }}</th>
                                <th>{{ __('translations.Name') }}</th>
                                <th>{{ __('translations.Email') }}</th>
                                <th>{{ __('translations.About') }}</th>
                                <th>{{ __('translations.Status') }}</th>
                                <th>{{ __('translations.Action') }}</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Edit Service') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="editServiceForm">
                    @csrf
                    <input type="hidden" name="service_id" id="editServiceId">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 mt-2">
                                <label for="name">{{ __('translations.Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control" required>
                            </div>
                            <div class="col-md-12 mt-2">
                                <label for="phone">{{ __('translations.Phone') }}</label>
                                <input type="text" name="phone" id="phone" class="form-control" required>
                            </div>
                            <div class="col-md-12 mt-2">
                                <label for="country_code">{{ __('translations.Country Code') }}</label>
                                <input type="text" name="country_code" onkeypress="return isNumberKey(event)"
                                    id="country_code" class="form-control" required>
                            </div>
                            <input type="hidden" name="user_id" id="user_id" value="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitEditForm" type="submit" class="btn btn-primary">{{ __('translations.Submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Delete User') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="deleteUser">
                    @csrf
                    <input type="hidden" name="id" id="deleteUserId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to delete this record?') }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitDelForm" type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        // Data Table
        $(document).ready(function() {
            let table = $('#usersTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('get.users') }}",
                    "type": "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                    }
                },
                'columns': [{
                        data: 'id',
                        orderable: false
                    },
                    {
                        data: 'name',
                        orderable: false
                    },
                    {
                        data: 'email',
                        orderable: false
                    },
                    {
                        data: 'about',
                        orderable: false
                    },
                    {
                        data: 'status',
                        orderable: false
                    },
                    {
                        data: 'action',
                        orderable: false
                    },
                ],
                language: {
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                }
            });

            // Handle status toggle
            $('#usersTable').on('change', '.status-toggle', function() {
                let userId = $(this).data('user-id');
                let status = this.checked ? 1 : 0;

                $.ajax({
                    url: "{{ route('barber.status') }}",
                    method: 'POST',
                    data: {
                        id: userId,
                        status: status,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // if (response.success) {
                        //     alert('Status updated successfully');
                        // } else {
                        //     alert('Failed to update status');
                        //     this.checked = !status; // Revert the checkbox state
                        // }
                        if (response.success === true) {
                            notyf.success({
                                message: response.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);

                        } else {
                            notyf.error({
                                message: response.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while updating the status.');
                        this.checked = !status; // Revert the checkbox state
                    }.bind(this)
                });
            });
        });

        function editRecord(id) {
            $.ajax({
                type: "GET",
                url: "{{ route('barber.detail') }}",
                dataType: 'json',
                data: {
                    id: id
                },
                success: function(res) {
                    if (res.success === true) {
                        $('#editServiceId').val(res.data.id);
                        $('#name').val(res.data.name);
                        $('#phone').val(res.data.phone);
                        $('#country_code').val(res.data.country_code);
                        $('#user_id').val(res.data.id);
                        $('#editModal').modal('show');
                    } else {
                        console.log(res.message);
                    }
                },
                error: function(e) {
                    console.log("Error:", e);
                }
            });
        }

        $(document).ready(function() {
            $("#editServiceForm").on('submit', function(e) {
                e.preventDefault();
                const btn = $("#submitEditForm");
                const modal = $('#editModal');
                let formData = new FormData($("#editServiceForm")[0]);

                $.ajax({
                    type: "POST",
                    url: "{{ route('barber.update') }}",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    cache: false,
                    data: formData,
                    beforeSend: function() {
                        btn.prop('disabled', true);
                        btn.html(
                            '<div class="spinner-border" role="status" style="height: 14px;width: 14px;"> <span class="visually-hidden">Loading...</span> </div>'
                        );
                        $('.error-message').html('');
                    },
                    success: function(res) {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        if (res.success === true) {
                            modal.modal('hide');
                            notyf.success({
                                message: res.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);
                        } else {
                            notyf.error({
                                message: res.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(e) {
                        btn.prop('disabled', false);
                        btn.html('Submit');
                        let errors = e.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#' + key).after('<span class="text-danger">' + value[0] +
                                '</span>');
                        });
                    }
                });
            });
        });

        // Delete
        function deleteRecord(id) {
            $('#deleteUserId').val(id);
        }

        $("#deleteUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteModal');
            let formData = new FormData($("#deleteUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('barber.delete') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    if (res.success === true) {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    } else {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Delete');
                }
            });
        });
    </script>
@endsection