@extends('layouts.main')
@section('content')  

<style>
    :root {
        --brand-red: #e6353f;
        --text-dark: #2b2b2b;
        --border-grey: #e2e2e2;
    }

    .products-hero {
        background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('{{ URL::to('/').'/public/assets/images/product_images/01.png' }}') center center / cover no-repeat;
        padding: 70px 20px;
        text-align: center;
    }

    .products-hero h1 {
        color: #fff;
        font-size: 34px;
        font-weight: 700;
        margin: 0;
    }

    .offers {
        max-width: 1140px;
        margin: 0 auto;
        padding: 60px 20px 80px;
    }

    .offers__title {
        text-align: center;
        color: var(--text-dark);
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 50px;
    }

    .offers__dot {
        color: var(--brand-red);
    }

    .offers__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .offer-card {
        width: 340px;
        border: 1px solid var(--border-grey);
        padding: 0;
        background: none;
        cursor: pointer;
    }

    .offer-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Lightbox */
    .offers-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .offers-lightbox.is-open {
        display: flex;
    }

    .offers-lightbox__panel {
        background: #fff;
        max-width: 720px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px;
        border-radius: 4px;
        position: relative;
    }

    .offers-lightbox__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .offers-lightbox__footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
        font-size: 12px;
        color: #6b6b6b;
    }

    .offers-lightbox__close {
        position: fixed;
        top: 20px;
        right: 30px;
        background: none;
        border: none;
        color: #fff;
        font-size: 34px;
        line-height: 1;
        cursor: pointer;
        z-index: 1001;
    }

    .offers-lightbox__nav {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        z-index: 1001;
        padding: 10px;
    }

    .offers-lightbox__nav--prev {
        left: 20px;
    }

    .offers-lightbox__nav--next {
        right: 20px;
    }

    @media (max-width: 600px) {
        .offers-lightbox__panel {
            padding: 25px;
        }
    }
</style>

<section class="products-hero">
    <h1>{{ __('messages.offers_and_rewards_hero_title') }}</h1>
</section>

<section class="offers">
    <h2 class="offers__title">{{ __('messages.offers_and_rewards_title') }} <span class="offers__dot">.</span></h2>

    <div class="offers__grid">

        <button type="button" class="offer-card" data-lightbox-trigger data-index="0">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/coupan1.jpeg' }}" alt="We accept scans from all intra oral scanners">
        </button>

        <button type="button" class="offer-card" data-lightbox-trigger data-index="1">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/coupan2.jpeg' }}" alt="25% off first case for new accounts">
        </button>

    </div>
</section>

<div class="offers-lightbox" id="offersLightbox">
    <button type="button" class="offers-lightbox__close" id="offersLightboxClose" aria-label="Close">&times;</button>
    <button type="button" class="offers-lightbox__nav offers-lightbox__nav--prev" id="offersLightboxPrev" aria-label="Previous">&#10094;</button>
    <button type="button" class="offers-lightbox__nav offers-lightbox__nav--next" id="offersLightboxNext" aria-label="Next">&#10095;</button>

    <div class="offers-lightbox__panel">

        <div class="offers-lightbox__image">
            <img src="" alt="" id="offersLightboxImg">
        </div>

        <div class="offers-lightbox__footer">
            <span id="offersLightboxCounter"></span>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var offers = [
        {
            image: '{{ URL::to('/').'/public/assets/images/product_images/coupan1.jpeg' }}'
        },
        {
            image: '{{ URL::to('/').'/public/assets/images/product_images/coupan2.jpeg' }}'
        }
    ];

    var currentIndex = 0;

    var lightbox = document.getElementById('offersLightbox');
    var img = document.getElementById('offersLightboxImg');
    var counterEl = document.getElementById('offersLightboxCounter');

    function renderOffer(index) {
        var offer = offers[index];
        img.src = offer.image;
        img.alt = 'Offer ' + (index + 1);
        counterEl.textContent = (index + 1) + ' of ' + offers.length;
    }

    function openLightbox(index) {
        currentIndex = index;
        renderOffer(currentIndex);
        lightbox.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    }

    function closeLightbox() {
        lightbox.classList.remove('is-open');
        document.body.style.overflow = '';
    }

    function showNext() {
        currentIndex = (currentIndex + 1) % offers.length;
        renderOffer(currentIndex);
    }

    function showPrev() {
        currentIndex = (currentIndex - 1 + offers.length) % offers.length;
        renderOffer(currentIndex);
    }

    // Event delegation: works reliably even if this script runs
    // before/after the buttons render.
    document.addEventListener('click', function (e) {
        var trigger = e.target.closest('[data-lightbox-trigger]');
        if (trigger) {
            e.preventDefault();
            openLightbox(parseInt(trigger.getAttribute('data-index'), 10));
            return;
        }

        if (e.target.closest('#offersLightboxClose')) {
            closeLightbox();
            return;
        }

        if (e.target.closest('#offersLightboxNext')) {
            showNext();
            return;
        }

        if (e.target.closest('#offersLightboxPrev')) {
            showPrev();
            return;
        }

        if (e.target === lightbox) {
            closeLightbox();
        }
    });

    document.addEventListener('keydown', function (e) {
        if (!lightbox.classList.contains('is-open')) return;
        if (e.key === 'Escape') closeLightbox();
        if (e.key === 'ArrowRight') showNext();
        if (e.key === 'ArrowLeft') showPrev();
    });
});
</script>

@endsection