@extends('layouts.admin')

@section('title', 'Kupon & Skema Promo')
@section('page_title', 'Kupon & Skema Promo')

@section('admin_content')
<div>
    <!-- Page Header -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Kupon &amp; Skema Promo</h1>
                <p class="ax-page-head__subtitle">Buat kode kupon diskon (persen/nominal), atur batas kuota, masa berlaku, dan syarat minimum order.</p>
            </div>
            <div class="ax-page-head__actions">
                <button type="button" onclick="document.getElementById('newPromoModal').classList.toggle('is-hidden')" class="ax-btn ax-btn--primary ax-btn--sm">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Tambah Kupon Promo Baru</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Alert Success -->
    @if(session('success'))
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(83,107,91,0.12); border:1px solid var(--ax-accent); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:var(--ax-accent); display:flex; align-items:center; gap:8px;">
            <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <!-- Form Modal Tambah Kupon Promo -->
    <div id="newPromoModal" class="is-hidden" style="margin-bottom:var(--ax-space-6);">
        <section class="ax-card">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Form Konfigurasi</span>
                    <h3 class="ax-card__title">Buat Kupon Promo Baru</h3>
                </div>
            </div>
            <div class="ax-card__body">
                <form action="{{ route('admin.promos.store') }}" method="POST">
                    @csrf
                    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:var(--ax-space-4); margin-bottom:var(--ax-space-4);">
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Kode Kupon (Voucher)</label>
                            <input type="text" name="code" required placeholder="misal: NIKAHHEMAT20" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); font-family:var(--ax-font-mono); text-transform:uppercase; background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Nama Promo</label>
                            <input type="text" name="name" required placeholder="misal: Diskon Spesial Awal Bulan" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Jenis Potongan</label>
                            <select name="type" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                                <option value="percentage">Persentase (%)</option>
                                <option value="fixed">Nominal Tetap (Rp)</option>
                            </select>
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Nilai Diskon (% atau Rp)</label>
                            <input type="number" name="discount_value" required placeholder="20 atau 30000" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Maksimal Diskon Rp (Khusus %)</label>
                            <input type="number" name="max_discount_amount" placeholder="50000 (Opsional)" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Min. Pembelian (Rp)</label>
                            <input type="number" name="min_order_amount" value="0" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Kuota Kupon (Orang)</label>
                            <input type="number" name="quota" placeholder="Kosongkan jika unlimited" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Berlaku Untuk Tier Paket</label>
                            <select name="applicable_tier" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                                <option value="all">Semua Paket (All)</option>
                                @foreach($packages as $pkg)
                                    <option value="{{ $pkg->slug }}">Khusus {{ $pkg->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Mulai Tanggal</label>
                            <input type="datetime-local" name="start_date" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div>
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Selesai Tanggal</label>
                            <input type="datetime-local" name="end_date" style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                        <div style="grid-column: 1 / -1;">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Catatan / Deskripsi Kupon</label>
                            <input type="text" name="description" placeholder="Catatan internal promo..." style="width:100%; padding:8px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                        </div>
                    </div>
                    <div style="display:flex; justify-content:flex-end; gap:var(--ax-space-2);">
                        <button type="button" onclick="document.getElementById('newPromoModal').classList.add('is-hidden')" class="ax-btn ax-btn--secondary ax-btn--sm">Batal</button>
                        <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">Simpan Kupon Promo</button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <!-- Promos Cards Grid -->
    <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:var(--ax-space-4);">
        @foreach($promos as $promo)
            <section class="ax-card">
                <form action="{{ route('admin.promos.update', $promo->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="ax-card__body" style="padding:var(--ax-space-4); display:flex; flex-direction:column; gap:var(--ax-space-3);">
                        
                        <div style="display:flex; justify-content:space-between; align-items:flex-start;">
                            <div>
                                <input type="text" name="code" value="{{ $promo->code }}" required style="font-family:var(--ax-font-mono); font-weight:800; font-size:1.15rem; color:var(--ax-accent); border:none; border-bottom:1px dashed var(--ax-border); background:transparent; text-transform:uppercase;">
                                <input type="text" name="name" value="{{ $promo->name }}" style="display:block; font-size:12px; color:var(--ax-text-strong); font-weight:600; border:none; background:transparent; width:100%; margin-top:2px;">
                            </div>
                            <span class="ax-badge {{ $promo->is_active ? 'ax-badge--solid ax-badge--accent' : '' }}">
                                {{ $promo->used_count }} Digunakan
                            </span>
                        </div>

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-2);">
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Tipe Diskon</label>
                                <select name="type" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                                    <option value="percentage" {{ $promo->type === 'percentage' ? 'selected' : '' }}>Persentase (%)</option>
                                    <option value="fixed" {{ $promo->type === 'fixed' ? 'selected' : '' }}>Nominal (Rp)</option>
                                </select>
                            </div>
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Nilai Potongan</label>
                                <input type="number" name="discount_value" value="{{ $promo->discount_value }}" style="width:100%; padding:4px 8px; font-size:11px; font-weight:700; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                            </div>
                        </div>

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-2);">
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Maks. Diskon (Rp)</label>
                                <input type="number" name="max_discount_amount" value="{{ $promo->max_discount_amount }}" placeholder="Unlimited" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                            </div>
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Kuota (User)</label>
                                <input type="number" name="quota" value="{{ $promo->quota }}" placeholder="Unlimited" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                            </div>
                        </div>

                        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--ax-space-2);">
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Min. Order (Rp)</label>
                                <input type="number" name="min_order_amount" value="{{ $promo->min_order_amount }}" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                            </div>
                            <div>
                                <label style="font-size:10px; color:var(--ax-text-muted); text-transform:uppercase;">Khusus Tier</label>
                                <select name="applicable_tier" style="width:100%; padding:4px 8px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                                    <option value="all" {{ $promo->applicable_tier === 'all' ? 'selected' : '' }}>Semua Tier</option>
                                    @foreach($packages as $pkg)
                                        <option value="{{ $pkg->slug }}" {{ $promo->applicable_tier === $pkg->slug ? 'selected' : '' }}>
                                            {{ $pkg->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div style="display:flex; justify-content:space-between; align-items:center; padding-top:var(--ax-space-2); border-top:1px solid var(--ax-border);">
                            <label style="display:flex; align-items:center; gap:6px; font-size:11px; cursor:pointer;">
                                <input type="checkbox" name="is_active" value="1" {{ $promo->is_active ? 'checked' : '' }} class="accent-deepsage">
                                <span>Status Aktif</span>
                            </label>
                            <button type="submit" class="ax-btn ax-btn--primary ax-btn--xs">Update Kupon</button>
                        </div>
                    </div>
                </form>
                <div style="padding: 0 var(--ax-space-4) var(--ax-space-3); display:flex; justify-content:flex-end;">
                    <form action="{{ route('admin.promos.delete', $promo->id) }}" method="POST" onsubmit="return confirm('Hapus kupon ini?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" style="background:none; border:none; color:var(--ax-danger, #dc2626); font-size:11px; cursor:pointer; padding:2px;">
                            Hapus Kupon
                        </button>
                    </form>
                </div>
            </section>
        @endforeach
    </div>
</div>
@endsection