@extends('layouts.vat')

@section('content')

	@if (session('status'))
      <div class="alert alert-success">
          {{ session('status') }}
      </div>
  @endif  
  @if (session('info'))
      <div class="alert alert-info">
          {{ session('info') }}
      </div>
  @endif
  @if (session('warning'))
      <div class="alert alert-warning">
          {{ session('warning') }}
      </div>
  @endif
  <div class="content-wrapper">
	    <div class="card">
        <div class="stepwizard">
            <div class="stepwizard-row setup-panel">
                <div class="stepwizard-step col-xs-3"> 
                    <a href="#step-1" type="button" class="btn btn-orange btn-circle">1</a>
                    <p><small>Details of the buyer</small></p>
                </div>
                <div class="stepwizard-step col-xs-3"> 
                    <a href="#step-2" type="button" class="btn btn-secondary btn-circle" disabled="disabled">2</a>
                    <p><small>Details of the seller</small></p>
                </div>
                <div class="stepwizard-step col-xs-3"> 
                    <a href="#step-3" type="button" class="btn btn-secondary btn-circle" disabled="disabled">3</a>
                    <p><small>Other details</small></p>
                </div>
            </div>
        </div>
        <form class="forms-sample" action ="{{ route('modify_attach') }}" method ="POST" role="form" id="modify">
            {{ csrf_field() }}
        <input id="certificateID" type="hidden" class="form-control" name="certificateID" value="{{$certificateID}}">
        @for($index; $index<$count; $index++)
        <input id="fields" type="hidden" class="form-control" name="fields[]" value="{{$fields[$index]}}">
        @endfor
        <div class="card-body setup-content" id="step-1">
          <h4 class="cards-title">Details of the Buyer</h4>
            <div class="form-group">
              <label for="buyerName">Full Name</label><span class="required">*</span>
              <input type="text" class="form-control" id="buyername" name="buyername" placeholder="Full Name" value="{{$buyername}}" autocomplete="off" readonly>
            </div>
            <div class="form-group">
              <label for="address">Address</label><span class="required">*</span>
              <input type="text" class="form-control" id="buyeraddress" name="buyeraddress" placeholder="Naleli Maseru" value="{{$buyeraddress}}" autocomplete="off" readonly>
            </div>
            <div class="form-group">
              <label for="district">District</label><span class="required">*</span>
              <select class="form-control" name="buyerdistrict" id="buyerdistrict" readonly>
                <option selected value="{{$buyerdistrict}}">{{$buyerdistrict}}</option>
                <option value="Mokhotlong">Mokhotlong</option>
                <option value="Thaba-Tseka">Thaba-Tseka</option>
                <option value="Butha-Buthe">Butha-Buthe</option>
                <option value="Leribe">Leribe</option>
                <option value="Berea">Berea</option>
                <option value="Maseru">Maseru</option>
                <option value="Mafeteng">Mafeteng</option>
                <option value="Mohale's Hoek">Mohale's Hoek</option>
                <option value="Quthing">Quthing</option>
                <option value="Qacha's Nek">Qacha's Nek</option>
              </select>
            </div>
            <div class="form-group">
              <label for="buyerMobile">Mobile Number</label><span class="required">*</span>
              <input type="text" class="form-control" id="buyermobile" name="buyermobile" placeholder="26657777777" value="{{$buyermobile}}" autocomplete="off" readonly pattern="([+])?[0-9]{8,11}">
            </div>
            <div class="form-group">
              <label for="buyerEmail">Email Address</label>
              <input type="email" class="form-control" id="buyeremail" name="buyeremail" placeholder="Email Address" value="{{$buyeremail}}" autocomplete="off" readonly>
            </div>
            <button class="btn btn-info nextBtn btn-sm" type="button" style="background: #ff5100; border-color: #fff;">Next</button>
            <a href="{{ url('/vat_num') }}" class="btn btn-secondary right btn-sm">Close
                 </a>
        </div>
        <div class="card-body setup-content" id="step-2">
          <h4 class="cards-title">Details of the Seller</h4>
            <div class="form-group">
              <label for="buyerName">Full Name</label><span class="required">*</span>
              <input type="text" class="form-control" id="sellername" name="sellername" placeholder="Full Name" autocomplete="off" value="{{$sellername}}" readonly>
            </div>
            <div class="form-group">
              <label for="address">Address</label><span class="required">*</span>
              <input type="text" class="form-control" id="selleraddress" name="selleraddress" placeholder="Naleli Maseru" autocomplete="off" value="{{$selleraddress}}" readonly>
            </div>
            <div class="form-group">
              <label for="district">District</label><span class="required">*</span>
              <select class="form-control" name="sellerdistrict" id="sellerdistrict" readonly>
                <option selected value="{{$sellerdistrict}}">{{$sellerdistrict}}</option>
                <option value="Mokhotlong">Mokhotlong</option>
                <option value="Thaba-Tseka">Thaba-Tseka</option>
                <option value="Butha-Buthe">Butha-Buthe</option>
                <option value="Leribe">Leribe</option>
                <option value="Berea">Berea</option>
                <option value="Maseru">Maseru</option>
                <option value="Mafeteng">Mafeteng</option>
                <option value="Mohale's Hoek">Mohale's Hoek</option>
                <option value="Quthing">Quthing</option>
                <option value="Qacha's Nek">Qacha's Nek</option>
              </select>
            </div>
            <div class="form-group">
              <label for="buyerMobile">Mobile Number</label><span class="required">*</span>
              <input type="text" class="form-control" id="sellermobile" name="sellermobile" placeholder="57777777" autocomplete="off" value="{{$sellermobile}}" readonly pattern="([+])?[0-9]{8,11}">
            </div>
            <div class="form-group">
              <label for="buyerEmail">Email Address</label>
              <input type="email" class="form-control" id="selleremail" name="selleremail" placeholder="Email Address" autocomplete="off" value="{{$selleremail}}" readonly>
            </div>
            
            <button class="btn btn-danger backBtn btn-sm" type="button" style="background: #ff5100; border-color: #fff;">back</button>
            <button type="button" class="btn btn-secondary nextBtn btn-sm">Next</button>
        </div>
        <!-- <div class="card-body setup-content" id="step-3">
          <h4 class="cards-title">Other details</h4>
            <div class="form-group">
              <label for="purchasePrice">Purchase Price (Excl.VAT)</label><span class="required">*</span>
              <input type="text" class="form-control" id="purchaseprice" name="purchaseprice" placeholder="000.00" autocomplete="off" pattern="^\d*(\.\d{0,2})?$" readonly value="{{$purchaseprice}}">

              @if ($errors->has('purchaseprice'))
                <div class="error-message">   
                   <strong>{{ $errors->first('purchaseprice') }}</strong>
                </div>  
              @endif
            </div>
            <div class="form-group">
              <label for="purchasevat">VAT Paid</label>
              <input type="text" class="form-control" id="purchasevat" name="purchasevat" placeholder="000.00" autocomplete="off" pattern="^\d*(\.\d{0,2})?$" readonly value="{{$purchaseVAT}}">

              @if ($errors->has('purchasevat'))
                <div class="error-message">   
                   <strong>{{ $errors->first('purchasevat') }}</strong>
                </div>  
              @endif
            </div>
            <div class="form-group">
              <label for="purchaseDate">Purchase Date</label><span class="required">*</span>
              <input type="text" class="form-control pdate" id="purchasedate" name="purchasedate" placeholder="dd/mm/YYYY" autocomplete="off" readonly value="{{$purchasedate}}">
              <div class="error-message" id="purchasedate_error_message_div">
                  <strong id="purchasedate_error_message"></strong>
              </div>
            </div>
            <div class="form-group">
              <label for="vehiclemake">Vehicle Make</label><span class="required">*</span>
              <input type="text" class="form-control" id="vehiclemake" name="vehiclemake" placeholder="" autocomplete="off" readonly value="{{$vehiclemake}}">
            </div>
            <div class="form-group">
              <label for="chassisnumber">Chassis Number</label><span class="required">*</span>
              <input type="text" class="form-control" id="chassisnumber" name="chassisnumber" placeholder="" autocomplete="off" readonly value="{{$chassisnumber}}">

              @if ($errors->has('serial'))
                <div class="error-message">   
                   <strong>{{ $errors->first('serial') }}</strong>
                </div>  
              @endif
            </div>
            <div class="form-group">
              <label for="enginenumber">Engine Number</label><span class="required">*</span>
              <input type="text" class="form-control" id="enginenumber" name="enginenumber" placeholder="" autocomplete="off" readonly value="{{$enginenumber}}">
            </div>
            <input type="hidden" class="form-control" value="Digital Services" name="center" id="center">
            <button class="btn btn-danger backBtn btn-sm" type="button" style="background: #ff5100; border-color: #fff;">back</button>
            <button type="submit" class="btn btn-secondary btn-sm" id="lastNextBtn">Next</button>
          </form>
        </div> -->

        <div class="card-body setup-content" id="step-3">
          <h4 class="cards-title">Other details</h4>
            <div class="form-group">
              <label for="purchasePrice">Purchase Price (Excl.VAT)</label><span class="required">*</span>
              <input type="text" class="form-control" id="purchaseprice" name="purchaseprice" placeholder="000.00" pattern="^\d*(\.\d{0,2})?$" autocomplete="off" readonly value="{{$purchaseprice}}">

              @if ($errors->has('purchaseprice'))
                <div class="error-message">   
                   <strong>{{ $errors->first('purchaseprice') }}</strong>
                </div>  
              @endif
            </div>
            <div class="form-group">
              <label for="purchasevat">VAT Paid</label>
              <input type="text" class="form-control" id="purchasevat" name="purchasevat" placeholder="000.00" pattern="^\d*(\.\d{0,2})?$" autocomplete="off" readonly value="{{$purchaseVAT}}">

              @if ($errors->has('purchasevat'))
                <div class="error-message">   
                   <strong>{{ $errors->first('purchasevat') }}</strong>
                </div>  
              @endif
            </div>
            <div class="form-group">
              <label for="purchaseDate">Purchase Date</label><span class="required">*</span>
              <input type="text" class="form-control" id="purchasedate" name="purchasedate" placeholder="dd/mm/YYYY" autocomplete="off" readonly value="{{$purchasedate}}">
              <div class="error-message" id="purchasedate_error_message_div">
                <strong id="purchasedate_error_message"></strong>
              </div>
            </div>
            <div class="form-group">
              <label for="vehiclemake">Vehicle Make</label><span class="required">*</span>
              <input type="text" class="form-control" id="vehiclemake" name="vehiclemake" placeholder="" autocomplete="off" readonly value="{{$vehiclemake}}">
            </div>
            <div class="form-group">
              <label for="chassisnumber">Chassis Number</label><span class="required">*</span>
              <input type="text" class="form-control" id="chassisnumber" name="chassisnumber" placeholder="" autocomplete="off" readonly value="{{$chassisnumber}}">

              @if ($errors->has('serial'))
                <div class="error-message">   
                   <strong>{{ $errors->first('serial') }}</strong>
                </div>  
              @endif
            </div>
            <div class="form-group">
              <label for="enginenumber">Engine Number</label><span class="required">*</span>
              <input type="text" class="form-control" id="enginenumber" name="enginenumber" placeholder="" autocomplete="off" readonly value="{{$enginenumber}}">
            </div>
            <input type="hidden" class="form-control" value="Digital Services" name="center" id="center">
            <button class="btn btn-secondary backBtn btn-sm" type="button">back</button>
            <button type="submit" class="btn btn-info btn-sm" style="background: #ff5100; border-color: #fff;" id="lastNextBtn">Next</button>
          </form>
        </div>
    </div>

    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>-->

    <!-- <script src="{{ asset('js/jquery.min.js') }}"></script> -->
    
    <!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {

          var navListItems = $('div.setup-panel div a'),
              allWells = $('.setup-content'),
              allNextBtn = $('.nextBtn'),
              form = $('.forms-sample');
          var allBackBtn = $('.backBtn');    

          allWells.hide();

          var fields = @json($fields),
              curInputss = form.find("input[type='text'],input[type='email'],input[type='url'],select");

          for (var i = 0; i < fields.length; i++) {
            for (var z = 0; z < curInputss.length; z++){
              if (curInputss[z].name == fields[i]) {
                $(curInputss[z]).attr('required', '').removeAttr('readonly');
              }
            }
          }

          navListItems.click(function (e) {
              e.preventDefault();
              var $target = $($(this).attr('href')),
                  $item = $(this);

              if (!$item.hasClass('disabled')) {
                  navListItems.removeClass('btn-orange').addClass('btn-secondary');
                  $item.addClass('btn-orange');
                  allWells.hide();
                  $target.show();
                  $target.find('input:eq(0)').focus();
              }
          });

          /*allNextBtn.click(function () {
            var curStep = $(this).closest(".setup-content"),
                  curStepBtn = curStep.attr("id"),
                  nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                  curInputs = curStep.find("input[type='text'],input[type='url']"),
                  isValid = true;

                  $(".form-group").removeClass("has-error");

                  var options = {
                          rules: {
                              'buyername': 
                              { 
                                required: true 
                              },
                              'buyermobile':
                              {
                                required:true
                              }
                          }
                      };
                      var formObject = new ej.inputs.FormValidator('#modify',options);
                      

                      formObject.validate();
                    
                        nextStepWizard.removeAttr('disabled').trigger('click');
                      
          });*/

          allNextBtn.click(function () {
              var curStep = $(this).closest(".setup-content"),
                  curStepBtn = curStep.attr("id"),
                  nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                  curInputs = curStep.find("input[type='text'],input[type='email'],input[type='url'],select"),
                  isValid = true;
              var email = curStep.find("input[type='email']");     

              $(".form-group").removeClass("has-error");
              for (var i = 0; i < curInputs.length; i++) {
                  if (!curInputs[i].validity.valid) {

                      /*var options = {
                          rules: {
                              'buyername': 
                              { 
                                required: true 
                              },
                              'buyermobile':
                              {
                                required:true
                              }
                          }
                      };
                      var formObject = new ej.inputs.FormValidator('#modify',options);
                      formObject.validate()*/
                      document.forms["modify"].reportValidity();
                      isValid = false;
                      $(curInputs[i]).closest(".form-group");
                      //$(curInputs[i]).closest(".form-group").addClass("has-error").after('<span class="">This field is required</span>');
                  }
              }

              if(email.val().length > 0)
              {
                if (!ValidateEmail(email.val())) {
                  $('.validEmail').remove();
                  email.after('<small class="validEmail" style="color:red;">Invalid email address</small>');
                  isValid = false;
                }

                else
                {
                  $('.validEmail').remove();
                }
              }
              else
              {
                $('.validEmail').remove();
              }

              if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
          });

          allBackBtn.click(function () {
              var curStep = $(this).closest(".setup-content"),
                  curStepBtn = curStep.attr("id"),
                  backStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");


              backStepWizard.removeAttr('disabled').trigger('click');
          });

          $('div.setup-panel div a.btn-orange').trigger('click');
      });
    </script>

    <script type = "text/javascript">
        function ValidateEmail(email) {
            var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            return expr.test(email);
        };
    </script>

    <script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      var fields = @json($fields);
      var pdate = false;
      var sdistrict = false;
      var bdistrict = false;
      for (var i = 0; i < fields.length; i++) 
      {
        if (fields[i] == 'purchasedate')
        {
          pdate = true;
        }
        if (fields[i] == 'sellerdistrict')
        {
          sdistrict = true;
        }
        if (fields[i] == 'buyerdistrict')
        {
          bdistrict = true;
        }
      }

      if(pdate){
        $.noConflict(); 
        jQuery(document).ready(function($){
          $('#purchasedate').datepicker({
          uiLibrary: 'bootstrap4',
          format: 'dd/mm/yyyy'
          });
        });
      }
      if(!sdistrict)
      {
       $('#sellerdistrict option:not(:selected)').attr('disabled', '');
      }
      if(!bdistrict)
      {
       $('#buyerdistrict option:not(:selected)').attr('disabled', '');
      }
    </script> -->

    <script src="{{ asset('js/jquery.min.js') }}"></script>
    
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {

          var navListItems = $('div.setup-panel div a'),
              allWells = $('.setup-content'),
              allNextBtn = $('.nextBtn'),
              form = $('.forms-sample');
          var allBackBtn = $('.backBtn');    

          allWells.hide();

          var fields = @json($fields),
              curInputss = form.find("input[type='text'],input[type='email'],input[type='url'],select");

          for (var i = 0; i < fields.length; i++) {
            for (var z = 0; z < curInputss.length; z++){
              if (curInputss[z].name == fields[i]) {
                $(curInputss[z]).attr('required', '').removeAttr('readonly');
              }
            }
          }

          navListItems.click(function (e) {
              e.preventDefault();
              var $target = $($(this).attr('href')),
                  $item = $(this);

              if (!$item.hasClass('disabled')) {
                  navListItems.removeClass('btn-orange').addClass('btn-secondary');
                  $item.addClass('btn-orange');
                  allWells.hide();
                  $target.show();
                  $target.find('input:eq(0)').focus();
              }
          });

          /*allNextBtn.click(function () {
            var curStep = $(this).closest(".setup-content"),
                  curStepBtn = curStep.attr("id"),
                  nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                  curInputs = curStep.find("input[type='text'],input[type='url']"),
                  isValid = true;

                  $(".form-group").removeClass("has-error");

                  var options = {
                          rules: {
                              'buyername': 
                              { 
                                required: true 
                              },
                              'buyermobile':
                              {
                                required:true
                              }
                          }
                      };
                      var formObject = new ej.inputs.FormValidator('#modify',options);
                      

                      formObject.validate();
                    
                        nextStepWizard.removeAttr('disabled').trigger('click');
                      
          });*/

          allNextBtn.click(function () {
              var curStep = $(this).closest(".setup-content"),
                  curStepBtn = curStep.attr("id"),
                  nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                  curInputs = curStep.find("input[type='text'],input[type='email'],input[type='url'],select"),
                  isValid = true;
              var email = curStep.find("input[type='email']");     

              $(".form-group").removeClass("has-error");
              for (var i = 0; i < curInputs.length; i++) {
                  if (!curInputs[i].validity.valid) {

                      /*var options = {
                          rules: {
                              'buyername': 
                              { 
                                required: true 
                              },
                              'buyermobile':
                              {
                                required:true
                              }
                          }
                      };
                      var formObject = new ej.inputs.FormValidator('#modify',options);
                      formObject.validate()*/
                      document.forms["modify"].reportValidity();
                      isValid = false;
                      $(curInputs[i]).closest(".form-group");
                      //$(curInputs[i]).closest(".form-group").addClass("has-error").after('<span class="">This field is required</span>');
                  }
              }

              if(email.val().length > 0)
              {
                if (!ValidateEmail(email.val())) {
                  $('.validEmail').remove();
                  email.after('<small class="validEmail" style="color:red;">Invalid email address</small>');
                  isValid = false;
                }

                else
                {
                  $('.validEmail').remove();
                }
              }
              else
              {
                $('.validEmail').remove();
              }

              if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
          });

          allBackBtn.click(function () {
              var curStep = $(this).closest(".setup-content"),
                  curStepBtn = curStep.attr("id"),
                  backStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");


              backStepWizard.removeAttr('disabled').trigger('click');
          });

          $('div.setup-panel div a.btn-orange').trigger('click');
      });
    </script>

    <script type = "text/javascript">
        function ValidateEmail(email) {
            var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            return expr.test(email);
        };
    </script>

    <script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      var fields = @json($fields);
      var pdate = false;
      var sdistrict = false;
      var bdistrict = false;
      for (var i = 0; i < fields.length; i++) 
      {
        if (fields[i] == 'purchasedate')
        {
          pdate = true;
        }
        if (fields[i] == 'sellerdistrict')
        {
          sdistrict = true;
        }
        if (fields[i] == 'buyerdistrict')
        {
          bdistrict = true;
        }
      }

      if(pdate){
        $.noConflict(); 
        jQuery(document).ready(function($){
          $('#purchasedate').datepicker({
          uiLibrary: 'bootstrap4',
          format: 'dd/mm/yyyy'
          });
        });
      }
      if(!sdistrict)
      {
       $('#sellerdistrict option:not(:selected)').attr('disabled', '');
      }
      if(!bdistrict)
      {
       $('#buyerdistrict option:not(:selected)').attr('disabled', '');
      }
    </script>
@endsection