@extends('user.layout')

@section('title','ফেভারিট প্রোডাক্ট')

@push('head')
<style>
:root{
    --primary:#0d6efd;
    --primary-dark:#0a58ca;
    --primary-gradient:linear-gradient(135deg,#0d6efd,#0a58ca);
    --bg:#f4f6f9;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e2e8f0;
}

.shop-page{
    background:var(--bg);
    min-height:100vh;
    padding:12px 12px 100px;
    font-family:'Segoe UI',Roboto,sans-serif;
}

.shop-hero-box,
.product-card,
.empty-box{
    transition:.25s ease;
}

.shop-hero-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
    margin-bottom:14px;
}

.shop-search{
    height:48px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:12px;
    display:flex;
    overflow:hidden;
}

.shop-search:focus-within{
    border-color:var(--primary);
    background:#fff;
    box-shadow:0 0 0 3px rgba(13,110,253,.12);
}

.search-icon{
    width:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
}

.shop-search input{
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    font-size:14px;
    font-weight:600;
    color:var(--text);
}

.shop-search button{
    width:60px;
    border:0;
    background:var(--primary-gradient);
    color:#fff;
    font-size:16px;
}

.section-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 4px 12px;
}

.section-title{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text);
    font-size:16px;
    font-weight:900;
}

.section-title i{
    color:#ec4899;
}

.total-items{
    background:#e2e8f0;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.product-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    position:relative;
    box-shadow:0 1px 5px rgba(15,23,42,.04);
}

.product-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(15,23,42,.10);
    border-color:#b6d4fe;
}

.product-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.product-img-wrap{
    background:#f8fafc;
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
}

.product-img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.35s ease;
}

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

.fav-btn{
    position:absolute;
    top:8px;
    right:8px;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:#ec4899;
    color:#fff;
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    z-index:10;
    transition:.25s ease;
}

.fav-btn:hover{
    transform:scale(1.06);
}

.discount-badge{
    position:absolute;
    top:8px;
    left:8px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    font-weight:800;
    padding:3px 8px;
    border-radius:6px;
    z-index:4;
}

.product-info{
    padding:8px 9px 6px;
}

.product-name{
    font-size:13px;
    line-height:1.35;
    font-weight:700;
    color:var(--text);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    min-height:35px;
    margin-bottom:5px;
}

.price-line{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:5px;
}

.price{
    color:#ef4444;
    font-size:16px;
    font-weight:900;
}

.old-price{
    color:var(--muted);
    font-size:11px;
    text-decoration:line-through;
}

.product-footer{
    padding:0 9px 9px;
}

.buy-btn{
    width:100%;
    height:34px;
    border:0;
    border-radius:8px;
    background:var(--primary-gradient);
    color:#fff;
    font-size:13px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
}

.buy-btn.disabled{
    background:#e2e8f0;
    color:var(--muted);
    cursor:not-allowed;
}

.empty-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:40px 15px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.empty-box i{
    font-size:38px;
    margin-bottom:10px;
    color:#ec4899;
}

@media(min-width:576px){
    .product-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(min-width:768px){
    .product-grid{
        grid-template-columns:repeat(4,1fr);
    }
}
</style>
@endpush

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<div class="shop-page">

    <div class="shop-hero-box">

        <form method="GET" action="{{ route('user.favorites') }}" class="shop-search">

            <div class="search-icon">
                <i class="fa-solid fa-magnifying-glass"></i>
            </div>

            <input
                type="text"
                name="search"
                value="{{ $search }}"
                placeholder="ফেভারিট প্রোডাক্ট সার্চ করুন"
            >

            <button type="submit">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>

        </form>

    </div>

    <div class="section-title-row">

        <div class="section-title">
            <i class="fa-solid fa-heart"></i>
            <span>ফেভারিট প্রোডাক্ট</span>
        </div>

        <div class="total-items">
            {{ $products->total() }} টি
        </div>

    </div>

    @if($products->count())

        <div class="product-grid">

            @foreach($products as $product)

                <div class="product-card">

                    <button
                        type="button"
                        class="fav-btn favorite-toggle"
                        data-product-id="{{ $product->id }}"
                    >
                        <i class="fa-solid fa-heart"></i>
                    </button>

                    <a href="{{ route('user.product.details', $product->slug) }}" class="product-link">

                        <div class="product-img-wrap">

                            <img
                                src="{{ $product->images->first() ? $product->images->first()->image_url : asset('images/default-product.png') }}"
                                class="product-img"
                                alt="{{ $product->name }}"
                            >

                            @if($product->display_price['has_discount'])
                                <div class="discount-badge">
                                    {{ rtrim(rtrim($product->display_price['discount_percent'], '0'), '.') }}% ছাড়
                                </div>
                            @endif

                        </div>

                        <div class="product-info">

                            <div class="product-name">
                                {{ $product->name }}
                            </div>

                            <div class="price-line">

                                <span class="price">
                                    ৳{{ number_format($product->display_price['final'], 0) }}
                                </span>

                                @if($product->display_price['has_discount'])
                                    <span class="old-price">
                                        ৳{{ number_format($product->display_price['base'], 0) }}
                                    </span>
                                @endif

                            </div>

                        </div>

                    </a>

                    <div class="product-footer">

                        @if($product->is_order_off)

                            <button class="buy-btn disabled" disabled>
                                অর্ডার বন্ধ
                            </button>

                        @elseif($product->stock <= 0)

                            <button class="buy-btn disabled" disabled>
                                স্টক নেই
                            </button>

                        @else

                            <a
                                href="{{ route('user.product.details', $product->slug) }}"
                                style="display:block;text-decoration:none;width:100%;"
                            >
                                <button type="button" class="buy-btn">
                                    <i class="fa-solid fa-bag-shopping"></i>
                                    অর্ডার করুন
                                </button>
                            </a>

                        @endif

                    </div>

                </div>

            @endforeach

        </div>

        <div style="margin-top:22px;">
            {{ $products->links() }}
        </div>

    @else

        <div class="empty-box">

            <i class="fa-solid fa-heart-crack"></i>

            <div>
                আপনার কোনো ফেভারিট প্রোডাক্ট নেই
            </div>

        </div>

    @endif

</div>

<script>
document.addEventListener('DOMContentLoaded', function(){

    document.querySelectorAll('.favorite-toggle').forEach(function(btn){

        btn.addEventListener('click', function(e){

            e.preventDefault();
            e.stopPropagation();

            const productId = btn.dataset.productId;

            fetch("{{ route('user.product.favorite.toggle') }}", {

                method: "POST",

                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Accept": "application/json"
                },

                body: JSON.stringify({
                    product_id: productId
                })

            })
            .then(res => res.json())
            .then(data => {

                if(data.success && !data.favorited){

                    const card = btn.closest('.product-card');

                    card.style.opacity = '.3';

                    setTimeout(() => {
                        card.remove();

                        if(document.querySelectorAll('.product-card').length === 0){
                            location.reload();
                        }

                    }, 250);
                }

            });

        });

    });

});
</script>

@endsection