@extends('main-page')
@section('title')
    Checkout
@endsection
@section('main-contents')
    <div class="page-content">
        <div class="checkout-success-message">
            <p class="success-thank-you">THANK YOU FOR YOUR ORDER!</p>
            <p>YOUR ORDER #{{$orderDetails->orderId}} HAS BEEN PLACED. YOU WILL RECIEVE ORDER CONFIRMATION EMAIL <br> ON <span
                    style="color:black;">{{$userEmail}}</span></p>
        </div>
        <div style="margin-top: 10px;" class="success-checkout-content">
            <div class="success-address">
                <div>
                    <p class="success-address-header">Shipping Address</p>
                    <div class="success-address">
                        <p style="font-weight: bold; color: black;">{{ $shippingAddress->first_name }} {{ $shippingAddress->last_name }}</p>
                        <p>{{ $shippingAddress->address1 }}</p>
                        @if($shippingAddress->address2)
                            <p>{{ $shippingAddress->address2 }}</p>
                        @endif
                        <p>{{ $shippingAddress->city }}, {{ $shippingAddress->state }} {{ $shippingAddress->zip }}</p>
                        <p>{{ $shippingAddress->country }}</p>
                        <p>{{ $shippingAddress->phone }}</p>
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <p class="success-address-header">Billing Address</p>
                    <div class="success-address">
                        <p style="font-weight: bold; color: black;">{{ $billingAddress->first_name }} {{ $billingAddress->last_name }}</p>
                        <p>{{ $billingAddress->address1 }}</p>
                        @if($billingAddress->address2)
                            <p>{{ $billingAddress->address2 }}</p>
                        @endif
                        <p>{{ $billingAddress->city }}, {{ $billingAddress->state }} {{ $billingAddress->zip }}</p>
                        <p>{{ $billingAddress->country }}</p>
                        <p>{{ $billingAddress->phone }}</p>
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <p class="success-address-header">Payment Method</p>
                    <div class="payment-success-page">
                        <div class="payment-method-logo-success">
                            @if ($paymentInfo->method == 'mastercard')
                                <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="logo">
                            @endif
                        </div>

                        <div class="payment-method-success">
                            <p>{{ $paymentInfo->method }}</p>
                            <p>***{{ $paymentInfo->last_4 }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- order summary -->
            <div class="success-summary">
                <div class="success-summary-inner">
                    <p class="success-summary-header">Order summary</p>
                    <div class="success-summary-item">
                        <div>
                            <p>Items total</p>
                            <p><span class="currency-success"></span>{{ number_format($orderDetails->grandTotal, 2) }}</p>
                        </div>
                        <div>
                            <p>Discounts</p>
                            <p>-<span class="currency-success"></span>{{ $orderDetails->discount }}</p>
                        </div>
                    </div>
                    <p class="hr-line1"></p>
                    <div class="success-summary-item">
                        <div>
                            <p>subtotal</p>
                            <p><span class="currency-success"></span>{{ number_format($orderDetails->grandTotal - $orderDetails->discount, 2) }}</p>
                        </div>
                        <div>
                            <p>Shipping</p>
                            <p><span class="currency-success"></span>0</p>
                        </div>
                    </div>
                    <p class="hr-line1"></p>
                    <div class="success-summary-item">
                        <div>
                            <p>Order total</p>
                            <p><span class="currency-success"></span>{{ number_format($orderDetails->grandTotal - $orderDetails->discount, 2) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Shopping cart -->
        <div class="shopping-cart-success">
            <p class="mb-2">SHOPPING CART</p>
            <div class="shopping-cart-success-inner">
                <div class="all-cart-list-items-success">
                @foreach($cartItems as $item)
                    <div class="cart-lists-left-all-items-success">
                        <div class="cart-success-upper">
                            <div class="cart-color-content-success">
                                <p class="color-box-cartlist" style="background-color: {{$item->colorCode}};border:2px solid black;"></p>
                                <p class="text-center cart-color-details-name" style="font-size: 1.4rem;color:black">{{$item->product_name}}</p>
                            </div>
                            <div class="cart-color-details-content-container-success">
                                <p style="font-size:1.4rem;color:black; font-weight: normal;">NAME: {{ $item->colorName ?? 'Green With Envy' }}</p>
                                @if ($item->type != 'none')
                                    <div class="details-filter-row details-row-size"
                                        style="margin-bottom:0px;font-size:1.4rem;">
                                        <label for="size" style="color:black;">FINISH:</label>
                                        <div class="select-custom">
                                            <select name="size" id="size" class="form-control" id="finish_item_i"
                                                style="border:none;background:none;font-size:1.4rem;" disabled>
                                                <option value="#" selected="selected">{{$item->type}}</option>
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                @if ($item->fragranceName != 'none')
                                    <div class="details-filter-row details-row-size"
                                        style="font-size:1.4rem; margin-top: -10px;">
                                        <label for="size" style="color:black;">FRAGRANCE:</label>
                                        <div class="select-custom">
                                            <select name="size" id="fragrance-i" class="form-control"
                                                style="border:none;background:none" disabled>
                                                <option value="#" selected="selected">{{$item->fragranceName}}</option>
                                            </select>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="cartlist-actions-success">
                            <div class="hidden-success-acction">

                            </div>
                            <div class="cart-list-price">
                                <p class="text-center mt-1 fw-bold" style="font-size:1.4rem;color:#59595D">PRICE <br> <span class="currency-success"></span>{{$item->buyPrice-$item->discount}}
                                </p>
                            </div>
                            <div class="cart-list-quantity">
                                <div class="quantity-control-scucces">
                                   {{ $item->quantity }}
                                </div>
                            </div>
                            <div class="cart-list-subtotal">
                                <p class="text-center mt-1 fw-bold" style="font-size:1.4rem;color:#59595D">SUBTOTAL <br>
                                <span class="currency-success"></span>{{$item->quantity * ($item->buyPrice-$item->discount)}}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
                </div>
            </div>
        </div>
    </div>

<script>
    let currency = initializeCurrency(); // Initialize currency

    // Map for currency symbols including GBP
    const currencySymbolsCart = {
        'USD': 'US$ ',
        'EUR': '€ ',
        'GBP': '£ ',
        'HKD': 'HK$ '
    };

    // Function to initialize currency from localStorage or set a default
    function initializeCurrency() {
        let storedCurrency = localStorage.getItem('selectedCurrency');
        return storedCurrency ? storedCurrency : 'USD'; // Set default currency if none is stored
    }

    // Update all elements with the class 'currency-success' on page load
    document.addEventListener('DOMContentLoaded', function () {
        let symbol = currencySymbolsCart[currency] || '$'; // Fallback symbol
        document.querySelectorAll('.currency-success').forEach(el => {
            el.textContent = symbol;
        });
    });
</script>
@endsection