@extends('adminlayout.dashadmin')
<!-- 'adminlayout.admin'
 --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@section('content')
 


<!-- Content Wrapper Start -->
<div class="content-wrapper" ng-controller="PurchaseController">

<section class="content">

     
        <div class="box box-info collapsed-box">
      <div class="box-header with-border">
        <h3 class="box-title">
          <span class="fa fa-fw fa-plus"></span> Add New Party        </h3>
        <button type="button" class="btn btn-box-tool add-new-btn" data-widget="collapse" data-collapse="true">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      
     <form id="form-purchase" class="form-horizontal" action="purchase.php" method="post" enctype="multipart/form-data">
                  <div class="box-body" style="display: block;">
                             <div class="row">
                             <div class=" col-sm-6 col-md-6 ">
                              <label for="party_name" class="control-label">
                              party_name<i class="required">*</i>
                              </label>
                              <input type="text" class="form-control" id="party_name" name="party_name" autocomplete="off" placeholder="party_name ">
                            </div>
                            <div class=" col-sm-6 col-md-6 ">
                              <label for="phone" class="control-label">
                              phone<i class="required">*</i>
                              </label>
                              <input type="number" class="form-control" id="phone" name="phone" autocomplete="off" placeholder="Enter Party phone ">
                            </div>
                            <div class=" col-sm-6 col-md-6 ">
                              <label for="phone" class="control-label">
                              Alternate phone<i class="required">*</i>
                              </label>
                              <input type="number" class="form-control" id="phone" name="phone" autocomplete="off" placeholder="Enter Party phone ">
                            </div>
                            <div class=" col-sm-6 col-md-6 ">
                              <label for="company" class="control-label">
                               Company name <i class="required">*</i>
                              </label>
                              <input type="text" class="form-control" id="company" name="company" autocomplete="off" placeholder="company name ">
                            </div>
                            <div class=" col-sm-6 col-md-6 ">
                              <label for="email" class="control-label">
                              email <i class="required">*</i>
                              </label>
                              <input type="email" class="form-control" id="email" name="email" autocomplete="off" placeholder="email ">
                            </div>
                            
                            <div class=" col-sm-6 col-md-6 ">
                              <label for="pan" class="control-label">
                              pan<i class="required">*</i>
                              </label>
                              <input type="text" class="form-control" id="pan" name="pan" autocomplete="off" placeholder="pan number ">
                            </div>
                            <div class=" col-sm-6 col-md-6 " id="pin_div">
                              <label for="pin" class="control-label">
                              Pin Code<i class="required">*</i>
                              </label>
                              <input type="text" name="pin" class="form-control  @error('pincode') error @enderror" id="pin" placeholder="Enter pin Code" value="" onkeyup="getPostOffice(this.value)" onblur="changeAddress(this.value)" >
                                                  @error('pin')
                                                  <p class="text-danger">{{ $message }}</p>
                                                  @enderror
                                                  <p class="text-danger" id="pin_error"></p>
                            </div>
                            <div class=" col-sm-6 col-md-6 ">
                              <label for="pan" class="control-label">
                              Town/City<i class="required">*</i>
                              </label>
                              <select class="form-control" name="post_office" id="post_office" onchange="changeAddress()">
                                  <option></option>
                              </select>
                              <input type="hidden" name="city" value="" id="city">
                              <input type="hidden" name="state" value="" id="state">
                              <input type="hidden" name="country" value="" id="country">
                              <input type="hidden" name="latitude" id="latitude" value="">
                              <input type="hidden" name="longitude" id="longitude" value="">
                            </div>
                           </div>
                            <div class="row">
                            <div class=" col-sm-12 col-md-12 ">
                              <label for="pan" class="control-label">
                              ful address<i class="required">*</i>
                              </label>
                              <textarea class="form-control" id="ful_address" rows="3"></textarea>
                              
                            </div>

                            <div class=" col-sm-12 col-md-12 " style="text-align: center; margin-top: 20px;">
                               <button class="btn btn-lg btn-info" name="submit" data-loading-text="Processing..."> <i class="fa fa-fw fa-save"></i> Submit </button>
                            </div>
                            
                           </div>
                            </div>
                          </form>
              
    </div>
    
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-success">
          <div class="box-header">
            <h3 class="box-title">
              Party List            </h3>
          </div>
          <div class="box-body">
            <div class="table-responsive"> 
                 
              <div id="supplier-supplier-list_wrapper" class="dataTables_wrapper form-inline dt-bootstrap"><div class="dataTables_length" id="supplier-supplier-list_length"><label>Show <select name="supplier-supplier-list_length" aria-controls="supplier-supplier-list" class="form-control input-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option><option value="-1">All</option></select> entries</label></div><div id="supplier-supplier-list_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="supplier-supplier-list"></label></div><div class="dt-buttons btn-group">          <button class="btn btn-default buttons-print" tabindex="0" aria-controls="supplier-supplier-list" type="button" title="Print"><span><i class="fa fa-print"></i></span></button> <button class="btn btn-default buttons-copy buttons-html5" tabindex="0" aria-controls="supplier-supplier-list" type="button" title="Copy"><span><i class="fa fa-files-o"></i></span></button> <button class="btn btn-default buttons-excel buttons-html5" tabindex="0" aria-controls="supplier-supplier-list" type="button" title="Excel"><span><i class="fa fa-file-excel-o"></i></span></button> <button class="btn btn-default buttons-csv buttons-html5" tabindex="0" aria-controls="supplier-supplier-list" type="button" title="CSV"><span><i class="fa fa-file-text-o"></i></span></button> <button class="btn btn-default buttons-pdf buttons-html5" tabindex="0" aria-controls="supplier-supplier-list" type="button" title="PDF"><span><i class="fa fa-file-pdf-o"></i></span></button> <button id="email-btn" class="btn btn-default buttons-email" tabindex="0" aria-controls="invoice-invoice-list" type="button" title="Email"><span><i class="fa fa-envelope"></i></span></button></div><div id="supplier-supplier-list_processing" class="dataTables_processing panel panel-default" style="display: none;"><img src="../assets/itsolution24/img/loading2.gif"></div><table id="supplier-supplier-list" class="table table-bordered table-striped table-hover dataTable" data-hide-colums="" role="grid" aria-describedby="supplier-supplier-list_info" style="width: 1197px;">
                <thead>
                  <tr class="bg-gray" role="row"><th class="w-5 text-center sorting_desc" tabindex="0" aria-controls="supplier-supplier-list" rowspan="1" colspan="1" style="width: 21px;" aria-sort="descending" aria-label="
                      Id                    : activate to sort column ascending">
                      Id                    </th><th class="w-20 sorting" tabindex="0" aria-controls="supplier-supplier-list" rowspan="1" colspan="1" style="width: 197px;" aria-label="
                      Name                    : activate to sort column ascending">
                      Name                    </th><th class="w-20 sorting_disabled" rowspan="1" colspan="1" style="width: 219px;" aria-label="
                      Mobile                    ">
                      Mobile                    </th><th class="w-10 text-center sorting" tabindex="0" aria-controls="supplier-supplier-list" rowspan="1" colspan="1" style="width: 80px;" aria-label="
                      Product                    : activate to sort column ascending">
                      Product                    </th><th class="w-20 text-center sorting" tabindex="0" aria-controls="supplier-supplier-list" rowspan="1" colspan="1" style="width: 197px;" aria-label="
                      Created At                    : activate to sort column ascending">
                      Created At                    </th><th class="w-5 text-center sorting_disabled" rowspan="1" colspan="1" style="width: 43px;" aria-label="
                      Status                    ">
                      Status                    </th><th class="w-5 text-center sorting_disabled" rowspan="1" colspan="1" style="width: 53px;" aria-label="
                      Purchase                    ">
                      Purchase                    </th><th class="w-5 text-center sorting_disabled" rowspan="1" colspan="1" style="width: 43px;" aria-label="
                      View                    ">
                      View                    </th><th class="w-5 text-center sorting_disabled" rowspan="1" colspan="1" style="width: 43px;" aria-label="
                      Edit                    ">
                      Edit                    </th><th class="w-5 sorting_disabled" rowspan="1" colspan="1" style="width: 44px;" aria-label="
                      Delete                    ">
                      Delete                    </th></tr>
                </thead>
                <tfoot>
                  <tr class="bg-gray"><th class="text-center" rowspan="1" colspan="1">
                      Id                    </th><th rowspan="1" colspan="1">
                      Name                    </th><th rowspan="1" colspan="1">
                      Mobile                    </th><th class="text-center" rowspan="1" colspan="1">2</th><th class="text-center" rowspan="1" colspan="1">
                      Created At                    </th><th class="text-center" rowspan="1" colspan="1">
                      Status                    </th><th class="text-center" rowspan="1" colspan="1">
                      Purchase                    </th><th class="text-center" rowspan="1" colspan="1">
                      View                    </th><th class="text-center" rowspan="1" colspan="1">
                      Edit                    </th><th rowspan="1" colspan="1">
                      Delete                    </th></tr>
                </tfoot>
              <tbody><tr id="row_1" role="row" class="odd"><td class="text-center sorting_1" data-title="
                      Id                    ">1</td><td data-title="
                      Name                    ">No Supplier</td><td data-title="
                      Mobile                    ">016000000</td><td class=" text-center" data-title="
                      Product                    ">2</td><td class=" text-center" data-title="
                      Created At                    ">2018-03-24 20:19:51</td><td class=" text-center" data-title="
                      Status                    "><span class="label label-success">Active</span></td><td class=" text-center" data-title="
                      Purchase                    "><a href="purchase.php?box_state=open&amp;sup_id=1" id="purchase-btn" class="btn btn-sm btn-block btn-success" title="Purchase Product"><i class="fa fa-fw fa-shopping-cart"></i></a></td><td class=" text-center" data-title="
                      View                    "><a id="view-supplier" class="btn btn-sm btn-block btn-info" href="{{route('party_profile')}}" title="View Profile"><i class="fa fa-fw fa-user"></i></a></td><td class=" text-center" data-title="
                      Edit                    "><button id="edit-supplier" class="btn btn-sm btn-block btn-primary" type="button" title="Edit"><i class="fa fa-fw fa-pencil"></i></button></td><td data-title="
                      Delete                    "><button id="delete-supplier" class="btn btn-sm btn-block btn-danger" type="button" title="Delete"><i class="fa fa-fw fa-trash"></i></button></td></tr></tbody></table><div class="dataTables_info" id="supplier-supplier-list_info" role="status" aria-live="polite">Showing 1 to 1 of 1 entries</div><div class="dataTables_paginate paging_simple_numbers" id="supplier-supplier-list_paginate"><ul class="pagination"><li class="paginate_button previous disabled" id="supplier-supplier-list_previous"><a href="#" aria-controls="supplier-supplier-list" data-dt-idx="0" tabindex="0">Previous</a></li><li class="paginate_button active"><a href="#" aria-controls="supplier-supplier-list" data-dt-idx="1" tabindex="0">1</a></li><li class="paginate_button next disabled" id="supplier-supplier-list_next"><a href="#" aria-controls="supplier-supplier-list" data-dt-idx="2" tabindex="0">Next</a></li></ul></div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
   
  </section>
  <!-- Content End -->
</div>
<!-- Content Wrapper End -->

@endsection



<script> 
  //   function getRefDetail(refid)
  // {
  //   if(refid !='')
  //   {
  //    var url = "{{ url('get-referral') }}"+'/'+refid;    
  //    $.ajax({
  //           type: "GET",
  //           url: url,
  //           dataType: 'json',
  //           success: function(response) {
  //               console.log(response);
              
  //               if (response.status == "1") {
  //                  $('#refname').html('<span style="color: #f5f6fa;">'+response.name+'</span>');
                             
  //                   $('#user_type').val(response.slug);
  //         $('#select2-user_type-container').html(response.rolename);  
  //                   defaultid(response.slug);         

  //               } else {
  //                   $('#refname').html('<span style="color: #ef1806;">'+response.message+'</span>');
  //               }
  //           }
  //       });
  //   }else{
  //      $('#refname').html('');
  //   }
    
  // }
  
    function getPostOffice(m_pincode) {
        //var pin_select = ('#pinaddress').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + m_pincode,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    var len = PostOffice.length;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    $('#pin_error').html("");
                    $('#post_office').html(option);

                    $("#post_office").on("click", function() {

                    });
                    document.getElementById('post_office').click();

                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html("");
                }
            }
        });
    }

    function changeAddress() {
        var pin             = $('#pin').val();
        var post_office     = $('#post_office').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + pin,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                var pin_select_status = 0;
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        if (post_office == PostOffice[index].Name) {
                            pin_select_status   = 1;
                            $('#city').val(PostOffice[index].District);
                            $('#state').val(PostOffice[index].State);
                            $('#country').val(PostOffice[index].Country);
                        }
                        option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    if (pin_select_status == 0) {
                        $('#pin_error').html("Error Please re-select address.");
                        $('#post_office').html(option);
                    } else {
                        $('#pin_error').html('');
                    }
                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html('');
                }
            }
        });
    }

    // function PanValidate(panVal) {
    //     var regpan = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

    //     if(regpan.test(panVal)){
    //         // valid pan card number
    //         $('#pan_error').html('');
    //         var url = "{{ url('pan_validate') }}";

    //         $.ajax({
    //             url: url,
    //             headers: {
    //                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //             },
    //             type: "POST",
    //             data: {
    //                 'pan': panVal
    //             },
    //             dataType: 'json',
    //             context: this,
    //             success: function(result) {
    //                 if(result.message=="PAN verified successfully"){
    //                     $('#name').val(result.registered_name);
    //                     $('#father_name').val(result.father_name);
    //                 } else {
    //                     $('#name').val('');
    //                     $('#father_name').val('');
    //                     $('#pan_error').html(result.message);
    //                 }
    //                 console.log(result);
    //             },
    //             error: function(error) {
    //                 console.log(error.responseText);
    //             }
    //         });
    //     } else {
    //         $('#pan_error').html('invalid pan card number');
    //     }
    // }



    // NioApp.Toast('This is a note for top right toast message.', 'info', {
    //   position: 'top-right'
    // });
    
    // NioApp.Toast('<h5>Update Successfully</h5><p>Your profile has been successfully updated.</p>', 'success');

    // var url = "";
    // Swal.fire({
    //     title: "Registration Successfull!",
    //     html: "Your User Id is <h4>user->user_id</h4> and Password is <h4>password</h4> <h5><a href='"+url+"'> Click here to Login </a></h5>",
    //     icon: "success",
    //     showCancelButton: true,
    //     showCloseButton: true,
    // });
</script>
<script>
    // alert(document.cookie);
    getLocation();
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
        alert("Geolocation is not supported by this browser.");
      }
    }
    
    function showPosition(position) {
        
      document.getElementById("latitude").value=position.coords.latitude;
      document.getElementById("longitude").value=position.coords.longitude;
      sessionStorage.setItem("latitude", position.coords.latitude);
      sessionStorage.setItem("longitude", position.coords.longitude);
    }
    </script>