@extends('layouts.main')
@section('content')
<style>
   .profile-card {
   background: #fff;
   border-radius: 20px;
   padding: 24px;
   border: 1px solid #eef0f4;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
   }
   .section-title {
   margin-bottom: 20px;
   }
   .section-title h5 {
   font-size: 18px;
   font-weight: 700;
   color: #111827;
   margin-bottom: 4px;
   }
   .section-title p {
   font-size: 13px;
   color: #6b7280;
   margin-bottom: 0;
   }
   .form-label {
   font-size: 14px;
   font-weight: 600;
   color: #374151;
   margin-bottom: 8px;
   }
   .custom-input {
   height: 50px;
   border-radius: 14px;
   border: 1px solid #e5e7eb;
   padding: 10px 14px;
   font-size: 14px;
   box-shadow: none !important;
   }
   .custom-textarea {
   border-radius: 14px;
   border: 1px solid #e5e7eb;
   padding: 12px 14px;
   font-size: 14px;
   box-shadow: none !important;
   }
   .custom-input:focus,
   .custom-textarea:focus {
   border-color: #0d6efd;
   }
   .btn {
   font-weight: 600;
   }
   .file-preview {
   width: 96px;
   height: 96px;
   object-fit: cover;
   border-radius: 18px;
   border: 1px solid #e5e7eb;
   }
</style>
<div class="container-fluid py-4">
   <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
      <div class="card-header bg-white p-4 border-0">
         <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
            <div>
               <h3 class="fw-bold text-dark mb-1">Edit User</h3>
               <p class="text-muted mb-0">Update user profile and professional information.</p>
            </div>
         </div>
      </div>
      <div class="card-body p-4 bg-light">
         @if (session('success'))
         <div class="alert alert-success alert-dismissible fade show rounded-4">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
         </div>
         @endif
         @if ($errors->any())
         <div class="alert alert-danger rounded-4">
            <ul class="mb-0">
               @foreach ($errors->all() as $error)
               <li>{{ $error }}</li>
               @endforeach
            </ul>
         </div>
         @endif
         @php
         $toArray = function ($value) {
         if (is_array($value)) {
         return array_values($value);
         }
         if ($value === null || $value === '') {
         return [''];
         }
         $decoded = json_decode($value, true);
         if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
         return array_values($decoded);
         }
         return [$value];
         };
         $experienceList = old('experience', $toArray($user->experience));
         $higherDegreeList = old('higher_degree', $toArray($user->higher_degree));
         $expertiseList = old('expertise', $toArray($user->expertise));
         $skillsList = old('skills', $toArray($user->skills));
         $membershipList = old('membership_association', $toArray($user->membership_association));
         $membershipCertificates = $toArray($user->membership_certificate);
         @endphp
         <form action="{{ route('superadmin.user.update', $user->id) }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <input type="hidden" name="user_type" value="{{ old('user_type', $user->user_type) }}">
            <div class="row g-4">
               <div class="col-lg-6">
                  <div class="profile-card mb-4">
                     <div class="section-title">
                        <h5>Personal Information</h5>
                        <p>Update your personal details.</p>
                     </div>
                     <div class="row g-3">
                        <div class="col-md-6">
                           <label class="form-label">First Name</label>
                           <input type="text" name="first_name"
                              value="{{ old('first_name', $user->first_name) }}"
                              class="form-control custom-input" required>
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">Last Name</label>
                           <input type="text" name="last_name"
                              value="{{ old('last_name', $user->last_name) }}"
                              class="form-control custom-input" required>
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">Email Address</label>
                           <input type="email" name="email" value="{{ old('email', $user->email) }}"
                              class="form-control custom-input" required>
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">Phone Number</label>
                           <input type="text" name="phone_number"
                              value="{{ old('phone_number', $user->phone_number) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">Gender</label>
                           <select name="gender" class="form-select custom-input">
                              <option value="">Select Gender</option>
                              <option value="Male" @selected(old('gender', $user->gender) === 'Male')>Male</option>
                              <option value="Female" @selected(old('gender', $user->gender) === 'Female')>Female</option>
                           </select>
                        </div>
                        <div class="col-12">
                           <label class="form-label">Address</label>
                           <input type="text" name="address" value="{{ old('address', $user->address) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-12">
                           <label class="form-label">Bio</label>
                           <textarea name="bio" rows="4" class="form-control custom-textarea">{{ old('bio', $user->bio) }}</textarea>
                        </div>
                        <div class="col-12">
                           <label class="form-label">Life Quote</label>
                           <textarea name="life_quote" rows="3" class="form-control custom-textarea">{{ old('life_quote', $user->life_quote) }}</textarea>
                        </div>
                     </div>
                  </div>
                  <div class="profile-card mb-4">
                     <div class="section-title">
                        <h5>Education</h5>
                        <p>Add your education details.</p>
                     </div>
                     <div class="row g-3">
                        <div class="col-12">
                           <label class="form-label">Degree</label>
                           <input type="text" name="degree" value="{{ old('degree', $user->degree) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-12">
                           <label class="form-label">University</label>
                           <input type="text" name="university"
                              value="{{ old('university', $user->university) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">Start Year</label>
                           <input type="month" name="education_start_year"
                              value="{{ old('education_start_year', $user->education_start_year) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">End Year</label>
                           <input type="month" name="education_end_year"
                              value="{{ old('education_end_year', $user->education_end_year) }}"
                              class="form-control custom-input">
                        </div>
                     </div>
                  </div>
                  <div class="profile-card">
                     <div class="section-title">
                        <h5>Master Education</h5>
                        <p>Add your master education details.</p>
                     </div>
                     <div class="row g-3">
                        <div class="col-12">
                           <label class="form-label">Master Degree</label>
                           <input type="text" name="master_degree"
                              value="{{ old('master_degree', $user->master_degree) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-12">
                           <label class="form-label">University</label>
                           <input type="text" name="master_university"
                              value="{{ old('master_university', $user->master_university) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">Start Year</label>
                           <input type="month" name="master_start_year"
                              value="{{ old('master_start_year', $user->master_start_year) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">End Year</label>
                           <input type="month" name="master_end_year"
                              value="{{ old('master_end_year', $user->master_end_year) }}"
                              class="form-control custom-input">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-6">
                  <div class="profile-card mb-4">
                     <div class="section-title d-flex justify-content-between align-items-start gap-3">
                        <div>
                           <h5>Professional Details</h5>
                           <p>Update your professional information.</p>
                        </div>
                        <button type="button"
                           class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                           id="addExperienceRow" style="width:32px; height:32px; padding:0;">
                        <i class="bi bi-plus-lg fs-6"></i>
                        </button>
                     </div>
                     <div id="experienceWrapper">
                        @foreach ($experienceList as $index => $experience)
                        <div class="experience-row border rounded-4 p-3 mb-3 bg-light position-relative">
                           @if ($index !== 0)
                           <button type="button"
                              class="btn btn-danger btn-sm rounded-circle js-remove-row position-absolute"
                              style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                           <i class="bi bi-trash"></i>
                           </button>
                           @endif
                           <div class="row g-3">
                              <div class="col-md-6">
                                 <label class="form-label">Experience (Year)</label>
                                 <input type="number" name="experience[]"
                                    value="{{ $experience }}" class="form-control custom-input"
                                    placeholder="Enter experience">
                              </div>
                              <div class="col-md-6">
                                 <label class="form-label">Experience Title</label>
                                 <input type="text" name="higher_degree[]"
                                    value="{{ $higherDegreeList[$index] ?? '' }}"
                                    class="form-control custom-input" placeholder="Enter title">
                              </div>
                           </div>
                        </div>
                        @endforeach
                     </div>
                     <div class="col-12">
                        <label class="form-label d-flex justify-content-between align-items-center mb-3">
                        <span class="fw-semibold">Languages</span>
                        <button type="button"
                           class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center shadow-sm"
                           id="addLanguageRow"
                           style="width:32px; height:32px; padding:0;">
                        <i class="bi bi-plus-lg"></i>
                        </button>
                        </label>
                        <div id="languageWrapper">
                           @php
                           $languages = old(
                           'languages',
                           $user->languages
                           ? json_decode($user->languages, true)
                           : ['']
                           );
                           @endphp
                           @foreach ($languages as $key => $language)
                           <div class="language-row border rounded-4 p-3 mb-3 bg-light position-relative">
                              {{-- Remove Button --}}
                              @if ($key != 0)
                              <button type="button"
                                 class="btn btn-danger btn-sm rounded-circle removeLanguageBtn position-absolute"
                                 style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                              <i class="bi bi-trash"></i>
                              </button>
                              @endif
                              <div class="row g-3">
                                 <div class="col-md-12">
                                    <label class="form-label fw-medium">
                                    Language
                                    </label>
                                    <input type="text"
                                       name="languages[]"
                                       value="{{ $language }}"
                                       class="form-control custom-input"
                                       placeholder="Enter language">
                                 </div>
                              </div>
                           </div>
                           @endforeach
                        </div>
                     </div>
                     {{-- Script --}}
                     <script>
                        document.addEventListener('DOMContentLoaded', function () {
                        
                            const languageWrapper = document.getElementById('languageWrapper');
                        
                            const addLanguageRow = document.getElementById('addLanguageRow');
                        
                            // Add More
                            addLanguageRow.addEventListener('click', function () {
                        
                                const html = `
                                    <div class="language-row border rounded-4 p-3 mb-3 bg-light position-relative">
                        
                                        <button type="button"
                                            class="btn btn-danger btn-sm rounded-circle removeLanguageBtn position-absolute"
                                            style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                                            <i class="bi bi-trash"></i>
                                        </button>
                        
                                        <div class="row g-3">
                        
                                            <div class="col-md-12">
                                                <label class="form-label fw-medium">
                                                    Language
                                                </label>
                        
                                                <input type="text"
                                                    name="languages[]"
                                                    class="form-control custom-input"
                                                    placeholder="Enter language">
                                            </div>
                        
                                        </div>
                        
                                    </div>
                                `;
                        
                                languageWrapper.insertAdjacentHTML('beforeend', html);
                        
                            });
                        
                            // Remove Row
                            languageWrapper.addEventListener('click', function (e) {
                        
                                const removeBtn = e.target.closest('.removeLanguageBtn');
                        
                                if (removeBtn) {
                        
                                    removeBtn.closest('.language-row').remove();
                        
                                }
                        
                            });
                        
                        });
                        
                     </script>
                     <div class="mt-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                           <h5 class="fw-bold mb-0">Expertise & Skills</h5>
                           <button type="button"
                              class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                              id="addExpertiseSkillRow" style="width:32px; height:32px; padding:0;">
                           <i class="bi bi-plus-lg fs-6"></i>
                           </button>
                        </div>
                        <div id="expertiseSkillWrapper">
                           @foreach ($expertiseList as $index => $expertise)
                           <div
                              class="expertise-skill-row border rounded-4 p-3 mb-3 bg-light position-relative">
                              @if ($index !== 0)
                              <button type="button"
                                 class="btn btn-danger btn-sm rounded-circle js-remove-row position-absolute"
                                 style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                              <i class="bi bi-trash"></i>
                              </button>
                              @endif
                              <div class="row g-3">
                                 <div class="col-md-6">
                                    <label class="form-label">Expertise</label>
                                    <input type="text" name="expertise[]"
                                       value="{{ $expertise }}" class="form-control custom-input"
                                       placeholder="Enter expertise">
                                 </div>
                                 <div class="col-md-6">
                                    <label class="form-label">Skills</label>
                                    <input type="text" name="skills[]"
                                       value="{{ $skillsList[$index] ?? '' }}"
                                       class="form-control custom-input" placeholder="Enter skills">
                                 </div>
                              </div>
                           </div>
                           @endforeach
                        </div>
                     </div>
                     <div class="row g-3 mt-4">
                        <div class="col-md-6">
                           <label class="form-label fw-semibold mb-2">Resume</label>
                           <div class="border rounded-4 bg-white p-3">
                              <input type="file" name="resume"
                                 class="form-control custom-input border-0 shadow-none">
                           </div>
                        </div>
                        <div class="col-md-6">
                           <label class="form-label fw-semibold mb-2">Profile Image</label>
                           <div class="border rounded-4 bg-white p-3">
                              <input type="file" name="profile_image"
                                 class="form-control custom-input border-0 shadow-none" accept="image/*">
                              <div class="mt-3">
                                 <img src="{{ $user->profile_image_url }}" alt="Profile Image"
                                    class="file-preview">
                              </div>
                           </div>
                        </div>
                        <div class="col-12">
                           <label class="form-label">Experience Detail</label>
                           <textarea name="experience_detail" rows="4" class="form-control custom-textarea" placeholder="Write here...">{{ old('experience_detail', $user->experience_detail) }}</textarea>
                        </div>
                     </div>
                  </div>
                  <div class="profile-card mb-4">
                     <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                           <h5 class="fw-bold mb-1">Membership / Association</h5>
                           <p class="text-muted small mb-0">Add membership and certificate details.</p>
                        </div>
                        <button type="button"
                           class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                           id="addMembershipRow" style="width:32px; height:32px; padding:0;">
                        <i class="bi bi-plus-lg"></i>
                        </button>
                     </div>
                     <div id="membershipWrapper">
                        @foreach ($membershipList as $index => $membership)
                        <div class="membership-row border rounded-4 bg-white p-3 mb-3">
                           <div class="row g-3 align-items-end">
                              <div class="col-md-5">
                                 <label class="form-label">Membership / Association</label>
                                 <input type="text"
                                    name="membership_association[{{ $index }}]"
                                    value="{{ $membership }}"
                                    class="form-control custom-input @error('membership_association.' . $index) is-invalid @enderror"
                                    placeholder="Enter membership">
                                 @error('membership_association.' . $index)
                                 <div class="invalid-feedback">{{ $message }}</div>
                                 @enderror
                              </div>
                              <div class="col-md-5">
                                 <label class="form-label">Membership Certificate</label>
                                 <input type="file"
                                    name="membership_certificate[{{ $index }}]"
                                    class="form-control custom-input @error('membership_certificate.' . $index) is-invalid @enderror">
                                 <input type="hidden"
                                    name="old_membership_certificate[{{ $index }}]"
                                    value="{{ $membershipCertificates[$index] ?? '' }}">
                                 @error('membership_certificate.' . $index)
                                 <div class="invalid-feedback d-block">{{ $message }}</div>
                                 @enderror
                                 @if (!empty($membershipCertificates[$index]))
                                 <a href="{{ asset('uploads/membership/' . $membershipCertificates[$index]) }}"
                                    target="_blank"
                                    class="btn btn-sm btn-outline-primary mt-2 rounded-pill">
                                 <i class="bi bi-eye me-1"></i>
                                 View File
                                 </a>
                                 @endif
                              </div>
                              <div class="col-md-2 text-md-end">
                                 @if ($index !== 0)
                                 <button type="button"
                                    class="btn btn-danger btn-sm rounded-circle js-remove-row d-flex align-items-center justify-content-center"
                                    style="width:38px; height:38px; padding:0;">
                                 <i class="bi bi-trash"></i>
                                 </button>
                                 @endif
                              </div>
                           </div>
                        </div>
                        @endforeach
                     </div>
                  </div>
                  <div class="profile-card mb-4">
                     <div class="section-title">
                        <h5>Certificates & Achievements</h5>
                        <p>Manage certificates and achievements.</p>
                     </div>
                     <div class="row g-3">
                        <div class="col-md-6">
                           <label class="form-label">Certificate Title</label>
                           <input type="text" name="certificate_title"
                              value="{{ old('certificate_title', $user->certificate_title) }}"
                              class="form-control custom-input">
                        </div>
                        <div class="col-md-6">
                           <label class="form-label">Certificate File</label>
                           <input type="file" name="certificate_file" class="form-control custom-input">
                           <a href="{{ asset('uploads/certificate/' . $user->certificate_file) }}"
                              target="_blank" class="btn btn-sm btn-outline-primary mt-2 rounded-pill">
                           <i class="bi bi-eye me-1"></i>
                           View File
                           </a>
                        </div>
                        <div class="col-12">
                           <label class="form-label">Achievements</label>
                           <textarea name="achievements" rows="3" class="form-control custom-textarea">{{ old('achievements', $user->achievements) }}</textarea>
                        </div>
                     </div>
                  </div>
                  <div class="profile-card">
                     <div class="section-title">
                        <h5>Security & Role</h5>
                        <p>Manage user access and password.</p>
                     </div>
                     <div class="row g-3">
                        <div class="col-12">
                           <label class="form-label">Password</label>
                           <input type="password" name="password" class="form-control custom-input"
                              placeholder="Leave blank to keep current password">
                        </div>
                        <div class="col-12">
                           <label class="form-label">Confirm Password</label>
                           <input type="password" name="password_confirmation"
                              class="form-control custom-input" placeholder="Confirm password">
                        </div>
                        <div class="col-12">
                           <label class="form-label">Role</label>
                           <select name="role_id" class="form-select custom-input" required>
                           @foreach ($roles as $role)
                           <option value="{{ $role->id }}" @selected(old('role_id', $user->role_id ?? optional($user->roles->first())->id) == $role->id)>
                           {{ ucwords(str_replace('_', ' ', $role->name)) }}
                           </option>
                           @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="d-flex justify-content-end gap-3 mt-4">
               <button type="button" onclick="history.back()"
                  class="btn btn-light border custom-btn">Cancel</button>
               <button type="submit" class="btn btn-primary custom-btn">Update User</button>
            </div>
         </form>
      </div>
   </div>
</div>
<script>
   let membershipIndex = {{ !empty($membershipList) ? max(array_keys($membershipList)) + 1 : 0 }};
   
   document.getElementById('addExperienceRow').addEventListener('click', function() {
       const html = `
       <div class="experience-row border rounded-4 p-3 mb-3 bg-light position-relative">
           <button type="button" class="btn btn-danger btn-sm rounded-circle js-remove-row position-absolute" style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
               <i class="bi bi-trash"></i>
           </button>
           <div class="row g-3">
               <div class="col-md-6">
                   <label class="form-label">Experience (Year)</label>
                   <input type="number" name="experience[]" class="form-control custom-input" placeholder="Enter experience">
               </div>
               <div class="col-md-6">
                   <label class="form-label">Experience Title</label>
                   <input type="text" name="higher_degree[]" class="form-control custom-input" placeholder="Enter title">
               </div>
           </div>
       </div>
   `;
   
       document.getElementById('experienceWrapper').insertAdjacentHTML('beforeend', html);
   });
   
   document.getElementById('addExpertiseSkillRow').addEventListener('click', function() {
       const html = `
       <div class="expertise-skill-row border rounded-4 p-3 mb-3 bg-light position-relative">
           <button type="button" class="btn btn-danger btn-sm rounded-circle js-remove-row position-absolute" style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
               <i class="bi bi-trash"></i>
           </button>
           <div class="row g-3">
               <div class="col-md-6">
                   <label class="form-label">Expertise</label>
                   <input type="text" name="expertise[]" class="form-control custom-input" placeholder="Enter expertise">
               </div>
               <div class="col-md-6">
                   <label class="form-label">Skills</label>
                   <input type="text" name="skills[]" class="form-control custom-input" placeholder="Enter skills">
               </div>
           </div>
       </div>
   `;
   
       document.getElementById('expertiseSkillWrapper').insertAdjacentHTML('beforeend', html);
   });
   
   document.getElementById('addMembershipRow').addEventListener('click', function() {
       const html = `
       <div class="membership-row border rounded-4 bg-white p-3 mb-3">
           <div class="row g-3 align-items-end">
               <div class="col-md-5">
                   <label class="form-label">Membership / Association</label>
                   <input type="text" name="membership_association[${membershipIndex}]" class="form-control custom-input" placeholder="Enter membership">
               </div>
               <div class="col-md-5">
                   <label class="form-label">Membership Certificate</label>
                   <input type="file" name="membership_certificate[${membershipIndex}]" class="form-control custom-input">
                   <input type="hidden" name="old_membership_certificate[${membershipIndex}]" value="">
               </div>
               <div class="col-md-2 text-md-end">
                   <button type="button" class="btn btn-danger btn-sm rounded-circle js-remove-row d-flex align-items-center justify-content-center" style="width:38px; height:38px; padding:0;">
                       <i class="bi bi-trash"></i>
                   </button>
               </div>
           </div>
       </div>
   `;
   
       document.getElementById('membershipWrapper').insertAdjacentHTML('beforeend', html);
       membershipIndex++;
   });
   
   document.addEventListener('click', function(event) {
       const removeButton = event.target.closest('.js-remove-row');
   
       if (!removeButton) {
           return;
       }
   
       const row = removeButton.closest('.experience-row, .expertise-skill-row, .membership-row');
   
       if (row) {
           row.remove();
       }
   });
</script>
@endsection