@extends('layouts.landing-page.index', ['title' => 'Detail Produk'])

@section('main')
    <section id="product" class="product section mt-5">

        <div class="container mt-3 mb-5" data-aos="fade-up" data-aos-delay="100">

            <div class="container section-title pb-4" data-aos="fade-up">
                <h2>Produk</h2>
                <p>Rincian Produk</p>
            </div>

            <div class="product-wrapper">

                <div class="row g-4">

                    <!-- LEFT: IMAGE SLIDER -->
                    <div class="col-lg-5">
                        <!-- Main Image -->
                        <div class="product-image mb-3" data-bs-toggle="modal" data-bs-target="#zoomModal">
                            <img id="mainImage"
                                src="{{ asset('storage') }}/{{ count($catalog_photos) > 0 ? $catalog_photos[0]->photo : '' }}"
                                alt="Produk">
                        </div>

                        <!-- Thumbnails -->
                        <div class="row g-2">
                            @foreach ($catalog_photos ?? [] as $catalog_photo)
                                <div class="col-3">
                                    <div class="thumb-img active"
                                        onclick="changeImage(this, '{{ asset('storage') }}/{{ $catalog_photo->photo }}')">
                                        <img src="{{ asset('storage') }}/{{ $catalog_photo->photo }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- RIGHT: PRODUCT INFO -->
                    <div class="col-lg-7">
                        <span class="badge bg-success text-white mb-3">{{ $catalog->category_name }}</span>
                        <div class="product-title">{{ $catalog->name }}</div>
                        <div class="product-price">{{ format_rupiah($catalog->price) }}</div>

                        <p class="product-desc">
                            {!! $catalog->description !!}
                        </p>

                        <button type="button" onclick="buyNow()" class="btn add-to-cart-btn w-100 btn-block">Beli
                            Sekarang</button>
                    </div>

                </div>
            </div>

        </div>

        <!-- Zoom Modal -->
        <div class="modal fade" id="zoomModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content bg-transparent border-0">
                    <img id="zoomImage" class="modal-img" src="">
                </div>
            </div>
        </div>

    </section>
@endsection

@push('styles')
    <style>
        /* Product Wrapper */
        .product-wrapper {
            /* background: #fff;
                                                                                                      border-radius: 14px;
                                                                                                      padding: 24px; */
        }

        /* Slider */
        .product-image {
            border-radius: 12px;
            overflow: hidden;
            cursor: zoom-in;
        }

        .product-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }

        .thumb-img {
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .thumb-img.active {
            border-color: var(--gold);
        }

        .thumb-img img {
            width: 100%;
            height: 90px;
            object-fit: cover;
            border-radius: 8px;
        }

        /* Product Info */
        .product-category {
            font-size: 13px;
            color: #777;
            margin-bottom: 6px;
        }

        .product-title {
            font-size: 30px;
            font-weight: 700;
            color: var(--dark);
        }

        .product-price {
            font-size: 25px;
            margin: 12px 0;
        }

        .product-desc {
            color: #555;
            line-height: 1.7;
            font-size: 14px;
        }

        /* Zoom Modal */
        .modal-img {
            width: 100%;
            border-radius: 12px;
        }

        /* Mobile */
        @media (max-width: 768px) {
            .product-image img {
                height: 500px;
            }
        }

        .badge-voucher {
            background: #CE9F34;
            font-size: 14px;
        }

        .add-to-cart-btn {
            color: white;
            background: var(--accent-color);
            border: 0;
            padding: 10px 30px;
            transition: 0.4s;
            border-radius: 4px;
        }

        .add-to-cart-btn:hover {
            background: color-mix(in srgb, var(--accent-color), transparent 20%);
        }
    </style>
@endpush

@push('scripts')
    <script>
        function buyNow() {
            const product = {
                id: "{{ $catalog->id }}",
                name: "{{ $catalog->name }}",
                price: {{ $catalog->price }},
                qty: 1
            };

            let cart = JSON.parse(localStorage.getItem('transaction_cart')) || [];

            const existing = cart.find(item => item.id === product.id);
            if (existing) {
                existing.qty += 1;
            } else {
                cart.push(product);
            }

            localStorage.setItem('transaction_cart', JSON.stringify(cart));

            window.location.href = "{{ route('transaction') }}";
        }
    </script>


    <script>
        function changeImage(el, src) {
            const mainImage = document.getElementById('mainImage');
            const zoomImage = document.getElementById('zoomImage');

            mainImage.src = src;
            if (zoomImage) {
                zoomImage.src = src;
            }

            document.querySelectorAll('.thumb-img').forEach(img => {
                img.classList.remove('active');
            });

            el.classList.add('active');
        }
    </script>
@endpush