@extends('layouts.layout')
@section('content')
    <style>
        .card .card-body {
            padding: 1rem 1rem !important;
        }

        .card .card-footer {
            padding: 1rem 1rem;
        }

        .cart-section .cart-table thead tr th {
            border-top: 0px solid #232323;
            border-bottom: 1px solid #e7e3e3 !important;
        }

        .order-details-table .table-details .table tfoot tr.table-order:nth-child(n+3) {
            border-bottom: 0px solid #ddd !important;
        }

        .order-details-table .table-details .table tfoot tr.table-order:last-child {
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #ddd;
        }

        .main-img {
            max-width: 100%;
            border-radius: 8px;
            width: 100% !important;
        }

        .thumb-img:hover {
            opacity: 0.8;
            transition: 0.3s;
        }

        img.thumb-img.border {
            position: absolute;
            left: 7px;
            top: 9px;
            width: 65px !important;
        }

        .product-card {
            border: 1px solid #e0e0e0;
            border-radius: .5rem;
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
            margin-bottom: 1.5rem;
        }

        .order-header-card .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            padding: 1rem 1.25rem;
        }

        .order-header-card .card-header h5 {
            margin-bottom: 0;
            font-weight: 600;
            color: #343a40;
        }

        .order-detail-label {
            font-size: 0.77rem;
            color: #000;
            margin-right: 0.25rem;
        }

        .order-detail-value {
            font-weight: 600;
            color: #000;
        }

        .order-detail-separator {
            color: #ced4da;
            margin: 0 0.5rem;
        }

        .card .card-header {
            background-color: #fffbfb;
            padding: 10px 30px;
            border-bottom: 1px solid #ddd;
        }

        .card-header-inner {
            display: flex;
            flex-wrap: wrap;
            width: 88%;
            gap: 15px;
        }

        .card-header-column {
            display: block;
            flex: 1 0 auto;
            align-items: center;
            justify-content: flex-start;
        }

        .card-header-column>span {
            display: block;
            text-align: center;
        }

        .card-header-right-col {
            display: block;
            align-items: center;
            text-align: center;
        }

        .caed-strip-custm-inner {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .image-section img.main-img {
            width: 100% !important;
            height: auto !important;
            border: none;
            max-width: 300px;
            border: none !important;
            max-height: 300px;
            min-height: 300px;
            object-fit: contain;
        }

        .card-custom {
            margin-bottom: 30px;
            border: 0px;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
            border-radius: 8px;
            -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
            padding: 15px;
        }

        .form-check-input:checked[type="checkbox"] {
            opacity: 1;
        }

        .form-check-input:checked[type="checkbox"]+label {
            opacity: 1;
        }

        .row-custom-for-card {
            gap: 20px;
            padding: 20px 30px;
            justify-content: space-around;
        }

        .shadow-custom {
            width: 100% !important;
        }

        .row-custom-for-card .card-custom {
            width: calc(33.333% - 20px);
        }
    </style>
    <!-- Right sidebar Ends-->
    <div class="page-body">
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="page-header-left">
                            <h3>Order Details
                                <small>Sama Admin panel</small>
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ol class="breadcrumb pull-right">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">
                                    <i data-feather="home"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ route('sale.orders') }}">Orders</a></li>
                            <li class="breadcrumb-item active">Order Details</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div class="card-header-inner">
                                <div class="card-header-column">
                                    <span class="order-detail-label">Order ID:</span>
                                    <span class="order-detail-value me-3">#{{ $order->order_id }}</span>
                                </div>
                                <div class="card-header-column">
                                    <span class="order-detail-label">Order Date:</span>
                                    <span
                                        class="order-detail-value me-3">{{ date('M  d ,Y', strtotime($order->created_at)) }}</span>
                                </div>
                                <div class="card-header-column">
                                    <span class="order-detail-label">Payment method:</span>
                                    <span class="order-detail-value me-3">Card Payment</span>
                                </div>
                                <div class="card-header-column">
                                    <span class="order-detail-label">Order Amount:</span>
                                    <span class="order-detail-value me-3">${{ formatPrice($order->final_amount) }}</span>
                                </div>

                            </div>
                            <div class="card-header-right-col">
                                <span class="order-detail-label">Status</span>
                                <span class="badge bg-success">{{ $order->dynamicStatus->name ?? 'Unknown' }}</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="bg-inner cart-section order-details-table">
                                <div class="row g-4 row-custom-for-card">
                                    @php
                                        $ringImages = [];
                                        $diamondImages = [];
                                        $gemstoneImages = [];
                                    @endphp
                                    @foreach ($order_items 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)) {
                                                $ringImages[$orderItem->id] = getProductImages(
                                                    $products->ring_id,
                                                    $products->ring_color,
                                                    $center_stone,
                                                );
                                                // $diamondImages[$orderItem->id] = getDiamondImages(
                                                //     $products->diamond_id,
                                                //     $products->diamond_type,
                                                // );
                                                $diamondImages[$orderItem->id] = getResponseFromSavedData(
                                                    $orderItem->diamond_response,
                                                );
                                            } elseif (!empty($products->ring_id) && !empty($products->gemstone_id)) {
                                                $ringImages[$orderItem->id] = getProductImages(
                                                    $products->ring_id,
                                                    $products->ring_color,
                                                    $center_stone,
                                                );
                                                $gemstoneImages[$orderItem->id] = getResponseFromSavedData(
                                                    $orderItem->gemstone_response,
                                                );
                                            } elseif (!empty($products->diamond_id)) {
                                                $diamondImages[$orderItem->id] = getResponseFromSavedData(
                                                    $orderItem->diamond_response,
                                                );
                                            } elseif (!empty($products->gemstone_id)) {
                                                $gemstoneImages[$orderItem->id] = getGemStoneImages(
                                                    $products->gemstone_id,
                                                );
                                            } else {
                                                $ringImages[$orderItem->id] = getProductImages(
                                                    $products->ring_id,
                                                    $products->ring_color,
                                                    $center_stone,
                                                );
                                            }
                                            $ringImage = isset($ringImages[$orderItem->id])
                                                ? $ringImages[$orderItem->id]
                                                : null;
                                            $diamondImage = isset($diamondImages[$orderItem->id])
                                                ? $diamondImages[$orderItem->id]
                                                : null;
                                            $gemstoneImage = isset($gemstoneImages[$orderItem->id])
                                                ? $gemstoneImages[$orderItem->id]
                                                : null;
                                            $images = [];
                                            if ($ringImage) {
                                                $images[] = ['src' => $ringImage];
                                            }
                                            if ($diamondImage && isset($diamondImage->image_url)) {
                                                $images[] = ['src' => $diamondImage->image_url];
                                            }
                                            if ($gemstoneImage && isset($gemstoneImage->image_url)) {
                                                $images[] = ['src' => $gemstoneImage->image_url];
                                            }
                                            $imageCount = count($images);
                                        @endphp
                                        <div class="col-sm-4 card-custom">
                                            <div class="shadow-custom" style="width: 20rem;">
                                                <div class="image-section d-flex flex-column align-items-center">
                                                    @if (count($images) > 0)
                                                        <img id="main-image-{{ $orderItem->id }}"
                                                            src="{{ $images[0]['src'] }}" alt="Main Image"
                                                            class="main-img mb-2 border"
                                                            style="width: 200px; height: 280px;">

                                                        @if (count($images) > 1)
                                                            <img id="thumb-image-{{ $orderItem->id }}"
                                                                src="{{ $images[1]['src'] }}" alt="Thumbnail"
                                                                class="thumb-img border"
                                                                style="width: 60px; height: auto; cursor: pointer;"
                                                                onclick="swapImages({{ $orderItem->id }})"
                                                                onerror="this.onerror=null; this.src='https://assets.rocksama.com/frontend/images/grayscalelogo.png';">
                                                        @endif
                                                    @endif
                                                </div>
                                                <div class="card-body">
                                                    <span class="card-text">
                                                        @if ($products->product_type == 'matching_set')
                                                            <strong>{{ ucwords(str_replace('-', ' ', $products->ring_color)) }}
                                                                {{ getProductNname($products->ring_id) }}</strong> <br>
                                                            SKU {{ getRingSKU($products->ring_id) }} &ensp;
                                                            ${{ formatPrice($products->ring_price) }}
                                                        @elseif ($products->product_type == 'ring_gemstone')
                                                            <strong>{{ ucwords(str_replace('-', ' ', $products->ring_color)) }}
                                                                {{ getProductNname($products->ring_id) }}</strong> <br>
                                                            SKU {{ getRingSKU($products->ring_id) }} &ensp;
                                                            ${{ formatPrice($products->ring_price) }}
                                                            <hr>