@extends('backend.layouts.app')
@section('content')
    <h4 class="py-3 mb-4">
        Users
    </h4>
    <!-- Content -->
    <div class="card">
        <div class="card-datatable table-responsive datatable-roles">
            @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create User'))
                <div class="text-end m-4">
                    <a href="javascript:;" class="btn btn-primary me-4 px-4" data-bs-target="#addUser" data-bs-toggle="modal"><i class="ri-add-line"></i> @lang('messages.users.add_user')</a>
                </div>
            @endif
            <table class="datatables-users table" id="dataTableUserList">
                <thead>
                    <tr>
                        <th>@lang('messages.users.sr_no')</th>
                        <th>@lang('messages.users.name')</th>
                        <th>@lang('messages.users.email')</th>
                        <th>@lang('messages.users.role')</th>
                        <th>@lang('messages.users.status')</th>
                        <th>@lang('messages.users.date')</th>
                        <th>@lang('messages.users.action')</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Table body content goes here -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="addUser" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-Add-user">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                    <div class="text-center mb-6">
                        <h4 class="mb-2">@lang('messages.users.add_user_info')</h4>
                        <p class="mb-6">@lang('messages.users.add_privacy_audit').</p>
                    </div>
                    <form id="addUserForm" action="{{ route('users.store') }}" class="row g-5" autocomplete="off" >
                        @csrf
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="first_name" name="first_name"
                                    class="form-control" placeholder="@lang('messages.users.first_name_placeholder')" />
                                <label for="first_name">@lang('messages.users.first_name')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="last_name" name="last_name"
                                    class="form-control" placeholder="@lang('messages.users.last_name_placeholder')" />
                                <label for="last_name">@lang('messages.users.last_name')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="username" name="username" class="form-control" placeholder="@lang('messages.users.username_placeholder')"/>
                                <label for="username">@lang('messages.users.username')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="email" name="email" class="form-control" placeholder="@lang('messages.users.email_placeholder')"/>
                                <label for="email">@lang('messages.users.email')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="skype_id" name="skype_id" class="form-control" placeholder="@lang('messages.users.skype_id_placeholder')"/>
                                <label for="skype_id">@lang('messages.users.skype_id')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="password" id="password" class="form-control" name="password" value=""  placeholder="*********" aria-describedby="password" autocomplete="new-password" />
                                <label for="password">@lang('messages.register.password')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="password" id="confirm_password" class="form-control" name="confirm_password" value="" placeholder="*********" aria-describedby="confirm_password" />
                                <label for="confirm_password"> @lang('messages.register.confirm_password')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <select id="country-select" name="www"
                                    class="form-select" >
                                    <option value="">@lang('messages.users.select_country')</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                                <label for="country-select">@lang('messages.users.country')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <select id="city-select" name="add_city"
                                    class="form-select" >
                                    <option value="" selected>@lang('messages.users.select_city')</option>
                                </select>
                                <label for="city-select">@lang('messages.users.city')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <select id="status" name="status" class="form-select"
                                    aria-label="Default select example">
                                    <option value="NACT" selected>@lang('messages.users.inactive')</option>
                                    <option value="ACTV">@lang('messages.users.active')</option>
                                    <option value="3">@lang('messages.users.suspended')</option>
                                </select>
                                <label for="status">@lang('messages.users.status')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="file" id="avatar" class="form-control" name="avatar" aria-describedby="avatar" />
                                <label for="avatar">@lang('messages.users.avatar')</label>
                            </div>
                        </div>

                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-3">@lang('messages.users.submit')</button>
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">@lang('messages.users.cancel')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-Add-user">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                    <div class="text-center mb-6">
                        <h4 class="mb-2">@lang('messages.users.update_user_info')</h4>
                        <p class="mb-6">@lang('messages.users.update_privacy_audit').</p>
                    </div>
                    <form id="editUserForm" action="{{ route('users.update',$id) }}" class="row g-5" autocomplete="off" >
                        @csrf
                        @method('PUT')
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="edit_first_name" name="first_name"
                                    class="form-control" placeholder="@lang('messages.users.first_name_placeholder')" />
                                <label for="edit_first_name">@lang('messages.users.first_name')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="edit_last_name" name="last_name"
                                    class="form-control" placeholder="@lang('messages.users.last_name_placeholder')" />
                                <label for="edit_last_name">@lang('messages.users.last_name')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="edit_username" name="username" class="form-control" placeholder="@lang('messages.users.username_placeholder')"/>
                                <label for="edit_username">@lang('messages.users.username')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="edit_email" name="email" class="form-control" placeholder="@lang('messages.users.email_placeholder')"/>
                                <label for="edit_email">@lang('messages.users.email')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="edit_skype_id" name="skype_id" class="form-control" placeholder="@lang('messages.users.skype_id_placeholder')"/>
                                <label for="edit_skype_id">@lang('messages.users.skype_id')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="password" id="password" class="form-control" name="password" value=""  placeholder="*********" aria-describedby="password" autocomplete="new-password" />
                                <label for="password">@lang('messages.register.password')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <input type="password" id="confirm_password" class="form-control" name="confirm_password" value="" placeholder="*********" aria-describedby="confirm_password" />
                                <label for="confirm_password"> @lang('messages.register.confirm_password')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <select id="edit_id_country" name="id_country"class="form-select" >
                                    <option value="">@lang('messages.users.select_country')</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                                <label for="edit_id_country">@lang('messages.users.country')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <select id="edit_id_city" name="id_city"
                                    class="form-select" >
                                    <option value="" selected>@lang('messages.users.select_city')</option>
                                </select>
                                <label for="edit_id_city">@lang('messages.users.city')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <select id="edit_role" name="role" class="form-select" >
                                    @foreach($roles as $role)
                                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                                <label for="role">@lang('messages.users.role')</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-floating form-floating-outline">
                                <select id="edit_status" value="{{ $status}}" name="status" class="form-select"
                                    aria-label="Default select example">
                                    <option value="Inactive" selected>@lang('messages.users.inactive')</option>
                                    <option value="Active">@lang('messages.users.active')</option>
                                    <option value="3">@lang('messages.users.suspended')</option>
                                </select>
                                <label for="edit_status">@lang('messages.users.status')</label>
                            </div>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-3">@lang('messages.users.submit')</button>
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">@lang('messages.users.cancel')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- / Content -->
@endsection

@section('footer_scripts')
    <script>
        $("body").on("click", ".edituser", function() {
            jQuery.ajax({
                url: $(this).data('href'),
                type: 'get',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status) {
                        $("#editUserForm").val(data.id);
                        $("#edit_first_name").val(data.first_name);
                        $("#edit_last_name").val(data.last_name);
                        $("#edit_username").val(data.username);
                        $("#edit_email").val(data.email);
                        $("#edit_skype_id").val(data.skype_id);
                        $("#edit_id_country").val(data.id_country);
                        setTimeout(() => {
                            $("#edit_id_country").trigger('change');
                        }, 1000);
                        setTimeout(() => {
                            $("#edit_id_city").val(data.id_city);
                        }, 2000);
                        $("#edit_role").val(data.role);
                        $("#edit_status").val(data.status);
                        $("#editUserForm").attr('action', data.route);
                        $("#editUserModal").modal('show');
                    }
                },
                error: function(xhr, status, error) {
                    var jsonResponse = JSON.parse(xhr.responseText);
                    var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                    if (locale == 'en') {
                        // English error messages
                        var errorMessage = "Validation failed";
                    } else if (locale == 'ro') {
                        // Romanian error messages
                        errorMessage = "Validarea a eșuat";
                    } else if (locale == 'ar') {
                        // Arabic error messages
                        errorMessage = "فشل التحقق من الصحة";
                    } else {
                        // Default to English
                        // errorMessage += Object.values(errors).join(", ");
                    }
                    if (jsonResponse.errors) {
                        errorMessage += ":<br> ";
                        errorMessage += Object.values(jsonResponse.errors).join(
                            "<br>");
                        Swal.fire('', errorMessage, 'error')
                    }
                }
            })
        });
        $(document).ready(function() {
            var table = $("#dataTableUserList").DataTable({
                processing: true,
                serverSide: true,
                order: [[5, 'DESC']],
                ajax: {
                    "url": "{{ route('users.index')}}",
                    "type": "GET",
                    "data": function ( d ) {
                        d.role = 'Publisher';
                    }
                },
                columns: [
                    { data: "DT_RowIndex", name: 'id' },
                    { data: "user", name: "first_name" },
                    { data: "email" },
                    { data: "roles", sortable: false, searchable: false},
                    { data: "status" },
                    { data: "created_at", type: 'date' },
                    { data: "action" }
                ],
                columnDefs : [
                    {"targets":5, "type":"date-eu"}
                ],
            });

            $('#id_country').change(function() {
                var countryId = $(this).val();

                // Make an AJAX request to fetch cities based on the selected country
                $.ajax({
                    url: '/cities/' + countryId,
                    type: 'GET',
                    success: function(data) {
                        // Populate the city dropdown with fetched cities
                        $('#id_city').empty();
                        $.each(data.cities, function(key, value) {
                            $('#id_city').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });

            $('#edit_id_country').change(function() {
                var countryId = $(this).val();

                // Make an AJAX request to fetch cities based on the selected country
                $.ajax({
                    url: '/cities/' + countryId,
                    type: 'GET',
                    success: function(data) {
                        // Populate the city dropdown with fetched cities
                        $('#edit_id_city').empty();
                        $.each(data.cities, function(key, value) {
                            $('#edit_id_city').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });

            $("#addUserForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    first_name: {
                        required: true,
                    },
                    last_name: {
                        required: true,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    skype_id: {
                        required: true,
                    },
                },

                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    $.ajax({
                        url: $(form).attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status) {
                                Swal.fire({
                                    title: data.title,
                                    text: data.message,
                                    icon: 'success',
                                });
                                $(form)[0].reset();
                                // $("#roles_data").html('');
                                // $("#roles_data").html(data.data);
                                $("#addUser").modal('hide');
                                $("#dataTableUserList").DataTable().ajax.reload();

                                // // Refresh user_details div

                            }
                        },
                        error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });

            $("#editUserForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    first_name: {
                        required: true,
                    },
                    last_name: {
                        required: true,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    skype_id: {
                        required: true,
                    },
                },

                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    $.ajax({
                        url: $(form).attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status) {
                                Swal.fire({
                                    title: data.title,
                                    text: data.message,
                                    icon: 'success',
                                });
                                // $("#roles_data").html('');
                                // $("#roles_data").html(data.data);
                                $("#editUserModal").modal('hide');
                                $("#dataTableUserList").DataTable().ajax.reload();

                                // // Refresh user_details div

                            }
                        },
                        error: function(xhr, status, error) {
                            $("#editUserModal").modal('hide');
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var errorMessage = "Validation failed";

                            if (jsonResponse.errors) {
                                errorMessage += ": ";
                                errorMessage += Object.values(jsonResponse.errors).join(", ");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });

        });
    </script>

@endsection