@extends('layouts/contentNavbarLayout')

@section('title', ' Profile - User Profile')

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="#" class="text-muted text-decoration-none">Profile</a>
        </span>
    </h4>
    <!-- Basic Layout -->
    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Update Profile</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.update.profile') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="slug" value="{{ $user->slug }}">
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="text" class="form-control" id="basic-default-username" placeholder="User Name"
                                name="name" value="{{ $user->name }}" />
                            <label for="basic-default-username">User Name</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-4">
                            <input type="number" id="basic-default-phone"
                                class="form-control phone-mask @error('phone') is-invalid @enderror" name="phone"
                                placeholder="Phone Number"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 15)" minlength="3"
                                maxlength="15" value="{{ old('phone', $user->phone) }}" />
                            <label for="basic-default-phone">Phone No</label>

                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                        </div>
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="file" class="form-control @error('photo') is-invalid @enderror"
                                id="upload-photo" accept=".jpg, .jpeg, .png" name="photo" onchange="validateFile(this)">
                            <label class="input-group-text" for="upload-photo">Upload</label>
                            <div class="form-text"> Allowed file types: .jpg, .jpeg, .png. Max file size: 2MB. </div>
                            @error('photo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary">Update</button>
                    </form>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Change Password</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.update.password') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="slug" value="{{ $user->slug }}">
                        <div class="mb-3 form-password-toggle">
                            <div class="input-group input-group-merge">
                                <div class="form-floating form-floating-outline">
                                    <input type="password" id="old_password"
                                        class="form-control @error('old_password') is-invalid @enderror" name="old_password"
                                        placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                        required />
                                    <label for="old_password">Old Password</label>
                                </div>
                                <span class="input-group-text cursor-pointer"><i class="mdi mdi-eye-off-outline"></i></span>
                            </div>
                            @error('old_password')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>


                        <div class="mb-3 form-password-toggle">
                            <div class="input-group input-group-merge">
                                <div class="form-floating form-floating-outline">
                                    <input type="password" id="password"
                                        class="form-control @error('password') is-invalid @enderror" name="password"
                                        placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                        aria-describedby="password" required />
                                    <label for="password">Password</label>
                                </div>
                                <span class="input-group-text cursor-pointer"><i class="mdi mdi-eye-off-outline"></i></span>
                            </div>
                            @error('password')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Confirm Password -->

                        <div class="mb-3 form-password-toggle">
                            <div class="input-group input-group-merge">
                                <div class="form-floating form-floating-outline">
                                    <input type="password" id="password_confirmation" class="form-control"
                                        name="password_confirmation"
                                        placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;"
                                        aria-describedby="password_confirmation" required />
                                    <label for="password_confirmation">Confirm Password</label>
                                </div>
                                <span class="input-group-text cursor-pointer"><i class="mdi mdi-eye-off-outline"></i></span>
                            </div>
                            @error('password_confirmation')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>


                        <button type="submit" class="btn btn-primary">Update Password</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Select all input fields with validation errors
            const inputs = document.querySelectorAll('.form-control.is-invalid');

            // Loop through each input field
            inputs.forEach(input => {
                // Add an event listener for 'input' (whenever the user types)
                input.addEventListener('input', function() {
                    // Remove the 'is-invalid' class to remove red border
                    input.classList.remove('is-invalid');

                    // Find the closest error message and remove it
                    const errorMessage = input.closest('.mb-3').querySelector('.text-danger');
                    if (errorMessage) {
                        errorMessage.remove();
                    }
                });
            });
        });
    </script>
@endsection