{{-- 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 pt-8 px-8 pt-md-27 px-md-0 pb-0 pb-md-0 invoice-header">
                <div class="col-md-9">
                    <div class="d-flex justify-content-between pb-8 pb-md-15 flex-column flex-md-row">
                        
                        
                        
                        <div class="">
                            <h1 class="display-4 font-weight-boldest mb-10">Collection</h1>

                            <div class="d-flex flex-root mb-3">
                                <span class="font-weight-bolder mb-2">DATE</span>
                                <span class="opacity-70 ml-3">12-03-2021</span>
                            </div>

                            <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 class="d-flex flex-column align-items-md-end px-0 igloo-about mb-10">
                            <!--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>

                        
                        
                        
                        
                        {{-- <img class="invoice-logo" src="{{ asset('media/logos/igloo-logo.png') }}" alt=""> --}}
                        
                        
                    </div>

                    {{-- <div class="border-bottom w-100"></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">Invoice No.</th>
                                    <th class="text-right font-weight-bold text-muted text-uppercase">Total Amount</th>
                                    <th class="text-right font-weight-bold text-muted text-uppercase">Due</th>
                                    <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">Collection</th>
                                    <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">Due After</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="font-weight-boldest">
                                    <td class="pl-0 pt-7">
                                        INV-11/6-9-2021
                                        {{-- {{$invoice->ProductName}} --}}
                                    </td>
                                    <td class="text-right pt-7">
                                        3549.000
                                        {{-- {{$invoice->Quantity}} --}}
                                    </td>
                                    <td class="text-right pt-7 text-danger" data-field="Rate">
                                        3549.000
                                        {{-- {{$invoice->Rate}} --}}
                                    </td>
                                    <td class="text-success pr-0 pt-7 text-right" data-field="Amount">
                                        3549.000
                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                    <td class="text-info pr-0 pt-7 text-right" data-field="Amount">
                                        0.000
                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                </tr>
                                <tr class="font-weight-boldest">
                                    <td class="border-top-0 pl-0 py-4">
                                        INV-11/6-9-2021

                                        {{-- {{$invoice->ProductName}} --}}
                                    </td>
                                    <td class="border-top-0 text-right py-4">
                                        3549.000

                                        {{-- {{$invoice->Quantity}} --}}
                                    </td>
                                    <td class="border-top-0 text-danger text-right py-4" data-field="Rate">
                                        3549.000

                                        {{-- {{$invoice->Rate}} --}}
                                    </td>
                                    <td class="text-success border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        3549.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                    <td class="text-info border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        0.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                </tr>
                                <tr class="font-weight-boldest">
                                    <td class="border-top-0 pl-0 py-4">
                                        INV-11/6-9-2021

                                        {{-- {{$invoice->ProductName}} --}}
                                    </td>
                                    <td class="border-top-0 text-right py-4">
                                        3549.000

                                        {{-- {{$invoice->Quantity}} --}}
                                    </td>
                                    <td class="border-top-0 text-danger text-right py-4" data-field="Rate">
                                        3549.000

                                        {{-- {{$invoice->Rate}} --}}
                                    </td>
                                    <td class="text-success border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        3549.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                    <td class="text-info border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        0.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                </tr>
                                <tr class="font-weight-boldest">
                                    <td class="border-top-0 pl-0 py-4">
                                        INV-11/6-9-2021

                                        {{-- {{$invoice->ProductName}} --}}
                                    </td>
                                    <td class="border-top-0 text-right py-4">
                                        3549.000

                                        {{-- {{$invoice->Quantity}} --}}
                                    </td>
                                    <td class="border-top-0 text-danger text-right py-4" data-field="Rate">
                                        3549.000

                                        {{-- {{$invoice->Rate}} --}}
                                    </td>
                                    <td class="text-success border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        3549.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                    <td class="text-info border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        0.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                </tr>
                                <tr class="font-weight-boldest">
                                    <td class="border-top-0 pl-0 py-4">
                                        INV-11/6-9-2021

                                        {{-- {{$invoice->ProductName}} --}}
                                    </td>
                                    <td class="border-top-0 text-right py-4">
                                        3549.000

                                        {{-- {{$invoice->Quantity}} --}}
                                    </td>
                                    <td class="border-top-0 text-danger text-right py-4" data-field="Rate">
                                        3549.000

                                        {{-- {{$invoice->Rate}} --}}
                                    </td>
                                    <td class="text-success border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        3549.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                    <td class="text-info border-top-0 pr-0 py-4 text-right" data-field="Amount">
                                        0.000

                                        {{-- {{$invoice->Amount}} --}}
                                    </td>
                                </tr>
                                {{-- @foreach ($invoiceDetails as $index=>$invoice)
                                    @if ($index == 0)
                                        <tr class="font-weight-boldest">
                                            <td class="pl-0 pt-7">
                                                {{$invoice->ProductName}}
                                            </td>
                                            <td class="text-right pt-7">
                                                {{$invoice->Quantity}}
                                            </td>
                                            <td class="text-right pt-7" data-field="Rate">
                                                {{$invoice->Rate}}
                                            </td>
                                            <td class="text-danger pr-0 pt-7 text-right" data-field="Amount">{{$invoice->Amount}}</td>
                                        </tr>
                                    @else
                                        <tr class="font-weight-boldest">
                                            <td class="border-top-0 pl-0 py-4">{{$invoice->ProductName}}</td>
                                            <td class="border-top-0 text-right py-4">
                                                {{$invoice->Quantity}}
                                            </td>
                                            <td class="border-top-0 text-right py-4" data-field="Rate">
                                                {{$invoice->Rate}}
                                            </td>
                                            <td class="text-danger border-top-0 pr-0 py-4 text-right" data-field="Amount">{{$invoice->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 invoice-footer">
                <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 cost-details">
                            <div class="form-group">
                                <label class="mb-3 font-weight-bold">Collection Amount</label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text">৳</span></div>
                                    <input type="text" class="form-control col-8" placeholder="Ex - 10,000" />
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-info font-weight-bold">Calculate</button>
                                    </div>
                                </div>
                                <span class="form-text text-muted">Enter the collection amount </span>
                            </div>
                        </div>
                        <div class="d-flex flex-column text-md-right total-amount-section">
                            <span class="font-size-lg font-weight-bolder mb-1">TOTAL Due</span>
                            <h2 class="font-weight-boldest text-danger mb-1 total-amount">
                                0.000
                                {{-- {{$invoiceDetails[0]->TotalAmount}} --}}
                            </h2>
                            <span><em>After Collection</em></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-primary font-weight-bold mr-2" onclick="window.print();">Cancel</button>
                            <button type="button" class="btn btn-primary font-weight-bold" onclick="window.print();">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end: Invoice action-->
            <!-- end: Invoice-->
        </div>
    </div>
    <!-- end::Card-->

@endsection

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