@extends('layouts.email_layout')
@section('content')
<td align="center" style="padding:40px 12px;">
    <table role="presentation" class="email-container" width="600" cellspacing="0" cellpadding="0" border="0" style="width:600px; max-width:600px; background-color:#ffffff; border-collapse:collapse;">

        <!-- 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>

        <!-- Confirmation -->
        <tr>
            <td class="mobile-padding" align="center"
                style="background-color:#FAF7F2;padding:36px 48px 32px 48px;">

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

                <div style="font-family:Georgia,'Times New Roman',serif;
                    font-size:26px;
                    line-height:34px;
                    color:#310F4D;
                    font-weight:400;
                    margin-bottom:24px;">
                    Thank You for Your Order!
                </div>

                <div style="font-size:15px;
                    line-height:22px;
                    color:#310F4D;
                    text-align:left;
                    font-weight:600;
                    margin-bottom:12px;">
                    Hi {{ $username }},
                </div>

                <div style="font-size:14px;
                    line-height:24px;
                    color:#6F5C7A;
                    text-align:left;">
                    Thank you for your recent order from SAMA! We're excited to start working on your stunning new piece.
                    This email confirms the details of your order. You can review your order information below.
                </div>

            </td>
        </tr>
        <!-- Order Details -->
        <tr>
            <td class="mobile-padding"
                style="background-color:#F5EFF5;padding:32px 48px;">

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

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

                    <tr>
                        <td width="140"
                            valign="top"
                            style="padding:0 0 8px 0;
               font-size:14px;
               line-height:20px;
               color:#310F4D;
               font-weight:700;">
                            Order Number
                        </td>

                        <td valign="top"
                            style="padding:0 0 8px 0;
               font-size:13px;
               line-height:20px;
               color:#6F5C7A;
               font-family:'Jost',sans-serif;">
                            #{{ $ordervalue->order_id }}
                        </td>
                    </tr>

                    <tr>
                        <td width="140"
                            valign="top"
                            style="padding:0 0 8px 0;
                           font-size:14px;
                           line-height:20px;
                           color:#310F4D;
                           font-weight:700;">
                            Order Date
                        </td>

                        <td valign="top"
                            style="padding:0 0 8px 0;
                           font-size:14px;
                           line-height:20px;
                           color:#6F5C7A;">
                            {{ date('M d, Y', strtotime($ordervalue->created_at)) }}
                        </td>
                    </tr>

                    <tr>
                        <td width="140"
                            valign="top"
                            style="padding:0 0 8px 0;
                           font-size:14px;
                           line-height:20px;
                           color:#310F4D;
                           font-weight:700;">
                            Shipping Address
                        </td>

                        <td valign="top"
                            style="padding:0 0 8px 0;
                           font-size:14px;
                           line-height:22px;
                           color:#6F5C7A;">

                            {{ ucfirst($shipping_address->address_line1) }},
                            {{ $shipping_address->city }},
                            {{ $shipping_address->state }},
                            {{ $shipping_address->zipcode }}

                        </td>
                    </tr>

                </table>

                <div style="height:1px;
                    line-height:1px;
                    background-color:#EDE8F0;
                    margin:20px 0;">
                    &nbsp;
                </div>
                @php
                $subtotal = 0;
                @endphp

                {{-- Products will go here --}}
                @foreach ($orderItems as $orderItem)

                @php

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

                $center_stone = isset($products->center_stone_shape)
                ? $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;
                }

                $fontLabel = null;

                if (!empty($products->font) && $products->font != 'null') {

                $cleanFont = trim(
                str_replace(["'", '"'], '', explode(',', $products->font)[0])
                );

                $fontLabel = \App\Models\Font::where('value', $cleanFont)
                ->value('label') ?? $cleanFont;
                }

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




                @endphp

                @php
                $subtotal += $productPrice;
                @endphp


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

                    <tr>

                        <td width="70"
                            valign="top"
                            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="top"
                            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>

                            <div style="font-size:11px;
                        line-height:17px;
                        color:#6F5C7A;
                        margin-top:6px;">

                                Quantity : 1

                                @if(!empty($products->ring_color) && $products->ring_color != 'null')
                                <br>
                                Metal Color : {{ ucwords(str_replace('-', ' ', $products->ring_color)) }}
                                @endif

                                @if(
                                $products->product_type != 'jewelry' &&
                                !empty($products->ring_size) &&
                                $products->ring_size != 'null'
                                )
                                <br>
                                Ring Size : {{ $products->ring_size }}
                                @endif

                                @if(isset($products->engraving) && $products->engraving != 'null')
                                <br>
                                Engraving :
                                {!! $products->engraving !!}
                                @endif

                                @if($fontLabel)
                                <br>
                                Font :
                                {{ $fontLabel }}
                                @endif

                            </div>

                        </td>

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

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

                        </td>

                    </tr>

                </table>

                @if(!$loop->last)

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

                @endif

                @endforeach

                @if(!empty($ordervalue->personalized_gift_message))

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

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

                    <tr>

                        <td width="3"
                            style="background-color:#C9A880;
                       font-size:1px;
                       line-height:1px;">
                            &nbsp;
                        </td>

                        <td style="background-color:#EDE8F0;
                       padding:12px 16px;">

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

                                Gift Message

                            </div>

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

                                {{ $ordervalue->personalized_gift_message }}

                            </div>

                        </td>

                    </tr>

                </table>

                @endif

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

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

                    <tr>
                        <td width="50%" style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align:left;">
                            Subtotal
                        </td>

                        <td width="50%" align="right"
                            style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align:right;">
                            ${{ number_format($subtotal, 2) }}
                        </td>
                    </tr>

                    <tr>
                        <td width="50%" style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align: left;">
                            Shipping
                        </td>

                        <td width="50%" align="right"
                            style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align: right;">
                            ${{ number_format($ordervalue->shipping ?? 0, 2) }}
                        </td>
                    </tr>

                    @if(($ordervalue->coupon_discount ?? 0) > 0)
                    <tr>
                        <td width="50%" style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align: left;">
                            Discount
                        </td>

                        <td width="50%" align="right"
                            style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align: right;">
                            -${{ number_format($ordervalue->coupon_discount, 2) }}
                        </td>
                    </tr>
                    @endif

                    <tr>
                        <td width="50%" style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align: left;">
                            Tax
                        </td>

                        <td width="50%" align="right"
                            style="padding:5px 0;
            font-size:13px;
            line-height:19px;
            color:#6F5C7A;
            text-align: right;">
                            ${{ number_format($ordervalue->tax ?? 0, 2) }}
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" style="padding-top:8px;">
                            <div style="height:1px;
                line-height:1px;
                background-color:#C9A880;">
                                &nbsp;
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td width="50%" style="padding:10px 0 0 0;
            font-size:15px;
            line-height:22px;
            color:#310F4D;
            font-weight:700;
            text-align: left;">
                            Total
                        </td>

                        <td width="50%" align="right"
                            style="padding:10px 0 0 0;
            font-size:15px;
            line-height:22px;
            color:#310F4D;
            font-weight:700;
            text-align: right;">
                            ${{ number_format($ordervalue->final_amount ?? ($subtotal + ($ordervalue->shipping ?? 0) + ($ordervalue->tax ?? 0) - ($ordervalue->coupon_discount ?? 0)), 2) }}
                        </td>
                    </tr>

                </table>

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

                <!-- Giveback -->
                @if($impact)

        <tr>
            <td class="mobile-padding"
                style="background-color:#FAF7F2;padding:28px 48px;">

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

                    <tr>

                        <td width="3"
                            style="background-color:#C9A880;
                           font-size:1px;
                           line-height:1px;">
                            &nbsp;
                        </td>

                        <td style="background-color:#EDE8F0;
                           padding:20px 22px;">

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

                                Making Love Mean More

                            </div>

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

                                Thanks to your purchase, we've donated
                                <strong>1%</strong> of your order to
                                <strong>{{ $impact['partner'] }}</strong>,
                                {{ $impact['description'] }}
                                Together, we're making love mean more.

                            </div>

                        </td>

                    </tr>

                </table>

            </td>
        </tr>

        @endif

        <!-- Shipping -->
        <tr>
            <td class="mobile-padding" style="background-color:#FAF7F2; padding:0 48px 36px 48px;">

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

                    Your order will be shipped via <strong>UPS</strong> and is expected to arrive within
                    <strong>7 business days</strong>. You'll receive a separate email with tracking
                    information once your order has shipped.

                </div>

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

                    If you have any questions, please don't hesitate to reach our customer support team at
                    <a href="mailto:customercare@rocksama.com"
                        style="color:#310F4D;text-decoration:underline;">
                        customercare@rocksama.com
                    </a>
                    or call us at
                    <a href="tel:3322952110"
                        style="color:#310F4D;text-decoration:underline;">
                        332-295-2110
                    </a>.

                </div>

                <div style="font-size:14px;
                    line-height:24px;
                    color:#6F5C7A;
                    font-style:italic;">

                    Thank you again for choosing SAMA. We hope you love your new piece.

                </div>

            </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"
                            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;
                            width:100px;">

                                    Jewelry

                                </div>

                            </a>

                        </td>

                    </tr>

                </table>

            </td>
        </tr>


    </table>
</td>
@endsection