@extends('front.layouts.app')

@section('title') Welcome to  @endsection
@section('head')
  <style type="text/css">
    .error {
      color: red;
    }
    .sp-btn:hover {
      color: #313484 !important;
      background: #fff !important;
    }

  </style>
@endsection
@section('content')
    <div class="signup-form">
   <h1>Registration</h1>
   <form id="quickForm" method="post">
      @csrf
      <input type="hidden" name="action" value="add">
      <input type="hidden" name="id" value="{{$user->id}}">
      <div class="form-group">
         <input type="text"  placeholder="User Name" value="{{$user->username}}" readonly>
      </div>
      <div class="form-group">
         <input type="password"  placeholder="Password" value="********" readonly>
      </div>
      <div class="form-group">
         <div class="divider"></div>
         <div class="harf fl"> <input type="text" placeholder="Name" name="firstname" value="{{$user->firstname}}" required></div>
         <div class="harf fr"> <input type="text" placeholder="Surname" name="lastname" value="{{$user->lastname}}" required></div>
      </div>
      <div class="form-group">
         <input type="text" placeholder="Preferred Name" name="known_as" required value="{{$user->pharmacist->known_as}}">
      </div>
      <div class="form-group">
         <input type="text" placeholder="Location" name="location" value="{{$user->pharmacist->location}}" required>
      </div>
      <div class="form-group">
         <input type="text" placeholder="Email" name="email" value="{{$user->email}}" readonly>
      </div>
      {{--
      <div class="form-group">
         <input type="text" class="bank_account" placeholder="12-1234-1234567-000" name="bank_account" value="{{$user->pharmacist->bank_account}}" required>
      </div>
      --}}
      <div class="form-group">
         <div class="harf fl">
            <label class="checkbox">Pharmacist
            <input type="radio" name="is_pharmacist" value="1" {{$user->pharmacist->is_pharmacist == 1 ? 'checked' : ''}}>
            <span class="checkmark"></span>
            </label>
         </div>
         <div class="harf fr">
            <label class="checkbox">Technician
            <input type="radio" name="is_pharmacist" value="2" {{$user->pharmacist->is_pharmacist == 2 ? 'checked' : ''}}>
            <span class="checkmark"></span>
            </label>
         </div>
      </div>
      <div class="form-group skill_id_main" style="{{$user->pharmacist->is_pharmacist == 1 ? '' : 'display:none;'}}">
         <div class="select-wrapper">
            <select class="select2" name="skill_id[]" multiple data-placeholder="Accreditations" required>
              @php
                $pharmacistSkill = $user->pharmacistSkill()->pluck('skill_id')->toArray();
               @endphp
               @foreach($skill as $value)
                <option value="{{$value->id}}" {{in_array($value->id, $pharmacistSkill) ? 'selected' : ''}}>{{$value->name}}</option>
               @endforeach
            </select>
         </div>
      </div>
      <div class="form-group levels_main" style="{{$user->pharmacist->is_pharmacist  == 2 ? '' : 'display:none;'}}">
         <div class="select-wrapper">
            <select name="levels" data-placeholder="Qualification">
              <option value="">Select Qualification</option>
              @foreach(App\Model\Level::where('status', 1)->get() as $level)
                 <option value="{{$level->id}}" {{$user->pharmacist->levels == $level->id ? 'selected' : ''}}>{{$level->name}}</option>
              @endforeach
            </select>
         </div>
      </div>
      <div class="form-group">
         <div class="select-wrapper">
            <select class="select2" id="region_id" name="region_id[]" multiple data-placeholder="Select Areas for work" required>
                @php
                    $pharmacistRegion = $user->pharmacistRegion()->pluck('region_id')->toArray();
                  @endphp
               @foreach($region as $value)
                <option value="{{$value->id}}" {{in_array($value->id, $pharmacistRegion) ? 'selected' : ''}}>{{$value->name}}</option>
               @endforeach
            </select>
         </div>
      </div>
      <div id="pharmacist_region">
          @foreach($user->PharmacistRegion as $region)
            <div class="form-group">
               <strong>{{$region->region->name}}</strong> <br>
               <div>
                    <span>$</span>
                  <input type="number" min="25" max="120" value="{{$region->rate_expectation}}" placeholder="Hourly Rate" id="rate_expectation{{$region->region_id}}" name="pharmacist_region[{{$region->region_id}}][rate_expectation]" style="float: unset; width: 94%;" required>
               </div>
               <div class="select-wrapper">
                  <select class="select2" id="accommodation_id_{{$region->region_id}}" name="pharmacist_region[{{$region->region_id}}][accommodation_id][]" multiple data-placeholder="Accommodation" required>
                  @foreach(App\Model\PharmacistRegion::$accommodation as $id => $option)
                     <option value="{{$id}}" {{in_array($id, (array)$region->accommodation_id) ? 'selected' : ''}}>{{$option}}</option>
                  @endforeach
                 </select>
               </div>
               <div class="select-wrapper">
                  <select class="select2" id="travel_costs_id{{$region->region_id}}" name="pharmacist_region[{{$region->region_id}}][travel_costs_id][]" multiple data-placeholder="Travel Costs" required>
                  @foreach(App\Model\PharmacistRegion::$travel_costs as $id => $option)
                    <option value="{{$id}}" {{in_array($id, (array)$region->travel_costs_id) ? 'selected' : ''}}>{{$option}}</option>
                  @endforeach
                 </select>
               </div>
                
            </div>
          @endforeach
      </div>
      <div class="form-group">
         <label>Availability Notes</label>
         <textarea class="text-area" name="availability_notes">{{$user->pharmacist->availability_notes}}</textarea>
      </div>
      <div class="form-group ch">
         <h3>Uploads</h3>
         <label class="upload-file">Profile Photo
         <input type="file" name="photo" >
         <span>Choose File</span>
         </label>
         <small class="form-text text-muted">File type must be jpeg or png less than 2048kb</small>
         <div class="annual_practicing_certificate" style="{{$user->pharmacist->is_pharmacist  == 2 ? 'display:none;' : ''}}">
            <label class="upload-file"  style="padding-top: 0px;">Annual Practicing Certificate
            <input type="file" name="annual_practicing_certificate" id="annual_practicing_certificate" required>
            <span>Choose File</span>
            </label>
            <small class="form-text text-muted">File type must be pdf, jpeg or png less than 2048kb</small>
         </div>
      </div>
      <div class="sign-footer">
         <div class="form-group ch">
            <label>I agree to the following:</label>
            <label class="checkbox" for="privacy_policy"><a href="{{route('privacy-policy')}}" target="_blank">Privacy Policy</a>
            <input type="checkbox" id="privacy_policy" checked>
            <span class="checkmark"></span>
            </label>
            <label class="checkbox" for="terms_and_conditions"><a href="{{route('terms-and-conditions')}}" target="_blank">Terms and Conditions</a>
            <input type="checkbox" id="terms_and_conditions" checked>
            <span class="checkmark"></span>
            </label>
            {{--
            <label class="checkbox" for="cancellation_policy"><a href="{{route('cancellation-policy')}}" target="_blank">Cancellation Policy</a>
            <input type="checkbox" id="cancellation_policy" checked>
            <span class="checkmark"></span>
            </label>
            --}}
         </div>
         <div class="form-group">
          <a href="javascript:;" class="sp-btn save_and_complete_later">Save and complete later</a>
         </div>
         <div class="form-group">
            <input type="submit" name="submit" value="Submit" class="submit-btn" style="display: inline-block;">
            <a class="submit-btn" href="{{ route('logout') }}" style="display: inline-block;">{{ __('Logout') }}</a>
         </div>
      </div>
   </form>
</div>
@endsection


@section('script')
<script src="{{ asset('admin/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script type="text/javascript">
     $('input[type=radio][name=is_pharmacist]').change(function() {
        if (this.value == '1') {
            $('.annual_practicing_certificate').show();
            $("#annual_practicing_certificate").prop('required',true);
            $('.skill_id_main').show();
            $('.levels_main').hide();
        }
        else if (this.value == '2') {
            $('.skill_id_main').hide();
            $('.annual_practicing_certificate').hide();
            $("#annual_practicing_certificate").prop('required',false);
            $('.levels_main').show();
        }
    });
    function submitForm(is_submit) {
      showLoader();
        var formData = new FormData($("#quickForm")[0]);
        $.ajax({
            type: "POST",
            url: "{{ route('pharmacist.registration.store') }}",
            data: formData,
            processData: false,
            contentType: false,
            success: function( res ) {
                if (res.code == 200 || res.code == 0) {
                    msg = res.msg;
                    showToaster("success", msg);
                    if (is_submit) {
                      setTimeout( function(){
                          redirectUrl = "{{ route('thanks-for-registering') }}";
                          window.location.href = redirectUrl;
                      }  , 1000 );
                    }
                } else {
                    showToaster("error", res.msg);
                }
                hideLoader();
            }
        });
    }
    $(".save_and_complete_later").click(function(){
      submitForm();
    });

    $.validator.addMethod("bank_account", function(value, element) {
      // allow any non-whitespace characters as the host part
      return this.optional( element ) || /^\d{2}-\d{4}-\d{7}-\d{3}$/.test( value );
    }, 'Please enter the correct format XX-XXXX-XXXXXXX-XXX.');

    $.validator.setDefaults({
    submitHandler: function () {
        if($("#privacy_policy").prop("checked") == false){
            alert("Please privacy policy read & check");
            return false;
        }
        if($("#terms_and_conditions").prop("checked") == false){
            alert("Please terms and conditions read & check");
            return false;
        }
        {{--
        if($("#cancellation_policy").prop("checked") == false){
            alert("Please cancellation policy read & check");
            return false;
        }
        --}}
        submitForm(true);
    }
  });
  $('#quickForm').validate({
    rules: {
      //bank_account : { bank_account: true }
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      if (element.closest('.select-wrapper').length) {
         element.closest('.select-wrapper').append(error);
      } else {
         element.after(error);
      }
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });
  $("#region_id").change(function(){
    var html = "";
    $("#region_id").find("option:selected").each(function(){
        html += '<div class="form-group">';
        html += '   <strong>'+$(this).html()+'</strong> <br>';
        html += '   <div>';
        html += '   <span>$</span>';
        var selected = $("#rate_expectation"+$(this).val()).val();
        html += '      <input type="number" min="25" max="120" value="'+(selected ?? '')+'" placeholder="Hourly Rate" id="rate_expectation'+$(this).val()+'" name="pharmacist_region['+$(this).val()+'][rate_expectation]" style="float: unset; width: 94%;" required>';
        html += '   </div>'
        html += '   <div class="select-wrapper">';
        html += '      <select class="select2" id="accommodation_id_'+$(this).val()+'" name="pharmacist_region['+$(this).val()+'][accommodation_id][]" multiple data-placeholder="Accommodation" required>';
        var selected = $("#accommodation_id_"+$(this).val()).val();
        @foreach(App\Model\PharmacistRegion::$accommodation as $id => $option)
            html += '          <option value="{{$id}}" '+(selected == '{{$id}}' ? 'selected' : '')+'>{{$option}}</option>';
        @endforeach
        html += '     </select>';
        html += '   </div>';
        html += '   <div class="select-wrapper">';
        html += '      <select class="select2" id="travel_costs_id'+$(this).val()+'" name="pharmacist_region['+$(this).val()+'][travel_costs_id][]" multiple data-placeholder="Travel Costs" required>';
        var selected = $("#travel_costs_id"+$(this).val()).val();
        @foreach(App\Model\PharmacistRegion::$travel_costs as $id => $option)
            html += '          <option value="{{$id}}" '+(selected == '{{$id}}' ? 'selected' : '')+'>{{$option}}</option>';
        @endforeach
        html += '     </select>';
        html += '   </div>';
        
        html += '</div>';
    });

    $("#pharmacist_region").html(html);
    $(".select2").select2();
  })
</script>
@endsection