@extends('layouts.app')

@section('content')
<style>
.contact-info-wrap {
    background-color: #fff;
    padding:30px;
}
.page-header {
    margin-bottom:25px;
    padding-bottom:10px;
    /* border-bottom: 1px dashed #eee !important; */
}
.track-order-btn:focus,
.track-order-btn:focus-visible{
    outline: none;
    box-shadow: none;
}
.track-order-btn {
    background: none;
    border: none;
    font-weight: 400;
    font-size: 18px;
    margin: 15px 0px 15px 0px;
    padding: 10px 30px;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    backface-visibility: hidden;
    background: #333;
    transition: all 0.3s;
    display: inline-block;
    width: auto;
    margin: 0 auto;
    border: 1px solid transparent;
}
.track-order-btn:hover {
    border-color: #333;
    background: transparent;

}
.track-order-link, .track-order-link:visited, .track-order-link:hover, .track-order-link:focus, .track-order-link:active {
    color: #007bff;
    float: right;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 0;
    text-decoration: underline;
}
.track-order-link strong {
    font-size: 80%;
}
.contact-info-wrap  table tr:nth-child(even), .contact-info-wrap  table tr:nth-child(even) {
    background-color: #fafafa;
}
.no-invoice{
    background-color: #f9f9f9;
    padding: 20px 0;
    margin-bottom: 40px;
    margin-top: 22px;
}
.no-invoice p{
    margin: 0;
    font-size: 16px;
}
@media (max-width:767px){
    .contact-info-wrap h3, .get-in-touch-wrap h3{
        font-size:18px;
    }
    .track-order-btn {
        font-size: 16px;
        padding: 8px 24px;
    }
}
</style>
<div class="contact-area pb-90">
    <div class="container" id="printArea">
        <div class="contact-info-wrap mb-50">
            <div class="row">
                <div style="float:right;width:50%;">
                    <h3 class="page-header text-left mb-0"><small class=""><strong style="font-weight: normal;">Order Date</strong>: {{$order->created_at->format('d-m-Y')}}</small> </h3>
                    <div><strong>Order ID</strong>: {{$order->invoice_number}}</div>
                </div>
                <div style="float:right;width:50%;">
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#trackOrderModal" class="track-order-link"><strong style="font-weight: normal;">Track Order</strong></a>
                </div>
            </div>

            <hr/>
            <div class="no-invoice">
                <p>Invoice for your order #{{$order->invoice_number}} will be  available once the item has been shipped.</p>
            </div>
            <div class="invoice-info mb-3">
                {{-- <div class="row mb-3">
                    <div class="col-lg-12">
                        <strong> {{ COMPANY_INFO }} </strong><br/>
                        {{COMPANY_ADDRESS}}<br/>
                        <strong>Email</strong>: {{COMPANY_EMAIL}}<br/>
                        <strong>GSTIN</strong>: {{GSTIN}}<br/>
                        <strong>CIN</strong>: {{CIN}}<br/>
                    </div>
                </div> --}}
                <div class="row">
                    <div class="w-50">
                        <strong>SHIPPED TO</strong><br>
                        <!-- <address> -->
                        <strong style="text-transform: capitalize;">{{$order->ship_first_name}} {{$order->ship_last_name}}</strong><br>
                        @if($order->ship_address_1 != '') {{$order->ship_address_1}}, @endif
                        @if($order->ship_address_2 != '') {{$order->ship_address_2}}, @endif
                        @if($order->ship_city != '') {{$order->ship_city}}, @endif @if($order->ship_state != '') {{$order->ship_state}}, @endif @if($order->ship_zipcode != '') {{$order->ship_zipcode}} @endif
                        <br/>
                        @if($order->ship_phone_number != '')
                        <strong>Phone</strong>:
                            {{$order->ship_phone_number}}
                        <br/>
                        @endif
                        @if ($order->ship_email != '')
                            <strong>Email</strong>: {{$order->ship_email}}
                        @endif
                    </div>
                    <div class="w-50">
                        <strong>BILL TO</strong><br>
                        <!-- <address> -->
                        <strong style="text-transform: capitalize;">{{$order->bill_first_name}} {{$order->bill_last_name}}</strong><br>
                        @if($order->bill_address_1 != '') {{$order->bill_address_1}}, @endif
                        @if($order->bill_address_2 != '') {{$order->bill_address_2}}, @endif
                        @if($order->bill_city != '') {{$order->bill_city}}, @endif @if($order->bill_state != '') {{$order->bill_state}}, @endif @if($order->bill_zipcode != '') {{$order->bill_zipcode}} @endif
                        <br/>
                        @if($order->bill_phone_number != '')
                        <strong>Phone</strong>:
                            {{$order->bill_phone_number}}
                        <br/>
                        @endif
                        @if ($order->bill_email != '')
                            <strong>Email</strong>: {{$order->bill_email}}
                        @endif
                    </div>
                    {{-- <div class="w-50">
                        <b>Order ID : {{$order->invoice_number}}</b><br/>
                        <b>Total:</b> &#8377;
                        {{$order->total_amount}}
                    </div> --}}
                </div>
            </div>
            <div style="border-top: 1px solid #c5c5c5;margin-top: 10px;"></div>
            <div class="row">
                <div class="col-xs-12 table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Product Name</th>
                            <th>Card Details</th>
                            <th>Price</th>
                            <th>Sub Total</th>
                        </tr>
                        </thead>
                        <tbody>
                                                    </tbody>
                    </table>
                </div>
            </div>

            <div class="row row-reverse" style="margin-top: 40px;">
                <div class="payment-wrap">
                    <p class="lead">Total Payment:</p>
                    <div class="table-responsive">
                        <table class="table">
                        <tr>
                            <th style="width:50%">Subtotal:</th>
                            <td style="text-align: right;">