@extends('layouts.app')
@section('title', 'Customer Products')

@section('css')
<style>
    /* === SEARCH BAR === */
    /* .search-container-customer {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    } */

    .main-sidebar {
        width: inherit;
    }

    .search-box {
        width: 100%;
        max-width: 700px;
        display: flex;
        border-radius: 40px;
        background: #fff;
        border: 1px solid #ddd;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: 0.25s;
    }

    .search-box:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    .search-box input {
        flex: 1;
        padding: 16px 20px;
        border: none;
        outline: none;
        font-size: 18px;
    }

    .search-box button {
        padding: 0 24px;
        background: #3f8cff;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 20px;
    }

    /* === PRODUCT GRID === */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
        padding: 20px;
    }

    /* === PRODUCT CARD (Tokopedia Style) === */
    .product-card {
        background: white;
        border: 1px solid #eee;
        border-radius: 12px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: 0.15s ease;
        display: flex;
        flex-direction: column;
    }

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

    .product-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        background: #f8f8f8;
    }

    .product-card .info {
        padding: 12px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .product-card .title {
        font-size: 15px;
        font-weight: 600;
        line-height: 18px;
        height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
    }

    .product-card .price {
        font-size: 17px;
        color: #1a9b3c;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .product-card .shelf {
        font-size: 13px;
        margin-bottom: 4px;
        color: #666;
    }

    .product-card .condition {
        font-size: 13px;
        margin-bottom: 10px;
        font-weight: bold;
        color: #555;
    }

    .product-card .btn-view {
        margin-top: auto;
        padding: 8px 0;
        background: #3f8cff;
        color: #fff !important;
        text-align: center;
        border-radius: 6px;
        font-size: 14px;
        text-decoration: none;
        display: block;
        transition: 0.2s;
    }

    .product-card .btn-view:hover {
        background: #2f6ed8;
    }

    /* === NO RESULT === */
    .no-result {
        text-align: center;
        font-size: 22px;
        margin-top: 40px;
        color: #888;
    }

    .content-wrapper {
        margin-left: 0px !important;
    }

    .price-shelf {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .price {
        font-size: 17px;
        color: #1a9b3c;
        font-weight: bold;
    }

    .shelf {
        font-size: 13px;
        color: #666;
    }

    .product-card .price,
    .product-card .shelf {
        margin-bottom: 0;
    }

    .search-container-customer {
        width: 100%;
        display: flex;
        justify-content: center;      /* center search bar */
        align-items: center;
        gap: 16px;
        position: relative;
        padding: 10px 20px;
    }

    .search-box {
        width: 100%;
        max-width: 700px;
        display: flex;
    }

    .feedback-btn {
        position: absolute;
        right: 20px;                 /* tombol di kanan */
        padding: 8px 20px;
        background: #3f8cff;
        color: white;
        font-weight: 600;
        border-radius: 40px;
        white-space: nowrap;
        text-decoration: none;
        transition: 0.2s;
    }

    .feedback-btn:hover {
        background: #ff8f1f;
    }

    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .modal-box {
        background: #fff;
        padding: 25px;
        border-radius: 10px;
        width: 90%;
        max-width: 380px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }

    .modal-box h3 {
        margin-bottom: 10px;
        font-size: 22px;
    }

    .modal-box p {
        color: #444;
        font-size: 16px;
        margin-bottom: 20px;
    }

    .btn-review {
        display: block;
        background: #4285F4;
        color: #fff;
        padding: 12px 15px;
        width: 100%;
        border-radius: 6px;
        text-decoration: none;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .btn-review:hover {
        background: #3367d6;
    }

    .btn-close {
        background: #ccc;
        padding: 10px 15px;
        border: none;
        width: 100%;
        border-radius: 6px;
        cursor: pointer;
    }

    .btn-close:hover {
        background: #b3b3b3;
    }

    /* NAVBAR WRAPPER */

    /* Nav kiri */
    .nav-left a {
        margin-right: 15px;
        text-decoration: none;
        color: #333;
        font-weight: 500;
    }

    .navbar {
        width: 30%;
        left: 0;
        top: 10;
        background: transparent;
        border-bottom: 1px solid #eee;
        padding: 12px 25px;
        display: block;
        /* justify-content: space-between; */
        /* align-items: center; */
        font-family: Arial, sans-serif;
        position: absolute;
    }

    .navbar .nav-left {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .navbar a {
        color: #333;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
    }

    .navbar a:hover {
        color: #3f8cff;
    }

    /* MEGA MENU */
    .dropdown-mega {
        position: relative;
    }

    .mega-trigger {
        cursor: pointer;
        padding: 10px 0;
    }

    /* MEGA MENU CONTAINER */
    .mega-menu {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100vw;
        background: #fff;
        padding: 30px 50px;
        display: none;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        z-index: 9999;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }

    /* SHOW ON HOVER (DESKTOP) */
    .dropdown-mega:hover .mega-menu {
        display: grid;
    }

    /* COLUMNS */
    .mega-column h4 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .mega-column a {
        display: block;
        padding: 5px 0;
        font-size: 15px;
        color: #444;
        text-decoration: none;
    }

    .mega-column a:hover {
        color: #3f8cff;
    }

    /* MOBILE */
    @media (max-width: 992px) {
        .mega-menu {
            position: static;
            width: 100%;
            display: none;
            grid-template-columns: 1fr;
            padding: 20px;
            box-shadow: none;
        }

        .dropdown-mega.active .mega-menu {
            display: block;
        }
    }
</style>
@endsection


@section('content')
<div class="container-screen-pos" id="pos-loader" style="display: none;">
    <div class="pos-loader">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>  
</div>
<div class="search-container-customer">
    <nav class="navbar">
        <div class="nav-left">
            <!-- BOOKS MEGA MENU -->
            <div class="dropdown-mega">
                <a class="mega-trigger">Books ▾</a>

                <div class="mega-menu">                    
                    <!-- COLUMN 1 -->
                    <div class="mega-column">
                        <h4>Knowledge & Learning</h4>
                        <a href="#" class="category-link" data-category="Computers & Technology">Computers & Technology</a>
                        <a href="#" class="category-link" data-category="Education & Teaching">Education & Teaching</a>
                        <a href="#" class="category-link" data-category="Engineering & Transportation">Engineering & Transportation</a>
                        <a href="#" class="category-link" data-category="History">History</a>
                        <a href="#" class="category-link" data-category="Law">Law</a>
                        <a href="#" class="category-link" data-category="Politics & Social Sciences">Politics & Social Sciences</a>
                        <a href="#" class="category-link" data-category="Reference">Reference</a>
                        <a href="#" class="category-link" data-category="Science & Math">Science & Math</a>
                        <a href="#" class="category-link" data-category="Test Preparation">Test Preparation</a>
                    </div>

                    <!-- COLUMN 2 -->
                    <div class="mega-column">
                        <h4>Wellness, Family & Belief</h4>
                        <a href="#" class="category-link" data-category="Children's Books">Children's Books</a>
                        <a href="#" class="category-link" data-category="Christian Books & Bibles">Christian Books & Bibles</a>
                        <a href="#" class="category-link" data-category="Comics & Graphic Novels">Comics & Graphic Novels</a>
                        <a href="#" class="category-link" data-category="Health, Fitness & Dieting">Health, Fitness & Dieting</a>
                        <a href="#" class="category-link" data-category="Humor & Entertainment">Humor & Entertainment</a>
                        <a href="#" class="category-link" data-category="Medical Books">Medical Books</a>
                        <a href="#" class="category-link" data-category="Parenting & Relationships">Parenting & Relationships</a>
                        <a href="#" class="category-link" data-category="Religion & Spirituality">Religion & Spirituality</a>
                        <a href="#" class="category-link" data-category="Self-Help">Self-Help</a>
                        <a href="#" class="category-link" data-category="Teen & Young Adult Books">Teen & Young Adult Books</a>
                    </div>

                    <!-- COLUMN 3 -->
                    <div class="mega-column">
                        <h4>Arts, Culture & Fiction</h4>
                        <a href="#" class="category-link" data-category="Arts & Photography">Arts & Photography</a>
                        <a href="#" class="category-link" data-category="Cookbooks, Food & Wine">Cookbooks, Food & Wine</a>
                        <a href="#" class="category-link" data-category="Crafts, Hobbies & Home">Crafts, Hobbies & Home</a>
                        <a href="#" class="category-link" data-category="Literature & Fiction">Literature & Fiction</a>
                        <a href="#" class="category-link" data-category="LGBTQ+ Books">LGBTQ+ Books</a>
                        <a href="#" class="category-link" data-category="Romance">Romance</a>
                        <a href="#" class="category-link" data-category="Science Fiction & Fantasy">Science Fiction & Fantasy</a>
                        <a href="#" class="category-link" data-category="Sports & Outdoors">Sports & Outdoors</a>
                        <a href="#" class="category-link" data-category="Specialty Boutique">Specialty Boutique</a>
                        <a href="#" class="category-link" data-category="Travel">Travel</a>
                    </div>

                    <!-- COLUMN 4 -->
                    <div class="mega-column">
                        <h4>Bestsellers & Entertainment</h4>
                        <a href="#" class="category-link" data-category="Biographies">Biographies</a>
                        <a href="#" class="category-link" data-category="Business & Money">Business & Money</a>
                        <a href="#" class="category-link" data-category="Calendars">Calendars</a>
                        <a href="#" class="category-link" data-category="Clearance">Clearance</a>
                        <a href="#" class="category-link" data-category="Mystery, Thriller & Suspense">Mystery, Thriller & Suspense</a>
                        <a href="#" class="category-link" data-category="Signed">Signed</a>
                        <a href="#" class="category-link" data-category="Toys & Games">Toys & Games</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <form action="{{ route('search.products') }}" method="GET" class="search-box">
        <input type="text" 
               name="q" 
               placeholder="Search products..." 
               value="{{ request('q') }}">

        <button type="submit">🔍</button>
    </form>

    <button type="button" class="feedback-btn" id="open-feedback-modal">
        Leave Feedback
    </button>
</div>

@if(isset($products))

    @if($products->isEmpty())
        <div class="no-result">❌ No products found</div>
    @else

        <h3 style="text-align:center; margin-top:20px;">
            Search results for: <b>"{{ request('q') }}"</b><br>
            ({{ $products->total() }} products found)
        </h3>

        <div class="product-grid">
            @foreach($products as $p)
                <div class="product-card">
                    <img src="{{ $p->image_url ?? '/no-image.png' }}" alt="Product">

                    <div class="info">
                        <div class="title">{{ $p->title }}</div>

                        <div class="price-shelf">
                            <span class="price">$ {{ number_format($p->price, 2) }}</span>

                            @if(isset($p->shelf_number))
                            <span class="shelf">Shelf: <b>{{ str_replace(['["', '"]'], '', $p->shelf_number) }}</b></span>
                            @else 
                            <span class="shelf">Shelf: <b>-</b></span>
                            @endif
                        </div>

                        <div class="condition">{{ str_replace('_',' ',ucfirst($p->itemcondition)) }}</div>

                        <a href="javascript:void(0)" 
                        class="btn-modal btn-view"
                        data-container=".view_modal"
                        data-href="/amazon/product/preview/modal/{{ $p->id }}">
                            View Product
                        </a>
                    </div>

                </div>
            @endforeach
        </div>

        <div class="d-flex justify-content-right mt-4" style="justify-self: center;">
            {{ $products->appends(request()->query())->links() }}
        </div>

    @endif

@endif

<!-- FEEDBACK MODAL -->
<div id="feedback-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box">
        <h3>Leave a Feedback</h3>
        <p>Your feedback means a lot to us. Please leave a review on Google.</p>

        <a href="https://search.google.com/local/writereview?placeid=ChIJ-121mPIXTIYRxrTRAHsikCs"
           target="_blank"
           class="btn-review">
           Write a Google Review
        </a>

        <button id="close-feedback-modal" class="btn-close">Close</button>
    </div>
</div>

@endsection
@section('javascript')
<script>
// Show loading screen initially (before JS fully ready)
document.getElementById('pos-loader').style.display = 'inline-flex';

document.addEventListener('DOMContentLoaded', function() {
    const loading = document.getElementById('pos-loader');
    const form = document.querySelector('.search-box');

    // Hide loading when the page fully ready
    loading.style.display = 'none';

    // Show loading when submitting the search form
    if (form) {
        form.addEventListener('submit', function () {
            loading.style.display = 'inline-flex';
        });
    }
});

// Also show loading again if user reloads the page manually
window.addEventListener('beforeunload', function () {
    document.getElementById('pos-loader').style.display = 'inline-flex';
});

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("open-feedback-modal").onclick = function() {
        document.getElementById("feedback-modal").style.display = "flex";
    };

    document.getElementById("close-feedback-modal").onclick = function() {
        document.getElementById("feedback-modal").style.display = "none";
    };
});

document.addEventListener('DOMContentLoaded', function() {
    const searchForm = document.querySelector('.search-box');

    document.querySelectorAll('.category-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // jangan navigasi default
            const category = this.dataset.category;

            // buat input tersembunyi untuk category
            let hiddenInput = searchForm.querySelector('input[name="category"]');
            if (!hiddenInput) {
                hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'category';
                searchForm.appendChild(hiddenInput);
            }
            hiddenInput.value = category;

            // kosongkan input q supaya search manual tidak ikut
            searchForm.querySelector('input[name="q"]').value = '';

            // submit form
            searchForm.submit();
        });
    });
});
</script>
@endsection