@extends('layouts.app')

@section('title', 'profile')

@section('content')

<main id="main" class="main">

    <div class="pagetitle">
      <h1>Profile</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>          
          <li class="breadcrumb-item active">Profile</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <!-- Add success and error message display -->
    @if (session('success'))
    <div class="alert alert-success mt-3">
        {{ session('success') }}
    </div>
@endif

@if (count($errors) > 0)
    <div class="alert alert-danger mt-3">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

    <section class="section profile">
      <div class="row">
        <div class="col-xl-4">
           
          <div class="card" id="profile-card">
            <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
              @if ($user && $user->member && $user->member->photo)
                <img src="{{ asset($user->member->photo) }}" alt="Profile" id="profile-photo" class="rounded-circle">
            @else
                <img src="{{asset('assets/images/avatar.png')}}" id="profile-photo" alt="Default Profile">
            @endif
              
              <h2>{{Auth::user()->fname}} {{Auth::user()->lname}}</h2>
              @if ($user && $user->roles->count() > 0)
                  @foreach ($user->roles as $role)
                      <h5>{{ $role->name }}</h5>
                  @endforeach
              @endif

                           
              <div class="social-links mt-2">
                <a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
                <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
                <a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
                <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div>

        </div>

        <div class="col-xl-8">

          <div class="card" id="profile-card">
            <div class="card-body pt-3">
              <!-- Bordered Tabs -->
              <ul class="nav nav-tabs nav-tabs-bordered">

                <li class="nav-item">
                  <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Overview</button>
                </li>

                <li class="nav-item">
                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit Profile</button>
                </li>
                
                <li class="nav-item">
                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-settings">Settings</button>
                </li>

                <li class="nav-item">
                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Change Password</button>
                </li>

              </ul>
              <div class="tab-content pt-2">

                <div class="tab-pane fade show active profile-overview" id="profile-overview">
                  
                  <h5 class="card-title">Profile Details</h5>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Full Name</div>
                    <div class="col-lg-9 col-md-8">{{Auth::user()->fname}} {{Auth::user()->lname}}</div>
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Member Number</div>
                    <div class="col-lg-9 col-md-8">{{Auth::user()->member_number}}</div>
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Gender</div>
                    <div class="col-lg-9 col-md-8">{{Auth::user()->gender}}</div>
                  </div>
                  
                 
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Address</div>
                    
                    <div class="col-lg-9 col-md-8">{{$user->member ? $user->member->address : 'N/A' }}</div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Payroll Number</div>
                    <div class="col-lg-9 col-md-8">{{$user->member ? $user->member->payroll_number : 'N/A'}}</div>
                  </div>
                  
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Phone</div>
                    <div class="col-lg-9 col-md-8">{{Auth::user()->phone}}</div>
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Email</div>
                    <div class="col-lg-9 col-md-8">{{Auth::user()->email}}</div>
                  </div>

                </div>

                <div class="tab-pane fade profile-edit pt-3" id="profile-edit">
                  

                  <!-- Profile Edit Form -->
                  <form class="needs-validation" action="{{ route('member.updateProfile') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row mb-3">
                      <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                      <div class="col-md-8 col-lg-9">
                        @if ($user && $user->member && $user->member->photo)
                        <img src="{{ asset($user->member->photo) }}" alt="Profile" id="photo-edit">
                        @else
                        <img src="{{asset('assets/images/avatar.png')}}" id="photo-edit" alt="Default Profile">
                        @endif
                        <div class="row">
                            <span id="fileName" class="ml-2"></span>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-sm-1">
                                <input type="file" name="photo" id="profileImage" class="d-none" accept="image/*">
                                <label for="profileImage" class="btn btn-primary btn-sm" title="Upload new profile image"><i class="fas fa-file-upload"></i></label>
                            </div>
                            
                            <div class="col-sm-1">
                                @if ($user && $user->member && $user->member->photo)
                                <button type="button" class="btn btn-danger btn-sm" title="Remove my profile image" onclick="removeProfileImage()"><i class="fas fa-trash-alt"></i></button>
                                @endif                                                          
                                
                            </div>
                        </div>
                        
                      </div>
                    </div>
                    

                    <div class="row mb-3">
                      <label for="fname" class="col-md-4 col-lg-3 col-form-label">First Name</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="fname" type="text" class="form-control" id="fname" value="{{Auth::user()->fname}}">
                      </div>
                    </div>              
                    <div class="row mb-3">
                        <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Last Name</label>
                        <div class="col-md-8 col-lg-9">
                          <input name="lname" type="text" class="form-control" id="lname" value="{{Auth::user()->lname}}">
                        </div>
                      </div>                          
                
                    <div class="row mb-3">
                      <label for="Address" class="col-md-4 col-lg-3 col-form-label">Address</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="address" type="text" class="form-control" id="address" value="{{$user->member ? $user->member->address : 'N/A'}}">
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="phone" type="text" class="form-control" id="phone" value="{{Auth::user()->phone}}">
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="email" type="email" class="form-control" id="email" value="{{Auth::user()->email}}">
                      </div>
                    </div>         
                                                   

                    <div class="text-center">
                      <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                  </form><!-- End Profile Edit Form -->

                </div>

              
                <div class="tab-pane fade pt-3" id="profile-settings">

                  <!-- Settings Form -->
                  <form>

                    <div class="row mb-3">
                      <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Email Notifications</label>
                      <div class="col-md-8 col-lg-9">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="changesMade" checked>
                          <label class="form-check-label" for="changesMade">
                            Changes made to your account
                          </label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="newProducts" checked>
                          <label class="form-check-label" for="newProducts">
                            Information on new products and services
                          </label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="proOffers">
                          <label class="form-check-label" for="proOffers">
                            Promotional Offers
                          </label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="securityNotify" checked disabled>
                          <label class="form-check-label" for="securityNotify">
                            Security alerts
                          </label>
                        </div>
                      </div>
                    </div>

                    <div class="text-center">
                      <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                  </form><!-- End settings Form -->

                </div>

                <!-- Change Password -->
                <div class="tab-pane fade pt-3" id="profile-change-password">
                    <!-- Change Password Form -->
                    <form class="needs-validation" action="{{ route('password.update') }}" method="POST">
                        @csrf

                        <!-- Current Password -->
                        <div class="row mb-3">
                            <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Current Password</label>
                            <div class="col-md-8 col-lg-9">
                                <input name="current_password" type="password" class="form-control @error('current_password') is-invalid @enderror" id="currentPassword">
                                @error('current_password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>

                        <!-- New Password -->
                        <div class="row mb-3">
                            <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">New Password</label>
                            <div class="col-md-8 col-lg-9">
                                <input name="password" type="password" class="form-control @error('password') is-invalid @enderror" id="newPassword">
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>

                        <!-- Confirm New Password -->
                        <div class="row mb-3">
                            <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Confirm New Password</label>
                            <div class="col-md-8 col-lg-9">
                                <input name="password_confirmation" type="password" class="form-control @error('password_confirmation') is-invalid @enderror" id="renewPassword">
                                @error('password_confirmation')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Change Password Button -->
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Change Password</button>
                        </div>
                    </form><!-- End Change Password Form -->
                </div>
                  

              </div><!-- End Bordered Tabs -->

            </div>
          </div>

        </div>
      </div>
    </section>

  </main>
  @endsection
@pushOnce('scripts')
  <script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('profileImage');
    const fileNameElement = document.getElementById('fileName');
    
    fileInput.addEventListener('change', function() {
        const fileName = fileInput.files[0].name;
        fileNameElement.textContent = fileName;
    });
});

</script>
<script>
    function removeProfileImage() {
      // Confirmation dialog to confirm the deletion
      if (confirm("Are you sure you want to remove your profile image?")) {
        // Send an AJAX request to the server to remove the image
        fetch('{{ route('member.profile.image.remove') }}', {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
          },
        })
          .then(response => {
            if (response.ok) {
              // Image removed successfully, update the UI
              document.getElementById('photo-edit').src = '{{ asset('assets/images/avatar.png') }}';
              alert('Profile image removed successfully');
            } else {
              // Error occurred while removing the image
              alert('Error removing profile image. Please try again.');
            }
          })
          .catch(error => {
            console.error(error);
            alert('An unexpected error occurred. Please try again later.');
          });
      }
    }
    </script>
    

  @endpushOnce