@if ($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif
<div class="container-xxl">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                Edit Users
            </h3>
        </div>
        <div class="card-body">
            <form class="needs-validation" id="myForm" action="{{ route('Users.update',$id_fetcher) }}" method="POST" enctype="multipart/form-data" novalidate>
                @csrf
                @method('PUT')

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" name="name" value="{{ old('name',  $displayProfile->name) }}" required>
                        <div class="invalid-feedback">Please provide a valid name.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" value="{{ old('email', $displayProfile->email) }}" required>
                        <div class="invalid-feedback">Please enter a valid email address.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Phone</label>
                        <input type="tel" class="form-control" name="phone" value="{{ old('phone', $displayProfile->phone) }}" required>
                        <div class="invalid-feedback">Please enter a valid phone number.</div>
                    </div>
                </div>
                <div class="row g-3 mt-3">
                    <div class="col-md-4">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Password" required>
                        <div class="invalid-feedback">Please enter a valid password.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Repeat Password</label>
                        <input type="password" class="form-control" name="password_confirmation" placeholder="Repeat Password" required>
                        <div class="invalid-feedback">Passwords do not match.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Status</label>
                        <select class="form-control" name="status" id="validationTooltipStatus" required>
                            <option value="" {{ old('status', $displayProfile->status) == '' ? 'selected' : '' }}>
                                Select status</option>
                            <option value="1" {{ old('status', $displayProfile->status) == '1' ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('status', $displayProfile->status) == '0' ? 'selected' : '-' }}>Inactive</option>
                        </select>
                        <div class="invalid-feedback">Please select a valid status.</div>
                    </div>
                </div>
                <div class="row g-3 mt-3">
                    @if(auth()->user()->hasRole('SuperAdmin'))
                    <div class="col-md-4">
                        <label class="form-label">Roles</label>
                        <select id="adminroles" class="form-select" name="role">
                            <option>Select Role</option>
                            <!--LATER-->
                            @foreach ($roles as $role)
                            <option {{ $displayProfile->hasAnyRole($role->name) ? 'selected' : '' }} value="{{ $role->name }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                        @error('role')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    @endif



                    <div class="col-md-4">
                        <label class="form-label">Positions</label>
                        <input type="text" class="form-control" name="positions" value="{{ old('positions', $displayProfile->positions) }}">
                        <div class="invalid-feedback">Please enter a valid positions .</div>
                    </div>


                    <div class="col-md-4">
                        <label class="form-label">Avatar</label>
                        <input type="file" class="form-control" name="avatar" onchange="previewImage(event)">
                        <img src="{{ asset($displayProfile->avatar ?? 'assets/media/avatars/300-10.jpg') }}" alt="Image" class="img-thumbnail mt-2" width="80" height="80">
                        <div id="imagePreviewContainer" style="display: none; margin-top: 10px;">
                            <img id="imagePreview" src="" alt="Selected Image" class="img-thumbnail" width="80" height="80">
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-4">
                    <button class="btn btn-primary" type="submit">Submit Form</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    document.getElementById('submitBtn').addEventListener('click', function(event) {
        var form = document.getElementById('myForm');
        if (!form.checkValidity()) {
            event.preventDefault();
            form.classList.add('was-validated');
            return;
        }

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = 'Loading...';

        setTimeout(function() {
            form.submit();
        }, 1000);

        event.preventDefault();
    });

    function previewImage(event) {
        var file = event.target.files[0];
        var previewContainer = document.getElementById('imagePreviewContainer');
        var imagePreview = document.getElementById('imagePreview');

        if (file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                previewContainer.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    }

</script>