@extends($appPath)

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class="active">Profile</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    
  </div>
  
</section>
<!-- Main content -->
<section class="content pb-0">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="row">
    <div class="col-md-12">
      <div class="">
          <ul class="nav nav-tabs profile-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active fs-16" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Update Profile</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link fs-16" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Change Password</button>
            </li>
            
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
              @if(user()->isStaff())
              <form action="{{ route('admin.profile.update') }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">   
              @else
              <form action="{{ route(user()->role.'.profile.update') }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
              @endif
                @csrf
                @method('PUT')
                <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                
                    <div class="box-body px-0 profile-box-scroll">
                      <div class="row">
                        <div class="col-auto">
                          <div class="profile-image-box" style="cursor:pointer;">
                            <img src="{{ $user->getProfilePictureUrl() ?: (user()->role == 'superadmin' ? asset('images/dummy_avatar_admin.png') : asset('images/dummy_avatar_admin.png')) }}" class="img-responsive" alt="Profile"/>
                          </div>
                          <input type="file" name="profile_picture" id="profile_picture" style="display:none;">
                        </div>
                        <div class="col-auto">
                            <div class="row">
                              <div class=" {{$user->isTransporter() ? 'col-md-6' : 'col-md-12'}}">
                              
                                <div class="form-group">
                                    <label for="title" class="control-label">Name</label>
                                    <div class="col-field-wrapper">
                                        <input type="text" name="name" class="form-control {{ $user->isTransporter() || $user->isAdmin() ? 'text-muted' : '' }}" id="name" placeholder="Enter Name" value="{{ old('name', $user->name ?? '') }}" {{$user->isTransporter() || $user->isAdmin() ? 'disabled' : ''}}>
                                        @if ($errors->has('name'))
                                        <span class="help-block">{{ $errors->first('name') }}</span>
                                        @endif
                                    </div>
                                </div>
                              </div>
                              <div class=" {{$user->isTransporter() ? 'col-md-6' : 'col-md-12'}}">
                              
                                <div class="form-group">
                                    <label for="description" class="control-label">Email</label>
                                    <div class="col-field-wrapper">
                                        <input type="text" name="email" class="form-control {{ $user->isTransporter() || $user->isAdmin() ? 'text-muted' : '' }}" id="email" placeholder="Enter Email" value="{{ old('email', $user->email ?? '') }}" {{$user->isTransporter() || $user->isAdmin() ? 'disabled' : ''}}>
                                        @if ($errors->has('email'))
                                        <span class="help-block">{{ $errors->first('email') }}</span>
                                        @endif
                                    </div>
                                </div>
                              </div>

                              @if($user->isAdmin())
                                <div class="col-md-12">
                                  <div class="form-group">
                                      <label for="description" class="control-label">Type</label>
                                      <div class="col-field-wrapper">
                                          <input type="text" name="customer_type" class="form-control text-muted" id="customer_type" placeholder="Enter Customer Type" value="{{ old('customer_type', $user->customerTypeName ?? '') }}" disabled>
                                          @if ($errors->has('customer_type'))
                                          <span class="help-block">{{ $errors->first('customer_type') }}</span>
                                          @endif
                                      </div>
                                  </div>
                                </div>
                              @endif

                              @if($user->isTransporter())
                                <div class="col-md-6">
                                  <div class="form-group">
                                      <label for="description" class="control-label">Emergency Contact</label>
                                      <div class="col-field-wrapper">
                                          <input type="text" name="emergency_contact_name" class="form-control" id="emergency_contact_name" placeholder="Emergency Contact Name" value="{{ old('emergency_contact_name', $user->emergency_contact_name ?? '') }}">
                                          @if ($errors->has('emergency_contact_name'))
                                          <span class="help-block">{{ $errors->first('emergency_contact_name') }}</span>
                                          @endif
                                      </div>
                                  </div>
                                </div>

                                <div class="col-md-6">
                                  <div class="form-group">
                                      <label for="description" class="control-label">Emergency Contact Number</label>
                                      <div class="col-field-wrapper">
                                          <input type="text" name="emergency_contact_number" class="form-control" id="emergency_contact_number" placeholder="Emergency Contact Number" value="{{ old('emergency_contact_number', $user->emergency_contact_number ?? '') }}">
                                          @if ($errors->has('emergency_contact_number'))
                                          <span class="help-block">{{ $errors->first('emergency_contact_number') }}</span>
                                          @endif
                                      </div>
                                  </div>
                                </div>
                              @endif
                            </div>
                        </div>
                      </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer px-0">    
                        <div class="col-sm-12 text-end">
                            <a href="{{ route(user()->isStaff() ? 'admin.dashboard' : user()->role.'.dashboard') }}" class="btn btn-outline-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-primary">Update</button>
                            
                        </div>
                        
                    </div>
                  
                <!-- /.box-footer -->
              </form>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
              @if(user()->isStaff())
              <form action="{{ route('admin.profile.changePassword') }}" method="POST" class="form-horizontal change-password-form" enctype="multipart/form-data">
              @else
              <form action="{{ route(user()->role.'.profile.changePassword') }}" method="POST" class="form-horizontal change-password-form" enctype="multipart/form-data">
              @endif
                @csrf
                @method('PUT')
                <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                
                    <div class="box-body px-0 profile-box-scroll">
                      <div class="row">
                        <div class="col-md-4">
                        
                          <div class="form-group">
                              <label for="title" class="control-label">Current Password</label>
                              <div class="position-relative">
                                <input id="password" type="password" autocomplete="off" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter current password">
                                <div class="pass-show-hide-btn" toggle="#password">
                                  <span class="eye-slash-icon active">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
                                  </span>
                                  <span class="eye-icon">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
                                  </span>
                                </div>
                                @if ($errors->has('password'))
                                <span class="invalid-feedback text-danger" role="alert">
                                  <strong>{{ $errors->first('password') }}</strong>
                                </span>
                                @endif
                              </div>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-4">
                        
                          <div class="form-group">
                              <label for="description" class="control-label">New Password</label>
                              <div class="position-relative">
                                <input id="new_password" type="password" autocomplete="off" class="form-control @error('new_password') is-invalid @enderror" name="new_password" placeholder="Enter new password">
                                <div class="pass-show-hide-btn" toggle="#new_password">
                                  <span class="eye-slash-icon active">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
                                  </span>
                                  <span class="eye-icon">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
                                  </span>
                                </div>
                                @if ($errors->has('new_password'))
                                <span class="invalid-feedback text-danger" role="alert">
                                  <strong>{{ $errors->first('new_password') }}</strong>
                                </span>
                                @endif
                              </div>
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="description" class="control-label">Confirm New Password</label>
                              <div class="position-relative">
                                <input id="confirm_password" type="password" autocomplete="off" class="form-control @error('confirm_password') is-invalid @enderror" name="new_password_confirmation" placeholder="Retype new password">
                                <div class="pass-show-hide-btn" toggle="#confirm_password">
                                  <span class="eye-slash-icon active">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
                                  </span>
                                  <span class="eye-icon">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
                                  </span>
                                </div>
                                @if ($errors->has('confirm_password'))
                                <span class="invalid-feedback text-danger" role="alert">
                                  <strong>{{ $errors->first('confirm_password') }}</strong>
                                </span>
                                @endif
                              </div>
                          </div>
                        </div>
                        
                        
                        
                      </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer px-0">
                        <div class="col-sm-12 text-end">
                            <a href="{{ route(user()->isStaff() ? 'admin.dashboard' : user()->role.'.dashboard') }}" class="btn btn-outline-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-primary">Update</button>
                            
                        </div>
                        
                    </div>
                  
                <!-- /.box-footer -->
              </form>
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- /.box -->

</section>




<script type="text/javascript">
  // function to show auto login popup with update link
$(document).ready(function () {

  $('.form-validate').validate({
    debug: false,
    ignore: [],
    errorClass: 'help-block',
    errorElement: 'span',
    rules: {
      name:  { required: true, maxlength: 255 },
      email: { required: true, email: true, maxlength: 255 }
    },
    messages: {
      name:  "Please enter your name.",
      email: {
        required: "Please enter your email.",
        email: "Please enter a valid email."
      }
    },
    highlight: function(el) {
      $(el).closest('.col-field-wrapper').addClass('has-error');
    },
    unhighlight: function(el) {
      $(el).closest('.col-field-wrapper').removeClass('has-error');
    },
    invalidHandler: function(evt, validator) {
      if (!validator.numberOfInvalids()) return;
      $('html, body').animate({ scrollTop: $(validator.errorList[0].element).offset().top - 100 }, 500);
    },
    submitHandler: function(form) {
      var formData = new FormData(form);
      $.ajax({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },    
        url: $(form).attr('action'),
        method: $(form).attr('method'),
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function(res) {
          toastr.success(res.message || 'Profile updated successfully!');
          setTimeout(function() {
            window.location.href = res.redirect
          }, 1200);
        },
        error: function(xhr) {
          if (xhr.status === 422) {
            $(form).validate().showErrors(xhr.responseJSON.errors);
          } else {
            alert('Server error occurred.');
          }
        }
      });
      return false;
    }
  });

  $('.change-password-form').validate({
    debug: false,
    ignore: [],
    errorClass: 'help-block',
    errorElement: 'span',
    rules: {
      // password:{ required: true, minlength: 8 },
      // new_password:{ 
      //   required: true, 
      //   minlength: 8,
      //   pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
      // },
      // new_password_confirmation:{ required: true, equalTo: '#new_password' }
    },
    messages: {
      new_password: {
        required: "Please enter a new password.",
        minlength: "Password must be at least 8 characters long.",
        pattern: "Password must contain at least one uppercase letter, one number, and one special character."
      },
      new_password_confirmation: { required: "Please enter confirm password." , equalTo: 'Passwords did not match.' },
      password: { required: "Please enter your current password." }
    },
    highlight: function(el) {
      $(el).closest('.col-field-wrapper').addClass('has-error');
    },
    unhighlight: function(el) {
      $(el).closest('.col-field-wrapper').removeClass('has-error');
    },
    invalidHandler: function(evt, validator) {
      if (!validator.numberOfInvalids()) return;
      $('html, body').animate({ scrollTop: $(validator.errorList[0].element).offset().top - 100 }, 500);
    },
    submitHandler: function(form) {
      $.ajax({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: $(form).attr('action'),
        method: $(form).attr('method'),
        data: $(form).serialize(),
        dataType: 'json',
        success: function(res) {
          toastr.success(res.message || 'Password changed successfully!');
          setTimeout(function() {
            window.location.href = res.redirect
          }, 1200);
        },
        error: function(xhr) {
          if (xhr.status === 422) {
            // Clear previous error states
            $(form).find('.position-relative').removeClass('has-error');
            $(form).find('.help-block').remove();
            
            // Display server-side validation errors
            var errors = xhr.responseJSON.errors;
            $.each(errors, function(field, messages) {
              var fieldElement = $(form).find('[name="' + field + '"]');
              if (fieldElement.length) {
                var wrapper = fieldElement.closest('.position-relative');
                if (wrapper.length) {
                  wrapper.addClass('has-error');
                  wrapper.append('<span class="help-block text-danger">' + messages[0] + '</span>');
                }
              }
            });
            
            // Scroll to first error
            var firstError = $(form).find('.has-error').first();
            if (firstError.length) {
              $('html, body').animate({ scrollTop: firstError.offset().top - 100 }, 500);
            }
          } else {
            alert('Server error occurred.');
          }
        }
      });
      return false;
    }
  });

  $(document).on('click',".pass-show-hide-btn",function() {
    var input = $($(this).attr("toggle"));
        // console.log(input);
        if (input.attr("type") == "password") {
            input.attr("type", "text");
            $(this).find(".eye-icon").addClass('active');
            $(this).find(".eye-slash-icon").removeClass('active');
        } else {
            input.attr("type", "password");
            $(this).find(".eye-icon").removeClass('active');
            $(this).find(".eye-slash-icon").addClass('active');
        }
  });

  // Auto-activate Change Password tab if change_password=1 in query string
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('change_password') == '1') {
    setTimeout(function() {
      $('#profile-tab').trigger('click');
    }, 200); // Wait for DOM and tabs to be ready
  }
});
</script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var profileBox = document.querySelector('.profile-image-box');
    var fileInput = document.getElementById('profile_picture');
    var img = profileBox ? profileBox.querySelector('img') : null;
    if(profileBox && fileInput) {
      profileBox.addEventListener('click', function() {
        fileInput.click();
      });
      fileInput.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
          var reader = new FileReader();
          reader.onload = function(ev) {
            if(img) img.src = ev.target.result;
          }
          reader.readAsDataURL(e.target.files[0]);
        }
      });
    }
  });
</script>

@endsection