@extends('layouts.app')

@section('title', 'Inventory List')

@section('content')
<div class="container-fluid">


    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Inventory</h1>
        
      
        <div class="container mt-4">
        <div class="d-flex justify-content-end">
             <a href="{{route('productlist.createinventory')}}" class="btn btn-sm btn-primary mr-2">
            <i class="fas fa-plus"></i> AddNew</a>
            <button id="downloadCSV" href="#" class="btn btn-sm btn-success mr-2">
            <i class="fas fa-plus"></i> Download.csv</button>
            <a href="{{ route('ieviewer.index')}}" class="btn btn-sm btn-info">
                        <i class="fas fa-arrow-left fa-sm text-white-50"></i>Back</a>
        </div>

       
        </div> 
        
    </div>
    
    {{-- Alert Messages --}}
    @include('common.alert')
   

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">All Products</h6>
            
        </div>
        <div class="card-body">
      
            <div class="table-responsive">
           
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                    
                        <tr>
                            <th width="20%">PID</th>
                            <th width="20%">Item_Code</th>
                            <th width="20%">UPC</th>
                            <th width="50%">Item</th>
                            <th width="30%">Stock</th>
                            <th width="30%">Currency</th>
                            <th width="30%">Cost</th>
                            <th width="30%">MRP</th>
                            <th width="30%">R_Price</th>
                            <th width="30%">W_Price</th>
                            <th width="30%">Value</th>
                            <th width="20%">Action</th>
                       
                       
                        </tr>
                       
                    </thead>
                   
                    <tbody>

      
                    @foreach ($products as $row)
                           <tr>
                               <td>{{$row->id}}</td>
                               <td>{{$row->itemcode}}</td>
                               <td>{{$row->upc}}</td>
                               <td>{{$row->item}}</td>
                               <td>{{$row->stockinhand}}</td>
                               <td>{{$row->currency}}</td>
                               <td>{{$row->Cost}}</td>
                               <td>{{$row->mrpprice}}</td>
                               <td>{{$row->rprice}}</td>
                               <td>{{$row->wprice}}</td>
                               <td>{{$row->stockvalue}}</td>
                              
                               
                               <td style="display: flex">
                                   <a href="{{route('productlist.inventoryedit',['products' => $row->id]) }}" class="btn btn-primary m-2">
                                        <i class="fa fa-pen"></i>
                                   </a>
                                   <!-- <form method="POST" action="{{route('productlist.inventorydestroy', ['id' => $row->id]) }}">
                                        @csrf
                                         @method('DELETE')
                                        <button class="btn btn-danger m-2" type="submit" onclick="return confirm('Sure Want Delete?')">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                       
                                   </form> -->
                                  
                                   <button type="button" class="btn btn-danger m-2 btn_itemdelete" href="#" data-toggle="modal"  data-id="{{$row->id}}" data-target="#deleteModal1">
                                            <i class="fas fa-trash"></i>
                                            </button>
                                   <!-- <a class="btn btn-danger m-2" href="#" data-toggle="modal" data-target="#deleteModal1">
                                            <i class="fas fa-trash"></i>
                                        </a> -->
                               </td>
                               
                           </tr>
                       @endforeach
                
                    </tbody>
                </table>
   
              {{$products->links()}}
             
            </div>
           
        </div>
    </div>

</div>
@if ($products->count() > 0 )
@if(isset($products) && !empty($products))

@include('inventroy.delete_inventoryModel')

@endif  
@endif 
@endsection

@section('scripts')
<!-- <script>
            $(document).ready(function () {
                $("#deleteModal1").on("show.bs.modal", function (e) {
                    let itemid = $(e.relatedTarget).data('target-id');
                    
                    $('#pid').val(itemid);
                });
            });

</script> -->


<!-- <script>
  $('#product-delete-form').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  $('#product-delete-form').attr('action', '/productlist.inventorydestroy/' + button.data('id'));
});
</script> -->

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Listen for delete button clicks
        document.querySelectorAll('.btn_itemdelete').forEach(button => {
            button.addEventListener('click', function () {
                const pid = this.getAttribute('data-id'); // Get the ID from the button's data-id attribute
                
                // Set the ID in the modal's hidden input field
                document.getElementById('pid').value = pid;

                // Optionally, dynamically update the form action (if needed)
                const deleteForm = document.getElementById('product-delete-form');
                const action = `{{ url('productlist/inventorydestroynewmothod') }}/${pid}`;
                deleteForm.setAttribute('action', action);
            });
        });
    });
</script>

<script>
document.getElementById('downloadCSV').addEventListener('click', function() {
    let table = document.getElementById('dataTable');
    let rows = table.querySelectorAll('tr');
    let csv = [];

    // Loop through each row and convert to CSV
    rows.forEach(function(row) {
        let cols = row.querySelectorAll('th, td');
        let rowData = [];
        
        cols.forEach(function(col) {
            rowData.push('"' + col.innerText + '"');  // Add double quotes to handle commas
        });

        csv.push(rowData.join(','));  // Join columns with commas
    });

    // Generate current date for filename
    let today = new Date();
    let formattedDate = today.getFullYear() + '-' 
                      + String(today.getMonth() + 1).padStart(2, '0') + '-' 
                      + String(today.getDate()).padStart(2, '0');  // Format: YYYY-MM-DD

    // Set file name with date
    let fileName = 'Inventory_' + formattedDate + '.csv';

    // Download the CSV
    let csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
    let downloadLink = document.createElement('a');
    downloadLink.download = fileName;  // Set the dynamic filename
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = 'none';

    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
});




</script> 


<!-- <script>
$(document).ready(function() {
    $('#dataTable').DataTable({
        dom: 'Bfrtip',  // Add buttons to the DataTable
        buttons: [
            {
                extend: 'csvHtml5',
                text: 'Download CSV',
                filename: 'Inventory_' + new Date().toISOString().slice(0,10),  // File name with date
                exportOptions: {
                    modifier: {
                        page: 'all'  // Export all pages
                    }
                }
            }
        ],
        paging: true,  // Enable pagination
        pageLength: 10  // Show 10 rows per page
    });
});
</script>  -->

<!-- <script>
$(document).ready(function() {
    // Initialize DataTable (if you're using DataTables)
    var $j = jQuery.noConflict();
    $j('#dataTable').DataTable({
        paging: true  // Enable pagination if needed
    });

    // Handle button click to download CSV
    $('#downloadCSV').on('click', function() {
        let table = document.getElementById('dataTable');
        let rows = table.querySelectorAll('tr');
        let csv = [];

        // Loop through each row and convert to CSV
        rows.forEach(function(row) {
            let cols = row.querySelectorAll('th, td');
            let rowData = [];
            
            cols.forEach(function(col) {
                rowData.push('"' + col.innerText + '"');  // Add double quotes for CSV formatting
            });

            csv.push(rowData.join(','));  // Join columns with commas
        });

        // Generate current date for filename
        let today = new Date();
        let formattedDate = today.getFullYear() + '-' 
                          + String(today.getMonth() + 1).padStart(2, '0') + '-' 
                          + String(today.getDate()).padStart(2, '0');  // Format: YYYY-MM-DD

        // Set dynamic file name
        let fileName = 'Inventory_' + formattedDate + '.csv';

        // Create CSV file and trigger download
        let csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
        let downloadLink = document.createElement('a');
        downloadLink.download = fileName;
        downloadLink.href = window.URL.createObjectURL(csvFile);
        downloadLink.style.display = 'none';

        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    });
});


</script> -->
@endsection