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

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
    <style>
        .invoice-logo{
            max-width: 100px;
        }

        .qty-group{
            min-width: 100px;
            max-width: 120px;
            margin: auto;
        }
        
    </style>
	<!--end::Page Custom Styles-->
@endsection

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

    <!-- begin::Card-->
    <div class="card card-custom overflow-hidden">

        @if (session('status'))

            {{-- Success Alert --}}
            <div class="alert alert-custom alert-notice alert-light-success 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-body p-0">
            <!-- begin: Invoice-->
            <!-- begin: Invoice header-->
            <div class="row justify-content-center py-8 px-8 py-md-27 px-md-0">
                <div class="col-md-9">
                    <div class="d-flex justify-content-between pb-10 pb-md-20 flex-column flex-md-row">
                        <h1 class="display-4 font-weight-boldest mb-10">Collection</h1>
                        
                        
                        {{-- <img class="invoice-logo" src="{{ asset('media/logos/igloo-logo.png') }}" alt=""> --}}
                        
                        <div class="d-flex flex-column align-items-md-end px-0 igloo-about">
                            <!--begin::Logo-->
                            <a href="#" class="mb-5">
                                <img class="invoice-logo" src="{{ asset('media/logos/igloo-logo.png') }}" alt="" />
                            </a>
                            <!--end::Logo-->
                            <span class="d-flex flex-column align-items-md-end opacity-70">
                                <span>Level 13, Monem Business District,</span>
                                <span>111 Sonargaon Road, Dhaka 1205</span>
                            </span>
                        </div>
                    </div>
                    <div class="border-bottom w-100"></div>

                    
                    <div class="d-flex justify-content-between pt-6">
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">DATE</span>
                            <span class="opacity-70">12-03-2021</span>
                        </div>
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2"></span>
                            <span class="opacity-70"></span>
                        </div>

                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">Outlet Information</span>
                            <span class="opacity-70">
                                {{-- {{$invoiceDetails[0]->OutletName}}, {{$invoiceDetails[0]->Address}}                                
                                @if ($invoiceDetails[0]->ContactPerson != $invoiceDetails[0]->OutletName)
                                    <br /> {{$invoiceDetails[0]->ContactPerson}}
                                @endif
                                <br>{{$invoiceDetails[0]->ContactPersonNo}} --}}
                                <span>{{$outlet->Name}}, {{$outlet->Address}}
                                    <br>{{$outlet->ContactPerson}}, {{$outlet->ContactPersonNo}}
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end: Invoice header-->
            <!-- begin: Invoice body-->
            <form action="{{route('sales.store')}}" method="POST">
                @csrf

                <input type="hidden" name="order_id" value="{{$orderDetails[0]->OrderId}}">
                <input type="hidden" name="outlet_id" value="{{$orderDetails[0]->OutletId}}">

                <div class="row justify-content-center py-8 px-8 py-md-10 px-md-0">
                    <div class="col-md-9">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="pl-0 font-weight-bold text-muted text-uppercase">Description</th>
                                        <th class="text-center font-weight-bold text-muted text-uppercase">Qty</th>
                                        <th class="text-right font-weight-bold text-muted text-uppercase">Rate</th>
                                        <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($orderDetails as $index=>$order)
                                        @if ($index == 0)
                                            <tr class="font-weight-boldest">
                                                <td class="pl-0 pt-7">
                                                    {{$order->ProductName}}
                                                </td>
                                                <td class="text-right pt-7">
                                                    <div class="input-group qty-group">
                                                        <div class="input-group-prepend inv-qty-minus">
                                                            <button type="button" class="btn btn-light-primary">-</button>
                                                        </div>
                                                        <input type="text" class="form-control text-center qtyInput font-weight-bolder px-0" name="order_qty[{{$order->ProductCode}}]" value="{{$order->Quantity}}" />
                                                        <div class="input-group-append inv-qty-plus">
                                                            <button type="button" class="btn btn-light-primary">+</button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-right pt-7" data-field="Rate">
                                                    {{$order->Rate}}
                                                </td>
                                                <td class="text-danger pr-0 pt-7 text-right" data-field="Amount">{{$order->Amount}}</td>
                                            </tr>
                                            <input type="hidden" name="price[{{$order->ProductCode}}]" value="{{$order->Rate}}">
                                        @else
                                            <tr class="font-weight-boldest">
                                                <td class="border-top-0 pl-0 py-4">{{$order->ProductName}}</td>
                                                <td class="border-top-0 text-right py-4">
                                                    <div class="input-group qty-group">
                                                        <div class="input-group-prepend inv-qty-minus">
                                                            <button type="button" class="btn btn-light-primary">-</button>
                                                        </div>
                                                        <input type="text" class="form-control text-center qtyInput font-weight-bolder px-0" name="order_qty[{{$order->ProductCode}}]" value="{{$order->Quantity}}" />
                                                        <div class="input-group-append inv-qty-plus">
                                                            <button type="button" class="btn btn-light-primary">+</button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="border-top-0 text-right py-4" data-field="Rate">
                                                    {{$order->Rate}}
                                                </td>
                                                <td class="text-danger border-top-0 pr-0 py-4 text-right" data-field="Amount">{{$order->Amount}}</td>
                                            </tr>
                                            <input type="hidden" name="price[{{$order->ProductCode}}]" value="{{$order->Rate}}">

                                        @endif                                 
                                    @endforeach     
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- end: Invoice body-->
                <!-- begin: Invoice footer-->
                <div class="row justify-content-center bg-gray-100 py-8 px-8 py-md-10 px-md-0">
                    <div class="col-md-9">
                        <div class="d-flex justify-content-between flex-column flex-md-row font-size-lg">
                            <div class="d-flex flex-column mb-10 mb-md-0">
                                <div class="font-weight-bolder font-size-lg mb-3">Cost Details</div>
                                <div class="d-flex justify-content-between mb-3">
                                    <span class="mr-15 font-weight-bold">Discount:</span>
                                    <span class="text-right">0.00</span>
                                </div>
                                <div class="d-flex justify-content-between mb-3">
                                    <span class="mr-15 font-weight-bold">Tax:</span>
                                    <span class="text-right">1234567890934</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span class="mr-15 font-weight-bold">Code:</span>
                                    <span class="text-right">BARC0032UK</span>
                                </div>
                            </div>
                            <div class="d-flex flex-column text-md-right">
                                <span class="font-size-lg font-weight-bolder mb-1">TOTAL AMOUNT</span>
                                <span class="font-size-h2 font-weight-boldest text-danger mb-1 total-amount">{{$orderDetails[0]->TotalAmount}}</span>
                                <input type="hidden" name="amount" value="{{$orderDetails[0]->TotalAmount}}">
                                <span>Taxes Included</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end: Invoice footer-->
                <!-- begin: Invoice action-->
                <div class="row justify-content-center py-8 px-8 py-md-10 px-md-0">
                    <div class="col-md-9">
                        <div class="d-flex justify-content-between">
                            <div>
                                <button type="button" class="btn btn-light-info font-weight-bold mr-2" onclick="window.print();">Download Invoice</button>
                                <button type="button" class="btn btn-light-info font-weight-bold" onclick="window.print();">Print Invoice</button>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-light-primary font-weight-bold mr-2">Confirm Sales</button>
                                <button type="button" class="btn btn-primary font-weight-bold" onclick="window.print();">Confirm Sales & Print Invoice</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end: Invoice action-->
                <!-- end: Invoice-->
            </form>

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

@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script src="{{ asset('js/pages/custom/order/edit-post-cart.js') }}" type="module"></script>
@endsection