@extends('layouts.app')

@section('head')
@endsection

@section('content')
    <main class="py-4">
        <!-- Hero Section -->
        <section class="hero-section py-5 bg-light">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <h1 class="display-4 fw-bold mb-4">
                            Kue Lezat <span class="text-danger">Buatan Rumah</span>
                        </h1>
                        <p class="lead mb-4 text-muted">
                            Nikmati berbagai macam kue segar dan lezat yang dibuat dengan cinta.
                            Dari kue ulang tahun hingga kue harian, semua tersedia di sini!
                        </p>
                        <div class="d-flex gap-3 flex-wrap">
                            <a href="#products" class="btn btn-danger btn-lg rounded-pill px-4 py-2 fw-semibold">
                                <i class="fas fa-shopping-cart me-2"></i>Pesan Sekarang
                            </a>
                            <a href="#products" class="btn btn-outline-secondary btn-lg rounded-pill px-4 py-2 fw-semibold">
                                <i class="fas fa-eye me-2"></i>Lihat Produk
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6 text-center mt-4 mt-lg-0">
                        <img src="https://bing.com/th?id=OSK.b75421840aa10aef2a5f649a7025e5d4" alt="Kue Lezat"
                            class="img-fluid rounded-3 shadow">
                    </div>
                </div>
            </div>
        </section>

        <!-- Product Grid Section -->
        <div class="container py-5" id="products">
            <div class="row mb-4">
                <div class="col-12 text-center">
                    <h2 class="display-5 fw-bold mb-3">Produk Kami</h2>
                    <p class="text-muted">Pilih kue favorit Anda dan tambahkan ke keranjang</p>
                </div>
            </div>
            
            <div class="row g-4">
                @forelse ($products as $product)
                    <div class="col-md-4">
                        <div class="card h-100 border-0 shadow-sm">
                            <img src="{{ $product->image_url }}" class="card-img-top rounded-top"
                                alt="{{ $product->name }}" style="height: 250px; object-fit: cover;">
                            <div class="card-body text-center">
                                <h5 class="card-title fw-bold">{{ $product->name }}</h5>
                                <p class="card-text text-muted">{{ $product->description }}</p>
                                <div class="mb-3">
                                    <span class="text-danger fw-bold fs-5">{{ $product->formatted_price }}</span>
                                    <br>
                                    <small class="text-muted">Stok: {{ $product->stock }}</small>
                                </div>
                                
                                @if($product->stock > 0 && $product->is_active)
                                    <!-- Form untuk menambah ke cart -->
                                    <form action="{{ route('cart.store') }}" method="POST" class="add-to-cart-form">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <div class="mb-3">
                                            <label for="quantity_{{ $product->id }}" class="form-label small">Jumlah:</label>
                                            <input type="number" 
                                                   name="quantity" 
                                                   id="quantity_{{ $product->id }}"
                                                   value="1" 
                                                   min="1" 
                                                   max="{{ $product->stock }}"
                                                   class="form-control form-control-sm text-center" 
                                                   style="width: 80px; margin: 0 auto;">
                                        </div>
                                        <button type="submit" class="btn btn-danger btn-sm rounded-pill w-100">
                                            <i class="fas fa-cart-plus me-1"></i>Tambah ke Keranjang
                                        </button>
                                    </form>
                                @else
                                    <button class="btn btn-secondary btn-sm rounded-pill w-100" disabled>
                                        <i class="fas fa-times me-1"></i>Stok Habis
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-warning text-center">
                            <i class="fas fa-info-circle me-2"></i>
                            Tidak ada produk tersedia saat ini.
                        </div>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- About Section -->
        <div class="container py-5">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm border-0 rounded-3 p-4 bg-light">
                        <h3 class="text-center mb-4">Selamat Datang di CakeShop!</h3>
                        <p class="text-center text-muted">
                            Kami menyediakan kue-kue berkualitas tinggi dengan rasa yang tak terlupakan.
                            Setiap kue dibuat dengan bahan-bahan pilihan dan dibuat fresh setiap hari.
                        </p>
                        <div class="row mt-4">
                            <div class="col-md-4 text-center">
                                <i class="fas fa-heart text-danger fa-2x mb-3"></i>
                                <h5>Dibuat dengan Cinta</h5>
                                <p class="text-muted">Setiap kue dibuat dengan perhatian dan cinta</p>
                            </div>
                            <div class="col-md-4 text-center">
                                <i class="fas fa-star text-warning fa-2x mb-3"></i>
                                <h5>Kualitas Premium</h5>
                                <p class="text-muted">Menggunakan bahan-bahan berkualitas terbaik</p>
                            </div>
                            <div class="col-md-4 text-center">
                                <i class="fas fa-clock text-success fa-2x mb-3"></i>
                                <h5>Selalu Fresh</h5>
                                <p class="text-muted">Kue dibuat fresh setiap hari</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="toast-container position-fixed top-0 end-0 p-3">
            <div class="toast show" role="alert">
                <div class="toast-header bg-success text-white">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong class="me-auto">Berhasil</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    {{ session('success') }}
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="toast-container position-fixed top-0 end-0 p-3">
            <div class="toast show" role="alert">
                <div class="toast-header bg-danger text-white">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong class="me-auto">Error</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    {{ session('error') }}
                </div>
            </div>
        </div>
    @endif

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="d-none position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50" style="z-index: 9999;">
        <div class="d-flex justify-content-center align-items-center h-100">
            <div class="spinner-border text-light" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle form submission with loading state
    const forms = document.querySelectorAll('.add-to-cart-form');
    const loadingOverlay = document.getElementById('loading-overlay');
    
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const submitButton = form.querySelector('button[type="submit"]');
            const originalText = submitButton.innerHTML;
            
            // Show loading state
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menambahkan...';
            loadingOverlay.classList.remove('d-none');
            
            // If you want to handle with AJAX instead of form submission:
            // e.preventDefault();
            // handleAjaxSubmit(form);
        });
    });
    
    // Auto-hide toasts after 5 seconds
    setTimeout(() => {
        const toasts = document.querySelectorAll('.toast');
        toasts.forEach(toast => {
            const bsToast = new bootstrap.Toast(toast);
            bsToast.hide();
        });
    }, 5000);
});

// Optional: Handle with AJAX for better UX
function handleAjaxSubmit(form) {
    const formData = new FormData(form);
    
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', data.message || 'Produk berhasil ditambahkan ke keranjang');
            updateCartCount();
        } else {
            showToast('error', data.message || 'Terjadi kesalahan');
        }
    })
    .catch(error => {
        showToast('error', 'Terjadi kesalahan jaringan');
    })
    .finally(() => {
        // Reset button state
        const submitButton = form.querySelector('button[type="submit"]');
        submitButton.disabled = false;
        submitButton.innerHTML = '<i class="fas fa-cart-plus me-1"></i>Tambah ke Keranjang';
        document.getElementById('loading-overlay').classList.add('d-none');
    });
}

function showToast(type, message) {
    const toastContainer = document.querySelector('.toast-container');
    const toastClass = type === 'success' ? 'bg-success' : 'bg-danger';
    const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
    
    const toastHTML = `
        <div class="toast show" role="alert">
            <div class="toast-header ${toastClass} text-white">
                <i class="fas ${icon} me-2"></i>
                <strong class="me-auto">${type === 'success' ? 'Berhasil' : 'Error'}</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">${message}</div>
        </div>
    `;
    
    toastContainer.insertAdjacentHTML('beforeend', toastHTML);
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
        const lastToast = toastContainer.lastElementChild;
        if (lastToast) {
            const bsToast = new bootstrap.Toast(lastToast);
            bsToast.hide();
        }
    }, 5000);
}

function updateCartCount() {
    fetch('/api/cart/count')
        .then(response => response.json())
        .then(data => {
            const cartCountElement = document.getElementById('cart-count');
            if (cartCountElement) {
                cartCountElement.textContent = data.count;
            }
        })
        .catch(error => console.error('Error updating cart count:', error));
}
</script>
@endsection