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

@endsection
@section('content')
<!--begin::Card-->

<div style="width: 100%;" class="card card-custom">
     <div class="card-header flex-wrap border-0 pt-6 pb-0">
          <div class="" style="color: rgb(255, 166, 0);text-align:center;width:100%;">
              <div> <h1 class="card-label"><p ">EMPLOYEE</p></h1></div>
              <div>
              </div>
              @if (session('success'))
                <div class="alert alert-success w-100 text-center mt-10" ><i class="fa fa-check text-white text-center"></i>&nbsp;{{ session('success') }}</div>
                @endif
          </div>
     </div>
     <hr>
     <div class="card-body">
          <table id="myTable" class="display">
               <thead>
                   <tr>
                       <th>NAME</th>
                       <th>ACTİONS</th>
                   </tr>
               </thead>
               <tbody>
                @foreach ($users as $item)
                <tr>
                    <td>{{$item->name}}</td>
                    <td>
                     <div>
                         <a href="{{route('employeeDetail',[$item->id,$date])}}" type="button" style="background: rgb(97, 81, 219); color: #fff; padding: 7px;border-radius: 6px; width: 100%;text-align: center;border: none"><span style="font-size: 14px; white-space:nowrap">Show Details</span></a>
                     </div>
                 </td>
                </tr>                    
                @endforeach
               </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.addEventListener('DOMContentLoaded', function () {
        document.getElementById('productUpdate').addEventListener('submit',(e)=>{
            e.preventDefault();
              var formData = $(this).serialize();
              $.ajax({
                    type: "put",
                    url: `{{route('product.store')}}/${localStorage.getItem('id')}`, // Formun gönderileceği URL'yi ayarlayın
                    data: {value:document.getElementById('amount').value,price:document.getElementById('price').value},
                    success: function(response) {
                        document.getElementById(`stockId${localStorage.getItem('id')}`).innerHTML = `Total Stock:${response.total_stock}`
                        document.getElementById(`priceId${localStorage.getItem('id')}`).innerHTML = `${response.price} €`
                        document.getElementById('closeModal').click();
                        document.getElementById('amount').value = ""
                    }
                });
        })
    })

    function handleSubmit(data,data2){
       document.getElementById('price').value = data2;
       localStorage.setItem('id',data);
    }
     $(document).ready(function () {
         var table = $('#myTable').DataTable({
            
         });

         // 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ıx
          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(5, { 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) + " " + "€"
          });

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