@extends('adminlte::page')

@section('title', 'Customer Add')

@section('content_header')
    <h1>
      Add New Customer
    </h1>
@stop

@section('content')
<div class="container-fluid">
        <div class="row">
          <!-- left column -->
          <div class="col-md-8 col-sm-12">
            <!-- Horizontal Form -->
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">
                  Add Customer
                </h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form class="form-horizontal" id="add-form">
                @csrf
                <div class="card-body">
                  <div class="form-group row">
                    <label for="item_code" class="col-sm-2 col-form-label">Customer Name</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="customer_name">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="item_name" class="col-sm-2 col-form-label">Customer Phone</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="customer_phone">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="item_name" class="col-sm-2 col-form-label">Customer Address</label>
                    <div class="col-sm-10">
                      <textarea class="form-control" name="address"></textarea>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="item_name" class="col-sm-2 col-form-label">Customer Province</label>
                    <div class="col-sm-10">
                      <select class="form-control" name="province_id"></select>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="item_name" class="col-sm-2 col-form-label">Customer Regency</label>
                    <div class="col-sm-10">
                      <select class="form-control" name="regency_id"></select>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="item_name" class="col-sm-2 col-form-label">Customer Postal Code</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="postal_code">
                    </div>
                  </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                  <!-- <button type="submit" class="btn btn-default">Cancel</button> -->
                  <button type="submit" class="btn btn-info float-right">Submit</button>
                  
                </div>
                <!-- /.card-footer -->
              </form>
            </div>
            <!-- /.card -->

          </div>
          <!--/.col (left) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
@stop

@section('css')
@stop

@section('js')
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
   <script type="text/javascript">
     $(document).ready(function(){
    
     $("select[name=province_id]").select2({
        ajax: {
          url: 'provinces',
          dataType: 'json',
          data: function (params) {
          var query = {
            search: params.term,
            type: 'public'
          }

          // Query parameters will be ?search=[term]&type=public
          return query;
        }
          // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
        }
      });

     $("select[name=province_id]").on("change", function(){
      var province_id = $(this).val();
        $("select[name=regency_id]").select2({
            ajax: {
              url: 'regencies',
              dataType: 'json',
              data: function (params) {
              var query = {
                search: params.term,
                province_id: province_id,
                type: 'public'
              }

              // Query parameters will be ?search=[term]&type=public
              return query;
            }
              // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
            }
          });
     });
     


      var spinner = $('#loader');
        $('#add-form').on('submit', function(e) {
          var urlForm = "doAdd";
         
       e.preventDefault(); 
       // spinner.show();
       var formData = $('#add-form').serialize();
       $.ajax({
           type: "POST",
           url: urlForm,
           data: formData,
           success: function( msg ) {
           if(msg.status){
                showToast(msg.msg,'success');
                
                  location.href="