@extends('layouts.app')

@section('title', $offer->title)

@section('content')

<div class="offer-container">
    <div class="offer-card container">

        <!-- Offer Image -->
        <div class="offer-image">
            <img src="{{ asset('storage/' . $offer->image) }}" alt="{!! $offer->title !!}">
            <div class="offer-badge">LIMITED OFFER</div>
        </div>

        <h2 class="offer-title">{!! $offer->title !!}</h2>

        <div class="offer-desc">
            {!! $offer->description !!}
        </div>

        <!-- Countdown -->
        <!--<div class="countdown">
            <div><span id="days">00</span><small>Days</small></div>
            <div><span id="hours">00</span><small>Hours</small></div>
            <div><span id="minutes">00</span><small>Min</small></div>
            <div><span id="seconds">00</span><small>Sec</small></div>
        </div>-->

        <div class="offer-price">
            <span>Flat Off</span>
            <strong>£ {!! $offer->value !!}</strong>
        </div>

        <div class="offer-info">
            <div>
                <span>Starts</span>
                <strong>{!! $offer->starts_at !!}</strong>
            </div>
            <div>
                <span>Ends</span>
                <strong>{!! $offer->ends_at !!}</strong>
            </div>
            <div>
                <span>Min Order</span>
                <strong>£ {!! $offer->min_order_value !!}</strong>
            </div>
        </div>

        <!--<button class="offer-btn">Claim Offer</button>-->
    </div>
</div>


@endsection