@extends('layouts.app')
@section('content')
<style>
    body {
        background-color: #fff;
    }
    .checkout-wrapper {
        display: flex;
        min-height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    .checkout-main {
        flex: 1 1 55%;
        padding: 5% 5% 5% 15%;
        background: #fff;
    }
    .checkout-sidebar {
        flex: 1 1 45%;
        padding: 5% 15% 5% 4%;
        background: #fafafa;
        border-left: 1px solid #e1e1e1;
    }
    .express-checkout {
        text-align: center;
        margin-bottom: 25px;
    }
    .express-checkout p {
        font-size: 12px;
        color: #737373;
        margin-bottom: 12px;
    }
    .express-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    .express-btn {
        flex: 1;
        padding: 12px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 16px;
    }
    .btn-shop { background: #5a31f4; color: white; }
    .btn-paypal { background: #ffc439; color: #003087; font-style: italic; }
    .btn-gpay { background: #000; color: white; }
    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        color: #737373;
        font-size: 13px;
        margin: 25px 0;
    }
    .divider::before, .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e1e1e1;
    }
    .divider:not(:empty)::before { margin-right: 15px; }
    .divider:not(:empty)::after { margin-left: 15px; }
    
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 15px;
        margin-top: 30px;
    }
    .section-header h2 {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        color: #333;
    }
    .section-header a {
        font-size: 13px;
        color: #333;
        text-decoration: underline;
    }
    
    .form-group {
        margin-bottom: 15px;
        position: relative;
    }
    .form-row {
        display: flex;
        gap: 15px;
    }
    .form-row .form-group {
        flex: 1;
    }
    .form-input {
        width: 100%;
        padding: 13px 12px;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        font-size: 14px;
        box-sizing: border-box;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-input:focus {
        border-color: #000;
        box-shadow: 0 0 0 1px #000;
        outline: none;
    }
    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #333;
        margin-bottom: 15px;
        cursor: pointer;
    }
    .checkbox-group input {
        width: 18px;
        height: 18px;
        accent-color: #000;
    }

    .shipping-method-box {
        background: #f5f5f5;
        border-radius: 5px;
        padding: 18px;
        text-align: center;
        font-size: 14px;
        color: #555;
    }

    .payment-box {
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        overflow: hidden;
    }
    .payment-option {
        padding: 18px;
        border-bottom: 1px solid #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        cursor: pointer;
    }
    .payment-option:last-child {
        border-bottom: none;
    }
    .payment-option-inner {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 500;
    }
    .payment-icons img {
        height: 24px;
        margin-left: 5px;
    }
    .payment-details {
        background: #fafafa;
        padding: 20px;
        border-bottom: 1px solid #d9d9d9;
    }
    
    .pay-button {
        width: 100%;
        background: #000;
        color: #fff;
        border: none;
        padding: 20px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 25px;
        transition: opacity 0.2s;
    }
    .pay-button:hover {
        opacity: 0.9;
    }

    /* Sidebar Styles */
    .sidebar-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }
    .sidebar-item-img-wrapper {
        position: relative;
        width: 64px;
        height: 64px;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar-item-img-wrapper img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
    }
    .sidebar-item-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #737373;
        color: #fff;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 500;
    }
    .sidebar-item-details {
        flex: 1;
    }
    .sidebar-item-title {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin: 0 0 4px 0;
    }
    .sidebar-item-variant {
        font-size: 12px;
        color: #737373;
        margin: 0;
    }
    .sidebar-item-price {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }
    .sidebar-totals {
        border-top: 1px solid #e1e1e1;
        padding-top: 20px;
        margin-top: 20px;
    }
    .sidebar-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 14px;
        color: #555;
    }
    .sidebar-row.total {
        margin-top: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #333;
        align-items: center;
    }
    .sidebar-row.total span:first-child {
        font-size: 16px;
    }
    .usd-currency {
        font-size: 12px;
        color: #737373;
        margin-right: 5px;
    }

    @media (max-width: 900px) {
        .checkout-wrapper {
            flex-direction: column-reverse;
        }
        .checkout-main, .checkout-sidebar {
            padding: 5%;
        }
        .checkout-sidebar {
            border-left: none;
            border-bottom: 1px solid #e1e1e1;
        }
    }
</style>

<div class="checkout-wrapper">
    <div class="checkout-main">
        
        <div class="express-checkout">
            <p>Express checkout</p>
            <div class="express-buttons">
                <button class="express-btn btn-shop">shop</button>
                <button class="express-btn btn-paypal">PayPal</button>
                <button class="express-btn btn-gpay">G Pay</button>
            </div>
        </div>

        <div class="divider">OR</div>

        <div class="section-header">
            <h2>Contact</h2>
            <a href="#">Sign in</a>
        </div>
        <div class="form-group">
            <input type="email" class="form-input" placeholder="Email" required>
        </div>
        <label class="checkbox-group">
            <input type="checkbox"> Email me with news and offers
        </label>

        <div class="section-header">
            <h2>Delivery</h2>
        </div>
        <div class="form-group">
            <select class="form-input" style="appearance: auto;">
                <option>United States</option>
                <option>Canada</option>
                <option>United Kingdom</option>
                <option>Australia</option>
            </select>
        </div>
        <div class="form-row">
            <div class="form-group">
                <input type="text" class="form-input" placeholder="First name" required>
            </div>
            <div class="form-group">
                <input type="text" class="form-input" placeholder="Last name" required>
            </div>
        </div>
        <div class="form-group">
            <input type="text" class="form-input" placeholder="Address" required>
        </div>
        <div class="form-group">
            <input type="text" class="form-input" placeholder="Apartment, suite, etc. (optional)">
        </div>
        <div class="form-row">
            <div class="form-group">
                <input type="text" class="form-input" placeholder="City" required>
            </div>
            <div class="form-group">
                <select class="form-input" style="appearance: auto;">
                    <option>State</option>
                    <option>California</option>
                    <option>New York</option>
                    <option>Texas</option>
                </select>
            </div>
            <div class="form-group">
                <input type="text" class="form-input" placeholder="ZIP code" required>
            </div>
        </div>
        <div class="form-group">
            <input type="tel" class="form-input" placeholder="Phone">
        </div>

        <div class="section-header">
            <h2>Shipping method</h2>
        </div>
        <div class="shipping-method-box">
            Enter your shipping address to view available shipping methods.
        </div>

        <div class="section-header" style="display:flex; flex-direction:column; gap:5px;">
            <h2 style="margin:0;">Payment</h2>
            <span style="font-size:13px; color:#737373;">All transactions are secure and encrypted.</span>
        </div>

        <div class="payment-box">
            <label class="payment-option" style="background:#f4f4f4; border-bottom:1px solid #d9d9d9;">
                <div class="payment-option-inner">
                    <input type="radio" name="payment" checked style="accent-color:#000;">
                    Credit card
                </div>
                <div class="payment-icons" style="display:flex; gap:4px;">
                    <span style="background:#1434CB; color:#fff; font-size:10px; padding:2px 4px; border-radius:2px; font-weight:bold;">VISA</span>
                    <span style="background:#FF5F00; color:#fff; font-size:10px; padding:2px 4px; border-radius:2px; font-weight:bold;">MC</span>
                    <span style="background:#006FCF; color:#fff; font-size:10px; padding:2px 4px; border-radius:2px; font-weight:bold;">AMEX</span>
                </div>
            </label>
            <div class="payment-details">
                <div class="form-group">
                    <input type="text" class="form-input" placeholder="Card number">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <input type="text" class="form-input" placeholder="Expiration date (MM / YY)">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-input" placeholder="Security code">
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="form-input" placeholder="Name on card">
                </div>
                <label class="checkbox-group" style="margin-top:15px; margin-bottom:0;">
                    <input type="checkbox" checked> Use shipping address as billing address
                </label>
            </div>

            <label class="payment-option">
                <div class="payment-option-inner">
                    <input type="radio" name="payment" style="accent-color:#000;">
                    Shop Pay
                </div>
                <div style="color:#5a31f4; font-weight:bold; font-size:16px;">shop</div>
            </label>
            <label class="payment-option">
                <div class="payment-option-inner">
                    <input type="radio" name="payment" style="accent-color:#000;">
                    PayPal
                </div>
                <div style="color:#003087; font-weight:bold; font-style:italic; font-size:16px;">PayPal</div>
            </label>
        </div>

        <button type="button" class="pay-button" onclick="alert('Order placed successfully!'); window.location.href='{{ route('home') }}';">Pay now</button>

    </div>

    <div class="checkout-sidebar">
        @php $subtotal = 0; @endphp
        @foreach($cart as $item)
            @php 
                $subtotal += (float)str_replace(',', '', $item['price']) * $item['quantity'];
                
                $images = [];
                if (!empty($item['image'])) {
                    $decoded = json_decode($item['image'], true);
                    if (is_array($decoded)) {
                        $images = $decoded;
                    } else {
                        $images = [$item['image']];
                    }
                }
                $firstImg = $images[0] ?? 'default-placeholder.png';
                $imgSrc = str_starts_with($firstImg, 'http') ? $firstImg : asset('assets/images/product/' . trim($firstImg));
            @endphp
            <div class="sidebar-item">
                <div class="sidebar-item-img-wrapper">
                    <img src="{{ $imgSrc }}" alt="{{ $item['name'] }}">
                    <span class="sidebar-item-badge">{{ $item['quantity'] }}</span>
                </div>
                <div class="sidebar-item-details">
                    <h3 class="sidebar-item-title">{{ $item['name'] }}</h3>
                    <p class="sidebar-item-variant">
                        {{ $item['metal'] }} 
                        @if(!empty($item['quality'])) / {{ $item['quality'] }} @endif
                    </p>
                    <p class="sidebar-item-variant">Ring Size: {{ $item['ring_size'] }}</p>
                    @if(!empty($item['carat']))
                    <p class="sidebar-item-variant">Carat: {{ $item['carat'] }} CT</p>
                    @endif
                </div>
                <div class="sidebar-item-price">
                    ${{ number_format((float)str_replace(',', '', $item['price']) * $item['quantity'], 2) }}
                </div>
            </div>
        @endforeach

        <div class="sidebar-totals">
            <div class="sidebar-row">
                <span>Subtotal</span>
                <span style="font-weight: 500; color: #333;">${{ number_format($subtotal, 2) }}</span>
            </div>
            <div class="sidebar-row">
                <span>Shipping</span>
                <span style="font-size:12px; color:#737373;">Enter shipping address</span>
            </div>
            <div class="sidebar-row total">
                <span>Total</span>
                <span><span class="usd-currency">USD</span>${{ number_format($subtotal, 2) }}</span>
            </div>
        </div>
    </div>
</div>
@endsection