@extends('layouts.app')

@section('head')
    <title>Product Page</title>
@endsection

@section('content')
    <div class="container py-5" id="products">
        <!-- Header Section -->
        <div class="row mb-5">
            <div class="col-12 text-center">
                <h2 class="display-4 fw-bold text-primary mb-3">
                    <i class="fas fa-store me-3"></i>Produk Kami
                </h2>
                <p class="lead text-muted mb-4">Pilih kue favorit Anda dan tambahkan ke keranjang</p>
                <div class="d-flex justify-content-center align-items-center gap-3 mb-4">
                    <span class="badge bg-primary fs-6 px-3 py-2">
                        <i class="fas fa-box me-1"></i>
                        {{ count($products) }} Produk Tersedia
                    </span>
                </div>
            </div>
        </div>

        <!-- Filter & Sort Section (Optional) -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body py-3">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="btn-group" role="group">
                                    <input type="radio" class="btn-check" name="filter" id="all" checked>
                                    <label class="btn btn-outline-primary btn-sm" for="all">
                                        <i class="fas fa-th me-1"></i>Semua
                                    </label>
                                    <input type="radio" class="btn-check" name="filter" id="available">
                                    <label class="btn btn-outline-success btn-sm" for="available">
                                        <i class="fas fa-check me-1"></i>Tersedia
                                    </label>
                                    <input type="radio" class="btn-check" name="filter" id="outofstock">
                                    <label class="btn btn-outline-danger btn-sm" for="outofstock">
                                        <i class="fas fa-times me-1"></i>Habis
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex gap-2 justify-content-md-end mt-2 mt-md-0">
                                    <select class="form-select form-select-sm" style="width: auto;" id="sortProducts">
                                        <option value="name">Urutkan: Nama A-Z</option>
                                        <option value="price-low">Harga: Rendah ke Tinggi</option>
                                        <option value="price-high">Harga: Tinggi ke Rendah</option>
                                        <option value="stock">Stok Tersedia</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 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>

        <!-- Load More Button (if needed for large datasets) -->
        @if (count($products) > 12)
            <div class="row mt-5">
                <div class="col-12 text-center">
                    <button class="btn btn-outline-primary btn-lg px-5" id="loadMoreBtn" style="display: none;">
                        <i class="fas fa-plus me-2"></i>Muat Lebih Banyak
                    </button>
                </div>
            </div>
        @endif
    </div>

    <!-- Success/Error Messages -->
    @if (session('success'))
        <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1050;">
            <div class="toast show border-0" role="alert">
                <div class="toast-header bg-success text-white border-0">
                    <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" style="z-index: 1050;">
            <div class="toast show border-0" role="alert">
                <div class="toast-header bg-danger text-white border-0">
                    <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" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
        }

        .product-card {
            border-radius: 15px;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
        }

        .product-card:hover .card-img-top {
            transform: scale(1.05);
        }

        .quick-view-overlay {
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .product-card:hover .quick-view-overlay {
            opacity: 1;
        }

        .btn {
            border-radius: 10px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .btn-check:checked+.btn {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: white;
        }

        .badge {
            border-radius: 20px;
            font-weight: 500;
        }

        .card {
            border-radius: 15px;
        }

        .form-control:focus {
            border-color: #0066cc;
            box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
        }

        .quantity-btn:hover {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: white;
        }

        .toast {
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Responsive Grid Enhancement */
        @media (min-width: 1400px) {
            .col-xl-3 {
                flex: 0 0 auto;
                width: 20%;
                /* 5 columns on very large screens */
            }
        }

        @media (max-width: 576px) {
            .product-card {
                margin-bottom: 1rem;
            }

            .btn-group {
                width: 100%;
            }

            .btn-group .btn {
                flex: 1;
            }
        }

        /* Animation for filtering */
        .product-item {
            transition: all 0.5s ease;
        }

        .product-item.hidden {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
        }
    </style>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Quantity Button Handlers
            document.querySelectorAll('.quantity-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const action = this.dataset.action;
                    const targetId = this.dataset.target;
                    const input = document.getElementById(targetId);
                    const max = parseInt(this.dataset.max) || parseInt(input.max);
                    let currentValue = parseInt(input.value);

                    if (action === 'increase' && currentValue < max) {
                        input.value = currentValue + 1;
                    } else if (action === 'decrease' && currentValue > 1) {
                        input.value = currentValue - 1;
                    }
                });
            });

            // Filter Products
            document.querySelectorAll('input[name="filter"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    filterProducts(this.id);
                });
            });

            // Sort Products
            document.getElementById('sortProducts').addEventListener('change', function() {
                sortProducts(this.value);
            });

            // 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-2"></i>Menambahkan...';
                    loadingOverlay.classList.remove('d-none');

                    // Reset after 2 seconds (or handle with AJAX)
                    setTimeout(() => {
                        submitButton.disabled = false;
                        submitButton.innerHTML = originalText;
                        loadingOverlay.classList.add('d-none');
                    }, 2000);
                });
            });

            // Auto-hide toasts after 5 seconds
            setTimeout(() => {
                const toasts = document.querySelectorAll('.toast');
                toasts.forEach(toast => {
                    const bsToast = new bootstrap.Toast(toast);
                    bsToast.hide();
                });
            }, 5000);
        });

        function filterProducts(filterType) {
            const products = document.querySelectorAll('.product-item');

            products.forEach(product => {
                const isAvailable = product.dataset.available === 'true';
                let show = true;

                switch (filterType) {
                    case 'available':
                        show = isAvailable;
                        break;
                    case 'outofstock':
                        show = !isAvailable;
                        break;
                    case 'all':
                    default:
                        show = true;
                        break;
                }

                if (show) {
                    product.classList.remove('hidden');
                    product.style.display = 'block';
                } else {
                    product.classList.add('hidden');
                    setTimeout(() => {
                        if (product.classList.contains('hidden')) {
                            product.style.display = 'none';
                        }
                    }, 500);
                }
            });
        }

        function sortProducts(sortType) {
            const container = document.getElementById('products-container');
            const products = Array.from(container.querySelectorAll('.product-item'));

            products.sort((a, b) => {
                switch (sortType) {
                    case 'price-low':
                        return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
                    case 'price-high':
                        return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
                    case 'stock':
                        return parseInt(b.dataset.stock) - parseInt(a.dataset.stock);
                    case 'name':
                    default:
                        return a.dataset.name.localeCompare(b.dataset.name);
                }
            });

            // Re-append sorted elements
            products.forEach(product => container.appendChild(product));
        }

        // Optional: AJAX function for better UX
        function handleAjaxSubmit(form) {
            const formData = new FormData(form);

            fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .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(() => {
                    const submitButton = form.querySelector('button[type="submit"]');
                    submitButton.disabled = false;
                    submitButton.innerHTML = '<i class="fas fa-cart-plus me-2"></i>Tambah ke Keranjang';
                    document.getElementById('loading-overlay').classList.add('d-none');
                });
        }

        function showToast(type, message) {
            const toastContainer = document.querySelector('.toast-container') || createToastContainer();
            const toastClass = type === 'success' ? 'bg-success' : 'bg-danger';
            const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

            const toastHTML = `
        <div class="toast show border-0" role="alert">
            <div class="toast-header ${toastClass} text-white border-0">
                <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 createToastContainer() {
            const container = document.createElement('div');
            container.className = 'toast-container position-fixed top-0 end-0 p-3';
            container.style.zIndex = '1050';
            document.body.appendChild(container);
            return container;
        }

        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