@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="{{asset('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 ">Products</p></h1></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>TİTLE</th>
                       <th>CATEGORY</th>
                       <th>UNİT</th>
                       <th>PRİCE</th>
                       <th>CRİTİCAL STOCK</th>
                       <th>TOTAL STOCK</th>
                       <th>ACTİONS</th>
                   </tr>
               </thead>
               <tbody>
                    @foreach ($products as $item)
                       @if(auth()->user()->type == "admin" || $item->tax != 1)
                    <tr>
                       <td>{{$item->title}}</td>
                       <td>{{$item->category}}</td>
                       <td><span class="badge badge-success" style="font-size:16px;color:#fff; width:100%;">{{$item->unit}}</span></td>
                       <td><span  class="badge badge-info" style="font-size:16px;color:#fff; width:100%;">{{$item->price}}</span></td>
                       <td><span class="badge badge-danger" style="font-size: 16px;color:#fff;">Critical Stock:{{$item->critical_stock}}</span></td>
                       <td><span id="stockId{{$item->id}}" class="badge badge-warning" style="font-size: 16px;color:#fff;">Total Stock:{{$item->total_stock}}</span></td>
                       <td>
                        <div>
                            <a onclick="handleSubmit({{$item->id}})"  href="" type="button" data-toggle="modal" data-target="#exampleModalScrollable" class="btn btn-info btn-block"><span style="font-size: 13px;">Release Product +</span></a>
                        </div>
                    </td>
                   </tr>
                   @endif
                    @endforeach
                   <!-- Diğer satırlar -->
               </tbody>
           </table>
     </div>
</div>
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <form id="inventorUpdate" method="post">
               @csrf
               @method('post')
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Stock</h5>
                <button type="button" class="close" id="closeModal" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
            <div class="modal-body" style="height: 100px;">
                <label for=""  style="font-weight: bold;">Amount</label>
                <input autocomplete="off" id="amount" class="form-control" required name="total_stock" type="number">
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary font-weight-bold">Save changes</button>
            </div>
        </form>
        </div>
    </div>
</div>
<!--end::Card-->
@endsection
@section('js')
<script src="{{asset('assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
<script src="{{asset('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('inventorUpdate').addEventListener('submit',(e)=>{
            e.preventDefault();
              $.ajax({
                    type: "post",
                    url: `{{route('inventory.store')}}`, // Formun gönderileceği URL'yi ayarlayın
                    data: {
                        user_id:{{auth()->user()->id}},
                        sube_id:localStorage.getItem('subeId'),
                        product_id:localStorage.getItem('productId'),
                        total_stock:document.getElementById('amount').value
                    },
                    success: function(response) {
                        if(response.id){
                            document.getElementById(`stockId${localStorage.getItem('productId')}`).innerHTML = `Total Stock:${response.total_stock}`
                            document.getElementById('closeModal').click();
                            document.getElementById('amount').value = ""
                        }else{
                            toastr.options = {
                                "positionClass": "toast-top-right",
                                "showDuration": "500",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut",
                                };

                                toastr.error("Not enough stock");
                                document.getElementById('closeModal').click();
                                document.getElementById('amount').value = ""
                        }
                        
                        
                      
                    }
                });
        })
    })

    function handleSubmit(data){
       localStorage.setItem('productId',data);
    }
     $(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="Search ' + 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(3, { search: 'applied' }).data();
          
          totalPrice = 0; // Her seferinde toplamı sıfırlayın

          filteredData.each(function (value, index) {
               totalPrice += parseFloat(value) || 0;
          });
          });

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