@component('mail::layout')
    <div class="card">
        @component('mail::header', ['image' => AssetS3('/assets/image/invited.png')])
            <h2 style="text-align: center;">Service Request</h2>
        @endcomponent

        <div class="card-body">
            <p>Service Request Information:</p>
            
            <table>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Name</span> 
                        <span style="color: #202124">{{ $name }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Address</span> 
                        <span style="color: #202124">{{ $address }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">How we contact you?</span> 
                        <span style="color: #202124">{{ $contact_type }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Email</span> 
                        <span style="color: #202124 !important">{{ $email }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Phone Number</span> 
                        <span style="color: #202124">{{ $phone_number }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Appliance Type:</span>
                        <span style="color: #202124">{{ $type }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Brand(s):</span> <br>
                        @foreach ($brands as $brand)                                
                            <li><span style="color: #202124">{{ $brand }}</span></li>
                        @endforeach

                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Serial Number:</span>
                        <span style="color: #202124">{{ $serial_number }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Purchase Date</span>
                        <span style="color: #202124">{{ $purchase_date }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Do you have an extended warranty?</span>
                        <span style="color: #202124">{{ $extended_warranty }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Date Requested for Service</span>
                        <span style="color: #202124">{{ $request_date }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: #85898c">Product Description:</span> <br>
                        <span style="color: #202124">{{ $description }}</span>
                    </td>
                </tr>
            </table>
        </div>                  
    </div>
@endcomponent