@component('mail::message' , ['title' => $title ])
<div class="email_order_details_container">
    <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>
</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;
    }

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