@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: orange;text-align:center;width:100%;">
               <h1 class="card-label"><p ">Expences</p></h1>
               @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
                 <button id="totalHours" class="btn btn-warning" style="font-size:20px;color:#fff; text-shadow:1px 1px 1px #000;">Total Hours</button>
               <button id="totalBalance" class="btn btn-warning" style="font-size:20px;color:#fff; text-shadow:1px 1px 1px #000;">Total Balance</button>
          </div>
     </div>
     <hr>
     <div class="card-body">
          <table id="myTable" class="display">
               <thead>
                   <tr>
                       <th>EMPLOYEE</th>
                       <th>HOURS</th>
                       <th>WAGES</th>
                       <th>TAX</th>
                       <th>INSURANCE</th>
                       <th>DATE</th>
                       <th>TOTAL COST</th>
                       <th>BALANCE</th>
                   </tr>
               </thead>
               <tbody>
                    @foreach ($employees as $item)
                    <tr>
                        <td style="cursor: pointer;"><a href="{{route('employeeDetail',[$item->user_id,$item->description])}}" class="btn btn-info btn-block">{{$item->getdeneme->name}}</a></td>
                         <td style="text-align: center; font-weight:bold;cursor: pointer;">{{$item->hours}}</td>
                         <td style="text-align: center; font-weight:bold;cursor: pointer;">{{$item->hourly_pay*$item->hours}} €</td>
                         <td style="text-align: center; font-weight:bold;cursor: pointer;">{{$item->tax}} €</td>
                         <td style="text-align: center; font-weight:bold;cursor: pointer;">{{$item->insurance}} €</td>
                         <td style="text-align: center; font-weight:bold;cursor: pointer;">{{$item->description}}</td>
                         <td style="text-align: center; font-weight:bold;cursor: pointer;"><button class="btn btn-success btn-block">{{$item->getBranch->title}}</button></td>
                         @if($item->balance > 0)
                         <td style="position: relative;cursor: pointer;">+{{$item->balance}} € <button style="position: absolute;width: 100%;left:0; height:50%;z-index: 1; background:#8950FC; border:none; color:#fff;border-radius:6px; font-size:16px;white-space:nowrap;">+{{$item->balance}} €</button></td>
                         @else
                          <td style="position: relative;cursor: pointer;">{{$item->balance}} € <button style="position: absolute;width: 100%;left:0; height:50%;z-index: 1; background:#8950FC; border:none; color:#fff;border-radius:6px; font-size:16px;white-space:nowrap;">{{$item->balance}} €</button></td>           
                          @endif
                     </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>
    function openDetail(date){
        console.log(date)
    }
     $(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ı
          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(7, { search: 'applied' }).data();
          var filteredData5 = table.column(1, { search: 'applied' }).data();
          
          totalPrice = 0; // Her seferinde toplamı sıfırlayın
          totalPrice2 = 0; // Her seferinde toplamı sıfırlayın
          totalPrice3 = 0; // Her seferinde toplamı sıfırlayın
          totalPrice4 = 0; // Her seferinde toplamı sıfırlayın
          totalPrice5 = 0; // Her seferinde toplamı sıfırlayın

          filteredData.each(function (value, index) {
               totalPrice += parseFloat(value) || 0;
          });
         
           filteredData5.each(function (value, index) {
               totalPrice5 += parseFloat(value) || 0;
          });
          
          document.getElementById('totalBalance').innerHTML = `Total Balance: ${totalPrice.toFixed(2)} €`
          document.getElementById('totalHours').innerHTML = `Total Hours: ${(totalPrice5).toFixed(2)}`
          });

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