@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;
        }

        #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;
        }


        @if($is_cancel_status)
        .order-tracking {
            text-align: center;
            width: 33.33%;
            position: relative;
            display: block;
        }
        @else
        .order-tracking {
            text-align: center;
            /*width: 33.33%;*/
            width: 20%;
            position: relative;
            display: block;
        }
        @endif

        .order-tracking .is-complete {
            display: block;
            position: relative;
            border-radius: 50%;
            height: 30px;
            width: 30px;
            border: 0px solid #AFAFAF;
            background-color: #afafaf7a;
            margin: 0 auto;
            transition: background 0.25s linear;
            -webkit-transition: background 0.25s linear;
            z-index: 2;
        }

        .order-tracking .is-complete:after {
            display: block;
            position: absolute;
            content: '';
            height: 14px;
            width: 7px;
            top: -2px;
            bottom: 0;
            left: 5px;
            margin: auto 0;
            border: 0px solid #AFAFAF;
            border-width: 0px 2px 2px 0;
            transform: rotate(45deg);
            opacity: 0;
        }

        .order-tracking.completed .is-complete {
            border-color: #27aa80;
            border-width: 0px;
            background-color: #27aa80;
        }

        .order-tracking.completed .is-complete:after {
            border-color: #fff;
            border-width: 0px 3px 3px 0;
            width: 7px;
            left: 11px;
            opacity: 1;
        }

        .order-tracking p {
            color: #A4A4A4;
            font-size: 16px;
            margin-top: 8px;
            margin-bottom: 0;
            line-height: 20px;
        }

        .order-tracking p span {
            font-size: 14px;
        }

        .order-tracking.completed p {
            color: #000;
        }

        .order-tracking::before {
            content: '';
            display: block;
            height: 3px;
            width: calc(100% - 40px);
            background-color: #afafaf7a;
            top: 13px;
            position: absolute;
            left: calc(-50% + 20px);
            z-index: 0;
        }

        .order-tracking:first-child:before {
            display: none;
        }

        .order-tracking.completed:before {
            background-color: #27aa80;
        }

        /* #mobileResponsiveFooter {
            display: none;
        } */
    </style>
    <!-- main-area -->
    <main>



        <!-- shop-cart-area -->
        <section class="shop-cart-area wishlist-area">
            <div class="text-center py-2 rounded"
                style="background-color: black;position:fixed;width: 100%; z-index:2;">
                <a href="{{ route('home') }}" class="float-left">
                    {{-- <i class="fas fa-backspace"
                        style="color: rgb(0, 0, 0);font-size: 30px;"></i> --}}
                    <i class="fas fa-arrow-left pl-1" style="color: white;font-size: 20px;"></i>
                </a>
                <span class="mt-1" style="color: white;font-weight: bold;font-size: 20px;">Order Details</span>
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>

            <div class="container">
                <div class="row">
                    <div class="card">
                        <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">
                                        <h4 class="float-right font-size-16 mt-4 mt-md-0">
                                            অর্ডার আইডি # {{$order->code}}<br>
                                            তারিখ: {{date('d F Y', strtotime($order->order_date))}}
                                        </h4>
                                    </div>
                                </div>
                            </div>
                            <hr class="mt-0 pt-0">
                            <div class="row">
                                <div class="col-sm-6">
                                    <address style="font-size: 15px;">
                                        {{-- <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: 15px;">
                                        <strong>ডেলিভারি এড্রেস :</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>

                            <div class="row">
                                <div class="col-md-12">
                                    {{-- order traking design start --}}
                                    <div class="container" id="order_traking" style="margin-bottom: 70px">
                                        <div class="row">
                                            <div class="col-12 col-md-12 hh-grayBox pt45 pb20">
                                                <div class="row justify-content-between">
{{--                                                  {{dd($status_result)}}--}}

                                                    @foreach($status_result as $traking)
{{--                                                        {{dd($traking)}}--}}
                                                    <div class="order-tracking @if($traking['is_added_status']) completed @endif">
                                                        <span class="is-complete"></span>
                                                        <p>{{$traking['order_status']}}<br>
                                                            @if($traking['added_date'] != "")
                                                            <span>{{date('d M, Y',strtotime($traking['added_date']))}}</span>
                                                            @endif
                                                        </p>
                                                    </div>
                                                    @endforeach

{{--                                                    Mon, June 24--}}
{{--                                                    <div class="order-tracking completed">--}}
{{--                                                        <span class="is-complete"></span>--}}
{{--                                                        <p>Shipped<br><span>Tue, June 25</span></p>--}}
{{--                                                    </div>--}}

{{--                                                    <div class="order-tracking">--}}
{{--                                                        <span class="is-complete"></span>--}}
{{--                                                        <p>Delivered<br><span>Fri, June 28</span></p>--}}
{{--                                                    </div>--}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- order traking design end --}}
                                </div>
                            </div>

                            <table class="table table-hover" style="width: 100%;">
                                <thead>
                                    <tr>
                                        {{-- <th scope="col">SL.</th> --}}
                                        {{-- <th scope="col">Order No.</th> --}}
                                        {{-- <th scope="col">Date</th> --}}
                                        <th scope="col"></th>
                                        <th scope="col">প্রডাক্ট</th>
                                        <th scope="col">পিকচার</th>
                                        <th scope="col">সংখ্যা</th>
                                        <th scope="col">প্রাইস</th>
                                        <th scope="col">সাবটোটাল</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}}
                                                @if($orderDetail->model_id != "" && $orderDetail->Product->product_type == '1')
                                                    <br/>
                                                    @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}}p </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:100px; weight:100px;" alt="Image2" class="img-circle
                                                img-fluid">
                                            </center>
                                        </td>
                                        <td data-label="সংখ্যা">
                                            {{$orderDetail->quantity}}
                                        </td>
                                        <td data-label="প্রাইস">
                                            @if($currencySymbol)
                                            {{$currencySymbol->symbol}}
                                            @endif
                                            {{$orderDetail->unit_price}}
                                            @php
                                            $sum += ($orderDetail->quantity* $orderDetail->unit_price);
                                            @endphp
                                        </td>
                                        <td data-label="সাবটোটাল" style="color: red;font-weight: bold;">
                                            @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

                                    @if($order->discount > 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->discount}}
                                    </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->total_amount}}
                                    </span>
                                    </div>

                                </div>


                                <div class="col-md-12">
                                    <h6>গ্যারান্টিযুক্ত রিপ্লেস প্রডাক্টের নাম & সংখ্যা লিখুন:</h6>
                                    <p style="color:rgb(0, 0, 0)"> {{$order->note}}</p>
				    <p><a href="{{route('pdf-generate',$order->id)}}" target="_blank"  style="background-color: green;padding:9px;border:0.1em solid #FFFFFF;font-weight:300;color:white;text-align:center;font-weight:bold;"><i class="fas fa-print"></i> ইনভয়েস ডাউনলোড</a></p>
                                </div>

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

                            </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