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

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
    <style>
        @media print{
            body{
                visibility: hidden;
            }
            .invoice-header, .invoice-body, .invoice-footer{
                visibility: visible;
            }
            h1{
                font-size: xx-large !important;
            }
            thead tr th{
                font-size: large !important;
            }
            .invoice-body{
                font-size: large !important;
            }
            .invoice-header{
                font-size: medium !important;
            }
            .cost-details{
                font-size: large !important;
            }
            .cost-details-title{
                font-size: large !important;
            }
            .total-amount-section span{
                font-size: large !important;
            }
            .total-amount{
                font-size: x-large !important;
            }
            .igloo-about{
                font-size: medium !important;
            }
        }
        .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">ORDER</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">
                            <!--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">{{$orderDetails[0]->DeliveryDate}}</span>
                        </div>
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">ORDER NO.</span>
                            <span class="opacity-70">{{$orderDetails[0]->RefNo}}</span>
                        </div>
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">ORDER FROM</span>
                            <span class="opacity-70">
                                {{$orderDetails[0]->OutletName}}, {{$orderDetails[0]->Address}}                                
                                @if ($orderDetails[0]->ContactPerson != $orderDetails[0]->OutletName)
                                    <br /> {{$orderDetails[0]->ContactPerson}}
                                @endif
                                <br>{{$orderDetails[0]->ContactPersonNo}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end: Invoice header-->
            
            <!-- begin: Invoice body-->
            <div class="row justify-content-center py-8 px-8 py-md-10 px-md-0 invoice-body">
                <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-right 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">
                                                {{$order->Quantity}}
                                            </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>
                                    @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">
                                                {{$order->Quantity}}
                                            </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>
                                    @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></div>
                        <div>
                            <button type="button" class="btn btn-light-info font-weight-bold mr-2" onclick="window.print();">Download Order</button>
                            <button type="button" class="btn btn-light-info font-weight-bold" onclick="window.print();">Print order</button>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- end: Invoice action-->
            <!-- end: Invoice-->
        </div>
    </div>
    <!-- end::Card-->

@endsection

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