@component('mail::message', ['title' => $title ])
<div class="email_order_details_container">
    <div class="igt_box_container"><img width="20%" src="https://glasshardware.com/wp-content/uploads/2023/04/IGT-Box.png" alt="IGT Box"></div>
    <h2 class="order_number">Order # {{ $order->code }}</h2>
    <p>{{ $order->client->first_name }}</p>
    <p><b>Order created:</b><span class="order_creation">{{ date('d/m/y h:i a', strtotime($order->creation_date)) }}</span></p>
    @if ($order->orderProducts->count())
    <table class="items_table">     
        <tr>
            <th>Items</th>
            <th>Quantity</th>
        </tr>
        @foreach($order->orderProducts as $product)
        <tr>
            <td>{{ $product->products->name }}</td>
            <td>{{ $product->quantity }}</td>
        </tr>
        @endforeach
    </table>
    @endif
    <br />
    <p><b>Total:</b><span class="total_price">${{ $order->total_price }}</span></p>
    <p><b>Payment method:</b><span class="payment_type">{{ $order->payment_type_id == 3 ? $order->bo_credit_card_type . "*" . substr ($order->bo_credit_card_number, -4) : $order->paymentType->name }}</span></p>
    <br />
    <p><b>What's next?</b></p>
    <div class="what_s_next">
                <p><span>1</span>Drive to <a href="http://maps.google.com/maps?daddr={{$order->branch->street}} , {{$order->branch->zip}}">{{ $full_address }}</a>.</p>
        <p><span>2</span>Meet IGT staff at the Pickup window.</p>
    </div>
</div>
@endcomponent
<style>
    .items_table {
        border-collapse: collapse;
        width: 100%;
    }
    .items_table td,
    .items_table th {
        border-bottom: 1px solid #dddddd;
        text-align: left;
        padding: 8px 8px 8px 0px;
        font-size: 16px;
    }
    .order_number{color: red;}
    p{color: black}
    .total_price,.payment_type,.qty,.order_creation{
        margin-left: 5px;
        padding-right: 8px;
        color: #0B0A0A
    }
    .what_s_next span {width: 30px; height: 30px; background-color:red;color: white;font-size:large;border-radius:50%;margin-right:10px;padding:5px 10px 5px 10px}
    .what_s_next p {margin:25px;}
    .igt_box_container{text-align:center;}
</style>