@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="buyerID">ID Number</label><span class="required">*</span>
                    <input type="text" class="form-control" id="buyerID" name="buyerID" placeholder="A0500M00000000" value="{{$buyerID}}" autocomplete="off" readonly>
                    @if ($errors->has('buyerID'))
                      <div class="error-message">   
                        <strong>{{ $errors->first('buyerID') }}</strong>
                      </div>
                    @endif
                </div>

                <div class="form-group">
                  <label for="buyeraddress">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="buyerdistrict">District</label><span class="required">*</span>
                  <select class="form-control selectpicker" 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}">
                </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="sellername">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="sellerID">ID Number</label><span class="required">*</span>
                    <input type="text" class="form-control" id="sellerID" name="sellerID" placeholder="A0500M00000000" value="{{$sellerID}}" autocomplete="off" readonly>
                    @if ($errors->has('sellerID'))
                      <div class="error-message">   
                        <strong>{{ $errors->first('sellerID') }}</strong>
                      </div>
                    @endif
                </div>

                <div class="form-group">
                  <label for="selleraddress">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="sellerdistrict">District</label><span class="required">*</span>
                  <select class="form-control selectpicker" 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="sellermobile">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}"> -->
                  <input type="text" class="form-control" id="sellermobile" name="sellermobile" placeholder="57777777" autocomplete="off" value="{{$sellermobile}}" readonly pattern="[0-9]{8}">
                </div>
                <div class="form-group">
                  <label for="selleremail">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 class="btn btn-secondary nextBtn btn-sm" type="button">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>
                <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>
                {{-- <div class="form-group">
                  <label for="center">Service Center</label><span class="required">*</span>
                  <select class="form-control selectpicker" name="center" id="center" required>
                    <option disabled selected value>Select Service Center</option>
                    <option value="maseru">Maseru Central-Advice Center</option>
                    <option value="leribe">Leribe-Advice Center</option>
                    <option value="mohale">Mohales Hoek Advice Center</option>
                  </select>
                </div> --}}
                <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">Next</button>
            </div>
        </form>
      </div>
  </div>

    
    <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) {

                    // TO HANDLE THE PROBLEM OF THE NextBtn NOT GOING TO THE NEXT STEP DUE TO VALIDATION PROBLEMS - Disable the readonly attribute to make validation to work
                    curInputs[i].readOnly = false; 

                    document.forms["modify"].reportValidity();
                    isValid = false;
                    $(curInputs[i]).closest(".form-group");
                  }
              }

              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