@extends('crm::emails.base.layout', [
    'subject' => $enquiry->subject ?? 'Thank you for your enquiry',
    'site_name' => $site_name,
    'site_logo' => $site_logo,
    'site_url' => $site_url,
    'colours' => $colours,
])


@php
    $finance_url = \App\Facades\Site::url('/finance');
    $valuation_url = \App\Facades\Site::url('/valuation');
    $vehicle_url = '';
    $vehicle = null;
    $vehicle_image = null;
    if ($enquiry->reason && $enquiry->reason instanceof \Mtc\MercuryDataModels\Vehicle) {
        $vehicle = $enquiry->reason;
        $vehicle_url = \App\Facades\Site::vehicleUrl($vehicle);
        $vehicle_image = $vehicle->primaryMediaUse?->getUrl('640x360')
            ?? $vehicle->primaryMediaUse?->media?->getOriginalUrlAttribute();
    }
@endphp

@section('content')
    <!-- ALERT BLOCK -->
    <tr>
        <td valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                <tr>
                    <td valign="top" width="50"></td>
                    <td valign="top">
                        <table cellpadding="30" cellspacing="0" border="0" width="100%" bgcolor="{{ $colours['app-primary-colour'] }}" style="background-color:{{ $colours['app-primary-colour'] }};border-radius:10px;">
                            <tr>
                                <td valign="top" align="center">
                                    <table cellpadding="0" cellspacing="0" border="0" align="center">
                                        <tr>
                                            <td valign="middle" align="center">
                                                <img class="imageFix" src="{{ config('app.url') . '/api/assets/base/icons/circle-check.png' }}" alt="Circle Check" title="Circle Check" width="58" height="58" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                                            </td>
                                            <td valign="middle" width="10"></td>
                                            <td valign="middle" align="center">
                                                <h1 style="color:#FFFFFF !important; margin:0; font-size:32px; font-weight:600; letter-spacing:-0.6px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">
                                                    Thank you for your enquiry
                                                </h1>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top" width="50"></td>
                </tr>
                <tr>
                    <td valign="top" height="50"></td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- END OF ALERT BLOCK -->
    <!-- VEHICLE BLOCK -->
    @if ($vehicle)
        <tr>
            <td valign="top">
                <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                    <tr>
                        <td valign="top" width="50"></td>
                        <td valign="top">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#FFFFFF" style="background-color:#FFFFFF;border:1px solid #E5E5E5;border-radius:10px;">
                                @if ($vehicle_image)
                                    <tr>
                                        <td valign="top" align="center" style="padding:0;">
                                            <img class="imageFix" src="{{ $vehicle_image }}" alt="{{ $vehicle->title ?? '' }}" style="display:block; width:100%; max-width:100%; height:auto; border-top-left-radius:10px; border-top-right-radius:10px; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" />
                                        </td>
                                    </tr>
                                @endif
                                <tr>
                                    <td valign="top" style="padding:24px;">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">
                                            <tr>
                                                <td valign="top" style="font-size:14px; color:#6C757D; padding-bottom:6px; text-transform:uppercase; letter-spacing:0.5px;">Make</td>
                                                <td valign="top" style="font-size:16px; color:#20292E; font-weight:600; padding-bottom:6px;">{{ $vehicle->make?->name }}</td>
                                            </tr>
                                            <tr>
                                                <td valign="top" style="font-size:14px; color:#6C757D; padding-bottom:6px; text-transform:uppercase; letter-spacing:0.5px;">Model</td>
                                                <td valign="top" style="font-size:16px; color:#20292E; font-weight:600; padding-bottom:6px;">{{ $vehicle->model?->name }}</td>
                                            </tr>
                                            <tr>
                                                <td valign="top" style="font-size:14px; color:#6C757D; text-transform:uppercase; letter-spacing:0.5px;">Variant</td>
                                                <td valign="top" style="font-size:16px; color:#20292E; font-weight:600;">{{ $vehicle->derivative }}</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td valign="top" width="50"></td>
                    </tr>
                    <tr>
                        <td valign="top" height="50"></td>
                    </tr>
                </table>
            </td>
        </tr>
    @endif
    <!-- END OF VEHICLE BLOCK -->
    <!-- CONTENT AREA -->
    <tr>
        <td valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                <tr>
                    <td valign="top" width="50"></td>
                    <td valign="top">
                        {!! str_replace(
                            [
                                '[finance-button]',
                                '[valuation-button]',
                                '[reserve-button]',
                                '<p>',
                                '<h1>',
                                '<h2>',
                                '<h3>',
                                '<h4>',
                                '<h5>',
                                '<h6>',
                                '<ul>',
                                '<li>',
                                '<ol>',
                                '<td>',
                            ],
                            [
                                '<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%"><tr><td valign="top">
                                <table cellpadding="0" cellspacing="0" border="0" align="left" width="400">
                                    <tr>
                                        <td align="center" style="border-radius: 5px; background-color: #FF981F;">
                                            <a rel="noopener" href="' . $finance_url . '" target="_blank" style="font-size: 22px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: #FFFFFF; font-weight: 700; text-decoration: none;border-radius: 5px; padding: 14px 18px; border: 1px solid #FF981F; display: inline-block;">
                                                <img class="imageFix" src="' . config('app.url') . '/api/assets/base/icons/shield.png" alt="Shield" title="Shield" width="19" height="19" style="display:inline-block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;" /> Check Finance <br />
                                            </a>
                                        </td>
                                    </tr>
                                </table></td></tr><tr>
    <td height="40"></td>
</tr></table>',
                                '<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%"><tr><td valign="top">
                                <table cellpadding="0" cellspacing="0" border="0" align="left" width="400">
                                    <tr>
                                        <td align="center" style="border-radius: 5px; background-color: #20292E;">
                                            <a rel="noopener" href="' . $valuation_url . '" target="_blank" style="font-size: 22px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: #FFFFFF; font-weight: 600; text-decoration: none;border-radius: 5px; padding: 26px 18px; border: 1px solid #20292E; display: inline-block;">
                                                Value my car
                                            </a>
                                        </td>
                                    </tr>
                                </table></td></tr><tr>
    <td height="40"></td>
</tr></table>',
                                '<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%"><tr><td valign="top">
                                <table cellpadding="0" cellspacing="0" border="0" align="left" width="400">
                                    <tr>
                                        <td align="center" style="border-radius: 5px; background-color:' . $colours['app-primary-colour'] . ';">
                                            <a rel="noopener" href="' . $vehicle_url . '?journey=reserve" target="_blank" style="font-size: 22px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: #FFFFFF; font-weight: 700; text-decoration: none;border-radius: 5px; padding: 16px 18px; border: 1px solid ' . $colours['app-primary-colour'] . '; display: inline-block;">
                                                Reserve for £99
                                            </a>
                                        </td>
                                    </tr>
                                </table></td></tr><tr>
    <td height="40"></td>
</tr></table>',
                                '<p style="color:#20292E; margin:0 0 20px; font-size:18px; font-weight:400; line-height:26px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                                '<h1 style="color:#FFFFFF !important; margin:0; font-size:32px; font-weight:600; letter-spacing:-0.6px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                                '<h2 style="color:#20292E; margin:0 0 10px; font-size:32px; line-height:36px; font-weight:700; letter-spacing:-0.64px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                                '<h3 style="color:#20292E; margin:0 0 10px; font-size:24px; line-height:28px; font-weight:700; letter-spacing:-0.48px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                                '<h4>',
                                '<h5>',
                                '<h6>',
                                '<ul>',
                                '<li>',
                                '<ol>',
                                '<td valign="top" width="20">',
                            ],
                        $content) !!}
                    </td>
                    <td valign="top" width="50"></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td valign="top" height="50"></td>
    </tr>
    <!-- END OF CONTENT AREA -->
@endsection


@section('footer')
    <tr>
        <td colspan="2" align="center" class="smallText">

            {!! str_replace(
                [
                    '<p>',
                    '<h1>',
                    '<h2>',
                    '<h3>',
                    '<h4>',
                    '<h5>',
                    '<h6>',
                    '<ul>',
                    '<li>',
                    '<ol>',
                    '<td>',
                ],
                [
                    '<p style="color:#20292E; margin:0; font-size:12px; font-weight:500; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                    '<h1 style="color:#FFFFFF !important; margin:0; font-size:32px; font-weight:600; letter-spacing:-0.6px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                    '<h2 style="color:#20292E; margin:0 0 10px; font-size:32px; line-height:36px; font-weight:700; letter-spacing:-0.64px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                    '<h3 style="color:#20292E; margin:0 0 10px; font-size:24px; line-height:28px; font-weight:700; letter-spacing:-0.48px; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;">',
                    '<h4>',
                    '<h5>',
                    '<h6>',
                    '<ul>',
                    '<li>',
                    '<ol>',
                    '<td valign="top" width="20">',
                ],
            $footer) !!}
        </td>
    </tr>
@endsection
