@extends('landingpage.layouts.main')
@section('content')

<style>
    .page-wrapper{
        position:relative;
        min-height:100vh;
        padding:50px 0 80px;
        overflow:hidden;
        isolation:isolate;
    }
    .page-wrapper::before{
        content:'';
        position:absolute;
        inset:0;
        background:
            linear-gradient(rgba(252,248,242,.93),rgba(252,248,242,.95)),
            url('/storage/image.png') center center/cover no-repeat fixed;
        z-index:-2;
        pointer-events:none;
    }
    .page-wrapper::after{
        content:'';
        position:absolute;
        inset:0;
        background:
            radial-gradient(circle at top right,
            rgba(212,175,55,.12),
            transparent 35%),
            radial-gradient(circle at bottom left,
            rgba(200,154,75,.08),
            transparent 40%);
        z-index:-1;
        pointer-events:none;
    }
    .section-header-modern{
        position:relative;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:28px;
        padding:28px 36px;
        background:#ffffff;
        border:1px solid #E9DDC8;
        border-radius:22px;
        box-shadow:0 12px 30px rgba(95,78,57,.06);
        margin-bottom:35px;
    }
    .section-header-modern::before{
        content:'';
        position:absolute;
        top:-120px;
        right:-120px;
        width:250px;
        height:250px;
        background:
        radial-gradient(rgba(212,175,55,.10),transparent 70%);
        pointer-events:none;
    }
    .mini-badge{
        display:inline-flex;
        align-items:center;
        padding:7px 16px;
        background:#F7F2EA;
        border:1px solid #E9DDC8;
        color:#B8863B;
        font-size:10px;
        font-weight:600;
        letter-spacing:1.8px;
        text-transform:uppercase;
        border-radius:999px;
    }
    .header-title{
        color:#4B3A25;
        font-size:54px;
        font-weight:700;
    }
    .header-subtitle{
        color:#7A6854;
        font-size:16px;
        font-weight:400;
        line-height:1.8;
        max-width:540px;
        margin-top:12px;
        margin-bottom:0;
    }
    .search-box-modern{
        display:flex;
        align-items:center;
        width:400px;
        background:#fff;
        border:1px solid #E9DDC8;
        border-radius:16px;
        padding:6px 6px 6px 14px;
    }
    .search-box-modern:focus-within{
        border-color:#C89A4B;
        box-shadow:0 0 0 .2rem rgba(200,154,75,.15);
    }
    .search-modern-icon{
        color:#C89A4B;
    }
    .search-modern-input{
        flex:1;
        border:none;
        outline:none;
        background:transparent;
        color:#5F4E39;
    }
    .search-modern-input::placeholder{
        color:#A38C6B;
    }
    .search-modern-btn{
        border:none;
        border-radius:10px;
        background:linear-gradient(135deg,#C89A4B,#D9B36A);
        color:#fff;
        padding:10px 22px;
        font-weight:600;
        font-size:15px;
    }
    .search-modern-btn:hover{
        background:linear-gradient(135deg,#B88437,#C89A4B);
    }
    .product-card-modern{
        position:relative;
        width:100%;
        max-width:220px;
        height:100%;

        display:flex;
        flex-direction:column;

        margin:auto;
        background:#fff;
        border:1px solid #E9DDC8;
        border-radius:22px;
        overflow:hidden;
        transition:.35s;
        box-shadow:0 15px 35px rgba(95,78,57,.08);
    }
    .product-card-modern:hover{
        transform:translateY(-8px);
        border-color:#D4AF37;
        box-shadow:0 25px 45px rgba(200,154,75,.22);
    }
    .product-img-modern img{
        width:100%;
        aspect-ratio:1/1;
        object-fit:cover;
        transition:.6s;
    }
    .product-card-modern:hover img{
        transform:scale(1.05);
    }
    .product-body-modern{
        padding:14px;
        display:flex;
        flex-direction:column;
        flex:1;
    }
    .product-body-modern::before{
        content:'';
        display:block;
        width:45px;
        height:2px;
        background:#D4AF37;
        margin-bottom:18px;
    }
    .product-title-modern{
        color:#5F4E39;
        font-size:13px;
        line-height:1.5;

        min-height:60px;

        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .price-label{
        margin-top:auto;
        color:#9B8465;
        font-size:11px;
        text-transform:uppercase;
        letter-spacing:2px;
    }
    .price-modern{
        margin-top:6px;
        color:#B8863B;
        font-size:20px;
        font-weight:700;
    }
    .variant-meta{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
        margin-top:10px;
    }
    .variant-badge{
        background:#F7F2EA;
        border:1px solid #E9DDC8;
        color:#B8863B;
        border-radius:999px;
        padding:4px 10px;
        font-size:11px;
        font-weight:600;
    }
    .product-card-modern.habis{
        opacity:.75;
    }
    .product-card-modern.habis img{
        filter:grayscale(.25);
    }
    .badge-habis-overlay{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        z-index:5;
        background:rgba(75,58,37,.9);
        color:#fff;
        padding:10px 22px;
        border-radius:999px;
        letter-spacing:2px;
        font-size:12px;
        font-weight:600;
        pointer-events:none;
    }
    .disabled-link{
        pointer-events:none;
        cursor:not-allowed;
    }
    .pagination{
        gap:8px;
    }
    .pagination .page-link{
        width:42px;
        height:42px;
        display:flex;
        justify-content:center;
        align-items:center;

        border-radius:12px;
        background:#fff;
        border:1px solid #E9DDC8;
        color:#5F4E39;
        font-weight:600;
    }
    .pagination .page-link:hover{
        background:#C89A4B;
        color:#fff;
        border-color:#C89A4B;
    }
    .pagination .active .page-link{
        background:linear-gradient(135deg,#C89A4B,#D9B36A);
        color:#fff;
        border-color:#C89A4B;
    }
    .pagination .disabled .page-link{
        background:#F7F2EA;
        color:#B8A58D;
    }
    @media (max-width:768px){
        .page-wrapper{
            padding:30px 0 60px;
        }
        .section-header-modern{
            display:flex;
            flex-direction:column;
            align-items:flex-start;
            gap:20px;
            padding:20px;
            border-radius:18px;
        }
        .header-left,
        .header-right{
            width:100%;
        }
        .mini-badge{
            font-size:9px;
            letter-spacing:1.5px;
        }
        .header-subtitle{
            max-width:100%;
            font-size:15px;
            line-height:1.8;
        }
        .search-box-modern{
            width:100%;
            display:flex;
            flex-direction:row;      /* tetap sejajar */
            align-items:center;
            gap:10px;
            padding:8px 8px 8px 14px;
            border-radius:14px;
        }
        .search-modern-icon{
            display:block;
            font-size:18px;
            color:#C89A4B;
            flex-shrink:0;
        }
        .search-modern-input{
            flex:1;
            min-width:0;
            border:none;
            background:transparent;
            font-size:14px;
            padding:0;
        }
        .search-modern-btn{
            flex-shrink:0;
            width:auto;
            padding:10px 18px;
            border-radius:10px;
            font-size:14px;
            white-space:nowrap;
        }
        .product-card-modern{
            max-width:100%;
        }
        .product-img-modern img{
            height:180px;
        }
        .product-body-modern{
            padding:16px;
        }
        .product-title-modern{
            font-size:14px;
            min-height:48px;
        }
        .price-modern{
            font-size:18px;
        }
        .pagination{
            justify-content:center;
        }
    }
    .banner-panjang-wrapper {
        width: 100%;
        margin: 20px 0;
        overflow: hidden;
    }
    .banner-panjang {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }
</style>

<div class="page-wrapper">
    <div class="container">
        <div class="section-header-modern mt-5 mb-4">

            <div class="header-left">
                <span class="mini-badge">
                    Pekanbaru Perfumery Collection
                </span>

                <p class="header-subtitle">
                    Temukan koleksi parfum premium dengan aroma elegan,
                    berkarakter, dan dirancang untuk meningkatkan kepercayaan diri.
                </p>
            </div>
            <div class="header-right">
                <form action="{{ url('/semuaproduk') }}"
                    method="GET"
                    class="search-box-modern">

                    @if(request('gender'))
                        <input type="hidden" name="gender" value="{{ request('gender') }}">
                    @endif

                    <i class="bi bi-search search-modern-icon"></i>

                    <input type="text"
                        name="search"
                        class="search-modern-input"
                        placeholder="Cari parfum favorit..."
                        value="{{ request('search') }}"
                        oninput="clearTimeout(this.delay); this.delay=setTimeout(() => this.form.submit(), 400)">

                    <button type="submit" class="search-modern-btn">
                        Cari
                    </button>
                </form>
            </div>

        </div>

        <div class="banner-panjang-wrapper">
            <img
                src="{{ asset('storage/sp1.webp') }}"
                alt="Banner"
                class="banner-panjang"
            >
        </div>
        <div class="banner-panjang-wrapper">
            <img
                src="{{ asset('storage/sp2.gif') }}"
                alt="Banner 2"
                class="banner-panjang"
            >
        </div>

        <div class="tab-content">
            <div class="tab-pane fade show active">
                <div class="row row-cols-2 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 gx-3 gy-4">

                    @forelse($produks as $produk)

                    <div class="col d-flex">

                        <a href="{{ $produk->varians->sum('stok') > 0 ? route('produk.detail', $produk->id) : 'javascript:void(0)' }}"
                           class="text-decoration-none text-dark {{ $produk->varians->sum('stok') <= 0 ? 'disabled-link' : '' }} w-100 d-flex">

                            <div class="product-card-modern {{ $produk->varians->sum('stok') <= 0 ? 'habis' : '' }}">

                                @if($produk->varians->sum('stok') <= 0)
                                    <div class="badge-habis-overlay">
                                        Habis
                                    </div>
                                @endif

                                <div class="product-img-modern">
                                    <img src="{{ asset('storage/' . ($produk->gambarProduk->first()->gambar ?? 'default.jpg')) }}"
                                         alt="{{ $produk->nama_produk }}">
                                </div>

                                <div class="product-body-modern">

                                    <div class="product-title-modern">
                                        {{ $produk->nama_produk }}
                                    </div>

                                    <div class="price-label">
                                        Harga mulai
                                    </div>

                                    <div class="price-modern">
                                        Rp{{ number_format($produk->varians->min('harga') ?? 0,0,',','.') }}
                                    </div>

                                </div>

                            </div>

                        </a>

                    </div>

                    @empty

                    <p class="text-center text-danger">
                        Produk tidak tersedia.
                    </p>

                    @endforelse

                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center mt-5">
            {{ $produks->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {

        // tombol tambah qty
        document.querySelectorAll('.plus').forEach(button => {

            button.addEventListener('click', function () {

                const card =
                    this.closest('.bottom-section');

                const qtyDisplay =
                    card.querySelector('.qty-display');

                const produkId =
                    qtyDisplay.dataset.id;

                const qtyInput =
                    document.querySelector(
                        '.qty-input[data-id="' + produkId + '"]'
                    );

                let qty =
                    parseInt(qtyDisplay.textContent);

                const maxStock =
                    parseInt(this.dataset.max);

                // tambah jika belum melebihi stok
                if (qty < maxStock) {

                    qty++;

                    qtyDisplay.textContent = qty;
                    qtyInput.value = qty;
                }
            });
        });


        // tombol kurang qty
        document.querySelectorAll('.minus').forEach(button => {

            button.addEventListener('click', function () {

                const card =
                    this.closest('.bottom-section');

                const qtyDisplay =
                    card.querySelector('.qty-display');

                const produkId =
                    qtyDisplay.dataset.id;

                const qtyInput =
                    document.querySelector(
                        '.qty-input[data-id="' + produkId + '"]'
                    );

                let qty =
                    parseInt(qtyDisplay.textContent);

                // minimal 1
                if (qty > 1) {

                    qty--;

                    qtyDisplay.textContent = qty;
                    qtyInput.value = qty;
                }
            });
        });

    });

    function addToCart(event, produkId) {

        event.preventDefault();

        const form =
            document.getElementById(
                'form-' + produkId
            );

        const formData =
            new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN':
                    '{{ csrf_token() }}',
                'Accept':
                    'application/json',
                'X-Requested-With':
                    'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {

            if (data.success) {

                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Produk berhasil ditambahkan ke keranjang',
                    showCancelButton: true,
                    confirmButtonText: 'Lihat Keranjang',
                    cancelButtonText: 'Lanjut Belanja',
                    reverseButtons: true,
                    allowOutsideClick: true,
                    buttonsStyling: false,
                    width: '500px',
                    customClass: {
                        popup: 'cart-popup',
                        title: 'cart-title',
                        htmlContainer: 'cart-text',
                        confirmButton: 'btn-cart-view',
                        cancelButton: 'btn-cart-continue'
                    }

                }).then((result) => {

                    if (result.isConfirmed) {

                        window.location.href =
                            "#";
                    }

                });

            } else {

                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text:
                        'Produk gagal ditambahkan'
                });

            }
        })
        .catch(error => {

            console.error(error);

            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text:
                    'Terjadi kesalahan'
            });
        });

        return false;
    }
</script>
@endsection