@extends('layouts/layoutMaster')

@section('title', 'Profile')

@section('page-script')
  <script>
    document.addEventListener('DOMContentLoaded', function () {

      const profileForm = document.getElementById('profileForm');

      const fv = FormValidation.formValidation(profileForm, {
        fields: {
          name: {
            validators: {
              notEmpty: { message: 'Please enter name' },
              stringLength: {
                min: 3,
                max: 30,
                message: 'Name must be between 3 and 30 characters'
              },
              regexp: {
                regexp: /^[a-zA-Z0-9 ]+$/,
                message: 'Only letters, numbers and spaces are allowed'
              }
            }
          },

          email: {
            validators: {
              notEmpty: { message: 'Please enter email' },
              emailAddress: { message: 'Enter a valid email address' }
            }
          },

          mobile: {
            validators: {
              notEmpty: { message: 'Please enter mobile number' },
              regexp: {
                regexp: /^[0-9]{10}$/,
                message: 'Mobile number must be a valid 10-digit number'
              }
            }
          },

          current_password: {
            validators: {
              callback: {
                message: 'Current Password must contain uppercase, lowercase, number & special character',
                callback: function (input) {
                  const value = input.value;

                  if (value === '') return true;

                  return /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-z\d@$!%*?&#]{8,}$/.test(value);
                }
              }
            }
          },

          password: {
            validators: {
              callback: {
                message: 'Password must contain uppercase, lowercase, number & special character',
                callback: function (input) {
                  const value = input.value;

                  if (value === '') return true;

                  return /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-z\d@$!%*?&#]{8,}$/.test(value);
                }
              }
            }
          },
        },

        plugins: {
          trigger: new FormValidation.plugins.Trigger(),
          bootstrap5: new FormValidation.plugins.Bootstrap5({
            rowSelector: '.mb-3',
            eleValidClass: ''
          }),
          submitButton: new FormValidation.plugins.SubmitButton(),
          autoFocus: new FormValidation.plugins.AutoFocus()
        }
      });

    });
  </script>
@endsection

@section('content')
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header card_h">
          <div>
            <h4 class="card-title">My Profile</h4>
          </div>
        </div>
        <div class="card-body">
          <form id="profileForm" method="POST" action="{{ route("profile.update") }}" class="row g-3" enctype="multipart/form-data">
            @csrf
            <div class="col-md-6 mb-3">
              <label class="form-label" for="name">Name <span class="required_asterisk">*</span></label>
              <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name" value="{{ $user->name }}" aria-label="John Doe" required/>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="email">Email <span class="required_asterisk">*</span></label>
              <input type="text" id="email" class="form-control" placeholder="john.doe@example.com" aria-label="john.doe@example.com" name="email" value="{{ $user->email }}" required/>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="mobile">Mobile <span class="required_asterisk">*</span></label>
              <input type="tel" name="mobile" id="mobile" class="form-control" onpaste="return false;" value="{{ $user->mobile }}" placeholder="Ex: 7845632101" required>
            </div>
            <hr>
            <div class="row">
              <div class="col-md-6 mb-3">
                <div class="form-password-toggle">
                  <label class="form-label" for="password">Current Password <span class="required_asterisk">*</span></label>
                  <div class="input-group input-group-merge">
                    <input class="form-control" type="password" id="currentpassword" name="currentpassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multicol-password2" />
                    <span class="input-group-text cursor-pointer" id="multicol-password2"><i class="bx bx-hide"></i></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <div class="form-password-toggle">
                  <label class="form-label" for="password">Password <span class="required_asterisk">*</span></label>
                  <div class="input-group input-group-merge">
                    <input class="form-control" type="password" id="password" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multicol-password2" />
                    <span class="input-group-text cursor-pointer" id="multicol-password2"><i class="bx bx-hide"></i></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection