@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" style="margin-top:0;">
       <div class="form-group"><a href="{{route('profile.dashboard')}}" class="closebtn">&times;</a></div>
       <h1>Edit Profile</h1>
       <form id="quickForm" method="post">
          @csrf
          <input type="hidden" name="action" value="update">
          <input type="hidden" name="id" value="{{$user->id}}">
          <div class="form-group">
             <div class="harf fl"> <input type="text" required name="firstname" value="{{$user->firstname}}"  placeholder="Name"></div>
             <div class="harf fr"> <input type="text" required name="lastname" value="{{$user->lastname}}" placeholder="Surname"></div>
             <div class="edit-icon"><img src="{{  asset('front/images/eidt-icon.png')}}"></div>
          </div>
          <div class="form-group">
             <input type="text" required placeholder="Preferred Name"  name="known_as" value="{{$user->pharmacist->known_as}}">
             <div class="edit-icon"><img src="{{  asset('front/images/eidt-icon.png')}}"></div>
          </div>
          <div class="form-group">
             <input type="text" required placeholder="Email" name="email" value="{{$user->email}}">
             <div class="edit-icon"><img src="{{  asset('front/images/eidt-icon.png')}}"></div>
          </div>
          {{--
          <div class="form-group">
             <input type="text" required  placeholder="12-1234-1234567-000" name="bank_account" class="bank_account" value="{{$user->pharmacist->bank_account}}">
             <div class="edit-icon"><img src="{{  asset('front/images/eidt-icon.png')}}"></div>
          </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 == 2 ? 'display:none;' : ''}}">
             <div class="select-wrapper">
                <select class="select2" name="skill_id[]" multiple data-placeholder="Accreditations">
                   @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">
                   @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
                <div class="edit-icon"><img src="{{  asset('front/images/eidt-icon.png')}}"></div>
             </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"  style="padding-top: 0px;">Profile Photo <br>
              {!! fileShow('/uploads/pharmacies/photo/', $user->pharmacist->photo, '30%') !!}
             <input type="file" name="photo">
             </label>
             <label class="upload-file annual_practicing_certificate "  style="padding-top: 0px; {{$user->pharmacist->is_pharmacist == 2 ? 'display:none;' : ''}}" >Annual Practicing Certificate
              {!! fileShow('/uploads/pharmacies/annual_practicing_certificate/', $user->pharmacist->annual_practicing_certificate, '30%') !!}
             <input type="file" name="annual_practicing_certificate">
             </label>
          </div>
          <div class="form-group blue-sl">
             <div class="owl-carousel owl-theme">
                <div class="item">
                  {!! fileShow('/uploads/pharmacies/photo/', $user->pharmacist->photo) !!}
                </div>
             </div>
          </div>
          <div class="form-group"><input type="submit" value="Save" class="add-btn sv-btn"></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();
            $('.skill_id_main').show();
            $('.levels_main').hide();
        }
        else if (this.value == '2') {
            $('.skill_id_main').hide();
            $('.annual_practicing_certificate').hide();
            $('.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('pharmacist.dashboard') }}";
                          window.location.href = redirectUrl;
                      }  , 1000 );
                    }
                } else {
                    showToaster("error", res.msg);
                }
                hideLoader();
            }
        });
    }

    $.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 () {
        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();
    })

    $(document).ready(function() {
              $('.owl-carousel').owlCarousel({
                loop: true,
                 items:1,
                 nav:true,
                margin:0,
                responsiveClass: true,
              })
            })

    var usedRegionOnCalender = @json($usedRegionOnCalender);
    $('#region_id').on('select2:unselecting', function (e) {
      var isUsed = false;
      for(var i in usedRegionOnCalender) {
        if (usedRegionOnCalender[i] == e.params.args.data.id) {
          isUsed = true;
        }
      }
      if(isUsed) {
        showToaster("error", 'There are dates available or booked for this region. Remove from calendar before deleting region');
        return false;
      }

    });
</script>
@endsection