@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>Other details</small></p>
                </div>
            </div>
        </div>
        <form class="forms-sample" action ="{{ route('edit_change_docs') }}" method ="POST" id="modify">
            {{ csrf_field() }}

            <input id="id" type="hidden" class="form-control" name="id" value="{{$applications->id}}"> 
        <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" autocomplete="off" required autofocus value="{{$applications->buyer_name}}">
            </div>
            <div class="form-group">
              <label for="buyerName">ID</label><span class="required">*</span>
              <input type="text" class="form-control" id="buyer_id" name="buyer_id" placeholder="ID" autocomplete="off" required autofocus value="{{$applications->buyerid}}">
            </div>
            <div class="form-group">
              <label for="address">Address</label><span class="required">*</span>
              <input type="text" class="form-control" id="address" name="address" placeholder="Naleli Maseru Lesotho" autocomplete="off" required autofocus value="{{$applications->address}}">
            </div>
            <div class="form-group">
              <label for="district">District</label><span class="required">*</span>
              <select class="form-control selectpicker" name="district" id="district" required>
                <option selected value="{{$applications->district}}">{{$applications->district}}</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="57777777" autocomplete="off" required autofocus pattern="[0-9]{8}" value="{{$applications->buyer_mobile_number}}">

              @if ($errors->has('buyermobile'))
                <div class="error-message">   
                   <strong>{{ $errors->first('buyermobile') }}</strong>
                </div>  
              @endif
            </div>
            <div class="form-group">
              <label for="buyerEmail">Email Address</label>
              <input type="email" class="form-control" id="buyeremail" name="buyeremail" placeholder="Email Address" autocomplete="off" autofocus value="{{ $applications->buyer_email }}">
            </div>
            <div class="form-group">
              <label for="tin">TIN</label>
              <input type="text" class="form-control" id="tin" name="tin" placeholder="000000000-0" pattern="[0-9]{9}[-][0-9]{1}" autocomplete="off" autofocus value="{{ $applications->buyer_tin }}">

              @if ($errors->has('tin'))
                <div class="error-message">   
                   <strong>{{ $errors->first('tin') }}</strong>
                </div>  
              @endif
            </div>
            <button class="btn btn-info nextBtn btn-sm" type="button" style="background: #ff5100; border-color: #fff;">Next</button>
            <a href="{{ url('/changeapps') }}" class="btn btn-secondary right btn-sm">Close
                 </a>
        </div>
        <div class="card-body setup-content" id="step-2">
          <h4 class="cards-title">Other details</h4>
            <div class="form-group">
              <label for="serial">VAT 11 Serial Number</label><span class="required">*</span>
              <input type="text" class="form-control" id="serial" name="serial" placeholder="COO/2001/0-0000" pattern="COO([\/]\d{4}[\/])(\d+[-]\d+)$" autocomplete="off" autofocus value="{{ $applications->vat_number }}" required>

              @if ($errors->has('serial'))
                <div class="error-message">   
                   <strong>{{ $errors->first('serial') }}</strong>
                </div>  
              @endif
              
              <div class="error-message" id="serial_error_message_div">   
                <strong id="serial_error_message"></strong>
              </div>
            </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" autofocus value="{{ $applications->purchase_date }}" required>
              <div class="error-message" id="purchasedate_error_message_div">
                <strong id="purchasedate_error_message"></strong>
              </div>
            </div>
            <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{1,2})?$" autofocus value="{{ $applications->purchase_price }}" required>

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

              @if ($errors->has('vatpaid'))
                <div class="error-message">   
                   <strong>{{ $errors->first('vatpaid') }}</strong>
                </div>  
              @endif
            </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="{{ asset('js/jquery.min.js') }}"></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();

         

          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='email'],input[type='url'],select"),
                  isValid = true;

              $(".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($("#buyeremail").val().length > 0)
              {
                if (!ValidateEmail($("#buyeremail").val())) {
                  $('.validEmail').remove();
                  $("#buyeremail").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');
          
          
          $('#serial_error_message_div').hide();
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
  
  
          $("#serial").on("blur", function(){
              
              const id = $(this).val();
              const _token = $('input[name="_token"]').val();
  
              if(id.length > 0){
  
                $.ajax({
                  type: "GET",
                  contentType: "application/json",
                  url: "{{ route('validate_certificate') }}",
                  data: {
                    certificateID: id,
                    _token: '{{ csrf_token() }}',
                  },
                  dataType: "json",
                  cache: false,
                  timeout: 600000,
                  beforeSend: function() {
  
                  },
                  success: function(response){
                    if(response.success){
  
                    }else{
  
                      $("#serial").addClass("is-invalid");
                      $("#serial_error_message_div").show();
                      $("#serial_error_message").html(response.message);
  
                      $("#serial").val('');
                    }
  
                  },
                  error: function(error){
                    if(error){
  
                      $("#serial").addClass("is-invalid");
                      $("#serial_error_message_div").show();
                      $("#serial_error_message").html('Something went wrong! Please try again later');
  
                      $("#serial").val('');
                    }
                    else{
                        $("#serial").val('');
                    }
                  },
                });
  
              }
              else{
  
                $("#serial").addClass("is-invalid");
                $("#serial_error_message_div").show();
                $("#serial_error_message").html('Certificate ID field is required');
                $("#serial").addClass("is-invalid");
              }
  
          });
  
        $("#serial").on("focus", function() {
          $("#serial").removeClass("is-invalid");
          $("#serial_error_message_div").hide();
          $("#serial_error_message").html("");
        });
  
        $("#serial").on("focus", function() {
          if($(this).hasClass("is-invalid")){
            $(this).removeClass("is-invalid");
          }
        });
      });
    </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">
      $.noConflict();
      jQuery(document).ready(function($){
        $('#purchasedate').datepicker({
          uiLibrary: 'bootstrap4',
          format: 'dd/mm/yyyy',
          change: function (e) {
            if($(this).hasClass("is-invalid")){
                $(this).removeClass("is-invalid");
                $("#purchasedate_error_message_div").hide();
                $("#purchasedate_error_message").html("");
            }
          }
        });
      });
    </script>
@endsection