@extends('frontEnd.layouts.master')
@section('title', 'Home')

@push('seo')
<meta name="app-url" content="" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<!-- Open Graph -->
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="{{ asset($generalsetting->white_logo) }}" />
<meta property="og:description" content="" />
@endpush

@section('content')

<section class="product-section">
    <div class="container">
        <div class="row">

            <div class="col-sm-12">
                <div class="sec_title">
                    <h3 class="section-title-header">
                        <div class="timer_inner">
                            <div class="section-title-name">Offer Products</div>
                        </div>
                    </h3>
                </div>
            </div>

           <div class="category-product main_product_inner d-flex" style="flex-wrap:wrap; gap:20px;">

    @foreach ($offeredProducts as $key=>$product)

        @php
            $image = $product->images && count($product->images) > 0
                        ? $product->images[0]->image
                        : 'public/default.png';

            $discountAmount = ($product->new_price * $product->offer_percentage) / 100;
            $finalPrice = round($product->new_price - $discountAmount, 2);
        @endphp

        <div class="wist_item wow fadeInDown" data-wow-duration="1.5s" data-wow-delay="0.{{$key}}s"  style="
        flex: 0 0 16.66%;
        margin-bottom:20px;
        display:flex;
        flex-direction:column;
     ">

            <div style="
                position:relative;
                border:1px solid #ddd;
                border-radius:6px;
                padding:5px;
                background:#fff;
                display:flex;
                flex-direction:column;
                height:100%;
            ">

                {{-- Discount Badge --}}
                @if($product->offer_percentage && $product->offer_percentage > 0)
                <div style="position:absolute; top:5px; right:5px; z-index:2;">
                    <div style="
                        background:#fe5200; 
                        color:#fff; 
                        width:40px; 
                        height:40px; 
                        border-radius:50%; 
                        display:flex; 
                        align-items:center; 
                        justify-content:center; 
                        font-size:12px; 
                        font-weight:600;
                    ">
                        {{ $product->offer_percentage }}%
                    </div>
                </div>
                @endif

                {{-- Product Image --}}
                <div style="
                    text-align:center; 
                    height:200px; 
                    display:flex; 
                    align-items:center; 
                    justify-content:center;
                ">
                    <a href="{{ route('product', $product->slug) }}">
                        <img style="max-height:100%; max-width:100%; object-fit:contain;" src="{{ asset($image) }}" alt="{{ $product->name }}">
                    </a>
                </div>

                {{-- Product Name & Price --}}
                <div style="flex-grow:1; margin-top:10px; text-align:center;">
                    <div style="font-weight:600; font-size:14px; margin-bottom:5px;">
                        <a href="{{ route('product', $product->slug) }}" style="text-decoration:none; color:#000;">
                            {{ Str::limit($product->name, 80) }}
                        </a>
                    </div>
                    <div style="display:flex; justify-content:center; align-items:center; gap:8px; font-size:14px;">
                        @if($product->old_price)
                            <del style="color:blue; font-size:13px;">৳ {{ $product->old_price }}</del>
                        @endif
                        <span style="font-weight:700;">৳ {{ $finalPrice }}</span>
                    </div>
                </div>

                {{-- Buttons --}}
                <div style="
                    margin-top:10px;
                    display:flex;
                    flex-direction:column;
                    border:2px solid #333; 
                    border-radius:4px; 
                    overflow:hidden;
                ">
                    <a href="{{ route('product', $product->slug) }}" style="
                        flex:1; 
                        display:flex; 
                        justify-content:center; 
                        align-items:center; 
                        background-color:#00A8E4; 
                        color:#fff; 
                        font-weight:600; 
                        text-decoration:none; 
                        padding:10px 0;
                        border-bottom:1px solid #fff;
                    ">
                        Order Now
                    </a>

                    @if(optional($product->prosizes)->count() == 0 && optional($product->procolors)->count() == 0)
                    <form action="{{ route('cart.store') }}" method="POST" style="margin:0;">
                        @csrf
                        <input type="hidden" name="id" value="{{ $product->id }}">
                        <input type="hidden" name="qty" value="1">
                        <button type="submit" style="
                            padding:10px 0;
                            background:#00A8E4;
                            color:#fff;
                            border:none;
                            font-weight:600;
                            width:100%;
                            cursor:pointer;
                        ">
                            Add to Cart
                        </button>
                    </form>
                    @endif
                </div>

            </div>
        </div>

    @endforeach

</div>


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

@endsection

@push('script')
<script>
    $(".sort").change(function() {
       $('#loading').show();
       $(".sort-form").submit();
    });
</script>
@endpush
