@extends('Backend.layouts.app')
<style>
    @keyframes blink {
        50% { opacity: 0; }
    }
    .blink {
        color: red;
        font-weight: bold;
        animation: blink 1s infinite;
    }
    .greenblink {
        color: rgb(74, 235, 74);
        font-weight: bold;
        animation: blink 1s infinite;
    }
</style>

@section('content')

<div class="nk-content ">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Stock List</h3>
                        </div><!-- .nk-block-head-content -->
                        
                        <div class="nk-block-head-content">
                           <h6 class="nk-block-title page-title">Stock Bale Count: <span id="baleCount">0</span></h5>
                        </div><!-- .nk-block-head-content -->
                        
                        <div class="nk-block-head-content">
                            
                            <form id="filterForm" method="get">
                                @csrf
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <div class="form-group mb-0">
                                        <label class="form-label" for="container_no">Container No</label>
                                        <select class="form-select js-select2" name="container_no" id="container_no" data-placeholder="Select Container" required>
                                            <option value="">Select Container</option>
                                            @foreach ($container as $data)
                                                <option value="{{ $data->id }}" {{ request('container_no') == $data->id ? 'selected' : '' }}>
                                                    {{ $data->prefix }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group mb-0">
                                        <button type="submit" class="btn btn-primary mt-4">
                                            <em class="icon ni ni-filter-fill"></em> FILTER
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div><!-- .nk-block-between -->
                </div><!-- .nk-block-head -->
                    <div class="nk-block nk-block-lg">

                        <div class="card card-bordered card-preview"  style="margin-top: 20px">
                            <div class="card-inner">
                                    <table class="table table-bordered" id="stockTable">
                                        <thead>
                                            <tr>
                                                <th>S.No</th>
                                                <th>Container No</th>
                                                <th>Product Name</th>
                                                <th>Bale NO</th>
                                                <th>Stock</th>
                                                {{-- <th>Customer</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                            </div>
                        </div><!-- .card-preview -->
                    </div>
             </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#filterForm').on('submit', function (e) {
            e.preventDefault();
            let containerNo = $('#container_no').val();

            $.ajax({
                url: "{{ route('getstock') }}",
                type: "GET",
                data: { container_no: containerNo },
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    let tableBody = $('#stockTable tbody');
                    tableBody.empty();

                    let uniqueBales = new Set(); // Store unique bale_no
                    let rowIndex = 1;  // Row index counter

                    if (response.length > 0) {
                        $.each(response, function (index, item) {
                            if (!uniqueBales.has(item.bale_no) && item.bale_no !== null) {
                                uniqueBales.add(item.bale_no); // Add unique bale_no

                                let row = `
                                    <tr>
                                        <td>${rowIndex}</td>  <!-- Display row index for unique bales -->
                                        <td>${item.prefix ?? '-'}</td>
                                        <td>${item.product_name ?? '-'}</td>
                                        <td>${item.bale_no ?? '-'}</td>
                                        <td style="color: #17E339;">${item.qty ?? '-'}</td>
                                    </tr>
                                `;
                                tableBody.append(row);
                                rowIndex++;  // Increment only for unique bale numbers
                            }
                        });

                        // Update Bale Count in the UI
                        $('#baleCount').text(uniqueBales.size);
                    } else {
                        tableBody.html('<tr><td colspan="5">No stock available</td></tr>');
                        $('#baleCount').text(0); // Reset bale count when no data
                    }
                },
                error: function () {
                    alert("Something went wrong. Please try again.");
                }
            });
        });
    });
</script>

@endsection