@extends('layout.mainlayout')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            @component('components.breadcrumb')
                @slot('title')
                    Stock Report
                @endslot
                @slot('li_1')
                    Manage Stock Report
                @endslot
                @slot('li_2')
                    {{ route('add-product') }}
                @endslot
                @slot('li_3')
                    Add New Product
                @endslot
                @slot('li_4')
                    Import Product
                @endslot
            @endcomponent
         

            <!-- /product list -->
            <div class="card table-list-card">
                <div class="card-body">
                    <div class="table-top">
                        <div class="search-set">
                            <div class="search-input">
                                <a href="javascript:void(0);" class="btn btn-searchset"><i data-feather="search"
                                        class="feather-search"></i></a>
                            </div>
                        </div>
                   

                        {{-- <div class="col-lg-2 col-sm-6 col-12">
                            <div class="input-blocks">
                           
                              <label class="form-label">Batch Filtration<sup class="required"></sup></label>
                              <select class="select" name="batch_no" id="batchFilter">
                                <option value="">---Select Batch No---</option>
                                @foreach($batches as $batch)
                                    <option value="{{$batch->id}}">{{ $batch->batch_no }}</option>
                                @endforeach
                            </select>
                            
                            </div>
                        </div> --}}
                     
                    </div>
                    <!-- /Filter -->
                  
                    <!-- /Filter -->
                    

                    <div class="table-responsive product-list">
                        <!-- Display success message above the table -->
@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

<div class="export-buttons">
    <button id="export-excel" class="btn btn-primary">Export to Excel</button>
    <button id="export-pdf" class="btn btn-secondary">Export to PDF</button>
</div>
                        <table class="table">
                            <thead>
                                <tr>
                                   
                                    <th>Product</th>
                                    <th>qty</th>
                                    <th>Purchases Price</th>
                                    <th>Selling Price</th>
                                    <th>Model No</th>
                                    {{-- <th>Pcd</th> --}}
                                    <th>status</th>

                                  
                                    
                                </tr>
                            </thead>
                            <tbody>
                                                                
                             
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /product list -->
        </div>
    </div>


    <!-- For Excel export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.2/xlsx.full.min.js"></script>

<!-- For PDF export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // Initialize DataTable
        var dataTable = $('.datanewnew').DataTable({
            destroy: true,
            paging: true,
            searching: true,
            ordering: true,
            responsive: true
        });

        $('#batchFilter').on('change', function () {
            var batchId = $(this).val();
            $.ajax({
                url: '{{ url("/filter-products-by-batch") }}',
                type: 'GET',
                data: { batch_no: batchId },
                success: function (data) {
                    // Destroy old instance
                    dataTable.destroy();

                    // Replace tbody content
                    $('table.datanew tbody').html(data);

                    // Re-initialize DataTable
                    dataTable = $('.datanew').DataTable({
                        destroy: true,
                        paging: true,
                        searching: true,
                        ordering: true,
                        responsive: true
                    });

                    feather.replace(); // re-render icons if using Feather icons
                },
                error: function (xhr) {
                    alert('Error loading filtered data.');
                    console.log(xhr.responseText);
                }
            });
        });
    });



    
</script>
<script>
        document.getElementById('export-excel').addEventListener('click', function () {
            let table = document.querySelector('.table');
            let wb = XLSX.utils.table_to_book(table, { sheet: "Sheet 1" });
            XLSX.writeFile(wb, 'products.xlsx');
        });

        document.getElementById('export-pdf').addEventListener('click', function () {
            const { jsPDF } = window.jspdf;
            let doc = new jsPDF();

            let table = document.querySelector('.table');
            let rows = table.querySelectorAll('tr');
            let tableData = [];

            rows.forEach((row, index) => {
                let rowData = [];
                let cells = row.querySelectorAll('td, th');
                cells.forEach(cell => rowData.push(cell.innerText.trim()));
                if (rowData.length > 0) tableData.push(rowData);
            });

            doc.autoTable({
                head: [tableData[0]], // First row as header
                body: tableData.slice(1), // Remaining rows as body
                theme: 'grid',
            });

            doc.save('products.pdf');
        });
    </script>

@endsection