@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-10">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">🛒 Keranjang Belanja</h1>

    @if($cart && count($cart) > 0)
        {{-- Tabel Keranjang --}}
        <div class="overflow-x-auto rounded-lg shadow-md ring-1 ring-gray-200 dark:ring-gray-700">
            <table class="min-w-full bg-white dark:bg-gray-900">
                <thead>
                    <tr class="bg-gray-100 dark:bg-gray-700 text-left text-sm font-semibold text-gray-700 dark:text-gray-300">
                        <th class="px-6 py-3">Produk</th>
                        <th class="px-6 py-3">Harga</th>
                        <th class="px-6 py-3">Jumlah</th>
                        <th class="px-6 py-3">Subtotal</th>
                        <th class="px-6 py-3">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($cart as $item)
                        <tr class="border-b border-gray-200 dark:border-gray-700">
    <td class="px-6 py-4 flex items-center gap-4">
        <img
            src="{{ $item['image'] ? asset('storage/' . $item['image']) : asset('storage/defaults/catalog-default.png') }}"
            alt="{{ $item['name'] }}"
            title="{{ $item['name'] }}"
            onerror="this.onerror=null; this.src='{{ asset('storage/defaults/catalog-default.png') }}';"
            class="w-16 h-16 object-cover rounded border dark:border-gray-600 bg-gray-100 dark:bg-gray-800 cursor-pointer"
            onclick="showImageModal('{{ $item['image'] ? asset('storage/' . $item['image']) : asset('storage/defaults/catalog-default.png') }}')"
        >
        <div>
            <p class="font-semibold text-gray-900 dark:text-white">{{ $item['name'] }}</p>
        </div>
    </td>
                            <td class="px-6 py-4 text-blue-600 dark:text-blue-400">
                                Rp {{ number_format($item['price'], 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4">
                                <form method="POST" action="{{ route('cart.update', $item['id']) }}" class="flex items-center gap-2">
                                    @csrf
                                    @method('PUT')
                                    <input type="number" name="quantity" value="{{ $item['quantity'] }}" min="1"
                                           class="w-16 p-1 border rounded dark:bg-gray-700 dark:text-white">
                                    <button type="submit" class="text-sm text-blue-500 hover:underline">Update</button>
                                </form>
                            </td>
                            <td class="px-6 py-4  text-blue-600 dark:text-blue-400">
                                Rp {{ number_format($item['price'] * $item['quantity'], 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4">
                                <form method="POST" action="{{ route('cart.remove', $item['id']) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:underline text-sm">Hapus</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Form Checkout --}}
        <form method="POST" action="{{ route('cart.checkout') }}">
            @csrf

            {{-- Catatan Pesanan --}}
            <div class="bg-gray-100 dark:bg-gray-700 mt-8 p-6 rounded-lg shadow-md">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">📝 Catatan Pesanan (Opsional)</h2>
                <textarea name="notes" rows="4"
                          class="w-full p-3 rounded-lg border dark:border-gray-600 dark:bg-gray-800 dark:text-white resize-none"
                          placeholder="Contoh: Kirim sebelum jam 12 siang, paketkan aman, dsb."></textarea>
            </div>

            {{-- Ringkasan Total & Tombol Checkout --}}
            <div class="flex flex-col md:flex-row justify-between items-center mt-8 gap-4">
                <p class="text-lg font-bold text-gray-800 dark:text-white">
                    Total: Rp {{ number_format($total, 0, ',', '.') }}
                </p>

                <button type="submit"
                        class="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded shadow transition">
                    ✅ Checkout
                </button>
            </div>
        </form>

    @else
        {{-- Keranjang Kosong --}}
        <div class="text-center text-gray-600 dark:text-gray-300 mt-20">
            <p>Keranjang Anda kosong.</p>
            <a href="{{ route('catalog.index') }}"
               class="inline-block mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                🔎 Belanja Sekarang
            </a>
        </div>
    @endif

    {{-- Toast Message --}}
    <div
        x-data="{ show: false }"
        x-init=" @if(session('message')) show = true; setTimeout(() => show = false, 3000); @endif "
        x-show="show"
        x-transition
        class="fixed top-20 right-5 z-50 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3"
        style="display: none;"
    >
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 12l2 2 4-4m5 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span>{{ session('message') }}</span>
    </div>

    {{-- Modal Zoom Gambar --}}
    <div id="imageModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 hidden">
        <div class="relative max-w-full max-h-full">
            <button onclick="closeImageModal()"
                    class="absolute top-2 right-2 bg-white text-black rounded-full p-1 text-sm hover:bg-gray-200">
                ✕
            </button>
            <img id="modalImage" src="" alt="Zoomed" class="max-w-[90vw] max-h-[90vh] rounded shadow-lg">
        </div>
    </div>
</div>

{{-- Script Modal Zoom --}}
<script>
    function showImageModal(src) {
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('modalImage');
        modalImg.src = src;
        modal.classList.remove('hidden');
    }

    function closeImageModal() {
        document.getElementById('imageModal').classList.add('hidden');
    }

    document.getElementById('imageModal').addEventListener('click', function (e) {
        if (e.target === this) closeImageModal();
    });
</script>
@endsection