@extends('frontEnd.layouts.master')
@section('title', $offer->name)
@push('css')
    <style>
        .offer-header {
            padding: 60px 0;
            margin-bottom: 40px;
            text-align: center;
            border-radius: 16px;
            color: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .offer-header-content {
            position: relative;
            z-index: 2;
        }
        .offer-header h1 {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 10px;
            letter-spacing: -1px;
        }
        .offer-banner-img {
            max-height: 100px;
            width: auto;
            object-fit: contain;
            margin-bottom: 20px;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
        }
        
        /* Premium Filter Sidebar */
        .filter-sidebar {
            background: #fff;
            padding: 25px;
            border-radius: 12px;
            border: 1px solid #eee;
            box-shadow: 0 2px 15px rgba(0,0,0,0.03);
            position: sticky;
            top: 100px;
        }
        .filter-group {
            margin-bottom: 25px;
            border-bottom: 1px solid #f8f8f8;
            padding-bottom: 20px;
        }
        .filter-group:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        .filter-title {
            font-size: 13px;
            font-weight: 700;
            color: #888;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .brand-list {
            max-height: 250px;
            overflow-y: auto;
        }
        
        .brand-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
            font-size: 14px;
            color: #444;
            cursor: pointer;
            transition: color 0.2s;
        }
        .brand-item:hover { color: var(--nv-primary); }
        .brand-item input { border-color: #ddd; border-radius: 3px; }
        
        .offer-pro-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .filter-btn {
            background: #222;
            color: #fff;
            border: none;
            width: 100%;
            padding: 12px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.2s;
        }
        .filter-btn:hover { background: var(--nv-primary); }
        
        .category-breadcrumb a { color: #999; text-decoration: none; font-size: 13px; }
        .category-breadcrumb strong { color: #333; font-size: 13px; }

        /* Mobile Filter Styles */
        @media (max-width: 991px) {
            .filter-sidebar-column {
                position: fixed;
                top: 0;
                left: -320px;
                width: 300px;
                height: 100vh;
                background: #fff;
                z-index: 9999;
                transition: all 0.3s ease;
                padding: 0 !important;
                box-shadow: 10px 0 30px rgba(0,0,0,0.1);
                overflow-y: auto;
            }
            .filter-sidebar-column.active {
                left: 0;
            }
            .filter-sidebar {
                border: none;
                box-shadow: none;
                position: relative;
                top: 0;
                padding: 20px;
            }
            .mobile-filter-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px;
                border-bottom: 1px solid #eee;
                background: #fff;
                position: sticky;
                top: 0;
                z-index: 10;
            }
            .offer-pro-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
        }
        @media (max-width: 576px) {
            .offer-pro-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
@endpush

@section('content')
    <section class="offer-section py-5" style="background: #fdfdfd; background-image: radial-gradient(#eee 1px, transparent 1px); background-size: 20px 20px;">
        <div class="container">
            <!-- Breadcrumb -->
            <div class="category-breadcrumb mb-4">
                <a href="{{ route('home') }}">Home</a>
                <span class="mx-2 text-muted">/</span>
                <strong>{{ $offer->name }}</strong>
            </div>

            <!-- Premium Split Header -->
            <style>
                .offer-header {
                    padding: 30px 20px;
                    border-radius: 20px;
                    color: #fff;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
                    transition: all 0.4s ease;
                }
                .offer-header:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
                
                .offer-header-content { position: relative; z-index: 2; }
                
                @media (max-width: 991px) {
                    .offer-header { padding: 40px; text-align: center !important; }
                    .offer-header-content { flex-direction: column; gap: 30px !important; }
                    .offer-text-info { display: flex; flex-direction: column; align-items: center; }
                    .offer-text-info div { margin-left: auto; margin-right: auto; }
                    .offer-header h1 { font-size: 36px !important; }
                }
            </style>
            <div class="offer-header" style="background: {{ $offer->bg_color ?? '#E31019' }}; border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; text-align: left; padding: 50px 60px;">
                @if($offer->bg_image)
                    <div style="position: absolute; top:0; left:0; width:100%; height:100%; background-image: url('{{ asset(ltrim(str_ireplace(['public/', '/public/'], '', $offer->bg_image), '/')) }}'); background-repeat: repeat; background-size: 150px; opacity: 0.2; z-index:0; pointer-events: none;"></div>
                @endif
                
                <div class="offer-header-content d-flex align-items-center gap-5" style="color: {{ $offer->text_color ?? '#ffffff' }};">
                    @if($offer->banner)
                        <div class="offer-banner-wrapper">
                            <img src="{{ asset(ltrim(str_ireplace(['public/', '/public/'], '', $offer->banner), '/')) }}" alt="{{ $offer->name }}" class="offer-banner-img" style="margin-bottom: 0; max-height: 150px; width: auto;">
                        </div>
                    @endif
                    
                    <div class="offer-text-info">
                        <h1 style="color: {{ $offer->text_color ?? '#ffffff' }}; font-weight: 800; font-size: 52px; letter-spacing: -1.5px; margin-bottom: 15px; line-height: 1;">
                            {{ $offer->name }}
                        </h1>
                        
                        @if($offer->tagline)
                            <div style="height: 3px; width: 60px; background: {{ $offer->text_color ?? '#ffffff' }}; opacity: 0.3; margin-bottom: 20px; border-radius: 10px;"></div>
                            <p style="font-size: 18px; font-weight: 500; opacity: 0.9; letter-spacing: 0.2px; max-width: 600px; line-height: 1.6; margin-bottom: 0;">
                                {{ $offer->tagline }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="row g-4">
                <!-- Sidebar Filters -->
                <div class="col-lg-3 filter-sidebar-column">
                    <div class="mobile-filter-header d-lg-none">
                        <h5 class="m-0 fw-bold">Filters</h5>
                        <button type="button" class="btn-close filter-close-btn"></button>
                    </div>
                    @include('frontEnd.layouts.partials.sidebar_filter', ['brands' => $brands])
                </div>

                <!-- Product Grid -->
                <div class="col-lg-9">
                    <div class="d-flex justify-content-between align-items-center mb-4 bg-white p-3 rounded-3 shadow-sm flex-wrap gap-3">
                        <div class="showing-data text-muted small fw-bold">
                            Showing {{ $products->firstItem() ?? 0 }}-{{ $products->lastItem() ?? 0 }} of {{ $products->total() }} Results
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-outline-dark d-lg-none mobile-filter-open-btn px-3 py-2 fw-bold">
                                <i class="fa-solid fa-filter me-2"></i> Filter
                            </button>
                            <div class="view-options d-none d-md-flex gap-2">
                                <button class="btn btn-sm btn-light active"><i class="fa-solid fa-grid-2"></i></button>
                                <button class="btn btn-sm btn-light"><i class="fa-solid fa-list"></i></button>
                            </div>
                        </div>
                    </div>

                    <div class="offer-pro-grid">
                        @forelse ($products as $product)
                            @include('frontEnd.layouts.partials.product_card', ['product' => $product])
                        @empty
                            <div class="col-12 text-center py-5 bg-white rounded-3">
                                <img src="https://cdn-icons-png.flaticon.com/512/7486/7486744.png" style="width: 100px; opacity: 0.5;" alt="No products">
                                <h4 class="mt-4 fw-bold">No products match your filters.</h4>
                                <p class="text-muted">Try adjusting your filters or search terms.</p>
                                <a href="{{ route('offer', $offer->slug) }}" class="btn btn-primary px-4 py-2">View All Products</a>
                            </div>
                        @endforelse
                    </div>

                    <div class="row mt-5">
                        <div class="col-sm-12">
                            <div class="custom_paginate d-flex justify-content-center">
                                {{ $products->appends(request()->query())->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
<script>
    $(document).ready(function() {
        $(".mobile-filter-open-btn").on("click", function() {
            $(".filter-sidebar-column").addClass("active");
            $("#page-overlay").fadeIn();
            $("body").css("overflow", "hidden");
        });

        $(".filter-close-btn, #page-overlay").on("click", function() {
            $(".filter-sidebar-column").removeClass("active");
            $("#page-overlay").fadeOut();
            $("body").css("overflow", "auto");
        });
    });
</script>
@endpush
