@extends('mail.template')

@section('title', 'Order Received')
@section('subtitle', 'Thank you for your sample order!')

@section('content')
<div class="info-card">
    <h2 class="card-title">
        <i class="fas fa-shopping-cart"></i>
        Order Confirmation
    </h2>

    <div class="text-center mb-20">
        <h1 style="font-size: 19px; color: #495057;">We received your sample order, {{ $customer->customer_name }}!</h1>
        <p class="text-justify mt-15">As soon as your order has been shipped, we will let you know via email</p>
        <h2 style="font-size: 17px; color: #667eea;">View your sample order summary in your account</h2>
    </div>
</div>

<div class="info-card">
    <h2 class="card-title">
        <i class="fas fa-map-marker-alt"></i>
        Shipping Address
    </h2>

    <div class="field">
        <div class="field-icon">
            <i class="fas fa-user"></i>
        </div>
        <div class="field-content">
            <div class="field-label">Recipient Name</div>
            <div class="field-value">{{ $address->address_name }}</div>
        </div>
    </div>

    <div class="field">
        <div class="field-icon">
            <i class="fas fa-map-pin"></i>
        </div>
        <div class="field-content">
            <div class="field-label">Address Line 1</div>
            <div class="field-value">{{ $address->street }}</div>
        </div>
    </div>

    <div class="field">
        <div class="field-icon">
            <i class="fas fa-city"></i>
        </div>
        <div class="field-content">
            <div class="field-label">City</div>
            <div class="field-value">{{ $address->city }}</div>
        </div>
    </div>

    <div class="field">
        <div class="field-icon">
            <i class="fas fa-flag"></i>
        </div>
        <div class="field-content">
            <div class="field-label">State</div>
            <div class="field-value">{{ $address->state }}</div>
        </div>
    </div>

    <div class="field">
        <div class="field-icon">
            <i class="fas fa-mailbox"></i>
        </div>
        <div class="field-content">
            <div class="field-label">Zipcode</div>
            <div class="field-value">{{ $address->zipcode }}</div>
        </div>
    </div>
</div>

<div class="text-center mt-35">
    <p style="color: #495057; font-size: 16px;">Thank you for your preference!</p>
</div>
@endsection

@section('footer-text', 'This order confirmation was sent by PermShield. For any questions, please contact our support team.')