@extends('layouts.email_layout')
@section('content')
<!-- HEADER -->
<tr>
    <td class="padded_col" align="center" style="background-color:#FAF7F2; padding:32px 40px 0 40px;">
        <img src="{{ asset('images/Sama_Logo.png')}}"
            width="140"
            alt="SAMA"
            style="display:block; border:0; outline:none; text-decoration:none;">

        <div style="height:1px; line-height:1px; background-color:#C9A880; margin-top:24px;">&nbsp;</div>
    </td>
</tr>


<tr>
    <td class="content-sec padded_col" align="center" style="background-color:#FAF7F2;padding:36px 48px 24px 48px;">
        <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:100%;">
            <tbody>

                <tr>
                    <td class="eyebrow-text" style="font-size:10px;line-height:14px;letter-spacing:3px;text-transform:uppercase;color:#C9A880;font-weight:700;padding:0 0 14px;text-align:center;">
                        Someone Loves This
                    </td>
                </tr>

                <tr>
                    <td class="heading-sec" style="font-family:Georgia,'Times New Roman',serif;font-size:26px;line-height:34px;color:#310F4D;padding:0;font-weight:400;padding-bottom:24px;text-align:center;">
                        Psst… {{ $senderName ?? 'Someone' }} Loves This {{ $productType ?? 'Piece' }}
                    </td>
                </tr>

                <tr>
                    <td class="greeting" style="font-size:15px;line-height:22px;color:#310F4D;text-align:left;padding:0 0 12px;">
                        Hi{{ !empty($recipientName) ? ' '.$recipientName : '' }},
                    </td>
                </tr>

                <tr>
                    <td class="intro-content" style="font-size:14px;line-height:24px;color:#6F5C7A;text-align:left;padding:0;">
                        {{ $senderName ?? 'Someone' }} wanted to drop a little hint about this beautiful {{ strtolower($productType ?? 'piece') }} from SAMA…
                    </td>
                </tr>

            </tbody>
        </table>
    </td>
</tr>

@php
$productsData = json_decode($data['product_data'] ?? '{}', true);

$names = [];
$productColor = null;
$images = [];

// Ring
if (!empty($productsData['ringId'])) {
$ringName = getRingName($productsData['ringId']);
if (!empty($ringName)) {
$names[] = $ringName;
}

$productColor = $productsData['productColor'] ?? null;

$shape = $productsData['shape'] ?? '';

$ringImage = getProductImages(
    $productsData['ringId'],
    $productColor ?? '',
    $shape
);

if (!empty($ringImage)) {
$images[] = $ringImage;
}
}

// Diamond
if (!empty($productsData['diamondId'])) {
$diamond = getDiamondImages(
$productsData['diamondId'],
$productsData['diamondType'] ?? ''
);

if (!empty($diamond)) {
$names[] = $diamond->short_title ?? '';

if (!empty($diamond->image_url)) {
$images[] = $diamond->image_url;
}
}
}

// Gemstone
if (!empty($productsData['gemstoneId'])) {
$gemstone = getGemStoneImages($productsData['gemstoneId']);

if (!empty($gemstone)) {
$names[] = $gemstone->short_title ?? '';

if (!empty($gemstone->image_url)) {
$images[] = $gemstone->image_url;
}
}
}

$productTitle = trim(implode(' ', array_filter($names)));

if (!empty($productColor)) {
$productTitle .= ' in ' . ucwords(str_replace('-', ' ', $productColor));
}

$images = array_values(array_unique(array_filter($images)));
@endphp

<tr>
    <td class="padded_col" align="center" style="background: #FAF7F2; padding: 8px 48px 28px; text-align: center;">
        <table cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0px; width: 100%;">
           <tbody>
                <tr>
                    <td style="text-align: center;">
                        <table cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0px; width: 100%;">
                                <tbody>
                                <tr>
                                    <td class="product-name" style="font-family: Georgia, serif; font-size: 16px; color: #310F4D; padding-bottom: 20px; line-height: 1.4; text-align: center;">
                                            {{ $productTitle ?: 'Selected Piece' }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                @if(count($images))

                <tr>
                <td class="products-row" style="text-align: center; padding-bottom: 24px;">

                        <table cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0px; width: 100%;">
                                                        <tbody>
                                                            <tr>

                                @foreach($images as $image)

                                @php
                                $count = count($images);

                                if ($count == 1) {
                                $width = 200;
                                } elseif ($count == 2) {
                                $width = 190;
                                } else {
                                $width = 120;
                                }
                                @endphp

                                <td class="col" style="font-size: 48px; text-align: center; padding: 0px 8px;">

                                    <img
                                        src="{{ $image }}"
                                        width="{{ $width }}"
                                        style="display:block;
                                                    width:{{ $width }}px;
                                                    height:auto;
                                                    border-radius:6px;
                                                    border:1px solid #EDE8F0; margin: 0 auto;">

                                </td>

                                @endforeach

                            </tr>
                        </tbody>
                        </table>

                    </td>
                </tr>

                @endif

                <tr>
                    <td align="center"  style="text-align: center;">
                        <table cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0px; width: 100%;">
                            <tbody>
                                <tr>
                                    <td align="center" style="text-align: center;">
                                        <a href="{{ $data['page_url'] ?? '#' }}"
                                            style="display:inline-block;
                                                height:48px;
                                                line-height:48px;
                                                padding:0 40px;
                                                background:#310F4D;
                                                color:#FFFFFF;
                                                font-size:13px;
                                                letter-spacing:2px;
                                                text-transform:uppercase;
                                                text-decoration:none;
                                                border-radius:4px;
                                                font-weight:600;">

                                            View This Piece

                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

@if(!empty($data['message']))
<tr>
     <td class="padded_col" align="center" style="background-color: #faf7f2; padding:0px 48px 24px 48px">
        <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse;">
            <tr>
                <td style="background:#EDE8F0;border-left:3px solid #C9A880;padding:16px 20px;border-radius:0 6px 6px 0;">
                    <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse;">
                        <tr>
                            <td style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#C9A880;font-weight:600;padding-bottom:6px;">
                                A Note From {{ $data['first_name'] }}
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size:14px;color:#6F5C7A;font-style:italic;line-height:22px;">
                                {{ $data['message'] }}
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
@endif

<tr>
    <td class="padded_col" align="center" style="background: #FAF7F2; padding: 0px 48px 28px; text-align: center;">
        <table cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0px; width: 100%;">
                <tbody>
                    <tr>
                    <td style="font-size: 14px; color: #6F5C7A; font-style: italic; line-height: 1.6; text-align: center;">
                        That's all — just a spark of inspiration!
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>


<!-- CROSS-SELL SECTION -->
<tr>
    <td class="pad-responsive"
        bgcolor="#FAF7F2"
        style="background:#FAF7F2;padding:8px 20px 40px 20px;text-align:center;">

        <div style="width:100%;
            height:1px;
            background:#EDE8F0;
            margin-bottom:28px;
            line-height:1px;
            font-size:1px;">
            &nbsp;
        </div>

        <div style="font-size:10px;
            letter-spacing:3px;
            text-transform:uppercase;
            color:#C9A880;
            font-weight:700;
            margin-bottom:20px;">

            Continue Exploring

        </div>

        <table role="presentation"
            width="100%"
            border="0"
            cellpadding="0"
            cellspacing="0">

            <tr>

                <!-- Engagement Rings -->
                <td class="crosssell-td stack-td"
                    align="center"
                    valign="top"
                    width="20%"
                    style="padding:0 6px;">

                    <a href="https://rocksama.com/engagement-rings"
                        target="_blank"
                        style="text-decoration:none;">

                        <img src="https://assets.rocksama.com/frontend/static_images/EngagementRings.webp"
                            width="100"
                            alt="Engagement Rings"
                            style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                        <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                            Engagement Rings

                        </div>

                    </a>

                </td>

                <!-- Wedding Bands -->
                <td class="crosssell-td stack-td"
                    align="center"
                    valign="top"
                    width="20%"
                    style="padding:0 6px;">

                    <a href="https://rocksama.com/wedding-band"
                        target="_blank"
                        style="text-decoration:none;">

                        <img src="https://assets.rocksama.com/frontend/static_images/WeddingBands.webp"
                            width="100"
                            alt="Wedding Bands"
                            style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                        <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                            Wedding Bands

                        </div>

                    </a>

                </td>

                <!-- Gemstones -->
                <td class="crosssell-td stack-td"
                    align="center"
                    valign="top"
                    width="20%"
                    style="padding:0 6px;">

                    <a href="https://rocksama.com/gemstone"
                        target="_blank"
                        style="text-decoration:none;">

                        <img src="https://assets.rocksama.com/frontend/static_images/Gemstones.webp"
                            width="100"
                            alt="Gemstones"
                            style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                        <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                            Gemstones

                        </div>
                    </a>
                </td>
                <!-- Diamonds -->
                <td class="crosssell-td stack-td"
                    align="center"
                    valign="top"
                    width="20%"
                    style="padding:0 6px;">
                    <a href="https://rocksama.com/diamonds"
                        target="_blank"
                        style="text-decoration:none;">
                        <img src="https://assets.rocksama.com/frontend/static_images/Diamonds.webp"
                            width="100"
                            alt="Diamonds"
                            style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">
                        <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">
                            Diamonds
                        </div>
                    </a>
                </td>
                <!-- Jewelry -->
                <td class="crosssell-td stack-td"
                    align="center"
                    valign="top"
                    width="20%"
                    style="padding:0 6px;">
                    <a href="https://rocksama.com/jewelry"
                        target="_blank"
                        style="text-decoration:none;">
                        <img src="https://assets.rocksama.com/frontend/static_images/Jewelry.webp"
                            width="100"
                            alt="Jewelry"
                            style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">
                        <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">
                            Jewelry
                        </div>
                    </a>
                </td>
            </tr>
        </table>
    </td>
</tr>

@endsection