@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="assets/plugins/custom/datatables/datatables.bundle.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<style>
    tr,td{
        text-align:center !important;
    }
</style>
@endsection
@section('content')
<!--begin::Card-->
@if (session('success'))
<div class="alert alert-success w-100 text-center" ><i class="fa fa-check text-white text-center"></i>&nbsp;{{ session('success') }}</div>
@endif
<div style="width: 100%;" class="card card-custom">
     <div class="card-header flex-wrap border-0 pt-6 pb-0">
          <div class="" style="color: orange;text-align:center;width:100%;">
              
               <a href="{{route('inventory.create')}}" class="btn btn-warning"><h3>Send Product</h3></a>
               <button class="btn btn-info" id="totalPriceId">Total Price</button>
          </div>
     </div>
     <hr>
     <div class="card-body">
          <table id="myTable" class="display">
               <thead>
                   <tr>
                       <th>TITLE</th>
                       <th>CATEGORY</th>
                       <th>PRICE</th>
                       <th>USAGE</th>
                       <th>TOTAL</th>
                   </tr>
               </thead>
               <tbody>
                   @foreach($result as $key => $item)
                <tr>
                  <td>{{$item["product_id"]}}</td>
                  <td>{{$item["category"]}}</td>
                  <td>{{$item["price"]}}</td>
                  <td>{{$item["total_inventor"]}}</td>
                  <td>{{$item["total_inventor"]*$item["price"]}}</td>
                </tr>
                @endforeach
              
                   <!-- Diğer satırlar -->
               </tbody>
           </table>
     </div>
</div>
<!--end::Card-->
@endsection
@section('js')
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
<script src="assets/js/pages/crud/datatables/basic/basic.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>

    

     $(document).ready(function () {
         var table = $('#myTable').DataTable({
               "responsive": true,
               "paging": true      // Sayfalama özelliğini etkinleştirin (isteğe bağlı)
         });

         // Her sütun için ayrı arama kutularını oluşturun
         $('#myTable thead th').each(function () {
             var title = $(this).text();
             $(this).html('<input type="text" class="form-control" placeholder="' + title + '" />');
         });

         table.columns().every(function (colIdx) {
             var that = this;
             $('input', table.column(colIdx).header()).on('keyup change', function () {
                 if (that.search() !== this.value) {
                     that
                         .search(this.value)
                         .draw();
                 }
                
             });
         });

          // Tüm verilerin toplamı
             // Tüm verilerin toplamı
             var totalPrice = 0;

            // DataTable'da her arama işlemi sonrası o anki filtrelenmiş verileri toplamak için
            table.on('draw', function () {
            var filteredData = table.column(4, { search: 'applied' }).data();
               
            totalPrice = 0; // Her seferinde toplamı sıfırlayın

            filteredData.each(function (value, index) {
                totalPrice += parseFloat(value) || 0;
            });
            document.getElementById("totalPriceId").innerHTML = "Total Price" + " " + totalPrice.toFixed(2) + " "+"€"
            console.log(totalPrice.toFixed(2))
            });

            // Sıralama işlevselliğini kaldırın
            $('#myTable thead th').off('click');
         
     });
 </script>
@endsection