@extends('layout.app')
@include('includes.select2')
@section('title', 'Edit Admin | 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.Edit Profile') }}</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.Edit Profile') }}</h4>
                    <a href="{{ route('dashboard') }}" class="btn btn-primary">{{ __('translations.Back') }}</a>
                </div>
                <div class="card-body">
                    <form id="editUser">

                        {{-- <div class="text-center">
                            <div class="position-relative d-inline-block">
                                <div class="avatar-lg p-1 position-relative">
                                    <div class="avatar-title bg-light rounded-circle overflow-hidden"
                                        style="width: 100px; height: 100px;">
                                        <img src="{{ asset($UserData->image ?? 'assets/boy.png') }}" id="companylogo-img"
                                            class="avatar-md rounded-circle object-fit-cover w-100 h-100"
                                            alt="Profile Image" />
                                        <input
                                            class="form-control position-absolute top-0 start-0 w-100 h-100 opacity-0 cursor-pointer"
                                            name="image" id="profile_image_{{ $UserData->id }}" type="file"
                                            accept="image/png, image/gif, image/jpeg"
                                            onchange="previewImage(event, {{ $UserData->id }})">
                                    </div>
                                </div>
                                <div class="position-absolute bottom-0 end-0">
                                    <label for="profile_image_{{ $UserData->id }}" class="mb-0" data-bs-toggle="tooltip"
                                        data-bs-placement="right" title="Select Image">
                                        <div class="avatar-xs cursor-pointer">
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <h5 class="fs-13 mt-3">Profile Image</h5>
                        </div> --}}

                        @csrf
                        <input type="hidden" name="user_id" value="{{ $admin->id }}">
                        <div class="row mt-5 mb-5">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">{{ __('translations.Name') }}</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        value="{{ $admin->name }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputPassword1">{{ __('translations.Email') }}</label>
                                    <input type="email" class="form-control" id="email" name="email"
                                        value="{{ $admin->email }}" disabled>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <div class="form-group">
                                    <label for="exampleInputPassword1">{{ __('translations.Change Password') }}</label>
                                    <input type="password" class="form-control" id="password" name="password"
                                        placeholder="{{ __('translations.Type new password') }}" value="">
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary editUserBtn float-end">{{ __('translations.SUBMIT') }}</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        // Handle form submission
        $("#editUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $(".editUserBtn");
            let formData = new FormData($("#editUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('admin.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;accent-color: ;"><span class="visually-hidden">Loading...</span></div>'
                    );
                    $('.error-message').html('');
                },
                success: function(res) {
                    btn.prop('disabled', false);
                    btn.html('Submit');
                    if (res.success === true) {
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.href = "{{ route('dashboard') }}";
                        }, 2000);
                    } else {
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Submit');
                    notyf.error({
                        message: 'An error occurred. Please try again.',
                        duration: 3000
                    });
                }
            });
        });

        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function() {
                var imgElement = document.getElementById('companylogo-img');
                imgElement.src = reader.result;
            };
            if (input.files && input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            } else {
                // Set the default image if no file is selected
                document.getElementById('companylogo-img').src = "{{ asset('assets/boy.png') }}";
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
@endsection