@extends('layouts.email_layout')
@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>

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

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

            On Its Way

        </div>

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

            Your Order Has Shipped!

        </div>

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

            Hi {{ ucfirst($user->first_name ?? $ordervalue->shipping_address->first_name ?? 'Customer') }},

        </div>

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

            Great news — your SAMA order is on its way! Here are your shipment details and tracking information.

        </div>

    </td>
</tr>

<!-- Shipment Details -->
<tr>
    <td class="pad-responsive" bgcolor="#F5EFF5" style="background:#F5EFF5;padding:28px 48px 32px 48px;">

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

        @php
        $trackingUrl = !empty($ordervalue->tracking_number)
        ? 'https://www.ups.com/track?tracknum=' . urlencode($ordervalue->tracking_number)
        : 'https://www.ups.com/track';
        @endphp

        <!-- Track Button -->
        <table role="presentation"
            width="100%"
            border="0"
            cellpadding="0"
            cellspacing="0"
            style="margin-bottom:20px;">

            <tr>

                <td align="center"
                    bgcolor="#310F4D"
                    style="background:#310F4D;border-radius:4px;">

                    <a href="{{ $trackingUrl }}"
                        target="_blank"
                        style="display:block;
                      width:100%;
                      height:48px;
                      line-height:48px;
                      color:#ffffff;
                      font-size:13px;
                      font-family:Arial,Helvetica,sans-serif;
                      letter-spacing:2px;
                      text-transform:uppercase;
                      text-align:center;
                      font-weight:700;
                      text-decoration:none;">

                        Track Your Order

                    </a>

                </td>

            </tr>

        </table>
        @php
        $trackingNumber = $ordervalue->tracking_number ?: 'N/A';
        $carrierName = 'UPS (adult signature required upon delivery)';
        @endphp

        <!-- Shipment Info -->
        <table role="presentation"
            width="100%"
            border="0"
            cellpadding="0"
            cellspacing="0"
            style="margin-bottom:20px;">

            <tr>

                <td align="left" width="100%">

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

                        Tracking Number:
                        <span style="font-family:'Courier New',Courier,monospace;
                             font-size:12px;
                             color:#310F4D;">

                            {{ $trackingNumber }}

                        </span>

                    </div>

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

                        Carrier:
                        <strong style="color:#310F4D;">

                            {{ $carrierName }}

                        </strong>

                    </div>

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

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

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

                        &nbsp;&nbsp;

                        {{ $orderId }}

                    </div>

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

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

                        &nbsp;&nbsp;

                        {{ \Carbon\Carbon::parse($ordervalue->created_at)->format('M d, Y') }}

                    </div>

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

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

                    </div>

                    <div style="font-size:14px;
                        color:#6F5C7A;
                        line-height:1.6;
                        padding-left:2px;">

                        {{ $shipping_address->first_name }} {{ $shipping_address->last_name }}<br>

                        {{ $shipping_address->address_line1 }}

                        @if(!empty($shipping_address->address_line2))
                        <br>{{ $shipping_address->address_line2 }}
                        @endif

                        <br>

                        {{ $shipping_address->city }},
                        {{ $shipping_address->state }}
                        {{ $shipping_address->zipcode }}

                        <br>

                        {{ $shipping_address->country }}

                    </div>

                </td>

            </tr>

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

<!-- ITEMS SECTION -->
<!-- ITEMS SECTION -->
<tr>
    <td class="pad-responsive"
        bgcolor="#FAF7F2"
        style="background:#FAF7F2;padding:28px 48px 28px 48px;">

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

            Items in This Shipment

        </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;
        }

        $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);

        $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:12px;
                line-height:18px;
                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(!empty($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;
                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;
    line-height:1px;
    background:#EDE8F0;
    margin:8px 0;">
            &nbsp;
        </div>

        @endif

        @endforeach

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

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

            <tr>
                <td style="padding:5px 0;font-size:13px;color:#6F5C7A;">
                    Subtotal
                </td>
                <td align="right"
                    style="padding:5px 0;font-size:13px;color:#6F5C7A;">
                    ${{ number_format($subTotal,2) }}
                </td>
            </tr>

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

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

            @if(($ordervalue->coupon_discount ?? 0) > 0)
            <tr>
                <td style="padding:5px 0;font-size:13px;color:#6F5C7A;">
                    Discount
                </td>
                <td align="right"
                    style="padding:5px 0;font-size:13px;color:#6F5C7A;">
                    -${{ number_format($ordervalue->coupon_discount,2) }}
                </td>
            </tr>
            @endif

            @php
            $total = $subTotal
            + ($ordervalue->shipping ?? 0)
            + ($ordervalue->tax ?? 0)
            - ($ordervalue->coupon_discount ?? 0);
            @endphp

            <tr>
                <td style="padding:10px 0 0;
            border-top:1px solid #C9A880;
            font-size:15px;
            color:#310F4D;
            font-weight:700;">
                    Total
                </td>

                <td align="right"
                    style="padding:10px 0 0;
            border-top:1px solid #C9A880;
            font-size:15px;
            color:#310F4D;
            font-weight:700;">
                    ${{ number_format($total,2) }}
                </td>
            </tr>

        </table>



    </td>
</tr>

<!-- GIVEBACK SECTION -->
@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:0 48px;">

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

            <tr>

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

                    <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 style="color:#310F4D;">{{ $impact['partner'] }},</strong>
                        {{ $impact['description'] }}
                        Together, we're making love mean more.

                    </div>



                </td>

            </tr>

        </table>

    </td>
</tr>

@endif

<!-- EXPECT SECTION -->
<tr>
    <td class="pad-responsive" bgcolor="#FAF7F2" style="background:#FAF7F2;padding:28px 48px 36px 48px;">
        <div style="font-size:14px;line-height:1.7;color:#6F5C7A;margin-bottom:12px;">Your order is expected to arrive within <strong style="color:#6F5C7A;">5–7 business days</strong>. If you have any questions about your shipment, please reach out to 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;color:#6F5C7A;font-style:italic;">We can't wait for you to see 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;">

                                                                Jewelry

                                                            </div>

                                                        </a>

                                                    </td>

                                                </tr>

                                            </table>

                                        </td>
                                    </tr>

@endsection