@extends('layouts/contentLayoutMaster')

@section('title', 'Summary')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection
@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-sliders.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
    
    <link rel="stylesheet" href="{{ asset('select2/dist/css/select2.css') }}">
    <link rel="stylesheet" href="{{ asset('select2/dist/css/bootstrap-select.css') }}">
@endsection

@section('content')

<div class="row">
   
    
      <!--Arun Code Start--> 
      <!-- First Button --> 
      
    <!--Arun Code ends-->
</div>
<div class="card">
    <div class="card-header">
        <div class="row" style="display:none;">
            
            
            <div class="col-xl-4 float-left">
               <!-- <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#add-vendor-payment">Add Vendor Payment</button>-->
            </div>
            <div class="col-xl-4 float-right">
                <h4>Vendor Balance: <span id="nvendorBalance"> </span></h4>
            </div>
            <div class="col-xl-4 float-right">
                <h4>Total Transaction: <span id="ntotalDebit"></span></h4>
            </div>
        </div>
    </div>
    <div class="card-body">
        <hr>
        
        <div class="row">
            
            
                
                <div class="col-md-3">
                    <input class="form-control karigar-dropdown" type="text" id="searchInput" placeholder="Search Karigar..." onkeyup="filterTable()" />
                </div>
                <div class="col-md-3">
  <select class="form-control" id="columnSelect" onchange="sortKarigarTable()">
    <option value="" disabled selected hidden>Sort by</option>
    <option value="cash">Cash</option>
    <option value="fine">Fine</option>
     <option value="cash_in">Cash In</option>
  <option value="cash_out">Cash Out</option>
  <option value="fine_in">Fine In</option>
  <option value="fine_out">Fine Out</option>
  </select>
</div>

<div class="col-md-3">
  <select class="form-control" id="orderSelect" onchange="sortKarigarTable()">
   <option value="" disabled selected hidden>Order by</option>
    <option value="desc">High to Low</option>
    <option value="asc">Low to High</option>
  </select>
</div>
<div class="col-md-3">
<button class="btn btn-secondary" onclick="resetTable()">Reset Table</button>
 </div>              

                
            
            
        </div>
        <br>
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                <table class="table" id="karigarTable">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>KARIGAR SHORTCODE</th>
                            <th>Karigar</th>
                            <th>Balance Cash</th>
                            <th>Balance Fine</th>
                            <th>Cash In</th>
                            <th>Cash Out</th>
                            <th>Fine In</th>
                            <th>Fine Out</th>
                            
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="normal-vendor-reminder">
                        
                    </tbody>
                    
                </table>
        </div>
                
                <br>
                <br>
                <div id="paginataion-links"></div>
            </div>
        </div>
      
    </div>
    <lable id="totalofrecord"></lable>  
</div>

<button style="display:none;" type="button" class="btn" data-bs-toggle="modal" data-bs-target="#add-vendor-payment-status">Add </button>
<div class="modal fade text-start" id="add-vendor-payment" tabindex="-1" aria-labelledby="myModalLabel16" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel16">Add Payment</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <select class="form-control mb-2" id="nvendor-dropdown1">
                    <option value="0">Select Vendor</option>
                </select>
                <input type="radio" name="payment_type" class="payment_type" id="pay" value="pay"/> Pay
                <input type="radio" name="payment_type" class="payment_type" id="recived" value="recived"/> Recived
                <input type="number" class="form-control fine" id="fine_in_gram" placeholder="Fine Wt">
                Rate
                <input type="number" class="form-control rate" id="per_gm_rate" placeholder="Per Gram Rate">
                <input type="number" class="form-control totalAmt" id="total_amt" placeholder="Amount">
                <hr>
                Reminder
                <input type="date" class="form-control" id="reminder_date" required><br>
                <textarea class="form-control" id="reminder_note" placeholder="Note"></textarea>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" onclick="js:normalpurchaseFine1('{{ $token }}')">Submit</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade text-start" id="add-karigar-payment" tabindex="-1" aria-labelledby="myModalLabel16" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form id="karigar_payment_form">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel16">Add Payment</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" class="form-control" id="payable_cash" name="payable_cash">
                <input type="hidden" class="form-control" id="payable_fine" name="payable_fine">
                <select class="form-control mb-2 karigar-dropdown select2" id="karigar_uuid" name="karigar_uuid">
                    <option value="0">Select Karigar</option>
                </select>
                <br>
                <input type="number" class="form-control" id="fine" placeholder="Fine" name="fine">
                <br>
                <input type="number" class="form-control" id="amount" placeholder="Amount" name="amount">
               
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" onclick="js:addKarigarPayment('{{ $token }}')">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>

@endsection


@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
    
    <script src="{{ asset('select2/dist/js/select2.js') }}"></script>
    <script src="{{ asset('select2/dist/js/bootstrap-select.js') }}"></script>
    <script src="{{ asset('select2/dist/js/forms-selects.js') }}"></script>
@endsection
@section('page-script')

   <!-- <script src="{{ asset(mix('js/scripts/custom/common.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/custom/gold_transactions.js')) }}"></script>-->
    
    
    <script>
    $(document).ready(function() {
        normalKarigarCreditDebitList1('<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/karigar/transactions_summary.blade.php</b> on line <b>191</b><br />
', 1);
        $('#transaction_detail').modal('hide');
        $.ajax({
        url: "/api/user/all",
        type: "Get",
        dataType: "json",
        data: {
            role: "KARIGAR",
        },
        success: function (response) {
            for (var i = 0; i < response.length; i++) {
                $(".karigar-dropdown").append(`
                <option value="${response[i].user_id}">${response[i].name}</option>
            `);
            }
        },
        });
    
    

    });


        
       
        
        
      
    
function filterTable() {
  const input = document.getElementById("searchInput");
  const filter = input.value.toLowerCase();
  const table = document.getElementById("karigarTable");
  const tr = table.getElementsByTagName("tr");

  for (let i = 1; i < tr.length; i++) { // skip the header
    let rowText = tr[i].textContent.toLowerCase();
    tr[i].style.display = rowText.includes(filter) ? "" : "none";
  }
}

function sortKarigarTable() {
  const column = document.getElementById("columnSelect").value;
  const order = document.getElementById("orderSelect").value;

  if (!column || !order) return;

  const table = document.getElementById("karigarTable");
  const tbody = table.querySelector("tbody") || table;
  const rows = Array.from(tbody.querySelectorAll("tr")).filter(row => row.querySelectorAll("td").length > 0);

  let columnIndexCash = 3;
  let columnIndexFine = 4;
  let columnIndexCash_In = 5;
  let columnIndexCash_out = 6;
  let columnIndexFine_In = 7;
  let columnIndexFine_out = 8;

  rows.sort((a, b) => {
    let valA = 0, valB = 0;

    if (column === "cash") {
      valA = parseFloat(a.cells[columnIndexCash].innerText.replace(/[^0-9.-]+/g, '')) || 0;
      valB = parseFloat(b.cells[columnIndexCash].innerText.replace(/[^0-9.-]+/g, '')) || 0;
    } else if (column === "fine") {
      valA = parseFloat(a.cells[columnIndexFine].innerText.replace(/[^0-9.-]+/g, '')) || 0;
      valB = parseFloat(b.cells[columnIndexFine].innerText.replace(/[^0-9.-]+/g, '')) || 0;
    } else if (column === "cash_in") {
      valA = parseFloat(a.cells[columnIndexCash_In].innerText.replace(/[^0-9.-]+/g, '')) || 0;
      valB = parseFloat(b.cells[columnIndexCash_In].innerText.replace(/[^0-9.-]+/g, '')) || 0;
    } else if (column === "cash_out") {
      valA = parseFloat(a.cells[columnIndexCash_out].innerText.replace(/[^0-9.-]+/g, '')) || 0;
      valB = parseFloat(b.cells[columnIndexCash_out].innerText.replace(/[^0-9.-]+/g, '')) || 0;
    } else if (column === "fine_in") {
      valA = parseFloat(a.cells[columnIndexFine_In].innerText.replace(/[^0-9.-]+/g, '')) || 0;
      valB = parseFloat(b.cells[columnIndexFine_In].innerText.replace(/[^0-9.-]+/g, '')) || 0;
    } else if (column === "fine_out") {
      valA = parseFloat(a.cells[columnIndexFine_out].innerText.replace(/[^0-9.-]+/g, '')) || 0;
      valB = parseFloat(b.cells[columnIndexFine_out].innerText.replace(/[^0-9.-]+/g, '')) || 0;
    }

    return order === "asc" ? valA - valB : valB - valA;
  });

  rows.forEach(row => tbody.appendChild(row));
}
function resetTable() {
    location.reload();
  }
  

function normalKarigarCreditDebitList1(token) {
    $.ajax({
        url: "/api/gold-management/karigar/transactionSummary",
        type: "GET",
        dataType: "json",
        headers: {
            Authorization: "Bearer " + token,
        },
        success: function (response) {
            console.log(response); // Optional: inspect data

            const tbody = $("#normal-vendor-reminder");
            tbody.empty(); // Clear existing rows

            response.forEach((item, index) => {
                const row = `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.karigar_id}</td>
                        <td>${item.user_name}</td>
                        <td>${item.total_amt}</td>
                        <td>${item.total_wt}</td>
                        <td>${item.cash_in}</td>
                        <td>${item.cash_out}</td>
                        <td>${item.fine_in}</td>
                        <td>${item.fine_out}</td>
                        <td></td>
                    </tr>
                `;
                tbody.append(row);
            });
        },
        error: function (error) {
            console.error("Error fetching karigar transaction summary:", error);
        }
    });
}


    
    
    </script>
@endsection