@extends('layouts.vat')

@section('content')

@if (\Session::has('warning'))
    <div class="alert alert-warning">
        {{ session('warning') }}
    </div>
@endif 
@if (\Session::has('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif 
 <center>
 <div class="col-sm-9">

<div class="card">
  <div class="card-body">
    <h5 class="card-title" >Load VAT 11 certificate</h5>
    <form method="POST" action="{{ route('load_certificates') }}" autocomplete="off">
         {{ csrf_field() }} 
          <div class="form-group">
            <div style="text-align: left;">
            <label for="search" style="text-align: left">Search With</label>
            </div>
            <select class="form-control selectpicker" name="search" id="search" autofocus required>
              <option selected value='ID'>Certificate ID</option>
              <option value="chassis">Chassis Number</option>
              <option value="engine">Engine Number</option>
            </select>
          </div>
          <div class="form-group" id="certificatediv">
            <div style="text-align: left;">
            <label for="certificateID">Certificate Number</label><span class="required">*</span>
            </div>
            <input type="textfield" name="certificateID" id="certificateID" class="form-control" placeholder="eg. COO/2019/4-1190" required pattern="COO([\/]\d{4}[\/])(\d+[-]\d+)$"/>
          </div>
          <div class="form-group" id="chassisdiv">
            <div style="text-align: left;">
            <label for="chassis">Chassis Number</label><span class="required">*</span>
            </div>
            <input type="textfield" name="chassis" id="chassis" class="form-control" placeholder=""/>
          </div>
          <div class="form-group" id="enginediv">
            <div style="text-align: left;">
            <label for="engine">Engine Number</label><span class="required">*</span>
            </div>
            <input type="textfield" name="engine" id="engine" class="form-control" placeholder=""/>
          </div>
          <div class="form-group">
            <div style="text-align: left;">
            <label for="buyerName" style="text-align: left">Mobile Number</label><span class="required">*</span>
            </div>
            <input type="textfield" name="mobile" id="mobile" class="form-control" placeholder="57777777" pattern="[0-9]{8}" required/>
          </div>

            @if ($errors->has('mobile'))
                <div class="error-message">   
                   <strong>{{ $errors->first('mobile') }}</strong>
                </div>  
              @endif
        
            <br/>
            <button type="submit" class="btn btn-info btn-sm" name="btn-login" style="background: #ff5100; border-color: #fff; padding-right:20px;">Submit<span class="glyphicon glyphicon-arrow-right"/></button>
            <a href="{{ url('/get_vat_links') }}" class="btn btn-secondary right btn-sm">Close
                 </a>
    </form>     
  </div>
   
  </div>

</div> 
</center> 

<script src="{{ asset('js/jquery.min.js') }}"></script>
  
  <script type="text/javascript">
    $(function () { 

      $('#chassisdiv').hide(); 
      $('#enginediv').hide();

      $("#search").change(function() {
         if ($(this).val() == "ID") 
         {
           $('#certificatediv').show();
           $('#certificateID').attr('required','');
           $('#chassis').removeAttr('required');
           $('#chassisdiv').hide();
           $('#engine').removeAttr('required');
           $('#enginediv').hide();
         }

         else if ($(this).val() == "chassis") 
         {
           $('#chassisdiv').show();
           $('#chassis').attr('required','');
           $('#certificateID').removeAttr('required');
           $('#certificatediv').hide();
           $('#engine').removeAttr('required');
           $('#enginediv').hide();
         }
         else
         {
           $('#enginediv').show();
           $('#engine').attr('required','');
           $('#chassis').removeAttr('required');
           $('#chassisdiv').hide();
           $('#certificateID').removeAttr('required');
           $('#certificatediv').hide();
         }

      });
    });  
    </script> 
@endsection