@extends('frontlayouts.mainapp')
@section('content')
<div class="content-wrapper oh">

<!-- Breadcrumbs -->
<!-- <div class="container">
  <ol class="breadcrumb">
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="index.html">Shop</a>
    </li>
    <li class="active">
      Shop Checkout
    </li>
  </ol>
</div> --> <!-- end breadcrumbs -->

<!-- Checkout -->
<section class="section-wrap checkout pt-40 pb-70">
  <div class="container relative">
    <div class="row">

      <div class="ecommerce col-xs-12">

        <div class="row mb-30">
          <div class="col-md-8">
            <p class="ecommerce-info">
              Returning Exporter? 
              <a href="#" class="showlogin">Click here to login</a>
            </p>
          </div>
        </div>

        <form validate="true" id="form" method="POST" action="{{ url('createexporter') }}" enctype="multipart/form-data" class="checkout ecommerce-checkout row">
           @csrf
          <div class="col-md-8" id="customer_details">
            <div>
              <h2 class="heading uppercase bottom-line full-grey mb-30"> Exporter Registration</h2>

            @if(session()->has('error'))
             <div class="alert alert-success fade in alert-dismissible" id="message" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                <strong> {{ session()->get('error') }}<div id="preview"></div></strong>
              </div>
             <!--  <div class="alert alert-error">
              {{ session()->get('error') }}
              </div> -->
            @endif
              
             
              <!-- <p class="form-row form-row-wide address-field update_totals_on_change validate-required ecommerce-validated" id="billing_country_field">
                <label for="billing_country">Country
                  <abbr class="required" title="required">*</abbr>
                </label>
                <select name="billing_country" id="billing_country" class="country_to_state country_select" title="Country *">
                  <option>Select a country…</option>
                </select>
              </p> -->

              <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="exporter_company_name">
                <label for="exporter_company_name">Exporter Company Name
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="text" autocomplete="off" class="input-text" placeholder name="exporter_company_name" id="exporter_company_name" required>
              </p>

              <p class="form-row form-row-last validate-required ecommerce-invalid ecommerce-invalid-required-field" id="import_export_code">
                <label for="import_export_code">Import Export Code (IEC)
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="text" title="Please enter 10 Characters IEC CODE" maxlength="10"    autocomplete="off" class="input-text"  name="import_export_code" id="import_export_code" required>
              </p>

              <p class="form-row form-row-last validate-required ecommerce-invalid ecommerce-invalid-required-field" id="cha_code">
                <label for="cha_code">CHA Code
                 <!--  <abbr class="required" title="required">*</abbr> -->
                </label>
                <input type="text"  minlength="10"  maxlength="10" autocomplete="off" class="input-text" placeholder value name="cha_code" id="cha_code">
              </p>
             <!--  <p class="form-row form-row-last validate-required ecommerce-invalid ecommerce-invalid-required-field" id="multiple_locations">
                <label for="multiple_locations">Multiple Locations
                  <abbr class="required" title="required">*</abbr>
                </label>
                  <input type="radio" class="input-radio" name="multiple_locations" id="radio1" value="Yes">
                  <label for="radio1">Yes</label>

                 <input type="radio" class="input-radio" name="multiple_locations" id="radio2" value="No">
                   <label for="radio2">No</label>

              </p> -->
              <p class="form-row form-row-wide" id="gst_number">
                <label for="gst_number">GSTN No <abbr class="required" title="required">*</abbr></label>
               
                <input minlength="15" autocomplete="off" maxlength="15" pattern="^[a-zA-Z0-9_]*$" required type="text" class="input-text" placeholder value name="gst_number" id="gst_number">
              </p>

              <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="email">
                <label for="email">Email address
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="email"  autocomplete="off" required class="input-text" placeholder value name="email" id="email">
              </p>
              <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="password">
                <label for="password">Password
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="password" autocomplete="off" minlength="8" required class="input-text" placeholder value name="password" required id="password">
              </p>

              <p class="form-row form-row-last validate-required validate-phone" id="billing_phone_field">
                <label for="mobile_number">Mobile
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input pattern="[0-9]{10}" maxlength="10" autocomplete="off" type="text" class="input-text" placeholder required name="mobile_number" id="mobile_number">
              </p>

              <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="iec">
                <label for="iec">IEC Copy
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="file" accept="application/pdf" autocomplete="off" class="input-text" placeholder required name="iec" id="iec">
              </p>
             <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="cancelled_cheque">
                <label for="iec">Cancelled Cheque
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="file"  accept="application/pdf" autocomplete="off" required class="input-text" placeholder value name="cancelled_cheque" id="cancelled_cheque">
              </p>
             <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="pan">
                <label for="iec">PAN Copy
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="file" accept="application/pdf" autocomplete="off" class="input-text" placeholder required name="pan" id="pan">
              </p>
             <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="gst">
                <label for="iec">GST Copy
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="file" accept="application/pdf" autocomplete="off" class="input-text" placeholder required name="gst" id="gst">
              </p>
             <p class="form-row form-row-first validate-required ecommerce-invalid ecommerce-invalid-required-field" id="self_certification">
                <label for="iec">Self-sealing Approval Copy
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="file" accept="application/pdf" autocomplete="off" class="input-text" placeholder required name="self_certification" id="self_certification">
              </p>
            <p class="form-row form-row-wide address-field validate-required ecommerce-invalid ecommerce-invalid-required-field" id="address">
                <label for="address">Address Line1
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="text" autocomplete="off" class="input-text" placeholder="Street address" required name="address" id="address">
              </p>

              <p class="form-row form-row-wide address-field" id="billing_address_2_field">
                  <label for="billing_address_1">Address Line2
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="text" autocomplete="off" class="input-text" placeholder="Apartment, suite, unit etc. (optional)" required name="commissionerate_address" id="commissionerate_address">
              </p>
              

              <!-- <p class="form-row form-row-first address-field validate-state" id="billing_state_field" data-o_class="form-row form-row-first address-field validate-state">
                <label for="district">District
                <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" placeholder value name="district" id="district">
              </p> -->
              <p class="form-row form-row-wide address-field validate-required" id="billing_city_field" data-o_class="form-row form-row-wide address-field validate-required">
                <label for="city_id">Village/ Town / City
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="text" autocomplete="off" class="input-text" placeholder="Village/ Town / City" required name="city_id" id="city_id">
              </p>
              <p class="form-row form-row-wide address-field validate-required" id="billing_city_field" data-o_class="form-row form-row-wide address-field validate-required">
                <label for="district">District
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="text" autocomplete="off" class="input-text" placeholder="District" required name="district" id="district">
              </p>
               <p class="form-row form-row-first address-field validate-state" id="billing_state_field" data-o_class="form-row form-row-first address-field validate-state">
                <label for="state_id">State
                <abbr class="required" title="required">*</abbr></label>
                 <select required autocomplete="off" name="state_id" id="state_id" class="form-control">
                    <option selected disabled="" value="">Select an option</option>
                    @foreach($states as $state)
                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                    @endforeach
                  </select>
                <!-- <input type="text" class="input-text" placeholder value name="state_id" id="state_id"> -->
              </p>
              <p class="form-row form-row-last address-field validate-required validate-postcode ecommerce-invalid ecommerce-invalid-required-field" id="billing_postcode_field" data-o_class="form-row form-row-last address-field validate-required validate-postcode">
                <label for="postal_code">Pincode
                  <abbr class="required" title="required">*</abbr>
                </label>
                <input type="text" autocomplete="off" class="input-text" pattern="[0-9]{6}" maxlength="6" placeholder="Pincode" required name="postal_code" id="postal_code">
              </p>



              <div class="clear"></div>

            </div>

            <!-- <p class="form-row form-row-wide create-account">
              <input type="checkbox" class="input-checkbox" id="createaccount" name="createaccount" value="1">
              <label for="createaccount" class="checkbox">Create an account?</label>
            </p>

            <div class="clear"></div> -->

            <!-- <div>
              <div class="ecommerce-shipping-fields">
                <input type="checkbox" id="ship-to-different-address-checkbox" class="input-checkbox" name="ship_to_different_address" value="1">
                <label for="ship-to-different-address-checkbox" class="checkbox">Ship to a different address</label>
              </div>
              <p class="form-row notes ecommerce-validated" id="order_comments_field">
                <label for="order_comments">Order Notes</label>
                <textarea name="order_comments" class="input-text" id="order_comments" placeholder="Notes about your order, e.g. special notes for delivery." rows="2" cols="6"></textarea>
              </p>
            </div> -->
         <div class="form-row place-order">
            <input type="submit" id="regexporter" name="register" class="btn btn-lg btn-color"  value="Register Now">
          </div>
            <div class="clear"></div>
        <input type="hidden" name="roles[]" value="3">
          </div> <!-- end col -->
         
   <!--  </form> -->


          <!-- Your Order -->
          <div class="col-md-4">
<!--             <div class="order-review-wrap ecommerce-checkout-review-order" id="order_review">
              <h2 class="heading uppercase bottom-line full-grey">Your Order</h2>
              <table class="table shop_table ecommerce-checkout-review-order-table">
                <tbody>
                  <tr>
                    <th>Business Suit<span class="count"> x 1</span></th>
                    <td>
                      <span class="amount">$599.00</span>
                    </td>
                  </tr>
                  <tr>
                    <th>California Dress<span class="count"> x 1</span></th>
                    <td>
                      <span class="amount">$1299.00</span>
                    </td>
                  </tr>
                  <tr class="cart-subtotal">
                    <th>Cart Subtotal</th>
                    <td>
                      <span class="amount">$1799.00</span>
                    </td>
                  </tr>
                  <tr class="shipping">
                    <th>Shipping</th>
                    <td>
                      <span>Free Shipping</span>
                    </td>
                  </tr>
                  <tr class="order-total">
                    <th><strong>Order Total</strong></th>
                    <td>
                      <strong><span class="amount">$1799.00</span></strong>
                    </td>
                  </tr>
                </tbody>
              </table>

              <div id="payment" class="ecommerce-checkout-payment">
                <h2 class="heading uppercase bottom-line full-grey">Payment Method</h2>
                <ul class="payment_methods methods">

                  <li class="payment_method_bacs">
                    <input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" checked="checked">
                    <label for="payment_method_bacs">Direct Bank Transfer</label>
                    <div class="payment_box payment_method_bacs">
                      <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order wont be shipped until the funds have cleared in our account.</p>
                    </div>
                  </li>

                  <li class="payment_method_cheque">
                    <input id="payment_method_cheque" type="radio" class="input-radio" name="payment_method" value="cheque">
                    <label for="payment_method_cheque">Cheque payment</label>
                    <div class="payment_box payment_method_cheque">
                      <p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
                    </div>
                  </li>

                  <li class="payment_method_paypal">
                    <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
                    <label for="payment_method_paypal">Paypal</label>
                    <img src="img/shop/paypal.png" alt="">
                    <div class="payment_box payment_method_paypal">
                      <p>Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>
                    </div>
                  </li>

                </ul>
                <div class="form-row place-order">
                  <input type="submit" name="ecommerce_checkout_place_order" class="btn btn-lg btn-color" id="place_order" value="Place order">
                </div>
              </div>
            </div> -->
          </div> <!-- end order review -->
        </form>

      </div> <!-- end ecommerce -->

    </div> <!-- end row -->
  </div> <!-- end container -->
</section> <!-- end checkout -->


</div> <!-- end content wrapper -->
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <script>

$(document).ready(function(){
$('#regexporter').click(function(e){
   e.preventDefault();
   alert("hai");
   /*Ajax Request Header setup*/
   $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });

   $('#send_form').html('Sending..');
   
   /* Submit form data using ajax*/
   $.ajax({
      url: "http://194.195.116.24:84/api/v1/createexporter",
      method: 'post',
      data: $('#form').serialize(),
      success: function(response){
         //------------------------
            $('#send_form').html('Submit');
            $('#res_message').show();
            $('#res_message').html(response.msg);
            $('#msg_div').removeClass('d-none');

            document.getElementById("contact_us").reset(); 
            setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
            },10000);
         //--------------------------
      }});
   });
});
</script> -->
<!-- <script>
  $(document).ready(function (e) {
      $("#form").on('submit', (function (e) {
            alert("hai");
          e.preventDefault();
            $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });
          $.ajax({
              url: "http://194.195.116.24:85/api/v1/createexporter"
              , type: "POST"
              , data: new FormData(this)
              , contentType: false
              , cache: false
              , processData: false
              , beforeSend: function () {
                  //$("#preview").fadeOut();
                  $("#err").fadeOut();
              }
              , success: function (data) {
                  if (data.success == "success") {
                      // invalid file format.
                        $("#message").show();
                   $("#preview").html("Registered Successfully!.Please Check Your Mail For Further details").fadeIn();
                       $("#form")[0].reset();
                     
                  }
                  else {
                      // view uploaded file.
                      //  $("#preview").html(data).fadeIn();
                     $("#err").html("Invalid File !").fadeIn();
                     
                  }
              }
              , error: function (e) {
                  $("#err").html(e).fadeIn();
              }
          });
      }));
  });
</script> -->
<script>
    Dropzone.options.gstDropzone = {
    url: '{{ route('admin.users.storeMedia') }}',
    maxFilesize: 2, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2
    },
    success: function (file, response) {
      $('form').find('input[name="gst"]').remove()
      $('form').append('<input type="hidden" name="gst" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="gst"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($user) && $user->gst)
      var file = {!! json_encode($user->gst) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="gst" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
<script>
    Dropzone.options.iecDropzone = {
    url: '{{ route('admin.users.storeMedia') }}',
    maxFilesize: 2, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2
    },
    success: function (file, response) {
      $('form').find('input[name="iec"]').remove()
      $('form').append('<input type="hidden" name="iec" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="iec"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($user) && $user->iec)
      var file = {!! json_encode($user->iec) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="iec" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
<script>
    Dropzone.options.panDropzone = {
    url: '{{ route('admin.users.storeMedia') }}',
    maxFilesize: 2, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2
    },
    success: function (file, response) {
      $('form').find('input[name="pan"]').remove()
      $('form').append('<input type="hidden" name="pan" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="pan"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($user) && $user->pan)
      var file = {!! json_encode($user->pan) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="pan" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
<script>
    Dropzone.options.cancelledChequeDropzone = {
    url: '{{ route('admin.users.storeMedia') }}',
    maxFilesize: 2, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2
    },
    success: function (file, response) {
      $('form').find('input[name="cancelled_cheque"]').remove()
      $('form').append('<input type="hidden" name="cancelled_cheque" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="cancelled_cheque"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($user) && $user->cancelled_cheque)
      var file = {!! json_encode($user->cancelled_cheque) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="cancelled_cheque" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
<script>
    Dropzone.options.selfCertificationDropzone = {
    url: '{{ route('admin.users.storeMedia') }}',
    maxFilesize: 2, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2
    },
    success: function (file, response) {
      $('form').find('input[name="self_certification"]').remove()
      $('form').append('<input type="hidden" name="self_certification" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="self_certification"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($user) && $user->self_certification)
      var file = {!! json_encode($user->self_certification) !!}
          this.options.addedfile.call(this, file)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="self_certification" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>