@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-header" style="float:right; ">
   <a class="btn btn-lg btn-warning" href="http://127.0.0.1:8000/add-purchase-party">
    <i class="fa fa-fw fa-plus"></i>
    Add Sale
  </a>
  <a class="btn btn-lg btn-success" href="http://127.0.0.1:8000/add-purchase-party">
    <i class="fa fa-fw fa-plus"></i>
    Add Purchase
  </a> 
  <a class="btn btn-lg btn-primary" href="http://127.0.0.1:8000/add-purchase-party">
    <i class="fa fa-fw fa-plus"></i>
    Add Expences
  </a>    
</section>
<!-- Content Header end -->
<br><br>
<!-- Content Header end -->

<!-- Content Start -->
<!-- Content Start -->
<section class="content">
 <div class="box box-info">
  <div class="box-header with-border">
    <h3 class="box-title">
      <span class="fa fa-fw fa-plus"></span>   New Costomer Sell(ARVI ELECTRIC LIMITED)            </h3>
      <button type="button" class="btn btn-box-tool add-new-btn" data-widget="collapse" data-collapse="true">
        <i class="fa fa-minus"></i>
      </button>
    </div>

    <!-- Add Sale Create Form -->
    <div id="form-purchase" class="form-horizontal" >
      <div class=" col-sm-12 col-md-4">
       <label for="Customer" class="control-label">
        Customer Name<i class="required">*</i>
      </label>
      <input type="text" class="form-control" id="Customer" name="Customer" autocomplete="off" placeholder="Enter Customer name...">
    </div>
    <div class=" col-sm-12 col-md-4">
     <label for="Phone" class="control-label">
      Phone<i class="required">*</i>
    </label>
    <input type="text" class="form-control" id="Phone" name="Phone" autocomplete="off" placeholder="Enter Phone..">
  </div>
  <div class=" col-sm-12 col-md-4">
     <label for="Phone1" class="control-label">
      Secondary Phone<i class="required">*</i>
    </label>
    <input type="text" class="form-control" id="Phone1" name="Phone1" autocomplete="off" placeholder="Enter Secondary Phone..">
  </div>
 
 <div class=" col-sm-12 col-md-5">
   <label for="Email" class="control-label">
    Email(optional)<i class="required">*</i>
  </label>
  <input type="text" class="form-control" id="Email" name="Email" autocomplete="off" placeholder="Enter Email..">
</div>

<div class=" col-sm-6 col-md-3 " 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-4 ">
  <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 class="well well-sm">
  <div class="row">
    <div class="col-md-12">
      <div class="table-responsive">
        <table id="invoiceTable" class="table table-striped table-editable table-bordered mb-0">
          <thead>
            <tr class="bg-info">

            <th>Item Name</th>
                <th>HSN Code</th>
                <th>QTY</th>
                <th>MRP</th>
                <th>Unit Price</th>
                <th>Taxable Amount</th>
                <th>CGST</th>
                <th>SGST/UTGST</th>
                <th>TOTAL Value</th>
                <th class="w-5 text-center">
                  <i class="fa fa-trash-o"></i>
                </th>
            </tr>
          </thead>
          <tbody>
           <tr>
                <td><input class="form-control input-sm text-center" type="text" name="itemName[]"></td>
                <td><input class="form-control input-sm text-center" type="text" name="hsnCode[]"></td>
                <td><input class="form-control input-sm text-center" type="number" name="qty[]" oninput="calculateTotal(this)"></td>
                <td><input class="form-control input-sm text-center" type="number" name="mrp[]" oninput="calculateTotal(this)"></td>
                <td><input class="form-control input-sm text-center" type="number" name="unitPrice[]" oninput="calculateTotal(this)"></td>
                <td><input class="form-control input-sm text-center" type="number" name="taxableAmount[]" readonly></td>
                <td><input class="form-control input-sm text-center" type="number" name="cgst[]" oninput="calculateTotal(this)"></td>
                <td><input class="form-control input-sm text-center" type="number" name="sgstUtgst[]" oninput="calculateTotal(this)"></td>
                <td><input class="form-control input-sm text-center" type="number" name="totalValue[]" readonly></td>
              
                <td class="text-center"><a onclick="removeRow(this)" ><i class="fa fa-close text-red pointer " ></i></a></td>
            </tr>


              </tbody>
              <tfoot>
                <tr>
                  <td colspan="5">
                    <!-- <div id="total"> 0</div> -->
                    <button class="btn btn-primary btn-sm" id="addRowBtn" onclick="addNewProductRow();">Add Product</button>
                  </td>
                </tr>
                
                <tr class="bg-yellow">
                  <th class="text-right" colspan="8">
                  Payable Amount                  </th>
                  <th class="col-sm-2 text-right">
                    <input type="hidden" name="payable-amount" value="">
                    <h4 class="text-center"><b></b></h4>
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-blue">
                  <th class="text-right" colspan="8">
                  Payment Method                  </th>
                  <th class="col-sm-2 text-center">
                    <select id="pmethod-id" class="form-control select2" name="pmethod-id">
                      <option value="1">Cash on Delivery</option>
                      <option value="2">Bkash</option>
                      <option value="3">Gift card</option>
                      <option value="4">Credit</option>
                    </select>
                  </th>
                 <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-blue">
                  <th class="text-right" colspan="8">
                  Paid Amount                  </th>
                  <th class="col-sm-2 text-right" >
                    <div style="background-color: #fff;" id="total" class="text-center paidAmount" >0</div>

                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
               
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-4 col-sm-offset-3 text-center">            
        <button id="create-purchase-submit" class="btn btn-block btn-lg btn-info" data-form="#form-purchase" data-datatable="#purchase-purchase-list" name="submit" data-loading-text="Processing...">
          <i class="fa fa-fw fa-save"></i>
        Submit        </button>
      </div>
      <div class="col-sm-2 text-center">            
        <button type="reset" class="btn btn-block btn-lg btn-danger" id="reset" name="reset">
          <span class="fa fa-fw fa-circle-o"></span>
        Reset        </button>
      </div>
    </div>
  </div>




<!-- <script>

         //delete row
         $(".btnDeleteRow").click(function() {
          var rowCount = $(this).closest('table').find('tbody').length;
          if (rowCount > 1) {
            $(this).closest('tbody').remove(); 
          } 
          rowCount --; 
          if (rowCount <= 1) { 
            $(document).find('.btnDeleteRow').prop('disabled', true);  
          }
        });

          //add row
          $(".btnAddRow").click(function() { 
            var table = $(this).closest('table');
            var lastRow = table.find('tbody').last();
            var newRow = lastRow.clone(true, true); 
            newRow.find('input, textarea, select').val('');
            newRow.find('.growTextarea').css('height','auto');
            newRow.insertAfter(lastRow);
            table.find('.btnDeleteRow').removeAttr("disabled");
          });



        </script> -->

<script>
        function addNewProductRow() {
            // Clone the template row
            var newRow = document.querySelector('#invoiceTable tbody tr').cloneNode(true);

            // Clear the input values in the new row
            var inputs = newRow.querySelectorAll('input');
            inputs.forEach(input => {
                input.value = '';
                if (input.name === 'totalValue[]' || input.name === 'taxableAmount[]') {
                    input.value = 0;
                }
            });

            // Append the new row to the table
            document.querySelector('#invoiceTable tbody').appendChild(newRow);
        }

        function calculateTotal(input) {
            var row = input.closest('tr');
            var qty = parseFloat(row.querySelector('input[name="qty[]"]').value) || 0;
            var mrp = parseFloat(row.querySelector('input[name="mrp[]"]').value) || 0;
            var unitPrice = parseFloat(row.querySelector('input[name="unitPrice[]"]').value) || 0;

            var taxableAmount = qty * mrp;
            var cgst = parseFloat(row.querySelector('input[name="cgst[]"]').value) || 0;
            var sgstUtgst = parseFloat(row.querySelector('input[name="sgstUtgst[]"]').value) || 0;

            var totalValue = (taxableAmount + cgst + sgstUtgst) || 0;

            // Update the Taxable Amount and TOTAL Value fields
            row.querySelector('input[name="taxableAmount[]"]').value = taxableAmount.toFixed(2);
            row.querySelector('input[name="totalValue[]"]').value = totalValue.toFixed(2);

            // Update the overall TOTAL Value
            updateOverallTotal();
        }

        function updateOverallTotal() {
            var totalValues = document.querySelectorAll('input[name="totalValue[]"]');
            var overallTotal = 0;

            totalValues.forEach(input => {
                overallTotal += parseFloat(input.value) || 0;
            });

            document.getElementById('total').textContent =  overallTotal.toFixed(2);
        }

        function removeRow(button) {
            // Only remove rows after the first row
            var row = button.closest('tr');
            if (row.rowIndex !== 1) {
                row.parentNode.removeChild(row);

                // Update the overall TOTAL Value after removing the row
                updateOverallTotal();
            }
        }
    </script>

        <script type="text/javascript">
          $(document).ready(function() {
            $('.datepicker').datepicker({
              language: langCode,
              format: "yyyy-mm-dd",
              autoclose:true,
              todayHighlight: true
            }).datepicker("setDate",'now');
          });
        </script>        


      </section>
      <!-- Content End -->
    </div>
    <!-- Content Wrapper End -->

  </div>
</div>
</section>
<!-- Content End -->

</div>
<!-- Content Wrapper End -->


<div class="scrolling-sidebar-bg"></div>
<div class="scrolling-sidebar-mask"></div>
<!-- Scrolling Sidebar End -->

</div>
<!-- End Wrapper -->





<style>
  .profitWrap
  {
    padding: 5px;
  }
</style>

@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>