<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            {{ __('Finalize Purchase') }}
        </h2>
    </x-slot>

    <style>
        .checkout-card {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            padding: 2.5rem;
        }
        .section-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.75rem;
            color: var(--charcoal);
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--cream);
            padding-bottom: 0.75rem;
        }
        .form-group { margin-bottom: 1.5rem; }
        .form-label {
            display: block;
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
            margin-bottom: 0.6rem;
        }
        .form-input {
            width: 100%;
            padding: 1rem;
            background: var(--ivory);
            border: 1px solid rgba(26,24,20,0.08);
            border-radius: 2px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem;
            color: var(--ink);
            transition: border-color 0.2s;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--amber);
        }

        .summary-item {
            display: flex;
            justify-content: space-between;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(26,24,20,0.04);
            font-size: 0.9rem;
        }
        .summary-item:last-child { border-bottom: none; }
        
        .item-name { font-weight: 500; color: var(--charcoal); }
        .item-total { font-weight: 600; }

        .btn-order {
            width: 100%;
            padding: 1.25rem;
            background: var(--charcoal);
            color: var(--cream);
            border: none;
            border-radius: 2px;
            font-size: 0.8rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-weight: 700;
            cursor: pointer;
            margin-top: 2rem;
            transition: all 0.3s;
        }
        .btn-order:hover {
            background: var(--amber);
            color: var(--charcoal);
        }
    </style>

    <div style="padding: 4rem 0 8rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div style="display: grid; grid-template-columns: 1fr 380px; gap: 4rem; align-items: start;">
                
                <!-- Left: Shipping Info -->
                <div class="checkout-card">
                    <h3 class="section-title">Shipping Information</h3>
                    <form action="{{ route('order.store') }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label class="form-label">Full Name</label>
                            <input type="text" class="form-input" value="{{ auth()->user()->name }}" disabled>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Email Address</label>
                            <input type="email" class="form-input" value="{{ auth()->user()->email }}" disabled>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="address">Complete Delivery Address</label>
                            <textarea name="address" id="address" rows="5" class="form-input" required 
                                      placeholder="Building, Street, City, ZIP Code..."></textarea>
                        </div>
                        
                        <div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--cream);">
                            <h4 class="serif" style="font-size: 1.4rem; margin-bottom: 1rem;">Payment Method</h4>
                            <p style="font-size: 0.85rem; color: var(--warm-gray); display: flex; align-items: center; gap: 0.5rem;">
                                <svg style="width:16px;height:16px;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                Cash on Delivery (Complimentary)
                            </p>
                        </div>

                        <button type="submit" class="btn-order">
                            Confirm and Place Order
                        </button>
                    </form>
                </div>

                <!-- Right: Order Summary -->
                <div style="background: var(--charcoal); padding: 2.5rem; border-radius: 4px; color: var(--cream);">
                    <h3 class="serif" style="font-size: 1.75rem; margin-bottom: 2rem;">Order Summary</h3>
                    
                    <div style="margin-bottom: 2rem;">
                        @foreach($cart as $id => $details)
                            <div class="summary-item" style="border-color: rgba(255,255,255,0.06);">
                                <span class="item-name" style="color: var(--mist);">{{ $details['name'] }} <span style="font-size: 0.7rem; opacity: 0.6;">x{{ $details['quantity'] }}</span></span>
                                <span class="item-total" style="color: var(--cream);">৳{{ number_format($details['price'] * $details['quantity'], 2) }}</span>
                            </div>
                        @endforeach
                    </div>

                    <div style="space-y: 0.75rem;">
                        <div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--mist);">
                            <span>Subtotal</span>
                            <span>৳{{ number_format($total, 2) }}</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--mist); margin-top: 0.5rem;">
                            <span>Shipping</span>
                            <span>{{ $total > 15000 ? 'Included' : '৳150.00' }}</span>
                        </div>
                        
                        <div style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 1.5rem; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: baseline;">
                            <span class="serif" style="font-size: 1.5rem;">Total</span>
                            <span class="serif" style="font-size: 2rem; color: var(--amber);">৳{{ number_format($total > 15000 ? $total : $total + 150, 2) }}</span>
                        </div>
                    </div>

                    <div style="margin-top: 2rem; padding: 1rem; border: 1px solid rgba(200,136,58,0.2); border-radius: 2px; font-size: 0.75rem; color: var(--mist); text-align: center; line-height: 1.6;">
                        Your order will be processed within 24 hours and delivered with care.
                    </div>
                </div>

            </div>
        </div>
    </div>
</x-app-layout>
