@extends('backend.layouts.app')
@section('content')
<h1 class="page-header">
    Users 
    @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create User'))
    <div class="float-right">
        <a href="javascript:;" class="btn btn-primary" data-target="#addUser" data-toggle="modal"><i class="fa fa-plus-circle"></i> @lang('messages.users.add_user')</a>
    </div>
    @endif
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">Users</h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableUserList"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <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">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@lang('messages.users.add_user_info')</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form id="addUserForm" action="{{ route('users.store') }}" autocomplete="off" >
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="first_name">@lang('messages.users.first_name')</label>
                                <input type="text" id="first_name" name="first_name" class="form-control" placeholder="@lang('messages.users.first_name_placeholder')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="last_name">@lang('messages.users.last_name')</label>
                                <input type="text" id="last_name" name="last_name" class="form-control" placeholder="@lang('messages.users.last_name_placeholder')" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="username">@lang('messages.users.username')</label>
                                <input type="text" id="username" name="username" class="form-control" placeholder="@lang('messages.users.username_placeholder')"/>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="email">@lang('messages.users.email')</label>
                                <input type="text" id="email" name="email" class="form-control" placeholder="@lang('messages.users.email_placeholder')"/>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="skype_id">@lang('messages.users.skype_id')</label>
                                <input type="text" id="skype_id" name="skype_id" class="form-control" placeholder="@lang('messages.users.skype_id_placeholder')"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="password">@lang('messages.register.password')</label>
                                <input type="password" id="password" class="form-control" name="password" value=""  placeholder="*********" aria-describedby="password" autocomplete="new-password" />
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="confirm_password"> @lang('messages.register.confirm_password')</label>
                                <input type="password" id="confirm_password" class="form-control" name="confirm_password" value="" placeholder="*********" aria-describedby="confirm_password" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="id_country">@lang('messages.users.country')</label>
                                <select id="id_country" name="id_country" class="form-control select2">
                                    <option value="">@lang('messages.users.select_country')</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="id_city">@lang('messages.users.city')</label>
                                <select id="id_city" name="id_city" class="form-control select2">
                                    <option value="" selected>@lang('messages.users.select_city')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="role">@lang('messages.users.role')</label>
                                <select id="role" name="role" class="form-control" >
                                    @foreach($roles as $role)
                                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="status">@lang('messages.users.status')</label>
                                <select id="status" name="status" class="form-control"
                                    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>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="avatar">@lang('messages.users.avatar')</label>
                                <input type="file" id="avatar" class="form-control" name="avatar" aria-describedby="avatar" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.users.cancel')</button>
                    <button type="submit" class="btn btn-success">@lang('messages.users.submit')</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@lang('messages.users.update_user_info')</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form id="editUserForm" action="{{ route('users.update',$id) }}" autocomplete="off" >
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="edit_first_name">@lang('messages.users.first_name')</label>
                                <input type="text" id="edit_first_name" name="first_name" class="form-control" placeholder="@lang('messages.users.first_name_placeholder')" />
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="edit_last_name">@lang('messages.users.last_name')</label>
                                <input type="text" id="edit_last_name" name="last_name" class="form-control" placeholder="@lang('messages.users.last_name_placeholder')" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="edit_username">@lang('messages.users.username')</label>
                                <input type="text" id="edit_username" name="username" class="form-control" placeholder="@lang('messages.users.username_placeholder')"/>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="edit_email">@lang('messages.users.email')</label>
                                <input type="text" id="edit_email" name="email" class="form-control" placeholder="@lang('messages.users.email_placeholder')"/>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group">
                                <label for="edit_skype_id">@lang('messages.users.skype_id')</label>
                                <input type="text" id="edit_skype_id" name="skype_id" class="form-control" placeholder="@lang('messages.users.skype_id_placeholder')"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="id_country">@lang('messages.users.country')</label>
                                <select id="edit_id_country" name="id_country" class="form-control select2">
                                    <option value="">@lang('messages.users.select_country')</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="edit_id_city">@lang('messages.users.city')</label>
                                <select id="edit_id_city" name="id_city" class="form-control select2">
                                    <option value="" selected>@lang('messages.users.select_city')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="city-select">@lang('messages.users.role')</label>
                                <select id="edit_role" name="role" class="form-control" >
                                    @foreach($roles as $role)
                                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="edit_status">@lang('messages.users.status')</label>
                                <select id="edit_status" value="{{ $status}}" name="edit_status" class="form-control" 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>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label for="password">@lang('messages.register.password')</label>
                                <input type="password" id="edit_password" class="form-control" name="password" value="Lmg@1234"  placeholder="*********" aria-describedby="password" autocomplete="new-password" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.users.cancel')</button>
                        <button type="submit" class="btn btn-success">@lang('messages.users.submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@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_status").val(data.status);
                        $("#edit_role").val(data.role);
                        $("#edit_id_country").val(data.id_country);
                        setTimeout(() => {
                            $("#edit_id_country").trigger('change');
                        }, 1000);
                        setTimeout(() => {
                            $("#edit_id_city").val(data.id_city);
                        }, 2000);
                        $("#edit_password").val("");
                        $("#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: [[0, 'DESC']],
                ajax: {
                    "url": "{{ route('users.index')}}",
                    "type": "GET",
                    "data": function ( d ) {
                        d.role = 'ALL';
                    }
                },
                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',
                                });
                                $("#editUserModal").modal('hide');
                                $("#dataTableUserList").DataTable().ajax.reload();
                            }
                        },
                        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