@extends('layouts.app')

@section('title', 'Shop')

@push('styles')
<style>
.shop-page {
    padding-bottom:10px;
}

/* HEADER */

.shop-intro {
    margin-bottom:16px;
}

.shop-title {
    font-size:26px;
    font-weight:900;
    letter-spacing:-.7px;
}

.shop-subtitle {
    margin-top:5px;
    color:#858594;
    font-size:11px;
    line-height:1.5;
}

/* SEARCH */

.search-wrap {
    position:relative;
    margin-bottom:12px;
}

.search-icon {
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#9999a7;
    font-size:16px;
    pointer-events:none;
}

.search-input {
    width:100%;
    height:47px;
    border:1px solid rgba(20,20,40,.06);
    outline:none;
    border-radius:16px;
    padding:0 42px 0 42px;
    background:#fff;
    color:#171725;
    font-size:12px;
    box-shadow:0 7px 25px rgba(25,20,60,.045);
}

.search-input::placeholder {
    color:#aaaab5;
}

.search-input:focus {
    border-color:rgba(104,87,245,.35);
    box-shadow:0 8px 28px rgba(104,87,245,.10);
}

.search-clear {
    position:absolute;
    right:9px;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    border:0;
    border-radius:10px;
    background:#f1f0f6;
    color:#777787;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:15px;
}

/* CATEGORIES */

.category-scroll {
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:2px 1px 7px;
    scrollbar-width:none;
}

.category-scroll::-webkit-scrollbar {
    display:none;
}

.category {
    flex-shrink:0;
    border:1px solid rgba(20,20,40,.06);
    background:#fff;
    color:#777787;
    padding:9px 13px;
    border-radius:12px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.category.active {
    background:#6857f5;
    border-color:#6857f5;
    color:#fff;
    box-shadow:0 7px 18px rgba(104,87,245,.18);
}

/* RESULTS */

.results-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:19px 0 10px;
}

.results-title {
    font-size:17px;
    font-weight:900;
}

.results-count {
    color:#8a8a98;
    font-size:10px;
    font-weight:700;
}

/* PRODUCTS */

.products {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

.product {
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(20,20,40,.055);
    border-radius:21px;
    box-shadow:0 9px 28px rgba(25,20,60,.055);
    transition:transform .15s ease;
}

.product:active {
    transform:scale(.975);
}

.product-image {
    position:relative;
    width:100%;
    aspect-ratio:1/0.82;
    background:linear-gradient(135deg,#f0eeff,#f8f7ff);
    overflow:hidden;
}

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

.placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6857f5;
    font-size:25px;
    font-weight:900;
}

.discount {
    position:absolute;
    left:9px;
    top:9px;
    padding:5px 8px;
    border-radius:8px;
    background:#171725;
    color:#fff;
    font-size:8px;
    font-weight:900;
}

.featured {
    position:absolute;
    right:9px;
    top:9px;
    padding:5px 8px;
    border-radius:8px;
    background:rgba(255,255,255,.94);
    color:#6857f5;
    font-size:8px;
    font-weight:900;
}

.product-body {
    padding:12px;
}

.product-name {
    font-size:13px;
    font-weight:900;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-description {
    margin-top:5px;
    color:#8a8a98;
    font-size:9px;
    line-height:1.4;
    min-height:25px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-bottom {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:6px;
    margin-top:10px;
}

.price-box {
    display:flex;
    flex-direction:column;
}

.current-price {
    color:#6857f5;
    font-size:14px;
    font-weight:900;
}

.old-price {
    margin-top:1px;
    color:#aaaab5;
    font-size:9px;
    text-decoration:line-through;
}

.open-product {
    width:31px;
    height:31px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#6857f5;
    color:#fff;
    font-size:15px;
    font-weight:900;
}

/* LOADING */

.loading {
    padding:65px 20px;
    text-align:center;
    color:#858594;
    font-size:12px;
}

.spinner {
    width:30px;
    height:30px;
    margin:0 auto 13px;
    border:3px solid #e9e7f5;
    border-top-color:#6857f5;
    border-radius:50%;
    animation:spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

/* ERROR */

.error {
    padding:25px;
    text-align:center;
}

.error-title {
    font-size:15px;
    font-weight:900;
}

.error-message {
    margin-top:6px;
    color:#888895;
    font-size:11px;
    line-height:1.5;
}

.retry {
    margin-top:13px;
    padding:10px 17px;
    border:0;
    border-radius:12px;
    background:#6857f5;
    color:#fff;
    font-size:11px;
    font-weight:850;
}

/* EMPTY */

.empty {
    grid-column:1/-1;
    padding:42px 20px;
    text-align:center;
    background:#fff;
    border:1px solid rgba(20,20,40,.05);
    border-radius:20px;
    color:#858594;
    font-size:11px;
}

@media(max-width:390px) {

    .products {
        gap:8px;
    }

    .product-body {
        padding:10px;
    }

    .product-name {
        font-size:12px;
    }

    .current-price {
        font-size:13px;
    }

}
</style>
@endpush


@section('content')

<div class="shop-page">

    <!-- INTRO -->

    <div class="shop-intro">

        <div class="shop-title">
            Shop
        </div>

        <div class="shop-subtitle">
            Explore premium digital products and scripts.
        </div>

    </div>


    <!-- SEARCH -->

    <div class="search-wrap">

        <span class="search-icon">
            ⌕
        </span>

        <input
            id="searchInput"
            class="search-input"
            type="search"
            placeholder="Search products..."
            autocomplete="off"
        >

        <button
            id="clearSearch"
            class="search-clear"
            type="button">
            ×
        </button>

    </div>


    <!-- CATEGORIES -->

    <div
        id="categories"
        class="category-scroll">

        <button
            class="category active"
            data-category="">
            All
        </button>

    </div>


    <!-- LOADING -->

    <div
        id="loading"
        class="card loading">

        <div class="spinner"></div>

        Loading products...

    </div>


    <!-- ERROR -->

    <div
        id="error"
        class="card error"
        style="display:none;">

        <div class="error-title">
            Unable to load shop
        </div>

        <div
            id="errorMessage"
            class="error-message">
            Something went wrong.
        </div>

        <button
            type="button"
            class="retry"
            onclick="loadProducts()">
            Try Again
        </button>

    </div>


    <!-- SHOP CONTENT -->

    <div
        id="shopContent"
        style="display:none;">

        <div class="results-head">

            <div class="results-title">
                Products
            </div>

            <div
                id="resultsCount"
                class="results-count">
                0 products
            </div>

        </div>


        <div
            id="products"
            class="products">

        </div>

    </div>

</div>

@endsection


@push('scripts')
<script>

let allProducts = [];
let selectedCategory = "";
let searchTimer = null;
let shopLoading = false;


/*
|--------------------------------------------------------------------------
| LOAD PRODUCTS
|--------------------------------------------------------------------------
*/

async function loadProducts() {

    if (shopLoading) {
        return;
    }

    shopLoading = true;


    const tg =
        window.Telegram &&
        window.Telegram.WebApp;


    const loading =
        document.getElementById("loading");

    const error =
        document.getElementById("error");

    const content =
        document.getElementById("shopContent");


    loading.style.display = "block";
    error.style.display = "none";
    content.style.display = "none";


    try {

        if (!tg) {

            throw new Error(
                "Please open BDCodeShop from Telegram."
            );

        }


        tg.ready();
        tg.expand();


        const initData =
            tg.initData;


        if (!initData) {

            throw new Error(
                "Telegram authentication data not found."
            );

        }


        const params =
            new URLSearchParams();


        params.append(
            "init_data",
            initData
        );


        const response =
            await fetch(
                "{{ url('/api/shop/data') }}",
                {
                    method:"POST",

                    headers:{
                        "Content-Type":
                            "application/x-www-form-urlencoded;charset=UTF-8",

                        "Accept":
                            "application/json"
                    },

                    body:params.toString()
                }
            );


        const data =
            await response.json();


        console.log(
            "BDCodeShop Shop API:",
            data
        );


        if (!response.ok ||
            data.success !== true) {

            throw new Error(
                data.message ||
                "Unable to load products."
            );

        }


        allProducts =
            Array.isArray(data.products)
                ? data.products
                : [];


        renderCategories(
            Array.isArray(data.categories)
                ? data.categories
                : []
        );


        renderProducts();


        loading.style.display = "none";
        content.style.display = "block";


    } catch (e) {

        console.error(
            "Shop error:",
            e
        );


        loading.style.display = "none";
        content.style.display = "none";
        error.style.display = "block";


        document.getElementById(
            "errorMessage"
        ).textContent =
            e.message ||
            "Something went wrong.";


    } finally {

        shopLoading = false;

    }

}


/*
|--------------------------------------------------------------------------
| CATEGORIES
|--------------------------------------------------------------------------
*/

function renderCategories(categories) {

    const container =
        document.getElementById(
            "categories"
        );


    container.innerHTML =
        '<button class="category active" data-category="">' +
        'All' +
        '</button>';


    categories.forEach(function(category) {

        const button =
            document.createElement("button");


        button.className =
            "category";


        button.dataset.category =
            category;


        button.textContent =
            category;


        container.appendChild(
            button
        );

    });


    container
        .querySelectorAll(".category")
        .forEach(function(button) {

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

                    container
                        .querySelectorAll(".category")
                        .forEach(function(item) {

                            item.classList.remove(
                                "active"
                            );

                        });


                    this.classList.add(
                        "active"
                    );


                    selectedCategory =
                        this.dataset.category ||
                        "";


                    renderProducts();

                }
            );

        });

}


/*
|--------------------------------------------------------------------------
| FILTER
|--------------------------------------------------------------------------
*/

function getFilteredProducts() {

    const search =
        document.getElementById(
            "searchInput"
        )
        .value
        .trim()
        .toLowerCase();


    return allProducts.filter(
        function(product) {

            const categoryMatch =
                !selectedCategory ||
                String(
                    product.category || ""
                ) === selectedCategory;


            if (!categoryMatch) {
                return false;
            }


            if (!search) {
                return true;
            }


            const name =
                String(
                    product.name || ""
                ).toLowerCase();


            const description =
                String(
                    product.short_description || ""
                ).toLowerCase();


            const category =
                String(
                    product.category || ""
                ).toLowerCase();


            return (
                name.includes(search) ||
                description.includes(search) ||
                category.includes(search)
            );

        }
    );

}


/*
|--------------------------------------------------------------------------
| RENDER PRODUCTS
|--------------------------------------------------------------------------
*/

function renderProducts() {

    const container =
        document.getElementById(
            "products"
        );


    const products =
        getFilteredProducts();


    document.getElementById(
        "resultsCount"
    ).textContent =
        products.length +
        (
            products.length === 1
                ? " product"
                : " products"
        );


    if (!products.length) {

        container.innerHTML =
            '<div class="empty">' +
            'No products found.' +
            '</div>';

        return;

    }


    container.innerHTML =
        products.map(
            function(product) {

                const price =
                    Number(
                        product.price || 0
                    );


                const discount =
                    product.discount_price !== null &&
                    product.discount_price !== undefined
                        ? Number(
                            product.discount_price
                          )
                        : null;


                const hasDiscount =
                    discount !== null &&
                    discount < price;


                const finalPrice =
                    hasDiscount
                        ? discount
                        : price;


                let discountBadge =
                    "";


                if (hasDiscount && price > 0) {

                    const percent =
                        Math.round(
                            ((price - discount) /
                            price) * 100
                        );


                    discountBadge =
                        '<div class="discount">' +
                        '-' +
                        percent +
                        '% OFF' +
                        '</div>';

                }


                const featuredBadge =
                    product.is_featured
                        ?
                        '<div class="featured">' +
                        'Featured' +
                        '</div>'
                        :
                        "";


                let image;


                if (product.thumbnail) {

                    image =
                        '<img src="' +
                        escapeHtml(
                            product.thumbnail
                        ) +
                        '" alt="' +
                        escapeHtml(
                            product.name ||
                            "Product"
                        ) +
                        '">';

                } else {

                    image =
                        '<div class="placeholder">' +
                        'BC' +
                        '</div>';

                }


                const oldPrice =
                    hasDiscount
                        ?
                        '<span class="old-price">' +
                        '৳' +
                        price.toFixed(2) +
                        '</span>'
                        :
                        "";


                return `

                    <a
                        href="{{ url('/shop') }}/${encodeURIComponent(product.slug || '')}"
                        class="product"
                    >

                        <div class="product-image">

                            ${image}

                            ${discountBadge}

                            ${featuredBadge}

                        </div>


                        <div class="product-body">

                            <div class="product-name">
                                ${escapeHtml(
                                    product.name ||
                                    "Product"
                                )}
                            </div>


                            <div class="product-description">
                                ${escapeHtml(
                                    product.short_description ||
                                    "Premium digital product"
                                )}
                            </div>


                            <div class="product-bottom">

                                <div class="price-box">

                                    <span class="current-price">
                                        ৳${finalPrice.toFixed(2)}
                                    </span>

                                    ${oldPrice}

                                </div>


                                <div class="open-product">
                                    ›
                                </div>

                            </div>

                        </div>

                    </a>

                `;

            }
        ).join("");

}


/*
|--------------------------------------------------------------------------
| SEARCH
|--------------------------------------------------------------------------
*/

document
    .getElementById("searchInput")
    .addEventListener(
        "input",
        function() {

            const clear =
                document.getElementById(
                    "clearSearch"
                );


            clear.style.display =
                this.value
                    ? "flex"
                    : "none";


            clearTimeout(
                searchTimer
            );


            searchTimer =
                setTimeout(
                    function() {

                        renderProducts();

                    },
                    180
                );

        }
    );


/*
|--------------------------------------------------------------------------
| CLEAR SEARCH
|--------------------------------------------------------------------------
*/

document
    .getElementById("clearSearch")
    .addEventListener(
        "click",
        function() {

            const input =
                document.getElementById(
                    "searchInput"
                );


            input.value = "";


            this.style.display =
                "none";


            renderProducts();


            input.focus();

        }
    );


/*
|--------------------------------------------------------------------------
| ESCAPE HTML
|--------------------------------------------------------------------------
*/

function escapeHtml(value) {

    return String(value ?? "")
        .replace(/&/g,"&amp;")
        .replace(/</g,"&lt;")
        .replace(/>/g,"&gt;")
        .replace(/"/g,"&quot;")
        .replace(/'/g,"&#039;");

}


/*
|--------------------------------------------------------------------------
| START
|--------------------------------------------------------------------------
*/

document.addEventListener(
    "DOMContentLoaded",
    function() {

        loadProducts();

    }
);

</script>
@endpush