Untitled

@extends('layouts.app')

@section('content')
    <section>
    @if(session('success'))
                <div class="alert alert-success mt-3">
                    {{ session('success') }}
                </div>
            @endif
        <div class="d-flex justify-content-center align-items-center pt-2 pb-5">
            
            <form method="POST" action="{{ route('user.update', $user->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <center>
                    <div style="position: relative; display: inline-block;">
                        <div style="position: relative; display: inline-block;">
                            @if ($user->profile_picture)
                                <img id="image-preview" src="{{ asset('storage/' . $user->profile_picture) }}"
                                    alt="Profile Picture" width="250px" class="py-5" style="border-radius: 50%; position: relative;">
                            @else
                                <img id="image-preview" src="{{ asset('images/default-profile.png') }}"
                                    alt="Default Profile Picture" width="150px" class="py-5" style="border-radius: 50%">
                            @endif
                            <img src="{{ asset('images/penpen.png') }}" alt="Pen Icon" width="40px"
                                style="border-radius: 50%; position: absolute; bottom: 0; right: 0; cursor: pointer; z-index: 1;"
                                id="profile_picture_trigger">
                        </div>
                        <input type="file" id="profile_picture" name="profile_picture" class="form-control ml-2"
                            style="display: none;">
                    </div>
                </center>

                <script>
                    document.getElementById('profile_picture_trigger').addEventListener('click', function() {
                        document.getElementById('profile_picture').click();
                    });
                    document.getElementById('profile_picture').addEventListener('change', function() {
                        const selectedFile = this.files[0];
                        if (selectedFile) {
                            const imageUrl = URL.createObjectURL(selectedFile);
                            document.getElementById('image-preview').src = imageUrl;
                            document.getElementById('image-preview-container').style.display = 'block';
                            document.getElementById('existing-profile-picture').src = imageUrl;
                        } else {
                            document.getElementById('image-preview-container').style.display = 'none';
                        }
                    });
                </script>

                <div class="container-fluid form-outline mb-4">
                    <label class="form-label" style="font-size: 15px; font-weight: bold">Full Name</label>
                    <input type="text" id="name"
                        class="form-control form-control-lg shadow-sm @error('name') is-invalid @enderror"
                        placeholder="Your name" name="name" value="{{ old('name', $user->name) }}">
                    @error('name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="container-fluid form-outline mb-4">
                    <label class="form-label" style="font-size: 15px; font-weight: bold">Address</label>
                    <input type="text" id="address"
                        class="form-control form-control-lg shadow-sm @error('address') is-invalid @enderror"
                        placeholder="Your Address" name="address" value="{{ old('address', $user->address) }}">
                    @error('address')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-outline mb-4">
                                <label class="form-label" style="font-size: 15px; font-weight: bold">Email Address</label>
                                <input type="email" id="email"
                                    class="form-control form-control-lg shadow-sm @error('email') is-invalid @enderror"
                                    name="email" value="{{ old('email', $user->email) }}"
                                    placeholder="Your Email Address">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-outline mb-4">
                                <label class="form-label" style="font-size: 15px; font-weight: bold">Age</label>
                                <input type="number" id="age"
                                    class="form-control form-control-lg shadow-sm @error('age') is-invalid @enderror"
                                    name="age" value="{{ old('age', $user->age) }}" placeholder="Your Age"
                                    min="1">
                                @error('age')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="container-fluid">
                  <div class="col-md-8">
                      <div class="form-outline mb-4">
                          <label class="form-label" style="font-size: 15px; font-weight: bold">I have:</label>
              
                          <div class="form-check">
                              <input class="form-check-input" type="radio" name="disability" id="userDisability"
                                     value="{{ Auth::user()->disability }}" checked>
                              <label class="form-check-label" for="userDisability">
                                  {{ ucfirst(Auth::user()->disability) }}
                              </label>
                          </div>
              
                          @error('disability')
                              <span class="invalid-feedback" role="alert">
                                  <strong>{{ $message }}</strong>
                              </span>
                          @enderror
                      </div>
                  </div>
              </div>
              
              
              

                <div class="container-fluid mb-1 pt-1">
                    <button class="btn btn-info btn-lg btn-block w-100 text-white"
                        style="background-color: #E54460; border-radius: 12px" type="submit">Update Profile</button>
                </div>
            </form>



        </div>
    </section>
@endsection