@extends('packer.layouts.master')

@section('title', 'Order Packing')

@section('css')
<style>

    .highlight-row {
        background-color: #ffff99; /* Change this to your desired highlight color */
    }


</style>
@endsection

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

        <div class="row">
            <div class="col-lg-12">
                <div class="card" id="customerList">
                    <div class="card-header border-bottom-dashed">
                        <div class="row g-4 align-items-center">
                            <div class="col-sm">
                                <div>
                                    <h5 class="card-title mb-0">Order Details</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body border-bottom-dashed border-bottom">
                        <div class="row">
                            <div class="col-md-12">
                                <label for="query">Scan Product QRcode</label>
                                <input type="text" class="form-control" id="qrcode" placeholder="Scan Product QRcode">
                            </div>
                        </div>

                        <div id="productCardContainer" class="row mt-4">
                            <div class="col-lg-12" id="productCard" style="display: none;">
                                <div class="card">
                                    <div class="card-header border-bottom-dashed">
                                        <div class="row g-4 align-items-center">
                                            <div class="col-sm">
                                                <div>
                                                    <h5 class="card-title mb-0" id="productName"></h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body border-bottom-dashed border-bottom">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <table class="table table-hover table-borderd">
                                                    <thead>
                                                        <tr>
                                                            <th>Image</th>
                                                            <th>Name</th>
                                                            <th>SKU</th>
                                                            <th>QRcode</th>
                                                            <th>Quantity</th>
                                                            {{-- <th>Price</th>
                                                            <th>Total Amount</th> --}}
                                                        </tr>
                                                    </thead>
                                                    <tbody id="productTableBody"></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @php
                $unverifiedProducts = $order->orderDetails->where('is_verified', false);
                $verifiedProducts = $order->orderDetails->where('is_verified', true);
            @endphp
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header border-bottom-dashed">
                        <div class="row g-4 align-items-center">
                            <div class="col-sm">
                                <div>
                                    <h5 class="card-title mb-0">Products List</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body border-bottom-dashed border-bottom">
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-hover table-borderd">
                                    <thead>
                                        <tr>
                                            <th>Image</th>
                                            <th>Name</th>
                                            <th>SKU</th>
                                            <th>QRcode</th>
                                            <th>Quantity</th>
                                            {{-- <th>Price</th>
                                            <th>Total Amount</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody id="productList">
                                        @foreach ($unverifiedProducts  as $orderDetail)
                                            <tr data-product_id="{{ $orderDetail->product_id }}">
                                                <td>
                                                    <img src="{{ asset($orderDetail->product?->thumbnail_image) }}"
                                                        alt="product image" width="50px">
                                                </td>
                                                <td>{{ $orderDetail->product->name }}</td>
                                                <td>{{ $orderDetail->product->sku }}</td>
                                                <td>{{ $orderDetail->product->qrcode }}</td>
                                                <td>{{ $orderDetail->quantity }}</td>
                                                {{-- <td>{{ $orderDetail->price }}</td>
                                                <td>{{ $orderDetail->total_amount }}</td> --}}
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12" id="verifiedProductCard"
                @if(count($verifiedProducts) == 0)
                style="display: none;"
                @endif
             >
                <div class="card">
                    <div class="card-header border-bottom-dashed">
                        <div class="row g-4 align-items-center">
                            <div class="col-sm">
                                <div>
                                    <h5 class="card-title mb-0">Verified Products List</h5>
                                    @if (count($verifiedProducts) == count($order->orderDetails))
                                        {{--  mark as packed  --}}
                                        <form action="{{ route('packer.order.mark.as.packed', $order->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-success float-end"
                                            onclick="return confirm('Are you sure you want to mark this order as packed?')"
                                            >Mark as Packed</button>
                                        </form>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body border-bottom-dashed border-bottom">
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-hover table-borderd">
                                    <thead>
                                        <tr>
                                            <th>Image</th>
                                            <th>Name</th>
                                            <th>SKU</th>
                                            <th>QRcode</th>
                                            <th>Quantity</th>
                                        </tr>
                                    </thead>
                                    <tbody id="verifiedProductTableBody">
                                        @foreach ($verifiedProducts  as $orderDetail)
                                            <tr data-product_id="{{ $orderDetail->product_id }}">
                                                <td>
                                                    <img src="{{ asset($orderDetail->product?->thumbnail_image) }}"
                                                        alt="product image" width="50px">
                                                </td>
                                                <td>{{ $orderDetail->product->name }}</td>
                                                <td>{{ $orderDetail->product->sku }}</td>
                                                <td>{{ $orderDetail->product->qrcode }}</td>
                                                <td>{{ $orderDetail->quantity }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

@endsection

@section('js')
    <script>
        $(document).ready(function () {
            var timer;

            $('#qrcode').on('input', function () {
                clearTimeout(timer);

                // Set a timer to delay the AJAX request by 500 milliseconds
                timer = setTimeout(function () {
                    var qrcode = $('#qrcode').val();

                    $.ajax({
                        type: 'POST',
                        url: '{{ route('packer.order.verify.product') }}',
                        data: {
                            _token: '{{ csrf_token() }}',
                            qrcode: qrcode,
                            order_id: {{ $order->id }} // Pass the order ID here
                        },
                        success: function (response) {
                            // Product verification successful
                            var orderDetail = response.orderDetail;
                            var product = orderDetail.product;

                            console.log(product);

                            // Remove highlighting from previously highlighted row
                            $('#productList').find('.highlight-row').removeClass('highlight-row');

                            // Show the product card with an empty quantity input field
                            $('#productName').text(product.name);
                            $('#productTableBody').html('<tr data-product_id="' + product.id + '" class="highlight-row">' +
                                '<td><img src="/' + product.thumbnail_image + '" alt="product image" width="50px"></td>' +
                                '<td>' + product.name + '</td>' +
                                '<td>' + product.sku + '</td>' +
                                '<td>' + product.qrcode + '</td>' +
                                '<td><input type="number" class="form-control" id="quantityInput" min="1" data-required_qty='+orderDetail.quantity+'></td>' +
                                '</tr>');

                            $('#productCard').show();

                            // Highlight the corresponding row in the product list table
                            var productListRow = $('#productList').find('[data-product_id="' + product.id + '"]');
                            productListRow.addClass('highlight-row');

                            // Add event listener to the quantity input field for validation on Enter key press
                            $('#quantityInput').on('keydown', function (event) {
                                if (event.key === 'Enter') {
                                    event.preventDefault(); // Prevent the default form submission behavior

                                    var enteredQuantity = parseInt($(this).val(), 10);
                                    var validQuantity = $(this).data('required_qty');

                                    if (isNaN(enteredQuantity) || enteredQuantity != validQuantity) {
                                        // Handle invalid quantity (e.g., display an error message)
                                        // myToast.show('error', 'Invalid quantity');
                                        alert('Invalid Quantity!');
                                    } else {
                                        $.ajax({
                                            type: 'POST',
                                            url: '{{ route('packer.order.verify.product') }}',
                                            data: {
                                                _token: '{{ csrf_token() }}',
                                                qrcode: product.qrcode,
                                                order_id: {{ $order->id }}, // Pass the order ID here
                                                is_verified: true
                                            },
                                            success: function (response) {
                                                // myToast.show('success', response.message);
                                                alert(response.message);
                                            },
                                            error: function (error) {
                                                console.log(error);
                                                // myToast.show('error', error.responseJSON.message);
                                                alert(error.responseJSON.message);
                                            }
                                        });
                                        // Quantity is valid, move the product to the verified products list
                                        moveProductToVerifiedList(product);

                                        // Remove the product from the product list
                                        productListRow.remove();

                                        // Clear the input field
                                        $('#qrcode').val('');

                                        // Hide the product card
                                        $('#productCard').hide();

                                    }
                                }
                            });

                            // myToast.show('success', response.message);
                            alert(response.message);
                        },
                        error: function (error) {
                            console.log(error);
                            // myToast.show('error', error.responseJSON.message);
                            alert(error.responseJSON.message);
                        }
                    });
                }, 500); // 500 milliseconds delay
            });

            function moveProductToVerifiedList(product) {
                // Show the verified products card if it's hidden
                $('#verifiedProductCard').show();

                // Append the product to the verified products list
                $('#verifiedProductTableBody').append('<tr data-product_id="' + product.id + '">' +
                    '<td><img src="/' + product.thumbnail_image + '" alt="product image" width="50px"></td>' +
                    '<td>' + product.name + '</td>' +
                    '<td>' + product.sku + '</td>' +
                    '<td>' + product.qrcode + '</td>' +
                    '<td>' + $('#quantityInput').val() + '</td>' +
                    '</tr>');
            }
        });
    </script>
@endsection