@php
  $full_pic_path = "";
  $profile_pic = $user_registration->profile_pic;
  if($profile_pic)
  {
    $base_path=asset('uploads/users_profile_pic');  
    $full_pic_path=$base_path."/".$profile_pic;
  }
  else
  {
    $base_path=asset('dist/images'); 
    $full_pic_path=$base_path."/"."profile-default.png";
  }

  $first_name = $user_registration->first_name;
  $last_name = $user_registration->last_name;

  $mobile = $user_registration->mobile;
  $email = $user_registration->email;
  $instagram_profile = $user_registration->instagram_profile;
  $linked_in = $user_registration->linked_in;
  $about = $user_registration->detail;
  $user_type = $user_registration->user_type;
  $user_name = $user_registration->user_name;
  $user_registration_id = $user_registration->id;
@endphp


<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">Add User</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
    </button>
</div>
<div class="modal-body py-1">
  {{--
  <form id="user_reg_add_user_form" action="{{ route('admin.master.user_registration_link.store_user') }}" method="POST" enctype="multipart/form-data">
    @csrf()
  --}}
  <div class="row">
    <div class="col-5">
      <div class="row">
        <div class="col-12">
          <img class="img-fluid rounded" alt="" id="profile_pic_container" for="file" src="{{ $full_pic_path }}">
        </div>
        <div class="col-12 mt-2">
          <div class="control-group">
            <input type="file" name="profile_pic" id="profile_pic" class="mt-2 form-control" onchange="upload()" form="user_reg_add_user_form"/>
          </div>
        </div>

        <div class="row mt-2">
          <div class="col-6 pe-0">
            <div class="control-group">
              <label class="form-label" for="first_name">First Name
                <span class="text-danger"> * </span>
              </label>

              <input
                type="text"
                class="form-control"
                id="first_name"
                name="first_name"
                placeholder="First Name"
                aria-label="First Name"
                aria-describedby="basic-icon-default-first_name"
                value="{{ $first_name }}"
                form="user_reg_add_user_form"
              />
            </div>
          </div>

          <div class="col-6 pe-0">
            <div class="control-group">
              <label class="form-label" for="last_name">Last Name
                <span class="text-danger">  </span>
              </label>

              <input
                type="text"
                class="form-control"
                id="last_name"
                name="last_name"
                placeholder="Last Name"
                aria-label="Last Name"
                aria-describedby="basic-icon-default-last_name"
                value="{{ $last_name }}"
                form="user_reg_add_user_form"
              />
            </div>
          </div>

        </div>

        <div class="row mt-2">
          <div class="col-6">
            <div class="">Contacts:</div>
          </div>

          <div class="col-6">
            <div class="d-flex gap-3">
              <a href="javascript:void(0);" class="text_copy_to_clipboard_modal" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title = "{{ $mobile }}" clipboard_data = "{{ $mobile }}">
                <i class="fa fa-phone fa-lg"></i>
              </a>

              <a href="javascript:void(0);" class="text_copy_to_clipboard_modal" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title = "{{ $email }}" clipboard_data = "{{ $email }}">
                <i class="fa fa-envelope fa-lg"></i>
              </a>

              <a href="javascript:void(0);" class="text_copy_to_clipboard_modal" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title = "{{ $linked_in }}" clipboard_data = "{{ $linked_in }}">
                <i class="fab fa-linkedin fa-lg"></i>
              </a>

              <a href="javascript:void(0);" class="text_copy_to_clipboard_modal" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title = "{{ $instagram_profile }}" clipboard_data = "{{ $instagram_profile }}">
                <i class="fa-brands fa-square-instagram fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-7">
      <form id="user_reg_add_user_form" action="{{ route('admin.master.user_registration_link.store_user') }}" method="POST" enctype="multipart/form-data">
        @csrf()
        <input type="hidden" id="duplicate_user_name_check_url" value="{{ route('web.duplicate_user_name_check_user_reg_form') }}" />
        <input type="hidden" name="user_registration_id" value="{{ $user_registration_id }}">
        <div class="row">

          <div class="col-12" id="user_name_div">  
            <div class="control-group">
              <label class="form-label" for="user_name">User Name
                <span class="text-danger"> * </span>
              </label>
              <div class="input-group input-group-merge">
                <span id="basic-icon-default-user_name" class="input-group-text">
                  <i class="ti ti-user"></i>
                </span>
                <input
                  type="text"
                  class="form-control"
                  id="user_name"
                  name="user_name"
                  placeholder="User Name"
                  aria-label="User Name"
                  aria-describedby="basic-icon-default-user_name"
                  value="{{ $user_name }}"
                />
              </div>
              <label class="available_class" style="color: green;font-size: 85%;margin-top: 0.25rem;display: none;">user name available
              </label>
            </div>
          </div>

          <div class="col-12 mt-2">  
            <div class="control-group">
              <label class="form-label" for="user_type">User Type
                <span class="text-danger"> * </span>
              </label>
              <select id="user_type" name="user_type" class="select2 form-select">
                @foreach(_USER_TYPE_ARR_ as $_user_type => $user_title)
                  @php
                    $selected="";
                    if($user_type == $_user_type)
                    {
                      $selected="selected";
                    }
                  @endphp
                  <option value="{{ $_user_type }}" {{$selected}}>{{ $user_title }}</option>
                @endforeach
              </select>               
            </div>
          </div>

          <div class="col-sm-12 mt-2">
            <div class="control-group">
              <label for="user_roles" class="form-label">User Role
                <span class="asterisk">*</span>
              </label>
              <select data-placeholder="Select User Role" id="user_roles" name="user_roles[]" class="form-control select2 field_required" multiple>                           
                  @foreach($arr_user_roles as $role_id => $role_nm)
                    <option value= "{{ $role_id }}">{{ $role_nm }}</option>
                  @endforeach
              </select>
            </div>
          </div>

          <div class="col-12 mt-2">
            <div class="control-group">
              <label for="regular-form-1" class="form-label">Rights </label>
              <div class="form-check mt-2">
                <input id="type_1" class="form-check-input" type="checkbox" name="rights[]" value="{!! _MOVE_NEXT_LEVEL_ !!}">
                <label class="form-check-label" for="type_1">Move to Next Level</label>
              </div>
              
              <div class="form-check mt-2">
                <input id="type_2" class="form-check-input" type="checkbox" name="rights[]" value="{!! _SEND_EMAIL_ !!}">
                <label class="form-check-label" for="type_2">Send Master Form Email</label>
              </div>
              
              <div class="form-check mt-2">
                <input id="type_3" class="form-check-input" type="checkbox" name="rights[]" value="{!! _ADD_COMMENTS_RATING_ !!}">
                <label class="form-check-label" for="type_3">Add Comments & Rating</label>
              </div>

              <div class="form-check mt-2">
                <input id="type_4" class="form-check-input" type="checkbox" name="rights[]" value="{!! _VIEW_COMMENTS_RATING_ !!}">
                <label class="form-check-label" for="type_4">View Comments & Rating</label>
              </div>
            </div>
          </div>

          <div class="col-12 mt-2">  
            <div class="control-group">
              <label class="form-label" for="detail">About</label>
              <textarea name="about" class="form-control" id="about" rows="2" placeholder="about"
              >{{ $about }}</textarea>
            </div>
          </div>

        </div>
      </form>
    </div>
  </div>
  {{--</form>--}}
</div>
<div class="modal-footer py-1">
  <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
  <button type="submit" form="user_reg_add_user_form" class="btn btn-sm btn-primary">Submit</button>
</div>



<script>
  upload = () => {
    const render = document.getElementById("profile_pic_container");
    const file = document.querySelector('input[type=file]').files[0]
    const reader = new FileReader();
    reader.addEventListener('load' , ()=> {
      render.src = reader.result;
    }, false)

    if(file){
      reader.readAsDataURL(file);
    }
  }

  $(document).ready(function(){

    //initialization
    $('[data-bs-toggle="tooltip"]').tooltip();
    $('.select2').select2({
      dropdownParent:$('#add_user_modal')
    });
    UserRegisterationLink.userRegAddUserForm();

    //Jquery events
    $('#user_name').on('change keyup keydown',function(){
      if($('#user_name').val())
      {
        $('#user_name_div .available_class').hide(); 
      }
    });

  });
</script>