@extends('layouts.front_end')
@section('title', 'Order Details')
@section('content')
    <div>
        <style>
            #headerOneCheckOut,
            #sticky-header,
            #headerThreeCheckout,
            #footerOneCheckOut {
                display: none;
            }

            @media only screen and (min-width: 768px) {
                #cartForMobile {
                    display: none;
                }
            }

            @media only screen and (max-width: 768px) {

                #cartForDeskTop,
                #headerOneCheckOut,
                #sticky-header,
                #headerThreeCheckout {
                    display: none;
                }
            }

            table {
                border: 1px solid #ccc;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                width: 100%;
                table-layout: fixed;
            }

            table caption {
                font-size: 1.5em;
                margin: .5em 0 .75em;
            }

            table tr {
                background-color: #fdfdfd;
                border: 1px solid #ddd;
                padding: .35em;
            }

            table th,
            table td {
                padding: .625em;
                text-align: center;
            }

            table th {
                font-size: .85em;
                letter-spacing: .1em;
                text-transform: uppercase;
            }

            @media screen and (max-width: 600px) {
                table {
                    border: 0;
                }

                table caption {
                    font-size: 1.3em;
                }

                table thead {
                    border: none;
                    clip: rect(0 0 0 0);
                    height: 1px;
                    margin: -1px;
                    overflow: hidden;
                    padding: 0;
                    position: absolute;
                    width: 1px;
                }

                table tr {
                    border-bottom: 3px solid #ddd;
                    display: block;
                    margin-bottom: .625em;
                }

                table td {
                    border-bottom: 1px solid #ddd;
                    display: block;
                    font-size: .8em;
                    text-align: right;
                }

                table td::before {
                    /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }

                table td:last-child {
                    border-bottom: 0;
                }
            }

            /* general styling */
            body {
                font-family: "Open Sans", sans-serif;
                line-height: 1.25;
                background-color: #eff2f7;
                font-size: 13px;
            }

            #headerOneCheckOut,
            #sticky-header,
            #headerThreeCheckout,
            #footerOneCheckOut {
                display: none;
            }

            @media only screen and (min-width: 768px) {
                #cartForMobile {
                    display: none;
                }
            }

            @media only screen and (max-width: 768px) {

                #cartForDeskTop,
                #headerOneCheckOut,
                #sticky-header,
                #headerThreeCheckout {
                    display: none;
                }
            }

            table {
                border: 1px solid #ccc;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                width: 100%;
                table-layout: fixed;
                font-size: 13px;
            }

            table caption {
                font-size: 1.5em;
                margin: .5em 0 .75em;
            }

            table tr {
                background-color: #fdfdfd;
                border: 1px solid #ddd;
                padding: .35em;
            }

            table th,
            table td {
                padding: .625em;
                text-align: center;
            }

            table th {
                font-size: .85em;
                letter-spacing: .1em;
                text-transform: uppercase;
            }

            .print_invoice{
                display: none;
            }

            @media screen and (max-width: 600px) {
                table {
                    border: 0;
                }

                table caption {
                    font-size: 1.3em;
                }

                table thead {
                    border: none;
                    clip: rect(0 0 0 0);
                    height: 1px;
                    margin: -1px;
                    overflow: hidden;
                    padding: 0;
                    position: absolute;
                    width: 1px;
                }

                table tr {
                    border-bottom: 3px solid #ddd;
                    display: block;
                    margin-bottom: .625em;
                }

                table td {
                    border-bottom: 1px solid #ddd;
                    display: block;
                    font-size: .8em;
                    text-align: right;
                }

                table td::before {
                    /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }

                table td:last-child {
                    border-bottom: 0;
                }

                .print_invoice{
                    display: block !important;
                }


            }

            /* general styling */
            body {
                font-family: "Open Sans", sans-serif;
                line-height: 1.25;
            }

            .wishlist-area .table thead th {
                vertical-align: bottom;
                border-bottom: 1px solid #b6b6b6;
                font-size: 13px;
                font-weight: 500;
                text-transform: uppercase;
                font-family: 'Josefin Sans', sans-serif;
                color: #252525;
                padding: 10px 10px;
                border-top: 1px solid #b6b6b6;
            }

            .wishlist-area .table td, .wishlist-area .table th {
                padding: 5px 15px;
                vertical-align: middle;
                border-top: none;
                border-bottom: 1px solid #dcdcdc;
            }


            #mobileResponsiveFooter{
                display: none;
            }

            #whatsapp-link{
                display: none;
            }

        </style>
        <!-- main-area -->
        <main>

<script>
    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
    function printInvoice(){
        if (isAndroid) {
            // https://developers.google.com/cloud-print/docs/gadget
            var gadget = new cloudprint.Gadget();
            gadget.setPrintDocument("url", $('title').html(), window.location.href, "utf-8");
            gadget.openPrintDialog();
        } else {
            window.print();
        }
        return false;
    }

</script>

            <!-- shop-cart-area -->
            <section class="shop-cart-area wishlist-area">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12" style="text-align: right;margin-top: 5px;">
                            <a href="{{route('my-account')}}">My Account</a>
                            <button onclick="printInvoice()" type="button" class="btn btn-success" style="background-color: green;padding: 8px 10px;font-size: 15px;text-transform: capitalize;display: inline-block;margin-bottom: 10px;margin-left: 20px;"><i class="fas fa-print"></i> Print</button>
                        </div>
                    </div>

                    <div class="row">
                        <div class="card" style="border:unset">
                            <div class="card-body">
                                <div class="invoice-title">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <img loading="lazy" src="@if($companyInfo) {{ asset('storage/photo/'.$companyInfo->logo)}}@endif"
                                                 alt="logo" style="height:40px;float: left;" />
                                        </div>
                                        <div class="col-md-6">
                                            <h6 style="font-size: 14px" class="float-right font-size-16 mt-4 mt-md-0">
                                                Order ID: # {{$order->code}}<br>
                                                Date: {{date('d F Y', strtotime($order->order_date))}}
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                                <hr class="mt-0 pt-0">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <address style="font-size: 13px;">
                                             <strong>Billed To:</strong><br>
                                            {{$order->Contact->business_name}}<br>
                                            {{$order->Contact->shipping_address}},@if($order->Contact->District){{($order->Contact->District->name)}}@endif<br>
                                            {{$order->Contact->mobile}}<br>
{{--                                            <div class="font-weight:bold;" style="color: black;">অর্ডার স্ট্যাটাস: <span--}}
{{--                                                    style="text-transform: capitalize;font-weight: bold; color: red; font-size: 16px;">{{$order->status}}</span>--}}
{{--                                            </div>--}}
                                        </address>
                                    </div>
                                    <div class="col-sm-6 text-sm-right">
                                        <address class="" style="font-size: 13px;">
                                            <strong>Delivery Address :</strong><br>
                                            {{$order->Contact->business_name}}<br>
                                            {{$order->Contact->shipping_address}},@if($order->Contact->District){{($order->Contact->District->name)}}@endif<br>
                                            {{$order->Contact->mobile}}<br>
                                        </address>
                                    </div>
                                </div>


                                <table class="table table-hover" style="width: 100%;font-size: 13px">
                                    <thead>
                                    <tr>
                                        <th scope="col">SL</th>
                                        <th scope="col">Product Name</th>
                                        <th scope="col">Image</th>
                                        <th style="text-align: right;">Quantity</th>
                                        <th style="text-align: right;">Unit Price</th>
                                        <th style="text-align: right;">Sub total</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @php
                                        $i=0;$sum=0;
                                    @endphp
                                    @foreach ($orderDetails as $orderDetail)
                                        <tr>
                                            {{-- <th scope="row">{{++$i}}</th> --}}
                                            {{-- <td>
                                        {{date('d F Y', strtotime($order->order_date))}}
                                            </td> --}}
                                            <td  style="font-weight: bold;color: black;">
                                                <span class="badge badge-primary p-1">{{++$i}}</span>
                                            </td>
                                            <td class="text-center" style="font-weight: bold;color: black;">
                                                @if($orderDetail->Product)
                                                    {{$orderDetail->Product->name}}<br/>
                                                    @if($orderDetail->model_id != "" && $orderDetail->Product->product_type == "1")
                                                        @php
                                                            $models = json_decode($orderDetail->model_id);
                                                        @endphp
                                                        @foreach($models as $model)
                                                            <span style="font-size: 13px;font-weight: 400;border: 1px solid black;padding: 2px 5px;border-radius: 4px;margin-right: 5px;margin-top: 7px;display: inline-block;"> {{$model->model}} - {{$model->qty}} </span>
                                                        @endforeach
                                                    @endif
                                                @endif

@if($orderDetail->Product->product_type != "1")
                                                <br/>

                                                {
                                                @if($orderDetail->Product->guarantee==100)
                                                    গ্যারান্টি: দোকান গ্যারান্টি
                                                @elseif($orderDetail->Product->guarantee==99)
                                                    গ্যারান্টি: ১ বছরের ওয়ারেন্টি
                                                @elseif($orderDetail->Product->guarantee==98)
                                                    গ্যারান্টি: ২ বছরের ওয়ারেন্টি
                                                @elseif($orderDetail->Product->guarantee!=0)
                                                    গ্যারান্টি: {{$orderDetail->Product->guarantee}} মাস
                                                @else
                                                    গ্যারান্টি: নাই
                                                @endif
                                                }
@endif
                                            </td>
                                            <td>
                                                <center>
                                                    <img loading="lazy" class="rounded" @if($orderDetail->Product->ProductImageFirst)
                                                        src="{{ asset('storage/photo/'.$orderDetail->Product->ProductImageFirst->image)}}"
                                                         @endif style="height:60px; weight:60px;" alt="Image2" class="img-circle img-fluid">
                                                </center>
                                            </td>
                                            <td style="text-align: right;">
                                                {{$orderDetail->quantity}}
                                            </td>
                                            <td style="text-align: right;">
                                                @if($currencySymbol)
                                                    {{$currencySymbol->symbol}}
                                                @endif
                                                {{$orderDetail->unit_price}}
                                                @php
                                                    $sum += ($orderDetail->quantity* $orderDetail->unit_price);
                                                @endphp
                                            </td>
                                            <td style="color: red;font-weight: bold;text-align: right;">
                                                @if($currencySymbol)
                                                    {{$currencySymbol->symbol}}
                                                @endif
                                                {{$orderDetail->quantity * $orderDetail->unit_price}}
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div style="overflow: hidden">
                                    <span class="float-right mr-5"
                                          style="font-size: 18px;font-weight: bold; color: black;">সাব-টোটাল:
                                        @if($currencySymbol)
                                            {{$currencySymbol->symbol}}
                                        @endif
                                        {{$sum}}
                                    </span>
                                        </div>
                                        <hr style="margin: 7px">

                                        @if($order->apply_cash_back > 0)
                                        <div style="overflow: hidden">
                                    <span class="float-right mr-5"
                                          style="font-size: 18px;font-weight: bold; color: black;">পূর্বের অর্ডারের ক্যাশ ব্যাক :
                                        @if($currencySymbol)
                                            - {{$currencySymbol->symbol}}
                                        @endif
                                        {{$order->apply_cash_back}}
                                    </span>
                                        </div>
                                        <hr style="margin: 7px">
                                        @endif


                                        <div style="overflow: hidden">
                                    <span class="float-right mr-5"
                                          style="font-size: 18px;font-weight: bold; color: black;">ছাড় :
                                        @if($currencySymbol)
                                           - {{$currencySymbol->symbol}}
                                        @endif
                                        {{$order->discount}}
                                    </span>
                                        </div>
                                        <hr style="margin: 7px">

                                        <div style="overflow: hidden">
                                    <span class="float-right mr-5"
                                          style="font-size: 18px;font-weight: bold; color: black;">সর্বমোট বিল:
                                        @if($currencySymbol)
                                            {{$currencySymbol->symbol}}
                                        @endif
                                        {{$order->total_amount}}
                                    </span>
                                        </div>

                                    </div>
                                    <div class="col-md-12">
                                        <h6 style="font-size: 14px">গ্যারান্টিযুক্ত রিপ্লেস প্রডাক্টের নাম & সংখ্যা লিখুন: </h6>
                                        <p style="color:rgb(0, 0, 0)"> {{$order->note}}</p>

                                        @if($order->cash_back > 0)
                                            <table  style="width: 100%;position: absolute;bottom:0px;margin-top: 100px">
                                                <tr>
                                                    <td align="center">
                                                        <h1>{{$order->cash_back}} Taka Cashback Rewarded For This Order</h1>
                                                        <p><i>* N.B: This cashback will be applicable at your next Order</i></p>
                                                    </td>
                                                </tr>
                                            </table>
                                        @endif



                                        <button onclick="javascript:window.print()" type="button" class="print_invoice" style="width: 100%;background-color: #ff5c00;padding:9px 1.2em;border:0.1em solid #FFFFFF;font-weight:300;color:#FFFFFF;text-align:center;font-weight:bold;"><i class="fas fa-print"></i> Print Invoice</button>
                                    </div>


                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- shop-cart-area-end -->

        </main>
        @endsection
        <!-- main-area-end -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {

            });
        </script>
    </div>
    @push('scripts')

    @endpush