@extends('admin.layouts.app')
@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin.index')}}">@lang('admin.admins')</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)"></a>@lang('admin.create')</li>
                </ol>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div id="alert-placeholder"></div>
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">@lang('admin.create')</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form id ="userForm" action="{{ route('admin.store') }}" method="POST">
                                    @csrf
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.name')</label>
                                                    <input type="text" name="name" class="form-control"
                                                        placeholder="Name">
                                                    <span class="text-danger" id="error-name"></span>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.email')</label>
                                                    <input type="email" autocomplete="off" name="email" class="form-control"
                                                        placeholder="Email">
                                                    <span class="text-danger" id="error-email"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.mobile')</label>
                                                    <input lang="en" type="number" name="mobile" autocomplete="off" class="form-control"
                                                        placeholder="Mobile">
                                                    <span class="text-danger" id="error-mobile"></span>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.password')</label>
                                                    <input type="password" autocomplete="new-password" name="password" class="form-control"
                                                        placeholder="Password">
                                                    <span class="text-danger" id="error-password"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="formFile" class="form-label">@lang('user.image')</label>
                                            <div class="text-center col-md-10">
                                                <input class="form-control edit-image" type="file" name="image"
                                                    accept="image/*">
                                                <span class="text-danger" id="error-image"></span>
                                            </div>
                                            <div class="text-center col-md-2">

                                                <img id="edit-preview-image-before-upload"
                                                    src="{{ asset('dummy_user.png') }}" alt="user Image"
                                                    class="img-fluid rounded-circle"
                                                    style="max-width: 100px; height: auto;">

                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <strong>@lang('admin.permissions')</strong>
                                                <select name="roles[]" class="form-control rolesSelect">
                                                    @foreach ($roles as $value => $role)
                                                        <option value="{{ $value }}">
                                                            {{ $role }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </fieldset>


                                    <button type="submit" class="btn btn-primary"
                                        style="margin-top: 30px;">@lang('admin.create')</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#userForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                var formData = new FormData(this);
                //formData.append('_method', 'PUT'); // Laravel uses this to simulate PUT

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        // toastr.success(response.message);
                        window.location.href = response.redirect;

                    },
                    error: function(response) {
                        console.log('Error:', response);
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border
                                $('input[name="' + key + '"], select[name="' + key + '"]')
                                    .addClass('is-invalid');
                                // Show error message
                                $('#error-' + key).text(value[0]);
                            }
                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });


            $('.rolesSelect').select2({
                placeholder: "{{__('user.select_role')}}",
                allowClear: true,
                ajax: {
                    url: "{{ route('admin.fetchRoles') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        // Convert object keys to array of objects
                        var results = Object.keys(data).map(function(key) {
                            return {
                                id: key,
                                text: data[key]
                            };
                        });
                        return {
                            results: results
                        };
                    }
                }
            })
            $('.edit-image').change(function() {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#edit-preview-image-before-upload').attr('src', e.target.result);
                };

                reader.readAsDataURL(this.files[0]);
            });

            // Function to replace non-English digits with English equivalents
            function enforceEnglishNumbers(input) {
                // Regular expression to match non-English digits
                var nonEnglishDigits = /[٠١٢٣٤٥٦٧٨٩]/g;
                
                // Replace non-English digits with English equivalents
                var englishNumber = input.value.replace(nonEnglishDigits, function(match) {
                    // Map non-English digits to their English equivalents
                    var arabicDigits = '٠١٢٣٤٥٦٧٨٩';
                    var englishDigits = '0123456789';
                    var index = arabicDigits.indexOf(match);
                    return englishDigits.charAt(index);
                });
                
                // Update the input value with English numbers
                input.value = englishNumber;
            }

            // Get the input element
            var numberInput = document.getElementById('numberInput');

            // Listen for input event
            numberInput.addEventListener('input', function() {
                // Enforce English numbers
                enforceEnglishNumbers(this);
            });
        });
        
    </script>
@endsection