@extends('layouts.app')

@section('content')
    <section class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold text-gray-800 mb-8">Your Cart</h1>
            @if($cartItems->isEmpty())
                <p class="text-gray-600 text-lg">Your cart is empty.</p>
            @else
                <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
                    <table class="w-full">
                        <thead>
                            <tr class="border-b">
                                <th class="p-4 text-left text-gray-800">Item</th>
                                <th class="p-4 text-left text-gray-800">Quantity</th>
                                <th class="p-4 text-left text-gray-800">Price</th>
                                <th class="p-4 text-left text-gray-800">Total</th>
                                <th class="p-4 text-left text-gray-800">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($cartItems as $item)
                                <tr class="border-b">
                                    <td class="p-4">
                                        {{ $item->categoryPackage ? $item->categoryPackage->name : ($item->category ? $item->category->name : 'N/A') }}
                                    </td>
                                    <td class="p-4">{{ $item->quantity }}</td>
                                    <td class="p-4">{{ $item->price ? '$' . number_format($item->price, 2) : 'Call for Pricing' }}</td>
                                    <td class="p-4">{{ $item->price ? '$' . number_format($item->price * $item->quantity, 2) : 'Call for Pricing' }}</td>
                                    <td class="p-4">
                                        <form action="{{ route('cart.remove', $item) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-500 hover:underline">Remove</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if($cartItems->whereNotNull('price')->count() > 0)
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <h2 class="text-2xl font-bold text-gray-800 mb-4">Checkout</h2>
                        <form action="{{ route('cart.checkout') }}" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700">Coupon Code</label>
                                <input type="text" name="coupon_code" class="w-full border rounded p-2" value="{{ old('coupon_code') }}">
                                @error('coupon_code')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700">Payment Method</label>
                                <select name="payment_method" class="w-full border rounded p-2" required>
                                    <option value="stripe">Stripe</option>
                                    <option value="paypal">PayPal</option>
                                </select>
                                @error('payment_method')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="mb-4">
                                <label class="flex items-center">
                                    <input type="checkbox" name="is_deposit" value="1" class="h-4 w-4 text-yellow-500">
                                    <span class="ml-2 text-gray-700">Pay 20% Deposit</span>
                                </label>
                            </div>
                            <button type="submit" class="bg-yellow-500 text-black px-6 py-3 rounded hover:bg-yellow-600 transition">Proceed to Checkout</button>
                        </form>
                    </div>
                @endif
            @endif
        </div>
    </section>
@endsection