@extends('layouts.email_layout')
@section('emailTitle', 'Order Delivered')
@section('content')

<!-- HEADER -->
<tr>
    <td 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>

<!-- DELIVERED SECTION -->
<tr>
    <td class="pad-responsive"
        bgcolor="#FAF7F2"
        style="background:#FAF7F2;padding:36px 20px 28px 20px;text-align:center;">

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

            Delivered

        </div>

        <div style="font-family:Georgia,'Times New Roman',serif;
            font-size:26px;
            line-height:1.3;
            color:#310F4D;
            margin-bottom:24px;">

            Your SAMA Order Has Arrived!

        </div>

        <div style="font-size:15px;
            color:#310F4D;
            font-weight:600;
            text-align:left;
            margin-bottom:12px;">

            Hi {{ $username }},

        </div>

        <div style="font-size:14px;
            line-height:1.7;
            color:#6F5C7A;
            text-align:left;">

            Your order has been delivered — we hope you love your new piece! Here's a summary of what arrived.

        </div>

    </td>
</tr>
<!-- ORDER SECTION -->
<tr>
    <td class="pad-responsive"
        bgcolor="#F5EFF5"
        style="background:#F5EFF5;padding:28px 20px;">

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

            Your Order

        </div>

        <div style="font-size:14px;
            line-height:22px;
            color:#6F5C7A;
            margin-bottom:6px;">

            <strong style="color:#310F4D;font-weight:700;">
                Order Number
            </strong>

            &nbsp;&nbsp;

            #{{ $ordervalue->order_id }}

        </div>

        <div style="font-size:14px;
            line-height:22px;
            color:#6F5C7A;
            margin-bottom:6px;">

            <strong style="color:#310F4D;font-weight:700;">
                Delivered
            </strong>

            &nbsp;&nbsp;

            {{ date('M d, Y', strtotime($ordervalue->updated_at ?? $ordervalue->created_at)) }}

        </div>

        <div style="height:1px;
            background:#EDE8F0;
            margin:16px 0;
            line-height:1px;
            font-size:1px;">
            &nbsp;
        </div>

        @php
        $subtotal = 0;
        @endphp

        @foreach($orderItems as $orderItem)

        @php

        $products = json_decode($orderItem->order_data);

        $center_stone = $products->center_stone_shape ?? '';

        if (!empty($products->ring_id) && !empty($products->diamond_id)) {

        $ringImage = getProductImages(
        $products->ring_id,
        $products->ring_color,
        $center_stone
        );

        $diamondImage = getResponseFromSavedData($orderItem->diamond_response);
        $gemstoneImage = null;

        } elseif (!empty($products->ring_id) && !empty($products->gemstone_id)) {

        $ringImage = getProductImages(
        $products->ring_id,
        $products->ring_color,
        $center_stone
        );

        $gemstoneImage = getResponseFromSavedData($orderItem->gemstone_response);
        $diamondImage = null;

        } elseif (!empty($products->diamond_id)) {

        $diamondImage = getResponseFromSavedData($orderItem->diamond_response);
        $ringImage = null;
        $gemstoneImage = null;

        } elseif (!empty($products->gemstone_id)) {

        $gemstoneImage = getGemStoneImages($products->gemstone_id);
        $ringImage = null;
        $diamondImage = null;

        } else {

        $ringImage = getProductImages(
        $products->ring_id,
        $products->ring_color,
        $center_stone
        );

        $diamondImage = null;
        $gemstoneImage = null;
        }

        $productPrice =
        ($products->ring_price ?? 0)
        + ($products->diamond_price ?? 0)
        + ($products->gemstone_price ?? 0);

        $subtotal += $productPrice;

        @endphp

        <table role="presentation"
            width="100%"
            border="0"
            cellpadding="0"
            cellspacing="0"
            style="border-collapse:collapse;">

            <tr>

                <td width="70"
                    valign="middle"
                    style="padding:14px 0;">

                    @if($ringImage)

                    <img src="{{ $ringImage }}"
                        width="60"
                        height="60"
                        style="display:block;border-radius:4px;">

                    @elseif($diamondImage && isset($diamondImage->image_url))

                    <img src="{{ $diamondImage->image_url }}"
                        width="60"
                        height="60"
                        style="display:block;border-radius:4px;"
                        onerror="this.onerror=null;this.src='https://assets.rocksama.com/frontend/images/grayscalelogo.png';">

                    @elseif($gemstoneImage)

                    <img src="{{ $gemstoneImage->image_url }}"
                        width="60"
                        height="60"
                        style="display:block;border-radius:4px;">

                    @endif

                </td>

                <td width="14">&nbsp;</td>

                <td valign="middle"
                    style="padding:14px 0;">

                    <div style="font-size:14px;
                            line-height:20px;
                            color:#310F4D;
                            font-weight:700;">

                        @if(isset($products->ring_id))
                        {{ getRingName($products->ring_id) }}
                        @endif

                        @if($diamondImage)
                        with {{ $diamondImage->shape }} Cut
                        {{ $diamondImage->size }}
                        {{ $products->diamond_type == 'Diamond' ? 'Natural Diamond' : 'Lab Grown Diamond' }}
                        @endif

                        @if($gemstoneImage)
                        with {{ $gemstoneImage->shape }} Cut
                        {{ $gemstoneImage->gem_type }}
                        {{ $gemstoneImage->size }}
                        @endif

                    </div>

                </td>

                <td valign="middle"
                    align="right"
                    style="padding:14px 0;
                        white-space:nowrap;
                        font-size:14px;
                        line-height:20px;
                        color:#310F4D;
                        font-weight:600;">

                    ${{ number_format($productPrice,2) }}

                </td>

            </tr>

        </table>

        @if(!$loop->last)

        <div style="height:1px;
                    background:#EDE8F0;
                    margin:8px 0;
                    line-height:1px;
                    font-size:1px;">
            &nbsp;
        </div>

        @endif

        @endforeach

    </td>
</tr>

<!-- CARE + REVIEW SECTION -->
<tr>
    <td class="pad-responsive" bgcolor="#FAF7F2" style="background:#FAF7F2;padding:28px 20px 20px 20px;">
        <div style="font-family:Georgia,'Times New Roman',serif;font-size:17px;color:#310F4D;margin-bottom:10px;">Caring for Your Piece</div>
        <div style="font-size:14px;line-height:1.7;color:#6F5C7A;margin-bottom:20px;">
            To keep your jewelry looking its best, store it in a soft pouch and avoid contact with perfume, lotions, and water. For detailed care tips, visit our <a href="https://rocksama.com/jewelry-care/fine-jewelry" style="color:#310F4D;text-decoration:underline;">Jewelry Care Guide</a>.
        </div>

        <div style="font-size:13.5px;line-height:1.6;color:#6F5C7A;margin-top:14px;font-style:italic;">
            Already loving it? We'd be grateful for a <a href="https://www.google.com/maps/place//data=!4m3!3m2!1s0x89c25bcdd53db757:0x16994e26dbcb8c48!12e1?source=g.page.m.kd._&laa=lu-desktop-review-solicitation" style="color:#310F4D;text-decoration:underline;font-style:normal;">quick review</a>.
        </div>
    </td>
</tr>

<!-- ISSUE SECTION -->
<tr>
    <td class="pad-responsive" bgcolor="#FAF7F2" style="background:#FAF7F2;padding:0 20px 8px 20px;">
        <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:20px;">
            <tr>
                <td align="center" bgcolor="#EDE8F0" style="background:#EDE8F0;border-radius:6px;padding:20px 22px;text-align:center;">
                    <div style="font-size:15px;color:#310F4D;font-weight:700;margin-bottom:8px;">Something not quite right?</div>
                    <div style="font-size:13px;line-height:1.6;color:#6F5C7A;margin-bottom:16px;">If your order arrived damaged or isn't what you expected, we want to make it right. Reach out to our team and we'll take care of you.</div>
                    <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td align="center" style="border:1px solid #310F4D;border-radius:4px;">
                                <a href="https://rocksama.com/contact-us" target="_blank" style="display:block;width:100%;height:44px;line-height:42px;color:#310F4D;font-size:13px;font-family:Arial,Helvetica,sans-serif;letter-spacing:2px;text-transform:uppercase;text-align:center;font-weight:700;text-decoration:none;">Contact Us</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

@php
    $impactData = config('impact');
    $impact = $impactData[$ordervalue->choose_your_impact] ?? null;
@endphp

@if($impact)
<tr>
    <td class="pad-responsive"
        bgcolor="#FAF7F2"
        style="background:#FAF7F2;padding:20px 20px 8px 20px;">

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

            <tr>

                <td bgcolor="#EDE8F0"
                    style="background:#EDE8F0;
                           border-left:3px solid #C9A880;
                           padding:18px 22px;
                           border-radius:0 6px 6px 0;">

                    <div style="font-family:Georgia,'Times New Roman',serif;
                                font-size:16px;
                                color:#310F4D;
                                margin-bottom:8px;">

                        Making Love Mean More

                    </div>

                    <div style="font-size:13px;
                                line-height:1.6;
                                color:#6F5C7A;">

                        Thanks to your purchase, we've donated 1% of your order to
                        <strong style="color:#310F4D;">
                            {{ $impact['partner'] }}
                        </strong>,
                        {{ $impact['description'] }}
                        Together, we're making love mean more.

                    </div>

                </td>

            </tr>

        </table>

    </td>
</tr>
@endif

<!-- 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"
                    width="20%"
                    style="padding:0 6px; vertical-align: top;">

                    <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"
                    width="20%"
                    style="padding:0 6px; vertical-align: top;">

                    <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"
                    width="20%"
                    style="padding:0 6px; vertical-align: top;">

                    <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"
                    width="20%"
                    style="padding:0 6px; vertical-align: top;">

                    <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"
                    width="20%"
                    style="padding:0 6px; vertical-align: top;">

                    <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