@extends('layouts.app')
@section('title','Checkout')
@section('style')
    <style>
        .printable {
            background: #FFF;
            border-radius: 5px;
            color: black;
            padding: 25px;
        }

        @page {
            size: A4;
            margin: 30px 0;
        }

        table th {
            font-weight: 600;
        }

        .box {
            margin-bottom: 40px;
        }

        h4.orderno {
            padding-bottom: 20px;
        }

    </style>
    <link rel="stylesheet" type="text/css" media="print" href="{{url('/')}}/css/print.css"/>
@endsection
@section('content')
    <section id="hero">
        <div class="container">
            <div class="alert alert-success">
                <strong>ORDER COMPLETE!</strong> Thank you for placing an order. Please print this page for your
                records.
                <button onclick="window.print();" class="btn btn-success" style="cursor:pointer"><i
                            class="fa fa-print"></i>
                    Print
                </button>
            </div>
            <div class="printable">
                <div class="row mb-3">
                    <div class="col-sm-6 text-center">
                        <img src="{{url('/')}}/img/logo.png">
                        <h5>300 E. Tena St.</h5>
                        <h5>Jacksonville, TX 75766</h5>
                    </div>
                    <div class="col-sm-4 offset-sm-2 text-right">
                        <table class="table table-bordered table-sm text-center">
                            <thead>
                            <tr>
                                <th scope="col" style="width:45%">Date</th>
                                <th scope="col" style="width:55%">Order Number</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{$date}}</td>
                                <td>{{$order['last_id']}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 text-center">
                        <table class="table table-bordered table-sm text-left">
                            <thead>
                            <tr>
                                <th scope="col">SHIP TO</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <p>{{$order['ship_to']}}</p>
                                    <p>{{$order['ship_address']}}</p>
                                    <p>{{$order['ship_city']}}, {{$ship_state->name}}</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-6 text-center">
                        <table class="table table-bordered table-sm text-left">
                            <thead>
                            <tr>
                                <th scope="col">BILL TO</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <p>{{$order['bill_to']}}</p>
                                    <p>{{$order['bill_address']}}</p>
                                    <p>{{$order['bill_city']}}, {{$bill_state->name}}</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 text-center">
                        <table class="table table-bordered table-sm text-left">
                            <thead>
                            <tr>
                                <th scope="col">CUSTOMER INFORMATION</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <p>{{$order['company']}}</p>
                                    <p>{{$order['first_name']}} {{$order['last_name']}}</p>
                                    <p>{{$order['email']}}</p>
                                    <p>{{$order['phone']}}</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-6 text-center">
                        <table class="table table-bordered table-sm text-left">
                            <thead>
                            <tr>
                                <th scope="col">PAYMENT INFORMATION</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    @if($order['payment_method'] == 'cc')
                                        <p>Name on card: {{$order['card_name']}}</p>
                                        <p>Card Number: {{$card_number}}</p>
                                        <p>&nbsp;</p>
                                    @else
                                        <p>Invoice: P.O. # {{$order['last_id']}}</p>
                                        <p>&nbsp;</p>
                                        <p>&nbsp;</p>
                                    @endif
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <table class="table table-bordered table-sm text-center">
                            <thead>
                            <tr>
                                <th scope="col" style="width:15%">SKU</th>
                                <th scope="col" style="width:50%">Description</th>
                                <th scope="col" style="width:12.5%">Price Each</th>
                                <th scope="col" style="width:10%">Qty.</th>
                                <th scope="col" style="width:12.5%">Amount</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($cart as $item)
                                <tr>
                                    <td>{{$item['options']['sku']}}</td>
                                    <td>{{$item['name']}}</td>
                                    <td>$ {{$item['price']}}</td>
                                    <td>{{$item['qty']}}</td>
                                    <td>$ {{$item['subtotal']}}</td>
                                </tr>
                            @endforeach
                            <tr>
                                <td colspan="3"></td>
                                <td class="text-right font-weight-bold">Subtotal</td>
                                <td>$ {{$order['total']}}</td>
                            </tr>
                            <tr>
                                <td colspan="2"></td>
                                <td colspan="3" class="text-right font-weight-bold">
                                    You will be contacted about the final shipping cost.
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    @if (Session::has('order.label'))
                        <div class="col-sm-6 text-center">
                            <table class="table table-bordered table-sm text-left">
                                <thead>
                                <tr>
                                    <th scope="col">LABEL</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="text-center">
                                        @if(isset($label['canvas']))
                                            <img class="w-100" src="{{$label['canvas']}}">
                                        @elseif(isset($label['photo']['file']))
                                            <img class="w-100" src="{{$label['photo']['file']}}">
                                            @else
                                            Label: Existing Label
                                        @endif
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    @endif
                    <div class="col-sm-6 text-center">
                        <table class="table table-bordered table-sm text-left">
                            <thead>
                            <tr>
                                <th scope="col">ADDITIONAL INFORMATION</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <p>{{$order['comment']}}</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="gutter-bottom"></div>
    </section>
@endsection