@extends('layouts.app')


@section('content')
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-danger">
            {{ session()->get('error') }}
        </div>
    @endif
    <div class="card">
        <div class="card-body">
        <ul class="nav nav-tabs mb-3">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('orders.booking') }}">New Booking</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link @if(Request::segment(2) == 'pending_booking') active @endif" href="{{ route('orders.pending_booking') }}">Pending Orders</a>
                </li>
            </ul>
            <div class="mb-4 clearfix">
                <h4 class="float-left">Pending Booking</h4>
            </div>
            <form action="{{ route('orders.pending_booking') }}" method="GET">
                <div class="form-group">
                    <label>Order #</label>
                    <input type="text" name="order" class="form-control" placeholder="Example: AKG1145000511">
                </div>
                <button type="submit" class="btn btn-primary btn-sm">Fetch</button>
            </form>
            @if(Request::has('order'))
            <form action="{{ route('orders.booking.store') }}" method="POST">
                @csrf
                <input type="hidden" name="increment_id" value="{{ Request::input('order') }}">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <ul class="booking-general-details my-4 list-unstyled">
                            <li>
                                <i class="fas fa-user"></i>
                                <div class="text">Name: <b>{{ ucfirst($order->customer_firstname).' '.ucfirst($order->customer_lastname) }}</b></div>
                                <input type="hidden" name="customer_name" value="{{ $order->customer_firstname.' '.ucfirst($order->customer_lastname) }}">
                            </li>
                            <li>
                                <i class="fas fa-city"></i>
                                <div class="text">City: <b>{{ ucfirst($order->address_city) }}</b></div>
                                <input type="hidden" name="customer_city" value="{{ $order->address_city }}">
                            </li>
                            <li>
                                <i class="fas fa-address-card"></i>
                                <div class="text">Address: <b>{{ ucfirst($order->customer_address) }}</b></div>
                                <input type="hidden" name="customer_address" value="{{ $order->customer_address }}">
                            </li>
                            <li>
                                <i class="fas fa-phone-square"></i>
                                <div class="text">Phone: <b>{{ ucfirst($order->customer_phone) }}</b></div>
                                <input type="hidden" name="customer_phone" value="{{ $order->customer_phone }}">
                            </li>
                        </ul>   
                    </div>
                    <div class="col-12 col-md-6">
                        <ul class="booking-general-details my-4 list-unstyled">
                            <li>
                                <i class="fas fa-money-bill"></i>
                                <div class="text">Subtotal: <b>{{ number_format($order->subtotal, 2) }}</b></div>
                                <input type="hidden" name="order_subtotal" value="{{ $order->subtotal }}">
                            </li>
                            <li>
                                <i class="fas fa-shipping-fast"></i>
                                <div class="text">Shipping Amount: <b>{{ number_format($order->shipping_amount, 2) }}</b></div>
                                <input type="hidden" name="order_shipping_amount" value="{{ $order->shipping_amount }}">
                            </li>
                            <li>
                                <i class="fas fa-tag"></i>
                                <div class="text">Tax Amount: <b>{{ number_format($order->tax_amount, 2) }}</b></div>
                                <input type="hidden" name="order_tax_amount" value="{{ $order->tax_amount }}">
                            </li>
                            <li>
                                <i class="fas fa-tags"></i>
                                <div class="text">Discount Amount: <b>{{ number_format($order->discount_amount, 2) }}</b></div>
                                <input type="hidden" name="order_discount_amount" value="{{ $order->discount_amount }}">
                            </li>
                            <li>
                                <i class="fas fa-money-check"></i>
                                <div class="text">Payment Method: <b>{{ $order->paymant_method }}</b></div>
                                <input type="hidden" name="order_payment_method" value="{{ $order->paymant_method }}">
                            </li>
                            <li>
                                <i class="fas fa-truck"></i>
                                <div class="text">Shipping Method: <b>{{ $order->order_shipping_description }}</b></div>
                                <input type="hidden" name="order_shipping_description" value="{{ $order->order_shipping_description }}">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="scan-items">
                    <div class="form-group">
                        <input type="text" class="form-control scan-control" placeholder="Scan UPC">
                    </div>
                </div>
                <div class="table-wrapper overflow-card-body">
                    <table class="table item-table">
                        <thead class=" text-primary">
                            <th>Upc</th>
                            <th>Sku</th>
                            <th>Weight</th>
                            <th>Row Total</th>
                            <th>Ordered Quantity</th>
                            <th>Remaining Quantity</th>
                            <th>Confirmed Quantity</th>
                            <th>Item Status</th>
                            <th>Remarks</th>
                            <th>Package</th>
                        </thead>
                        <tbody>
                            @foreach($pendingOrderItems as $orderItem)
                                <input type="hidden" name="item_id[]" class="{{ $orderItem->upc }}" value="{{ $orderItem->item_id }}">
                                <tr class="{{ $orderItem->item_id }}">
                                    <td>
                                        {{ $orderItem->upc }}
                                        <input type="hidden" name="upc[]" value="{{ $orderItem->upc }}">
                                    </td>
                                    <td>
                                        {{ $orderItem->item_sku }}
                                        <input type="hidden" name="sku[]" value="{{ $orderItem->item_sku }}">
                                    </td>
                                    <td>
                                        {{ $orderItem->item_weight }}
                                        <input type="hidden" name="item_weight[]" value="{{ $orderItem->item_weight }}">
                                    </td>
                                    <td>
                                        {{ number_format($orderItem->item_row_total, 2) }}
                                        <input type="hidden" name="item_row_total[]" value="{{ $orderItem->item_price }}">
                                        <input type="hidden" name="item_discount[]" value="{{ $orderItem->item_discount_amount }}">
                                        <input type="hidden" name="item_tax[]" value="{{ $orderItem->item_tax_amount }}">
                                    </td>
                                    <td class="ordered_quantity_{{ $orderItem->item_id }}">
                                        <div>{{ floor($orderItem->item_quantity_ordered) }}</div>
                                        <input type="hidden" name="quantity_ordered[]" value="{{ $orderItem->item_quantity_ordered }}">
                                    </td>
                                    <td class="remaining_quantity_{{ $orderItem->item_id }}">
                                        <div>{{ floor($orderItem->item_quantity_ordered) }}</div>
                                        <input type="hidden" name="quantity_remaining[]" value="{{ $orderItem->item_quantity_ordered }}">
                                    </td>
                                    <td class="confirmed_quantity_{{ $orderItem->item_id }}">
                                        <div>{{ $orderItem->itemConfirmQty }}</div>
                                        <input type="hidden" name="quantity_confirmed[]" value="{{ $orderItem->itemConfirmQty }}">
                                    </td>
                                    <td class="confirmed_status_{{ $orderItem->item_id }}">
                                        <div>Not Confirm</div>
                                        <input type="hidden" name="confirmed_status[]" value="Not Confirm">
                                    </td>
                                    <td>
                                        <select class="form-control" name="remarks[]"> 
                                            <option value="" selected></option> 
                                            <option value="Out of Stock">Out of Stock</option> 
                                            <option value="Inventory on Hold">Inventory on Hold</option> 
                                            <option value="Wrong UPC">Wrong UPC</option> 
                                            <option value="Pending">Pending</option> 
                                            <option value="Other">Other</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" name="package[]" class="form-control">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <input type="hidden" name="pieces" class="form-control" value="0">
                <input type="hidden" name="weight" class="form-control" value="0">
                <input type="hidden" name="cod_amount" class="form-control" value="0">
                <div class="form-group mt-4">
                    <label>Shippment Type</label>
                    <select name="shippment_type" class="form-control">
                        <option value="" disabled selected>Choose</option>
                        @foreach($shippment_types as $shipping_type)
                            <option value="{{ $shipping_type->value }}">{{ $shipping_type->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-sm">Book</button>
                </div>
            </form>
            @endif
        </div>
    </div>
@endsection

@section('script') 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/scannerdetection/1.2.0/jquery.scannerdetection.js"></script>
    <script>
        jQuery(document).scannerDetection({
            timeBeforeScanTest: 200,
            startChar: [120],
            endChar: [13], 
            onComplete: function(barcode, qty){ 
                $('.scan-control').val(barcode);
            }
        });
        $(document).ready(function(){
            $('.scan-control').on('input', function(){
                var upc, item_id, ordered_quantity, remaining_quantity, confirmed_quantity;
                upc = $(this).val();
                item_id = $('table').find('.'+upc).val();
                ordered_quantity = parseInt($('table').find('.ordered_quantity_'+item_id+' input').val());
                remaining_quantity = parseInt($('table').find('.remaining_quantity_'+item_id+' input').val());
                confirmed_quantity = parseInt($('table').find('.confirmed_quantity_'+item_id+' input').val());

                if(remaining_quantity != 0){
                    remaining_quantity = remaining_quantity-1;
                    $('table').find('.remaining_quantity_'+item_id+' div').html(remaining_quantity);
                    $('table').find('.remaining_quantity_'+item_id+' input').val(remaining_quantity);
                    
                    confirmed_quantity = confirmed_quantity+1;
                    $('table').find('.confirmed_quantity_'+item_id+' div').html(confirmed_quantity);
                    $('table').find('.confirmed_quantity_'+item_id+' input').val(confirmed_quantity);
                }else{
                    alert('Item already scanned');
                }
                
                if(ordered_quantity == confirmed_quantity){
                    $('table').find('.'+item_id).css({'background-color' : '#48C749', 'color' : '#ffffff'});
                    $('table').find('.confirmed_status_'+item_id+' div').html('Confirmed');
                    $('table').find('.confirmed_status_'+item_id+' input').val('Confirmed');
                }
            });
        });
    </script>
@endsection