{{-- Extends layout --}}
@extends('layout.order_layout')

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
    <style>
        .cart-label{
            right: -1rem;
        }

        input.form-control.text-center.qtyInput {
            max-width: 55px;
        }

        .qty-group{
            /* min-width: 100px;
            max-width: 120px;
            margin: auto; */
            width: 100% !important;

        }

    </style>

<!--end::Page Custom Styles-->
@endsection

{{-- Content --}}
@section('content')

    <!--begin::Card-->
    <div class="card card-custom card-stretch gutter-b">
        @if (session('status'))

            {{-- Success Alert --}}
            <div class="alert alert-custom alert-notice alert-light-danger fade show gutter-b" role="alert">
                <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
                <div class="alert-text">{{session('status')}}</div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="ki ki-close"></i></span>
                    </button>
                </div>
            </div>

        @endif

        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Create New Order</h3>
                {{-- <button class="btn btn-primary testbtn">test</button> --}}
            </div>

            <div class="float-right my-auto position-relative cart">
                <a href="#cartModal" class="btn btn-lg btn-text-primary btn-hover-light-primary btn-icon" title="Cart" data-toggle = "modal">
                    <i class="flaticon2-shopping-cart-1"></i>
                </a>
                <span class="label label-light-danger position-absolute cart-label"></span>
            </div>

        </div>
        
        <!--begin::Form-->
        
            
            <div class="card-body product-price-card">
            
                <!--begin: Search Form-->
                <!--begin::Search Form-->
                <div class="mb-7">
                    <div class="row align-items-center">
                        <div class="col-lg-12 col-xl-12">
                            
                            <!--begin::Name-->
                            <div class="form-group row">
                                <label class="col-form-label col-lg-2 col-sm-12 font-weight-bolder">Outlet:</label>
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <label class="col-form-label">{{$outlet->Name}}</label>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2 col-sm-12 font-weight-bolder">Delivery Date:</label>
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <div class="input-group date" >
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="la la-calendar"></i>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control delivery-date" readonly  placeholder="mm/dd/yyyy" name="date" required id="kt_datepicker_3"/>
                                        
                                    </div> 
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2 col-sm-12 font-weight-bolder">Search Item:</label>
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <div class="input-icon">
                                        <input type="text" class="form-control" placeholder="Search..." id="kt_datatable_search_query"/>
                                        <span>
                                            <i class="flaticon2-search-1 text-muted"></i>
                                        </span>
                                    </div>
                                </div>
                                
                            </div>
                            
                            
                            <div class="row align-items-center">
                                
                                <div class="col-md-3 my-2 my-md-0">
                                    
                                </div>
                                
                            </div>
                        </div>
                        {{-- <div class="col-lg-3 col-xl-4 mt-5 mt-lg-0">
                            <a href="#" class="btn btn-light-primary px-6 font-weight-bold">Search</a>
                            <button type="submit" class="btn btn-primary">Update Price</button>
                            <button type="reset" class="btn btn-secondary ml-3" data-dismiss="modal">Cancel</button>
                        </div> --}}
                    </div>
                </div>
                <!--end::Search Form-->
                <!--end: Search Form-->
            
                <!--begin: Datatable-->
                <table class="datatable datatable-bordered datatable-head-custom default-price-table" id="kt_datatable">
                    <thead>
                    <tr>
                        <th title="">Sl</th>
                        <th title="">Item Code</th>
                        <th title="">Item Name</th>
                        <th title="">Unit</th>
                        <th title="">Pack Size</th>
                        <th title="">Stock</th>
                        <th title="">Price</th>
                        <th title="">Add To Cart</th>
                    </tr>
                    </thead>

                    <tbody id="product_price_html_tbody">
                        @foreach ($productPrices as $index=>$productPrice)
                        <tr>
                            <td>{{$index+1}}</td>
                            <td>{{$productPrice->Code}}</td>
                            <td>{{$productPrice->Name}}</td>
                            <td>{{$productPrice->Unit}}</td>
                            <td>{{$productPrice->PackSize}}</td>
                            <td>{{$productPrice->Qty}}</td>
                            <td>{{$productPrice->Price}}</td>
                            <td><!--begin::price Number-->
                                <div class="input-group">
                                    {{-- <div class="input-group-prepend order-qty-minus">
                                        <button type="button" class="btn btn-secondary">-</button>
                                    </div> --}}
                                    <input type="text" onClick="this.select()" class="form-control  text-center qtyInput"  value="1" />
                                    <div class="input-group-append order-qty-plus">
                                        <button type="button" class="btn btn-light-warning font-weight-bold">Add <span class="d-none d-sm-none d-md-inline-block d-lg-inline-block d-xl-inline-block">to Cart</span></button>
                                    </div>
                                </div>
                            </td>

                        </tr>
                        @endforeach
                        
                    </tbody>


                </table>
                <!--end: Datatable-->
            </div>

            
        </form>
        <!--end::Form-->

    </div>
    <!--end::Card-->

    <!--begin::Modal-->
    <div id="cartModal" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" style="min-height: 590px;">
                <div class="modal-header py-5">
                    <h5 class="modal-title">Order Details
                    <span class="d-block text-muted font-size-sm">{{date('d/m/y')}}</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <form id="order-form" method="POST" action="{{ route('order.store') }}">
                    
                    @csrf
                    <div class="modal-body container">
                        
                        <div class="row pb-5 my-5 border-bottom">
                            <span class="h4 ml-5">Outlet Information:</span>
                        </div>

                        <div class="mb-7 ml-7">
                            <!--begin::Name-->
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Outlet Name:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->Name}}</label>
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Outlet Address:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->Address}}</label>
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Contact Person:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->ContactPerson}}</label>
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Contact No:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->ContactPersonNo}}</label>
                                    </div>
                                </div>
                                
                        </div>


                        
                        <div class="row border-bottom border-top mb-5">
                            <span class="h4 ml-5 my-5">Item List</span>
                        </div>

                        <div class="table-responsive-lg" style="overflow-x:auto;">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">Item Name</th>
                                        <th scope="col" class="text-center">Qty</th>
                                        <th scope="col">Rate</th>
                                        <th scope="col">Total</th>
                                        {{-- <th scope="col">Action</th> --}}
                                    </tr>
                                </thead>
                                <tbody class="product-container mt-3"></tbody>
                                <tfoot class="total-container">
                                </tfoot>
                            </table>
                        </div>                            
                    </div>
                    <div class="modal-footer">
                        <div class="hidden-input">
                            <input type="hidden" name="outlet_id" value="{{$outlet->Id}}">
                            <input type="hidden" id="delivery_date" name="delivery_date" value="">
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary px-10 float-right order-submit-btn ">Place Order</button>
                                <button type="button" class="btn btn-light-primary px-10 float-right order-submit-btn mr-3" onclick="clearCart()">Clear Cart</button>
                            
                            </div>                            
                        </div>
                    </div>
                </form>    
            </div>
        </div>
    </div>
    <!--end::Modal-->

@endsection

{{-- Scripts Section --}}
@section('scripts')

    <!--begin::Page Scripts(used by this page)-->
    <script>
        function clearCart(){
            localStorage.removeItem("productsInCart");
            localStorage.removeItem("processedCart");
            localStorage.removeItem("totalCost");
            localStorage.removeItem("cartNumbers");

            $('.product-container').html("No Item in the cart");
            $('.total-container').html("");
            $('.cart-label').html("");
        }
        
    </script>

    
    <script src="{{ asset('js/pages/custom/order/outletwise-order-table.js') }}" type="module"></script>
    <script src="{{ asset("js/pages/crud/forms/widgets/bootstrap-datepicker.js") }}"></script>

	<!--end::Page Scripts-->
@endsection