@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Stock Report')
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Stock Report</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Stock Report</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="employee">Supplier</label>
                                            <select class="form-control" id="id_supplier" name="id_supplier">
                                                <option value="" disabled selected>Select a Supplier</option>
                                                @foreach($supplier as $suppliers)
                                                    <option value="{{$suppliers->idSupplier}}">{{$suppliers->Full_Name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="date">Item Name</label>
                                            <input type="text" class="form-control" id="itemName" name="itemName">
                                        </div>
                                        <input style="float: right" type="button" class="btn btn-danger" value="Search" onclick="loadStockReport()">
                                        <input style="float: right; margin-right: 10px;" type="button" class="btn btn-success" value="Download Excel" onclick="exportReport()">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">View Supplier Details</h3>
                            </div>
                            <div class="card-body">
                                <table id="stock" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                        <th>#</th>
                                        <th>Supplier Name</th>
                                        <th>Category</th>
                                        <th>Name</th>
                                        <th>Cost</th>
                                        <th>Selling Price</th>
                                        <th>Barcode</th>
                                        <th>Stock in Hand</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('script')
    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- DataTables -->
    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <!-- DataTables Buttons JS -->
    <script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="../plugins/jszip/jszip.min.js"></script>
    <script src="../plugins/pdfmake/pdfmake.min.js"></script>
    <script src="../plugins/pdfmake/vfs_fonts.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/adminlte.min.js"></script>
    <!-- Additional Scripts -->
    <script src="../JS/validate.js"></script>
    <script src="../JS/invoice.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(function () {
            $('#stock').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "buttons": [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            });
        });

        function loadStockReport() {
    let id_supplier = $('#id_supplier').val();
    let itemName = $('#itemName').val();
    $.ajax({
        type: "POST",
        url: "/stockreport/show",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            id_supplier: id_supplier,
            itemName: itemName,
        },
        success: function(data) {
            let stockAmount = 0;
            let table = $('#stock').DataTable();
            table.clear().draw();

            data.stock.forEach((stock, index) => {
                let rowData = [
                    index + 1,
                    stock.supplier.Full_Name,
                    stock.itemcategory.Description,
                    stock.Description,
                    parseFloat(stock.Cost).toFixed(2),
                    parseFloat(stock.Rate).toFixed(2),
                    stock.Barcode ?? '-',
                    stock.QTY
                ];
                table.row.add(rowData);
                stockAmount += parseFloat(stock.QTY) || 0;
            });

            table.draw();

            // Append a row for total quantity at the bottom of the table
            table.row.add(['Total Qty', '', '', '', '', '', '', stockAmount]).draw();
            
        }
    });
}
function exportReport() {
    let id_supplier = $('#id_supplier').val();
    let itemName = $('#itemName').val();

    let form = $('<form action="/stockreport/export" method="POST" style="display:none;">');
    form.append('<input type="hidden" name="id_supplier" value="' + id_supplier + '">');
    form.append('<input type="hidden" name="itemName" value="' + itemName + '">');
    form.append('@csrf');

    $('body').append(form);
    form.submit();
}

    </script>
@endsection