{{-- admin/promo/index.blade.php | Obrempong | Jcode --}}
@extends('layouts.admin')
@section('title','Promo Codes')
@section('content')
<div class="grid-side">
    <div>
        <div class="card">
            <div class="card-header"><h3>All Promo Codes</h3></div>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Code</th><th>Type</th><th>Value</th><th>Used/Limit</th><th>Expires</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                    @forelse($codes as $code)
                    <tr>
                        <td><strong style="font-family:monospace;font-size:15px;letter-spacing:1px;color:var(--primary);">{{ $code->code }}</strong><br><span style="font-size:11px;color:var(--text-muted);">{{ $code->description }}</span></td>
                        <td><span class="badge badge-primary">{{ ucfirst($code->type) }}</span></td>
                        <td><strong>{{ $code->type==='points'?number_format($code->value).' pts':($code->type==='percent'?$code->value.'%':'GH₵'.number_format($code->value,2)) }}</strong></td>
                        <td>{{ $code->usages_count }}/{{ $code->usage_limit ?? '∞' }}</td>
                        <td style="font-size:12px;color:var(--text-muted);">{{ $code->expires_at?$code->expires_at->format('d M Y'):'Never' }}</td>
                        <td><span class="badge {{ $code->isValid()?'badge-success':'badge-muted' }}">{{ $code->isValid()?'Active':'Expired' }}</span></td>
                        <td>
                            <form method="POST" action="{{ route('admin.promo.delete',$code) }}" style="display:inline;">@csrf @method('DELETE')<button class="btn btn-xs btn-danger" onclick="return confirm('Delete?')"><i class="fa fa-trash"></i></button></form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" style="text-align:center;padding:40px;color:var(--text-muted);">No promo codes yet.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div>
        <div class="card" style="position:sticky;top:80px;">
            <div class="card-header"><h3>Create Promo Code</h3></div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.promo.store') }}">
                    @csrf
                    @if($errors->any())<div class="alert alert-danger">{{ $errors->first() }}</div>@endif
                    <div class="form-group"><label class="form-label">Code *</label><input type="text" name="code" class="form-control" placeholder="e.g. WELCOME100" style="text-transform:uppercase;" required oninput="this.value=this.value.toUpperCase()"></div>
                    <div class="form-group"><label class="form-label">Description</label><input type="text" name="description" class="form-control" placeholder="Brief description..."></div>
                    <div class="form-row cols-2">
                        <div class="form-group">
                            <label class="form-label">Type *</label>
                            <select name="type" class="form-control" required>
                                <option value="points">Points</option>
                                <option value="cedis">GH₵ (Cedis)</option>
                                <option value="percent">Percent %</option>
                            </select>
                        </div>
                        <div class="form-group"><label class="form-label">Value *</label><input type="number" name="value" class="form-control" placeholder="e.g. 100" step="any" min="1" required></div>
                    </div>
                    <div class="form-row cols-2">
                        <div class="form-group"><label class="form-label">Total Usage Limit</label><input type="number" name="usage_limit" class="form-control" placeholder="Blank = unlimited"></div>
                        <div class="form-group"><label class="form-label">Per-User Limit</label><input type="number" name="per_user_limit" class="form-control" value="1" min="1"></div>
                    </div>
                    <div class="form-group"><label class="form-label">Expires At</label><input type="datetime-local" name="expires_at" class="form-control"></div>
                    <div class="form-group"><label class="form-switch"><input type="checkbox" name="status" value="1" checked><span class="switch"></span> Active immediately</label></div>
                    <button type="submit" class="btn btn-primary w-100"><i class="fa fa-plus"></i> Create Code</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection