@extends('web.layouts.app')

@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-hidden">
        <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">@lang('user.profile')</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form id="userForm"
                                    action="{{ route('web.agents.update', ['agent' => $agent->id]) }}"
                                    method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <fieldset>
                                        <div class="mb-3">
                                            <label class="form-label">@lang('user.name')</label>
                                            <input type="text" value="{{ $agent->name }}" 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" value="{{ $agent->email }}" name="email"
                                                class="form-control" placeholder="Email">
                                            <span class="text-danger" id="error-email"></span>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">@lang('user.mobile')</label>
                                            <input lang="en" oninput="enforceEnglishNumbers(this)" type="number" value="{{ $agent->mobile }}" 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 class="row mb-3">
                                            <div class="col-xl-8 col-lg-8">
                                                <label for="image"
                                                    class="form-label">@lang('user.image')</label>
                                                <input class="form-control" type="file" name="image"
                                                    id="image">
                                                <span class="text-danger" id="error-image"></span>
                                            </div>
                                            <div class="col-xl-4 col-lg-4">
                                                @if ($agent->image)
                                                    <img id="preview-image-before-upload" class="img-fluid rounded-circle"
                                                        src="{{ asset('storage/' . $agent->image) }}"
                                                        width="100px" height="100px" alt="user-image">
                                                @else
                                                    <img id="preview-image-before-upload"
                                                        src="{{ asset('dummy_user.png') }}" class="img-fluid rounded-circle"
                                                        width="100px" height="100px" alt="user-image">
                                                @endif
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="form-label">@lang('user.notifications')</label>
                                            <div class="col-lg-12">
                                                <span id="notification_status"></span>
                                                <a href="javascript:void(0)" id="enable_notifications" class="btn btn-info ms-3" style="display: none">@lang('user.enable')</a>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary mt-3">@lang('user.edit')</button>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>  
        </div>
    </div>
    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.profile_note')
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function set_notification_status(status = 'enabled')
        {
            if (status == 'enabled') {
                $('#notification_status').text("@lang('user.enabled')");
                $('#notification_status').removeClass('text-danger');
                $('#notification_status').addClass('text-success');
                $('#enable_notifications').hide();
            } else {
                $('#notification_status').text("@lang('user.disabled')");
                $('#notification_status').removeClass('text-success');
                $('#notification_status').addClass('text-danger');
                $('#enable_notifications').show();
            }
        }

        if (window.Notification && Notification.permission === 'granted') {
            set_notification_status('enabled');
        } else {
            set_notification_status('disabled');
        }

        $(document).ready(function() {
            $('#image').change(function() {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#preview-image-before-upload').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });

            $('#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);
                         location.reload();
                    },
                    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
                });
            });

            $(document).on('click', '#enable_notifications', function() {
                if (!window.Notification) {
                    alert('Browser does not support notifications.');
                } else {
                    // check if permission is already granted
                    if (Notification.permission === 'granted') {
                        set_notification_status('enabled');
                    } else {
                        Notification.requestPermission().then(function (p) {
                            if (p === 'granted') {
                                set_notification_status('enabled');
                            } else if (p == 'denied') {
                                alert('Notifications is blocked, please enable it from browser settings');
                            }
                        });
                    }
                }
            });
        });

        function enforceEnglishNumbers(input) {
            // Replace non-English digits with English digits
            input.value = input.value.replace(/[٠١٢٣٤٥٦٧٨٩]/g, function(char) {
                return String.fromCharCode(char.charCodeAt(0) - 1632 + 48);
            });
        }
    </script>
@endsection