@extends('layouts/layoutMaster')

@section('title', 'User Management - View')

@section('vendor-style')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss',
    'resources/assets/vendor/libs/animate-css/animate.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
    'resources/assets/vendor/libs/select2/select2.scss',
    'resources/assets/vendor/libs/tagify/tagify.scss',
    'resources/assets/vendor/libs/@form-validation/form-validation.scss',
    'resources/assets/vendor/libs/toastr/toastr.scss'
  ])
@endsection

@section('page-style')
  @vite([
    'resources/assets/vendor/scss/pages/page-user-view.scss'
  ])
@endsection

@section('page-script')
    @vite([
      'resources/js/toastr-bootstrap.js',
    ])
@endsection

@section('vendor-script')
  @vite([
    'resources/assets/vendor/libs/moment/moment.js',
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
    'resources/assets/vendor/libs/cleavejs/cleave.js',
    'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
    'resources/assets/vendor/libs/select2/select2.js',
    'resources/assets/vendor/libs/tagify/tagify.js',
    'resources/assets/vendor/libs/@form-validation/popular.js',
    'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
    'resources/assets/vendor/libs/@form-validation/auto-focus.js',
    'resources/assets/vendor/libs/toastr/toastr.js'
  ])
@endsection

@section('page-script')
  @vite([
  ])
@endsection

@section('content')
  <div class="toast-container position-fixed top-1 end-0 p-3" id="toastContainer"></div>
  <div class="row gy-6 gy-md-0">
    <!-- User Sidebar -->
    <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
      <!-- User Card -->
      <div class="card mb-6">
        <div class="card-body pt-12">
          <div class="user-avatar-section">
            <div class=" d-flex align-items-center flex-column">
              @if($user->profile_photo_path)
                  <img class="img-fluid rounded-3 mb-4"
                      src="{{ asset('storage/' . $user->profile_photo_path) }}"
                      height="120" width="120" alt="User avatar" />
              @else
                  <div class="d-flex align-items-center justify-content-center bg-label-info text-dark rounded-3 mb-4"
                      style="height: 120px; width: 120px; font-size: 36px;">
                      {{ strtoupper(substr($user->name, 0, 2)) }}
                  </div>
              @endif

              <div class="user-info text-center">
                <h5>{{$user->name}}</h5>
                <span class="badge bg-label-danger rounded-pill">{{ $user->usertype }}</span>
              </div>
            </div>
          </div>
          <div class="d-flex justify-content-around flex-wrap my-6 gap-0 gap-md-3 gap-lg-4">
            <div class="d-flex align-items-center me-5 gap-4">
              <div class="avatar">
                <div class="avatar-initial bg-label-primary rounded-3">
                  <i class='ri-timer-line ri-24px'></i>
                </div>
              </div>
              <div>
                <h5 class="mb-0">1.23k</h5>
                <span>Total Hours</span>
              </div>
            </div>
            {{-- <div class="d-flex align-items-center gap-4">
              <div class="avatar">
                <div class="avatar-initial bg-label-primary rounded-3">
                  <i class='ri-briefcase-line ri-24px'></i>
                </div>
              </div>
              <div>
                <h5 class="mb-0">568</h5>
                <span>Project Done</span>
              </div>
            </div> --}}
          </div>
          <h5 class="pb-4 border-bottom mb-4">Details</h5>
          <div class="info-container">
            <ul class="list-unstyled mb-6">
              <li class="mb-2">
                <span class="fw-medium text-heading me-2">Username:</span>
                <span>{{$user->name}}</span>
              </li>
              <li class="mb-2">
                <span class="fw-medium text-heading me-2">Email:</span>
                <span>{{$user->email}}</span>
              </li>
              <li class="mb-2">
                <span class="fw-medium text-heading me-2">Status:</span>
                <span class="badge bg-label-success rounded-pill">Active</span>
              </li>
              <li class="mb-2">
                <span class="fw-medium text-heading me-2">Role:</span>
                <span>{{$user->roles[0]->name}}</span>
              </li>
              {{-- <li class="mb-2">
                <span class="fw-medium text-heading me-2">Tax id:</span>
                <span>Tax-8965</span>
              </li> --}}
              <li class="mb-2">
                <span class="fw-medium text-heading me-2">Contact:</span>
                <span>{{ $user->phone }}</span>
              </li>
              {{-- <li class="mb-2">
                <span class="fw-medium text-heading me-2">Languages:</span>
                <span>French</span>
              </li>
              <li class="mb-2">
                <span class="fw-medium text-heading me-2">Country:</span>
                <span>England</span>
              </li> --}}
            </ul>
            <div class="d-flex justify-content-center">
              <a href="javascript:;" class="btn btn-dark me-4" data-bs-target="#editUser" data-bs-toggle="modal">Edit Profile</a>
              {{-- <a href="javascript:;" class="btn btn-outline-danger suspend-user">Suspend</a> --}}
            </div>
          </div>
        </div>
      </div>
      <!-- Edit User Modal -->
      <div class="modal fade" id="editUser" tabindex="-1" aria-labelledby="editUserLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <form id="editUserForm">
              <div class="modal-header">
                <h5 class="modal-title" id="editUserLabel">Edit User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <input type="hidden" name="id" id="userId" value="{{ $user->id }}">
                <input type="hidden" name="usertype" id="userType" value="{{ $user->usertype }}">
                <div class="mb-3">
                  <label for="userName" class="form-label">Full Name</label>
                  <input type="text" class="form-control" id="userName" name="name" value="{{ $user->name }}">
                </div>
                <div class="mb-3">
                  <label for="userEmail" class="form-label">Email</label>
                  <input type="email" class="form-control" id="userEmail" name="email" value="{{ $user->email }}">
                </div>
                <div class="mb-3">
                  <label for="userPhone" class="form-label">Phone</label>
                  <input type="text" class="form-control" id="userPhone" name="phone" value="{{ $user->phone }}">
                </div>
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-dark">Save Changes</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- /User Card -->
      <!-- Plan Card -->
      {{-- <div class="card mb-6 border border-2 border-primary">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <span class="badge bg-label-primary rounded-pill">Standard</span>
            <div class="d-flex justify-content-center">
              <sup class="h5 pricing-currency mt-5 mb-0 me-1 text-primary">$</sup>
              <h1 class="mb-0 text-primary">99</h1>
              <sub class="h6 pricing-duration mt-auto mb-3 fw-normal">month</sub>
            </div>
          </div>
          <ul class="list-unstyled g-2 my-6">
            <li class="mb-2 d-flex align-items-center"><i class="ri-circle-fill text-body ri-10px me-2"></i><span>10 Users</span></li>
            <li class="mb-2 d-flex align-items-center"><i class="ri-circle-fill text-body ri-10px me-2"></i><span>Up to 10 GB storage</span></li>
            <li class="mb-2 d-flex align-items-center"><i class="ri-circle-fill text-body ri-10px me-2"></i><span>Basic Support</span></li>
          </ul>
          <div class="d-flex justify-content-between align-items-center mb-1 fw-medium text-heading">
            <span>Days</span>
            <span>26 of 30 Days</span>
          </div>
          <div class="progress mb-1 rounded">
            <div class="progress-bar rounded" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small>4 days remaining</small>
          <div class="d-grid w-100 mt-6">
            <button class="btn btn-primary" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade Plan</button>
          </div>
        </div>
      </div> --}}
      <!-- /Plan Card -->
    </div>
    <!--/ User Sidebar -->


    <!-- User Content -->
    <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
      {{-- {{dd()}} --}}
      <!-- User Tabs -->
      <div class="nav-align-top">
        <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2">
          <li class="nav-item"><a style="{{ request()->is('app/user/view/job') ? '' : 'color: #4b4b4b;' }}" class="nav-link btn btn-dark active" href="{{url('app/user/view/account')}}"><i class="ri-group-line me-2"></i>Account</a></li>
          @if(!auth()->user()->hasRole('Patient') && $user->usertype != 'Patient')
          <li class="nav-item"><a style="{{ request()->is('app/user/view/job') ? '' : 'color: #4b4b4b;' }}" class="nav-link btn btn-dark" href="{{url('app/user/view/job')}}"><i class="ri-briefcase-4-fill me-2"></i>Job Details</a></li>
          @endif
          <li class="nav-item"><a style="{{ request()->is('app/user/view/job') ? '' : 'color: #4b4b4b;' }}" class="nav-link btn btn-dark" href="javascript:void(0);"><i class="ri-lock-2-line me-2"></i>Security</a></li>
          <li class="nav-item"><a style="{{ request()->is('app/user/view/job') ? '' : 'color: #4b4b4b;' }}" class="nav-link btn btn-dark" href="{{url('app/user/view/billing')}}"><i class="ri-bookmark-line me-2"></i>Billing & Plans</a></li>
          <li class="nav-item"><a style="{{ request()->is('app/user/view/job') ? '' : 'color: #4b4b4b;' }}" class="nav-link btn btn-dark" href="{{url('app/user/view/notifications')}}"><i class="ri-notification-4-line me-2"></i>Notifications</a></li>
          {{-- <li class="nav-item"><a class="nav-link" href="{{url('app/user/view/connections')}}"><i class="ri-link-m me-2"></i>Connections</a></li> --}}
        </ul>
      </div>
        <style>
          .is-invalid {
            border: 1px solid red;
          }
        </style>
      <!--/ User Tabs -->
      <div class="account-content">
        <!-- Project table -->
        @php
          $contacts = App\Models\UserContact::where('user_id', $user->id)
                      ->whereIn('type', ['phone', 'email'])
                      ->orderByDesc('status') // Primary first
                      ->get()
                      ->groupBy('type');
        @endphp

        <form method="POST" action="{{ route('user.contacts.update') }}" id="updateUserContactForm">
          @csrf

          <div class="card mb-6">
            <h5 class="card-header">Basic Details</h5>
            <div class="card-body">

              <!-- Address -->
              <div class="mb-3">
                <label for="address" class="form-label">Address</label>
                <textarea id="address" name="address" class="form-control" rows="4">{{ old('address', $user->address) }}</textarea>
                <input type="hidden" name="u_id" value="{{ $user->id }}">
              </div>

              <!-- DOB -->
              <div class="mb-3">
                <label for="dob" class="form-label">Date of Birth</label>
                <input type="date" id="dob" name="dob" class="form-control" value="{{ old('dob', $user->dob) }}">
              </div>

              <h5 class="card-header">Emergency Contact Details</h5>

              <div class="mb-3">
                <label for="emergency_person_name" class="form-label">Contact Person</label>
                <input type="text" id="emergency_person_name" name="emergency_person_name" class="form-control" value="{{ old('emergency_person_name', $user->emergency_person_name) }}">
              </div>

              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="emergency_phone_no" class="form-label">Phone No</label>
                  <input type="number" id="emergency_phone_no" name="emergency_phone_no" class="form-control" value="{{ old('emergency_phone_no', $user->emergency_phone_no) }}">
                </div>

                <div class="col-md-6 mb-3">
                  <label for="emergency_email" class="form-label">Email</label>
                  <input type="email" id="emergency_email" name="emergency_email" class="form-control" value="{{ old('emergency_email', $user->emergency_email) }}">
                </div>
              </div>


              <!-- Contact Section -->
              <div class="card mt-4">
                <h5 class="card-header">Contact Details</h5>
                <div class="card-body">
                  <div class="row">
                    <!-- Phones -->
                    <div class="col-md-6">
                      <div id="phone-container">
                        @foreach ($contacts['phone'] ?? [] as $index => $phone)
                          <div class="mb-3 phone-entry">
                            <label class="form-label">Phone Number</label>
                            <input type="text" name="phone[{{ $index }}][value]" class="form-control" value="{{ $phone->value }}" id="phone">
                            <input type="hidden" name="phone[{{ $index }}][id]" value="{{ $phone->id }}">
                            <div class="form-check mt-2">
                              <input type="radio" class="form-check-input" name="primary-phone" value="{{ $phone->id }}" {{ $phone->status == 1 ? 'checked' : '' }}>
                              <label class="form-check-label">Primary Phone</label>
                            </div>
                          </div>
                        @endforeach
                      </div>
                      <a href="#" id="add-phone" class="mt-2"><i class="ri-add-box-fill" style="font-size: 30px; color: #4b4b4b;"></i></a>
                    </div>

                    <!-- Emails -->
                    <div class="col-md-6">
                      <div id="email-container">
                        @foreach ($contacts['email'] ?? [] as $index => $email)
                          <div class="mb-3 email-entry">
                            <label class="form-label">Email</label>
                            <input type="email" name="email[{{ $index }}][value]" class="form-control" value="{{ $email->value }}" id="email">
                            <input type="hidden" name="email[{{ $index }}][id]" value="{{ $email->id }}">
                            <div class="form-check mt-2">
                              <input type="radio" class="form-check-input" name="primary-email" value="{{ $email->id }}" {{ $email->status == 1 ? 'checked' : '' }}>
                              <label class="form-check-label">Primary Email</label>
                            </div>
                          </div>
                        @endforeach
                      </div>
                      <a href="#" id="add-email" class="mt-2"><i class="ri-add-box-fill" style="font-size: 30px; color: #4b4b4b;"></i></a>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Submit -->
              <button type="submit" class="btn btn-dark mt-3">Submit</button>
            </div>
          </div>
        </form>
        <script>
          const form = document.getElementById('updateUserContactForm');

          form.addEventListener('submit', function (e) {
            let isValid = true;

            // Clear all invalid classes first
            form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));

            // All required field selectors
            const requiredSelectors = [
              '#address',
              '#dob',
              '#emergency_person_name',
              '#emergency_phone_no',
              '#emergency_email'
            ];

            requiredSelectors.forEach(selector => {
              const field = form.querySelector(selector);
              if (field && !field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
              }
            });

            // Dynamic phone inputs
            const phones = form.querySelectorAll('input[name^="phone"][name$="[value]"]');
            phones.forEach(phone => {
              if (!phone.value.trim()) {
                phone.classList.add('is-invalid');
                isValid = false;
              }
            });

            // Dynamic email inputs
            const emails = form.querySelectorAll('input[name^="email"][name$="[value]"]');
            emails.forEach(email => {
              if (!email.value.trim()) {
                email.classList.add('is-invalid');
                isValid = false;
              }
            });

            if (!isValid) {
              e.preventDefault();
            }
          });

          // Add real-time validation on input
          form.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', function () {
              if (this.classList.contains('is-invalid') && this.value.trim() !== '') {
                this.classList.remove('is-invalid');
              }
            });
          });
        </script>

        <script>
          let phoneIndex = {{ count($contacts['phone'] ?? []) }};
          let emailIndex = {{ count($contacts['email'] ?? []) }};

          document.getElementById('add-phone').addEventListener('click', function () {
            const phoneContainer = document.getElementById('phone-container');
            const phoneEntry = document.createElement('div');
            phoneEntry.classList.add('mb-3', 'phone-entry');
            phoneEntry.innerHTML = `
              <label class="form-label">Phone Number</label>
              <input type="text" name="phone[${phoneIndex}][value]" class="form-control" placeholder="Enter phone number">
              <div class="form-check mt-2">
                <input type="radio" class="form-check-input" name="primary-phone" value="new-${phoneIndex}">
                <label class="form-check-label">Primary Phone</label>
              </div>`;
            phoneContainer.appendChild(phoneEntry);
            phoneIndex++;
          });

          document.getElementById('add-email').addEventListener('click', function () {
            const emailContainer = document.getElementById('email-container');
            const emailEntry = document.createElement('div');
            emailEntry.classList.add('mb-3', 'email-entry');
            emailEntry.innerHTML = `
              <label class="form-label">Email</label>
              <input type="email" name="email[${emailIndex}][value]" class="form-control" placeholder="Enter email">
              <div class="form-check mt-2">
                <input type="radio" class="form-check-input" name="primary-email" value="new-${emailIndex}">
                <label class="form-check-label">Primary Email</label>
              </div>`;
            emailContainer.appendChild(emailEntry);
            emailIndex++;
          });
        </script>
        
        <!-- /Project table -->

        <!-- Activity Timeline -->
        <div class="card mb-6">
          <h5 class="card-header">User Activity Timeline</h5>
          <div class="card-body pt-0">
            <ul class="timeline mb-0 mt-2">
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-primary"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">12 Invoices have been paid</h6>
                    <small class="text-muted">12 min ago</small>
                  </div>
                  <p class="mb-2">
                    Invoices have been paid to the company
                  </p>
                  <div class="d-flex align-items-center mb-1">
                    <div class="badge bg-lighter rounded-3 mb-1_5">
                      <img src="{{asset('assets/img/icons/misc/pdf.png')}}" alt="img" width="15" class="me-2">
                      <span class="h6 mb-0 text-secondary">invoices.pdf</span>
                    </div>
                  </div>
                </div>
              </li>
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-success"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">Client Meeting</h6>
                    <small class="text-muted">45 min ago</small>
                  </div>
                  <p class="mb-2">
                    Project meeting with john @10:15am
                  </p>
                  <div class="d-flex justify-content-between flex-wrap gap-2 mb-1_5">
                    <div class="d-flex flex-wrap align-items-center">
                      <div class="avatar avatar-sm me-2">
                        <img src="{{asset('assets/img/avatars/4.png')}}" alt="Avatar" class="rounded-circle" />
                      </div>
                      <div>
                        <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
                        <small>CEO of {{ config('variables.creatorName') }}</small>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-info"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">Create a new project for client</h6>
                    <small class="text-muted">2 Day Ago</small>
                  </div>
                  <p class="mb-2">
                    6 team members in a project
                  </p>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
                      <div class="d-flex flex-wrap align-items-center">
                        <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
                          <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
                            <img class="rounded-circle" src="{{asset('assets/img/avatars/5.png')}}" alt="Avatar" />
                          </li>
                          <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
                            <img class="rounded-circle" src="{{asset('assets/img/avatars/12.png')}}" alt="Avatar" />
                          </li>
                          <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
                            <img class="rounded-circle" src="{{asset('assets/img/avatars/6.png')}}" alt="Avatar" />
                          </li>
                          <li class="avatar">
                            <span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- /Activity Timeline -->

        <!-- Invoice table -->
        {{-- <div class="card">
          <div class="table-responsive mb-4">
            <table class="table datatable-invoice">
              <thead>
                <tr>
                  <th></th>
                  <th>#</th>
                  <th>Status</th>
                  <th>Total</th>
                  <th>Issued Date</th>
                  <th>Action</th>
                </tr>
              </thead>
            </table>
          </div>
        </div> --}}
        <!-- /Invoice table -->
      </div>

      @if(!auth()->user()->hasRole('Patient') && $user->usertype != 'Patient')
      <div class="job-content">
        <div class="card mb-6">
          <h5 class="card-header">Job details</h5>
          <div class="card-body pt-0">
            <form method="POST" action="{{ route('user.job.update') }}">
              @csrf
          
              <!-- Job Title and Experience (in one row) -->
              @if(auth()->user()->hasRole('Employee'))
                <div class="row mb-3">
                    <!-- Job Title -->
                    <div class="col-md-6">
                        <label for="job_title" class="form-label">Job Title</label>
                        <input type="hidden" name="UserID" value="{{ $user->id }}">
                        <select name="job_title" id="job_title" class="select2 form-select" required>
                            <option value="">Select Job Title</option>
                            @foreach($jobTitles as $title)
                                <option value="{{ $title->id }}" {{ $user && $user->job_title_id == $title->id ? 'selected' : '' }}>
                                    {{ $title->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
            
                    <!-- Experience -->
                    <div class="col-md-6">
                        <label for="experience" class="form-label">Years of Experience</label>
                        <input type="number" name="experience" class="form-control" min="0" 
                              value="{{ $user ? $user->experience : '' }}" required>
                    </div>
                </div>
              @else
                <div class="row mb-3">
                    <!-- Job Title -->
                    <div @if($user && $user->usertype == 'Employee') class="col-md-4" @else class="col-md-6" @endif>
                        <label for="job_title" class="form-label">Job Title</label>
                        <input type="hidden" name="UserID" value="{{ $user->id }}">
                        <select name="job_title" id="job_title" class="select2 form-select" required>
                            <option value="">Select Job Title</option>
                            @foreach($jobTitles as $title)
                                <option value="{{ $title->id }}" {{ $user && $user->job_title_id == $title->id ? 'selected' : '' }}>
                                    {{ $title->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
            
                    <!-- Experience -->
                    <div @if($user && $user->usertype == 'Employee') class="col-md-4" @else class="col-md-6" @endif>
                        <label for="experience" class="form-label">Years of Experience</label>
                        <input type="number" name="experience" class="form-control" min="0" 
                              value="{{ $user ? $user->experience : '' }}" required>
                    </div>

                    @if($user && $user->usertype == 'Employee')
                    <div class="col-md-4">
                        <label for="rate" class="form-label">Rate/hr</label>
                        <input type="number" name="rate" class="form-control" min="0" 
                              value="{{ $user ? $user->rate : '' }}" required>
                    </div>
                    @endif
                </div>
              @endif
          
              <!-- Specializations -->
              <div class="mb-3">
                  <label for="specializations" class="form-label">Specializations</label>
                  <input name="specializations" id="specializations" class="form-control" 
                         value="{{ $user ? $user->specializations : '' }}" required>
              </div>
          
              <button type="submit" class="btn btn-primary">Save</button>
            </form>
          
          
            <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" />
            <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
            <script>
                new Tagify(document.querySelector('#specializations'));
            </script>
          </div>
        </div>

        <!-- Medical Certifications & Licenses Card -->
        <div class="card mt-4">
          <h5 class="card-header">Medical Certifications & Licenses</h5>
          <div class="card-body">
              <form method="POST" action="{{ route('user.certifications.upload') }}" enctype="multipart/form-data">
                  @csrf
                  <input type="hidden" name="user_id" value="{{ $user->id }}">

                  <div id="certificates-container">
                      <div class="row mb-3 certificate-item">
                          <div class="col-md-5">
                              <label class="form-label">Certificate/License Name</label>
                              <input type="text" name="certificates[0][name]" class="form-control" required>
                          </div>
                          <div class="col-md-5">
                              <label class="form-label">Upload File</label>
                              <input type="file" name="certificates[0][file]" class="form-control" required>
                          </div>
                          <div class="col-md-2 d-flex align-items-start">
                            {{-- <button type="button" class="btn btn-danger btn-sm mt-1 remove-certificate" data-id="cert-item-${certIndex}">Remove</button> --}}
                          </div>
                      </div>
                  </div>

                  <button type="button" class="btn btn-secondary mb-3" id="add-certificate">+ Add More</button><br>
                  <button type="submit" class="btn btn-primary">Upload</button>
              </form>

              <!-- Display Uploaded Certifications -->
              @if($user->certifications && $user->certifications->count())
              <hr>
              <h6>Uploaded Certifications & Licenses</h6>
              <ul class="list-group">
                  @foreach($user->certifications as $cert)
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                          <div>{{ $cert->name }}</div>
                          <div>
                              <a href="{{ asset('storage/' . $cert->upload_path) }}" class="btn btn-sm btn-outline-primary" target="_blank">View</a>

                              <form action="{{ route('user.certifications.delete', $cert->id) }}" method="POST" style="display:inline;">
                                  @csrf
                                  @method('DELETE')
                                  <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure?')">Remove</button>
                              </form>
                          </div>
                      </li>
                  @endforeach
              </ul>
              @endif
          </div>
        </div>

        <script>
          let certIndex = 1;
        
          document.getElementById('add-certificate').addEventListener('click', function () {
              const container = document.getElementById('certificates-container');
        
              const html = `
              <div class="row mb-3 certificate-item" id="cert-item-${certIndex}">
                  <div class="col-md-5">
                      <input type="text" name="certificates[${certIndex}][name]" class="form-control" placeholder="Certificate/License Name" required>
                  </div>
                  <div class="col-md-5">
                      <input type="file" name="certificates[${certIndex}][file]" class="form-control" required>
                  </div>
                  <div class="col-md-2 d-flex align-items-start">
                      <button type="button" class="btn btn-danger btn-sm mt-1 remove-certificate" data-id="cert-item-${certIndex}"><i class="ri-delete-bin-2-line"></i></button>
                  </div>
              </div>`;
        
              container.insertAdjacentHTML('beforeend', html);
              certIndex++;
          });
        
          // Delegate remove button click
          document.addEventListener('click', function (e) {
              if (e.target && e.target.classList.contains('remove-certificate')) {
                  const rowId = e.target.getAttribute('data-id');
                  const row = document.getElementById(rowId);
                  if (row) {
                      row.remove();
                  }
              }
          });
        </script>
        


      </div>
      @endif

      <div class="security-content">
        <!-- Change Password -->
        <div class="card mb-6">
          <h5 class="card-header">Change Password</h5>
          <div class="card-body">
            <form id="formChangePassword" method="POST" onsubmit="return false">
              @csrf
              <div class="alert alert-warning alert-dismissible" role="alert">
                <h5 class="alert-heading mb-1">Ensure that these requirements are met</h5>
                <span>Minimum 8 characters long, uppercase & symbol</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              <div class="row gx-5">
                <input type="hidden" name="user_ID" id="user_ID" value="{{ $user->id }}">
                
                <div class="mb-3 col-12 col-sm-6 form-password-toggle">
                  <div class="input-group input-group-merge">
                    <div class="form-floating form-floating-outline">
                      <input class="form-control" type="password" id="newPassword" name="newPassword" placeholder="New Password" />
                      <label for="newPassword">New Password</label>
                    </div>
                    <span class="input-group-text cursor-pointer text-heading"><i class="ri-eye-off-line"></i></span>
                  </div>
                </div>
            
                <div class="mb-3 col-12 col-sm-6 form-password-toggle">
                  <div class="input-group input-group-merge">
                    <div class="form-floating form-floating-outline">
                      <input class="form-control" type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm Password" />
                      <label for="confirmPassword">Confirm New Password</label>
                    </div>
                    <span class="input-group-text cursor-pointer text-heading"><i class="ri-eye-off-line"></i></span>
                  </div>
                  <small id="confirmError" class="text-danger d-none">Passwords do not match</small>
                </div>
            
                <div class="mb-3 col-12">
                  <button type="submit" class="btn btn-dark">Change Password</button>
                </div>
              </div>
            </form>            
          </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
          document.addEventListener('DOMContentLoaded', function () {
            const newPassword = document.getElementById('newPassword');
            const confirmPassword = document.getElementById('confirmPassword');
            const confirmError = document.getElementById('confirmError');
          
            function validatePasswords() {
              if (confirmPassword.value && confirmPassword.value !== newPassword.value) {
                confirmPassword.classList.add('is-invalid');
                confirmError.classList.remove('d-none');
              } else {
                confirmPassword.classList.remove('is-invalid');
                confirmError.classList.add('d-none');
              }
            }
          
            newPassword.addEventListener('input', validatePasswords);
            confirmPassword.addEventListener('input', validatePasswords);
          });
        </script>
          
        <script>
          $('#formChangePassword').on('submit', function (e) {
            e.preventDefault();

            let formData = {
              user_ID: $('#user_ID').val(),
              newPassword: $('#newPassword').val(),
              confirmPassword: $('#confirmPassword').val(),
              _token: '{{ csrf_token() }}'
            };

            $.ajax({
              type: 'POST',
              url: '{{ route("change.password") }}',
              data: formData,
              success: function (response) {
                if (response.success) {
                  // Swal.fire({
                  //   icon: 'success',
                  //   title: 'Password Updated!',
                  //   text: 'The password has been changed!',
                  //   showCancelButton: false,
                  //   confirmButtonText: 'OK',
                  //   customClass: {
                  //     confirmButton: 'btn btn-success'
                  //   },
                  //   buttonsStyling: false
                  // });
                  showBootstrapToast('success', 'Password Updated!', `The password has been changed!`);
                  $('#formChangePassword')[0].reset();
                }
              },
              error: function (xhr) {
                if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;
                  let errorMessages = '';
                  $.each(errors, function (key, value) {
                    errorMessages += value + '<br>';
                  });

                  // Swal.fire({
                  //   icon: 'error',
                  //   title: 'Validation Error',
                  //   html: errorMessages,
                  //   showCancelButton: false,
                  //   confirmButtonText: 'OK',
                  //   customClass: {
                  //     confirmButton: 'btn btn-danger'
                  //   },
                  //   buttonsStyling: false
                  // });
                  showBootstrapToast('error', 'Validation Error', `${errorMessages}`);
                } else {
                  // Swal.fire({
                  //   icon: 'error',
                  //   title: 'Oops...',
                  //   text: 'Something went wrong!',
                  //   showCancelButton: false,
                  //   confirmButtonText: 'OK',
                  //   customClass: {
                  //     confirmButton: 'btn btn-danger'
                  //   },
                  //   buttonsStyling: false
                  // });
                  showBootstrapToast('error', 'Oops...', `Something went wrong!`);
                }
              }
            });
          });

        </script>


        <!--/ Change Password -->

          @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
            <div class="mb-6">
                @livewire('profile.two-factor-authentication-form')
            </div>
          @endif

          <div class="mb-6">
            @livewire('profile.logout-other-browser-sessions-form')
          </div>
      </div>

      <div class="billing-content">
        <!-- Current Plan -->
        <div class="card mb-6">
          <h5 class="card-header">Current Plan</h5>
          <div class="card-body">
            <div class="row row-gap-4">
              <div class="col-xl-6 order-1 order-xl-0">
                <div class="mb-4">
                  <h6 class="mb-1">Your Current Plan is Basic</h6>
                  <p>A simple start for everyone</p>
                </div>
                <div class="mb-4">
                  <h6 class="mb-1">Active until Dec 09, 2021</h6>
                  <p>We will send you a notification upon Subscription expiration</p>
                </div>
                <div class="mb-6">
                  <h6 class="mb-1"><span class="me-2">$199 Per Month</span> <span class="badge bg-label-primary rounded-pill">Popular</span></h6>
                  <p>Standard plan for small to medium businesses</p>
                </div>
              </div>
              <div class="col-xl-6 order-0 order-xl-0">
                <div class="alert alert-warning mb-4 alert-dismissible" role="alert">
                  <h5 class="alert-heading mb-1 d-flex align-items-center">
                    <span class="alert-icon rounded-3"><i class="ri-alert-line ri-22px"></i></span>
                    <span>We need your attention!</span>
                  </h5>
                  <span class="ms-11 ps-1">Your plan requires update</span>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
                </div>
                <div class="plan-statistics">
                  <div class="d-flex justify-content-between">
                    <h6 class="mb-1">Days</h6>
                    <h6 class="mb-1">26 of 30 Days</h6>
                  </div>
                  <div class="progress mb-1 rounded">
                    <div class="progress-bar rounded" style="width: 20%;" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <small>Your plan requires update</small>
                </div>
              </div>
              <div class="col-12 order-2 order-xl-0 d-flex flex-wrap gap-4">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upgradePlanModal">Upgrade Plan</button>
                <button class="btn btn-outline-danger cancel-subscription">Cancel Subscription</button>
              </div>
            </div>
          </div>
        </div>
        <!-- /Current Plan -->

        <!-- Payment Methods -->
        <div class="card card-action mb-6">
          <div class="card-header align-items-center">
            <h5 class="card-action-title mb-0">Payment Methods</h5>
            <div class="card-action-element">
              <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addNewCCModal"><i class="ri-add-line ri-14px me-1"></i>Add Card</button>
            </div>
          </div>
          <div class="card-body">
            <div class="added-cards">
              <div class="cardMaster border p-5 rounded-4 mb-4">
                <div class="d-flex justify-content-between flex-sm-row flex-column">
                  <div class="card-information">
                    <img class="mb-2 img-fluid" src="{{asset('assets/img/icons/payments/mastercard.png')}}" alt="Master Card">
                    <div class="d-flex align-items-center mb-2">
                      <h6 class="mb-0 me-2">Kaith Morrison</h6>
                      <span class="badge bg-label-primary me-1 rounded-pill">Popular</span>
                    </div>
                    <span class="card-number">&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; 9856</span>
                  </div>
                  <div class="d-flex flex-column text-start text-lg-end">
                    <div class="d-flex order-sm-0 order-1 mt-sm-2">
                      <button class="btn btn-sm btn-outline-primary me-4" data-bs-toggle="modal" data-bs-target="#editCCModal">Edit</button>
                      <button class="btn btn-sm btn-outline-danger">Delete</button>
                    </div>
                    <small class="mt-sm-4 mt-2 order-sm-1 order-0 text-sm-end mb-2">Card expires at 12/26</small>
                  </div>
                </div>
              </div>
              <div class="cardMaster border p-5 rounded-4 mb-4">
                <div class="d-flex justify-content-between flex-sm-row flex-column">
                  <div class="card-information">
                    <img class="mb-2 img-fluid" src="{{asset('assets/img/icons/payments/visa.png')}}" alt="Master Card">
                    <h6 class="mb-2 me-2">Tom McBride</h6>
                    <span class="card-number">&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; 6542</span>
                  </div>
                  <div class="d-flex flex-column text-start text-lg-end">
                    <div class="d-flex order-sm-0 order-1 mt-sm-2">
                      <button class="btn btn-sm btn-outline-primary me-4" data-bs-toggle="modal" data-bs-target="#editCCModal">Edit</button>
                      <button class="btn btn-sm btn-outline-danger">Delete</button>
                    </div>
                    <small class="mt-sm-4 mt-2 order-sm-1 order-0 text-sm-end mb-2">Card expires at 10/24</small>
                  </div>
                </div>
              </div>
              <div class="cardMaster border p-5 rounded-4">
                <div class="d-flex justify-content-between flex-sm-row flex-column">
                  <div class="card-information">
                    <img class="mb-2 img-fluid" src="{{asset('assets/img/icons/payments/american-express-logo.png')}}" alt="Visa Card">
                    <div class="d-flex align-items-center mb-2">
                      <h6 class="mb-0 me-2">Lester Jennings</h6>
                      <span class="badge bg-label-danger me-1 rounded-pill">Expired</span>
                    </div>
                    <span class="card-number">&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; 5896</span>
                  </div>
                  <div class="d-flex flex-column text-start text-lg-end">
                    <div class="d-flex order-sm-0 order-1 mt-sm-2">
                      <button class="btn btn-sm btn-outline-primary me-4" data-bs-toggle="modal" data-bs-target="#editCCModal">Edit</button>
                      <button class="btn btn-sm btn-outline-danger">Delete</button>
                    </div>
                    <small class="mt-sm-4 mt-2 order-sm-1 order-0 text-sm-end mb-2">Card expires at 10/27</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--/ Payment Methods -->

        <!-- Billing Address -->
        <div class="card card-action mb-6">
          <div class="card-header align-items-center">
            <h5 class="card-action-title mb-0">Billing Address</h5>
            <div class="card-action-element">
              <button class="btn btn-sm btn-primary edit-address" type="button" data-bs-toggle="modal" data-bs-target="#addNewAddress"><i class='ri-add-line ri-14px me-1'></i>Edit address</button>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-xl-7 col-12">
                <dl class="row mb-0 gx-2">
                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">Company Name:</dt>
                  <dd class="col-sm-7 col-xxl-8">{{ config('variables.templateName') }}</dd>

                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">Billing Email:</dt>
                  <dd class="col-sm-7 col-xxl-8">user@ex.com</dd>

                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">Tax ID:</dt>
                  <dd class="col-sm-7 col-xxl-8">TAX-357378</dd>

                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">VAT Number:</dt>
                  <dd class="col-sm-7 col-xxl-8">SDF754K77</dd>

                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading mb-0">Billing Address:</dt>
                  <dd class="col-sm-7 col-xxl-8 mb-2 mb-xl-0">100 Water Plant <br>Avenue, Building 1303<br> Wake Island</dd>
                </dl>
              </div>
              <div class="col-xl-5 col-12">
                <dl class="row mb-0 gx-2">
                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">Contact:</dt>
                  <dd class="col-sm-7 col-xxl-8">+1 (605) 977-32-65</dd>

                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">Country:</dt>
                  <dd class="col-sm-7 col-xxl-8">Wake Island</dd>

                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">State:</dt>
                  <dd class="col-sm-7 col-xxl-8">Capholim</dd>

                  <dt class="col-sm-5 col-xxl-4 mb-2 text-nowrap fw-medium text-heading">Zipcode:</dt>
                  <dd class="col-sm-7 col-xxl-8">403114</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        <!--/ Billing Address -->
      </div>

      <div class="notification-content">
        <!-- Project table -->
        <div class="card mb-6">
          <!-- Notifications -->
          <h5 class="card-header border-bottom mb-0">Notifications</h5>
          <div class="card-body py-4">
            <span class="h6 mb-0">You will receive notification for the below selected items.</span>
          </div>
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th class="text-nowrap">Type</th>
                  <th class="text-nowrap text-center">Email</th>
                  <th class="text-nowrap text-center">Browser</th>
                  <th class="text-nowrap text-center">App</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-nowrap text-heading">New for you</td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck1" checked />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck2" checked />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck3" checked />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="text-nowrap text-heading">Account activity</td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck4" checked />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck5" checked />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck6" checked />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="text-nowrap text-heading">A new browser used to sign in</td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck7" checked />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck8" checked />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck9" />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="text-nowrap text-heading">A new device is linked</td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck10" checked />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck11" />
                    </div>
                  </td>
                  <td>
                    <div class="form-check mb-0 d-flex justify-content-center">
                      <input class="form-check-input" type="checkbox" id="defaultCheck12" />
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="card-body">
            <button type="submit" class="btn btn-primary me-3">Save changes</button>
            <button type="reset" class="btn btn-outline-secondary">Discard</button>
          </div>
          <!-- /Notifications -->
        </div>
        <!-- /Project table -->
      </div>

      <div class="connections-content">
        <!-- Connected Accounts -->
        <div class="card mb-6">
          <div class="card-header">
            <h5 class="mb-0">Connected Accounts</h5>
            <p class="my-0 card-subtitle">Display content from your connected accounts on your site</p>
          </div>
          <div class="card-body pt-0">
            <div class="d-flex mb-4">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/google.png')}}" alt="google" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                <div class="mb-sm-0 mb-2">
                  <h6 class="mb-50">Google</h6>
                  <span>Calendar and contacts</span>
                </div>
                <div>
                  <div class="form-check form-switch mb-0">
                    <input type="checkbox" class="form-check-input" checked />
                  </div>
                </div>
              </div>
            </div>
            <div class="d-flex mb-4 align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/slack.png')}}" alt="slack" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                <div class="mb-sm-0 mb-2">
                  <h6 class="mb-50">Slack</h6>
                  <span>Communication</span>
                </div>
                <div>
                  <div class="form-check form-switch mb-0">
                    <input type="checkbox" class="form-check-input" />
                  </div>
                </div>
              </div>
            </div>
            <div class="d-flex mb-4 align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/github.png')}}" alt="github" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                <div class="mb-sm-0 mb-2">
                  <h6 class="mb-50">Github</h6>
                  <span>Manage your Git repositories</span>
                </div>
                <div>
                  <div class="form-check form-switch mb-0">
                    <input type="checkbox" class="form-check-input" checked />
                  </div>
                </div>
              </div>
            </div>
            <div class="d-flex mb-4 align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/mailchimp.png')}}" alt="mailchimp" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                <div class="mb-sm-0 mb-2">
                  <h6 class="mb-50">Mailchimp</h6>
                  <span>Email marketing service</span>
                </div>
                <div>
                  <div class="form-check form-switch mb-0">
                    <input type="checkbox" class="form-check-input" checked />
                  </div>
                </div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/asana.png')}}" alt="asana" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 d-flex align-items-center justify-content-between">
                <div class="mb-sm-0 mb-2">
                  <h6 class="mb-50">Asana</h6>
                  <span>Communication</span>
                </div>
                <div>
                  <div class="form-check form-switch mb-0">
                    <input type="checkbox" class="form-check-input" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /Connected Accounts -->

        <!-- Social Accounts -->
        <div class="card mb-6">
          <div class="card-header">
            <h5 class="mb-0">Social Accounts</h5>
            <p class="my-0 card-subtitle">Display content from social accounts on your site</p>
          </div>
          <div class="card-body pt-0">
            <!-- Social Accounts -->
            <div class="d-flex mb-4 align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/facebook.png')}}" alt="facebook" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 row align-items-center me-n1">
                <div class="col-7 mb-sm-0 mb-2">
                  <h6 class="mb-50">Facebook</h6>
                  <span>Not Connected</span>
                </div>
                <div class="col-5 text-end">
                  <button class="btn btn-outline-secondary btn-icon"><i class="ri-link ri-22px"></i></button>
                </div>
              </div>
            </div>
            <div class="d-flex mb-4 align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/twitter.png')}}" alt="twitter" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 row align-items-center me-n1">
                <div class="col-7 mb-sm-0 mb-2">
                  <h6 class="mb-1">Twitter</h6>
                  <a href="{{config('variables.twitterUrl')}}" target="_blank">{{'@'.config('variables.creatorName')}}</a>
                </div>
                <div class="col-5 text-end">
                  <button class="btn btn-outline-danger btn-icon"><i class="ri-delete-bin-7-line ri-22px"></i></button>
                </div>
              </div>
            </div>
            <div class="d-flex mb-4 align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/instagram.png')}}" alt="instagram" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 row align-items-center me-n1">
                <div class="col-7 mb-sm-0 mb-2">
                  <h6 class="mb-1">instagram</h6>
                  <a href="{{config('variables.instagramUrl')}}" target="_blank">{{'@'.config('variables.creatorName')}}</a>
                </div>
                <div class="col-5 text-end">
                  <button class="btn btn-outline-danger btn-icon"><i class="ri-delete-bin-7-line ri-22px"></i></button>
                </div>
              </div>
            </div>
            <div class="d-flex mb-4 align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/dribbble.png')}}" alt="dribbble" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 row align-items-center me-n1">
                <div class="col-7 mb-sm-0 mb-2">
                  <h6 class="mb-50">Dribbble</h6>
                  <span>Not Connected</span>
                </div>
                <div class="col-5 text-end">
                  <button class="btn btn-outline-secondary btn-icon"><i class="ri-link ri-22px"></i></button>
                </div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0">
                <img src="{{asset('assets/img/icons/brands/behance.png')}}" alt="behance" class="me-4" height="36">
              </div>
              <div class="flex-grow-1 row align-items-center me-n1">
                <div class="col-7 mb-sm-0 mb-2">
                  <h6 class="mb-50">Behance</h6>
                  <span>Not Connected</span>
                </div>
                <div class="col-5 text-end">
                  <button class="btn btn-outline-secondary btn-icon"><i class="ri-link ri-22px"></i></button>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <!-- /Social Accounts -->
      </div>
    </div>
    <!--/ User Content -->
  </div>

  <!-- Modal -->
  <!-- /Modal -->

  <script>
    // $(document).ready(function () {
    //     $('#formChangePassword').on('submit', function (e) {
    //         e.preventDefault();
    
    //         var formData = {
    //             user_ID: $('#user_ID').val(),
    //             newPassword: $('#newPassword').val(),
    //             confirmPassword: $('#confirmPassword').val(),
    //             _token: '{{ csrf_token() }}'
    //         };
    
    //         $.ajax({
    //             type: 'POST',
    //             url: '{{ route("change.password") }}',
    //             data: formData,
    //             success: function (response) {
    //                 if (response.success) {
    //                     alert(response.message);
    //                     $('#formChangePassword')[0].reset();
    //                 }
    //             },
    //             error: function (xhr) {
    //                 if (xhr.status === 422) {
    //                     let errors = xhr.responseJSON.errors;
    //                     let errorMsg = '';
    //                     $.each(errors, function (key, value) {
    //                         errorMsg += value + '\n';
    //                     });
    //                     alert(errorMsg);
    //                 } else {
    //                     alert('Something went wrong. Please try again.');
    //                 }
    //             }
    //         });
    //     });
    // });
  </script>
    
  <script>
    document.getElementById('editUserForm').addEventListener('submit', function(e) {
        e.preventDefault();

        let form = this;
        let formData = new FormData(form);

        fetch("{{ route('user-list.store') }}", {
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if(data === 'Updated'){
                // Swal.fire({
                //     title: 'Success!',
                //     text: 'User updated successfully.',
                //     icon: 'success',
                //     confirmButtonText: 'OK'
                // }).then(() => {
                    showBootstrapToast('success', 'Success!', `User updated successfully.`);
                    setTimeout(() => {
                      location.reload();
                    });
                // });
            } else {
                // Swal.fire({
                //     title: 'Update Failed',
                //     text: 'Something went wrong.',
                //     icon: 'error',
                //     confirmButtonText: 'OK'
                // });
                showBootstrapToast('warning', 'Update Failed', `Something went wrong.`);
            }
        })
        .catch(error => {
            console.error("Error:", error);
            // Swal.fire({
            //     title: 'Error',
            //     text: 'An error occurred while updating the user.',
            //     icon: 'error',
            //     confirmButtonText: 'OK'
            // });
            showBootstrapToast('error', 'Error', `An error occurred while updating the user.`);
        });
    });

  </script>
  
  @if(!auth()->user()->hasRole('Patient') && $user->usertype != 'Patient')
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // Get all tab links
        const tabLinks = document.querySelectorAll('.nav-pills .nav-link');
        
        // Get all content divs
        const accountContent = document.querySelector('.account-content');
        const jobContent = document.querySelector('.job-content');
        const securityContent = document.querySelector('.security-content');
        const billingContent = document.querySelector('.billing-content');
        const notificationContent = document.querySelector('.notification-content');
        const connectionsContent = document.querySelector('.connections-content');
        
        // Array of all content divs for easy handling
        const allContentSections = [
          accountContent,
          jobContent,
          securityContent,
          billingContent,
          notificationContent,
          connectionsContent
        ];
        
        // Function to show a specific content section
        function showContentSection(sectionIndex) {
          // Hide all content sections first
          allContentSections.forEach(section => {
            if (section) {
              section.style.display = 'none';
            }
          });
          
          // Show the selected content section
          if (allContentSections[sectionIndex]) {
            allContentSections[sectionIndex].style.display = 'block';
          }
          
          // Update active states on tabs
          tabLinks.forEach(link => {
            link.classList.remove('active');
          });
          tabLinks[sectionIndex].classList.add('active');
        }
        
        // Add click event listeners to all tab links
        tabLinks.forEach((link, index) => {
          link.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent default link behavior
            showContentSection(index);
          });
        });
        
        // Initialize the page - show the first active tab content
        // Find which tab has the 'active' class initially
        let activeTabIndex = 0;
        tabLinks.forEach((link, index) => {
          if (link.classList.contains('active')) {
            activeTabIndex = index;
          }
        });
        
        // Show the active tab content on page load
        showContentSection(activeTabIndex);
      });
    </script>
  @else
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // Get all tab links
        const tabLinks = document.querySelectorAll('.nav-pills .nav-link');
        
        // Get all content divs
        const accountContent = document.querySelector('.account-content');
        const securityContent = document.querySelector('.security-content');
        const billingContent = document.querySelector('.billing-content');
        const notificationContent = document.querySelector('.notification-content');
        const connectionsContent = document.querySelector('.connections-content');
        
        // Array of all content divs for easy handling
        const allContentSections = [
          accountContent,
          securityContent,
          billingContent,
          notificationContent,
          connectionsContent
        ];
        
        // Function to show a specific content section
        function showContentSection(sectionIndex) {
          // Hide all content sections first
          allContentSections.forEach(section => {
            if (section) {
              section.style.display = 'none';
            }
          });
          
          // Show the selected content section
          if (allContentSections[sectionIndex]) {
            allContentSections[sectionIndex].style.display = 'block';
          }
          
          // Update active states on tabs
          tabLinks.forEach(link => {
            link.classList.remove('active');
          });
          tabLinks[sectionIndex].classList.add('active');
        }
        
        // Add click event listeners to all tab links
        tabLinks.forEach((link, index) => {
          link.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent default link behavior
            showContentSection(index);
          });
        });
        
        // Initialize the page - show the first active tab content
        // Find which tab has the 'active' class initially
        let activeTabIndex = 0;
        tabLinks.forEach((link, index) => {
          if (link.classList.contains('active')) {
            activeTabIndex = index;
          }
        });
        
        // Show the active tab content on page load
        showContentSection(activeTabIndex);
      });
    </script>
    
  @endif
  <script>
    function showBootstrapToast(type, title, message) {
    // alert('hreyrgs');
    const icons = {
        success: 'ri-checkbox-circle-fill text-success',
        danger: 'ri-error-warning-fill text-danger',
        warning: 'ri-alert-fill text-warning',
        info: 'ri-information-fill text-info',
        primary: 'ri-home-4-fill',
        secondary: 'ri-spam-fill text-secondary',
        error: 'ri-close-circle-fill text-danger',
        deleted: 'ri-delete-bin-5-fill text-danger',
    };

    const bgColorClass = `bg-white text-black`;

    const toastHTML = `
    <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <i class="${icons[type] || ''} me-2"></i>
        <div class="me-auto fw-medium">${title}</div>
        <small class="text-muted"></small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
        ${message}
        </div>
    </div>`;


    const toastContainer = document.getElementById('toastContainer');
    toastContainer.insertAdjacentHTML('beforeend', toastHTML);

    const toastEl = toastContainer.lastElementChild;
    const bsToast = new bootstrap.Toast(toastEl, { delay: 5000 });
    bsToast.show();

    // Remove toast element after hidden
    toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
}
  </script>
@endsection