@extends('layouts.admin')

@section('title', 'Coupons & Discounts Engine')

@section('content')
<div style="margin-bottom: 24px;">
    <h1 class="serif" style="font-size: 26px; margin: 0; color: #0f172a;">Advanced Discount Coupons & Offers</h1>
    <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">Manage promotional discount codes, maximum discount caps, global usage limits, and expiration dates.</p>
</div>

<div style="display: grid; grid-template-columns: 1.2fr 2fr; gap: 24px;">
    <!-- Add Coupon Form -->
    <div class="admin-card">
        <h2 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Create Advanced Promo Code</h2>
        <form action="{{ route('admin.coupons.store') }}" method="POST">
            @csrf
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500;">Coupon Code *</label>
                <input type="text" name="code" class="form-control" style="text-transform: uppercase; font-weight: 700; letter-spacing: 1px;" required placeholder="e.g. WELCOME15">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
                <div>
                    <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500;">Discount Type *</label>
                    <select name="type" class="form-control" required>
                        <option value="percent">Percentage (%)</option>
                        <option value="fixed">Flat Amount (₹)</option>
                    </select>
                </div>
                <div>
                    <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500;">Value *</label>
                    <input type="number" step="0.01" name="value" class="form-control" required placeholder="15">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
                <div>
                    <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500;">Max Cap (₹ for %)</label>
                    <input type="number" step="0.01" name="max_discount_amount" class="form-control" placeholder="e.g. 500">
                    <span style="font-size: 10px; color: var(--text-muted);">Max discount cap</span>
                </div>
                <div>
                    <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500;">Min Order Subtotal (₹)</label>
                    <input type="number" step="0.01" name="min_order_amount" value="0" class="form-control">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
                <div>
                    <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500;">Global Usage Limit</label>
                    <input type="number" name="usage_limit" class="form-control" placeholder="e.g. 100">
                    <span style="font-size: 10px; color: var(--text-muted);">Blank = Unlimited</span>
                </div>
                <div>
                    <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500;">Expiry Date</label>
                    <input type="date" name="expires_at" class="form-control">
                </div>
            </div>

            <div style="margin-bottom: 20px;">
                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: #334155; font-size: 13px;">
                    <input type="checkbox" name="is_active" value="1" checked> Enable Immediately
                </label>
            </div>

            <button type="submit" class="btn-admin btn-primary" style="width: 100%; justify-content: center;">Create Coupon Code</button>
        </form>
    </div>

    <!-- Coupons Table -->
    <div class="admin-card">
        <h2 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Active Store Coupons</h2>
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Discount Value</th>
                        <th>Min Order / Cap</th>
                        <th>Redemptions</th>
                        <th>Expiry Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($coupons as $coupon)
                        @php
                            $isExpired = $coupon->expires_at && $coupon->expires_at->isPast();
                            $isLimitReached = $coupon->usage_limit && $coupon->usage_count >= $coupon->usage_limit;
                        @endphp
                        <tr>
                            <td>
                                <strong style="color: #186297; font-size: 15px; letter-spacing: 1px; font-family: monospace;">{{ $coupon->code }}</strong>
                            </td>
                            <td>
                                @if($coupon->type === 'percent')
                                    <strong style="color: #0f172a;">{{ (int)$coupon->value }}% OFF</strong>
                                    @if($coupon->max_discount_amount)
                                        <div style="font-size: 11px; color: var(--text-muted);">Max Cap: ₹{{ number_format($coupon->max_discount_amount) }}</div>
                                    @endif
                                @else
                                    <strong style="color: #0f172a;">₹{{ number_format($coupon->value) }} OFF</strong>
                                @endif
                            </td>
                            <td>
                                @if($coupon->min_order_amount > 0)
                                    <div>₹{{ number_format($coupon->min_order_amount) }}</div>
                                @else
                                    <span style="color: var(--text-muted); font-size: 12px;">No Min Subtotal</span>
                                @endif
                            </td>
                            <td>
                                <div>
                                    <strong>{{ $coupon->usage_count }}</strong> / {{ $coupon->usage_limit ? $coupon->usage_limit : '∞' }}
                                </div>
                                @if($coupon->usage_limit)
                                    @php
                                        $percentUsed = min(100, round(($coupon->usage_count / $coupon->usage_limit) * 100));
                                    @endphp
                                    <div style="width: 70px; height: 4px; background: #e2e8f0; border-radius: 2px; margin-top: 4px; overflow: hidden;">
                                        <div style="width: {{ $percentUsed }}%; height: 100%; background: #186297;"></div>
                                    </div>
                                @endif
                            </td>
                            <td>
                                @if($coupon->expires_at)
                                    <span style="color: {{ $isExpired ? '#b91c1c' : '#334155' }};">
                                        {{ $coupon->expires_at->format('M d, Y') }}
                                    </span>
                                @else
                                    <span style="color: var(--text-muted); font-size: 12px;">No Expiry</span>
                                @endif
                            </td>
                            <td>
                                @if($isExpired)
                                    <span class="badge badge-cancelled">Expired</span>
                                @elseif($isLimitReached)
                                    <span class="badge badge-pending">Limit Reached</span>
                                @else
                                    <form action="{{ route('admin.coupons.toggle', $coupon) }}" method="POST" style="margin: 0;">
                                        @csrf
                                        <button type="submit" class="badge {{ $coupon->is_active ? 'badge-active' : 'badge-inactive' }}" style="cursor: pointer; border: none;">
                                            {{ $coupon->is_active ? 'Active' : 'Disabled' }}
                                        </button>
                                    </form>
                                @endif
                            </td>
                            <td>
                                <form action="{{ route('admin.coupons.destroy', $coupon) }}" method="POST" onsubmit="return confirm('Delete coupon?')" style="margin:0;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-admin btn-danger" style="padding: 6px 10px; font-size: 12px;">
                                        <i data-lucide="trash-2" style="width: 14px;"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection