<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>{{ config('app.name') }} | My Coupon</title>

    {{-- CSS --}} 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
    <link rel="stylesheet" href="{{ asset('static/home/css/reset.css') }}">
    <link rel="stylesheet" href="{{ asset('static/home/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('static/home/layui/css/layui.css') }}">
</head>
<body class="huiBg">

<div class="top">
    <a href="{{ route('dashboard') }}" class="topLeft">
        <i class="layui-icon layui-icon-left"></i>
    </a>
    <div class="topTit">My Coupon</div>
</div>

<div class="coupon-main">
    {{-- Tabs --}}
    <div class="record-tab">
        <a href="{{ route('coupon.index', ['m'=>0]) }}" class="{{ $status==0?'active':'' }}">Valid</a>
        <a href="{{ route('coupon.index', ['m'=>1]) }}" class="{{ $status==1?'active':'' }}">Used</a>
        <a href="{{ route('coupon.index', ['m'=>2]) }}" class="{{ $status==2?'active':'' }}">Expired</a>
    </div>

    {{-- Coupon List --}}
    <div class="coupon-list">
        @forelse($coupons as $c)
            <div class="coupon-item">
                <div class="coupon-tit">{{ $c->off }}%</div>
                <div class="coupon-con">
                    <h3>{{ $c->off }}% Coupon</h3>
                    @if($c->status == 0 && $c->expire_at)
                        <span>Valid until: {{ $c->expire_at->format('Y-m-d H:i') }}</span>
                    @else
                        <span>Expire Time: {{ $c->expire_at? $c->expire_at->format('Y-m-d H:i') : '-' }}</span>
                    @endif
                </div>

                {{-- Apply button if still valid --}}
                @if($c->status == 0)
                    <form action="{{ route('coupon.apply') }}" method="POST" style="margin-top:8px;">
                        @csrf
                        <input type="hidden" name="code" value="{{ $c->code }}">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal">
                            Apply
                        </button>
                    </form>
                @endif
            </div>
        @empty
            <div class="text-center" style="padding:20px; color:#888;">
                No coupons found.
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    <div style="margin: 15px;">
        {{ $coupons->links() }}
    </div>
</div>

</body>
</html>
