Medusa-svelte/src/lib/components/checkout.svelte

<script lang="ts">
    import { cart } from '$lib/stores/cart';

    let formData = {
        firstName: '',
        lastName: '',
        email: '',
        country: '',
        phoneNumber: '',
        district: '',
        block: '',
        street: '',
        avenue: '',
        buildingNumber: ''
    };

    function handleSubmit() {
        // Here you'll integrate payment processing later
        console.log('Form submitted:', formData);
        console.log('Cart items:', $cart);
    }

    function calculateTotal(items: any[]) {
        return items.reduce((sum, item) => 
            sum + (item.variant.calculated_price.calculated_amount * item.quantity), 0
        ).toFixed(2);
    }
</script>

<div class="min-h-screen bg-base-100">
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Order Summary -->
            <div class="lg:col-span-1 h-fit bg-base-200 rounded-lg p-6">
                <h2 class="text-xl font-bold mb-4">Order Summary</h2>
                <div class="space-y-3 mb-4">
                    {#each $cart as item}
                        <div class="flex justify-between items-start text-sm border-b border-base-300 pb-2">
                            <div class="flex-1">
                                <p class="font-medium">{item.product.title}</p>
                                <p class="text-xs text-base-content/70">
                                    {item.variant.title} × {item.quantity}
                                </p>
                            </div>
                            <p class="font-medium ml-4">{(item.variant.calculated_price.calculated_amount * item.quantity).toFixed(2)} €</p>
                        </div>
                    {/each}
                </div>
                
                <div class="flex justify-between items-center pt-4">
                    <span class="text-lg font-bold">Total:</span>
                    <span class="text-lg font-bold">{calculateTotal($cart)} €</span>
                </div>
            </div>

            <!-- Shipping Details Form -->
            <form class="lg:col-span-2 space-y-6 bg-base-200 rounded-lg p-6" on:submit|preventDefault={handleSubmit}>
                <h2 class="text-xl font-bold">Shipping Details</h2>
                
                <div class="grid grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label" for="firstName">
                            <span class="label-text">First Name</span>
                        </label>
                        <input 
                            type="text" 
                            id="firstName"
                            class="input input-bordered w-full" 
                            bind:value={formData.firstName} 
                            placeholder="John"
                            required
                        />
                    </div>

                    <div class="form-control">
                        <label class="label" for="lastName">
                            <span class="label-text">Last Name</span>
                        </label>
                        <input 
                            type="text" 
                            id="lastName"
                            class="input input-bordered w-full" 
                            bind:value={formData.lastName} 
                            placeholder="Doe"
                            required
                        />
                    </div>
                </div>

                <div class="form-control">
                    <label class="label" for="email">
                        <span class="label-text">Email</span>
                    </label>
                    <input 
                        type="email" 
                        id="email"
                        class="input input-bordered w-full" 
                        bind:value={formData.email} 
                        placeholder="john.doe@example.com"
                        required
                    />
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label" for="country">
                            <span class="label-text">Country</span>
                        </label>
                        <input 
                            type="text" 
                            id="country"
                            class="input input-bordered w-full" 
                            bind:value={formData.country} 
                            placeholder="Kuwait"
                            required
                        />
                    </div>

                    <div class="form-control">
                        <label class="label" for="phoneNumber">
                            <span class="label-text">Phone Number</span>
                        </label>
                        <input 
                            type="tel" 
                            id="phoneNumber"
                            class="input input-bordered w-full" 
                            bind:value={formData.phoneNumber} 
                            placeholder="+96596596596"
                            required
                        />
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label" for="district">
                            <span class="label-text">District</span>
                        </label>
                        <input 
                            type="text" 
                            id="district"
                            class="input input-bordered w-full" 
                            bind:value={formData.district} 
                            placeholder="Al-Rai"
                            required
                        />
                    </div>

                    <div class="form-control">
                        <label class="label" for="block">
                            <span class="label-text">Block</span>
                        </label>
                        <input 
                            type="text" 
                            id="block"
                            class="input input-bordered w-full" 
                            bind:value={formData.block} 
                            placeholder="2"
                            required
                        />
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label" for="street">
                            <span class="label-text">Street</span>
                        </label>
                        <input 
                            type="text" 
                            id="street"
                            class="input input-bordered w-full" 
                            bind:value={formData.street} 
                            placeholder="203"
                            required
                        />
                    </div>

                    <div class="form-control">
                        <label class="label" for="avenue">
                            <span class="label-text">Avenue (optional)</span>
                        </label>
                        <input 
                            type="text" 
                            id="avenue"
                            class="input input-bordered w-full" 
                            bind:value={formData.avenue}
                            placeholder="31"
                        />
                    </div>
                </div>

                <div class="form-control">
                    <label class="label" for="buildingNumber">
                        <span class="label-text">Building Number</span>
                    </label>
                    <input 
                        type="text" 
                        id="buildingNumber"
                        class="input input-bordered w-full" 
                        bind:value={formData.buildingNumber} 
                        placeholder="12"
                        required
                    />
                </div>

                <button type="submit" class="btn btn-primary w-full">
                    Continue to Payment
                </button>
            </form>
        </div>
    </div>
</div>