@extends('layouts.admin')

@section('title', 'Kelola Pilihan Paket')
@section('page_title', 'Kelola Pilihan Paket')

@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;">Kelola Pilihan Paket</h1>
                <p class="ax-page-head__subtitle">Atur harga, badge promo, masa aktif, kuota foto galeri, dan assign section yang diizinkan untuk masing-masing paket.</p>
            </div>
            <div class="ax-page-head__actions">
                <button type="button" onclick="document.getElementById('newPackageModal').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 Paket Baru</span>
                </button>
            </div>
        </div>
    </div>

    @php
        $allAvailableSections = \App\Models\Package::allAvailableSections();
    @endphp

    <!-- Modal Form Tambah Paket Baru -->
    <div id="newPackageModal" 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 Paket Baru</h3>
                </div>
            </div>
            <div class="ax-card__body">
                <form action="{{ route('admin.packages.store') }}" method="POST">
                    @csrf
                    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 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;">Nama Paket</label>
                            <input type="text" name="name" required placeholder="misal: Exclusive VIP" 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;">Harga Jual (IDR)</label>
                            <input type="number" name="price" required placeholder="299000" 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;">Harga Asli / Coret (Flash Sale)</label>
                            <input type="number" name="original_price" placeholder="misal: 399000 (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;">Badge Promo (Opsional)</label>
                            <input type="text" name="badge" placeholder="Best Deal" 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;">Masa Aktif (Hari)</label>
                            <input type="number" name="active_days" value="365" required 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;">Maks. Foto Galeri</label>
                            <input type="number" name="max_gallery_photos" value="4" min="0" max="50" 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>

                        <!-- Assign Section Undangan -->
                        <div style="grid-column: 1 / -1; padding:12px; background:var(--ax-accent-wash); border-radius:var(--ax-radius-md); border:1px solid var(--ax-border);">
                            <label style="display:block; font-size:12px; font-weight:700; color:var(--ax-text-strong); margin-bottom:8px;">
                                <i data-lucide="layers" style="width:14px;height:14px;display:inline-block;vertical-align:middle;margin-right:4px;"></i>
                                Assign Section Undangan untuk Paket Ini
                            </label>
                            <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:8px;">
                                @foreach($allAvailableSections as $secId => $secData)
                                    <label style="display:flex; align-items:center; gap:8px; font-size:12px; cursor:pointer;">
                                        <input type="checkbox" name="allowed_sections[]" value="{{ $secId }}" checked class="accent-deepsage">
                                        <span>{{ $secData['name'] }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Opsi Fitur Ekstra -->
                        <div style="grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:16px; font-size:12px; margin-top:4px;">
                            <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
                                <input type="hidden" name="has_qris" value="0">
                                <input type="checkbox" name="has_qris" value="1" checked class="accent-deepsage">
                                <span>Dukung QRIS Upload</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
                                <input type="hidden" name="has_streaming" value="0">
                                <input type="checkbox" name="has_streaming" value="1" class="accent-deepsage">
                                <span>Fitur Live Streaming</span>
                            </label>
                            <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
                                <input type="hidden" name="has_custom_theme" value="0">
                                <input type="checkbox" name="has_custom_theme" value="1" class="accent-deepsage">
                                <span>Custom Tema / Warna Font</span>
                            </label>
                        </div>

                        <div style="grid-column: 1 / -1;">
                            <label style="display:block; font-size:var(--ax-text-xs); font-weight:600; margin-bottom:4px;">Daftar Fitur Promosi (Satu baris per fitur teks)</label>
                            <textarea name="features_text" rows="3" placeholder="Semua fitur paket sebelumnya&#10;Custom domain nama sendiri&#10;Prioritas revisi" 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);"></textarea>
                        </div>
                    </div>
                    <div style="display:flex; justify-content:flex-end; gap:var(--ax-space-2);">
                        <button type="button" onclick="document.getElementById('newPackageModal').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 Paket</button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <!-- Package Cards Grid -->
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:var(--ax-space-4);">
        @foreach($packages as $pkg)
            <section class="ax-card {{ $pkg->is_active ? '' : 'opacity-70' }}" style="display:flex; flex-direction:column; justify-content:space-between;">
                <form action="{{ route('admin.packages.update', $pkg->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="ax-card__header" style="border-bottom:1px solid var(--ax-border);">
                        <div class="ax-card__titles" style="flex:1;">
                            <input type="text" name="name" value="{{ $pkg->name }}" class="font-heading" style="font-size:1.25rem; font-weight:700; border:none; border-bottom:1px dashed var(--ax-border); background:transparent; color:var(--ax-text-strong); width:100%;">
                            <div style="display:flex; align-items:center; gap:6px; margin-top:4px;">
                                <span class="ax-card__eyebrow">Masa aktif:</span>
                                <input type="number" name="active_days" value="{{ $pkg->active_days }}" required min="1" style="width:70px; padding:2px 6px; font-size:11px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-xs); background:var(--ax-surface);">
                                <span class="ax-card__eyebrow">hari</span>
                            </div>
                        </div>
                        <label style="display:flex; align-items:center; gap:6px; font-size:var(--ax-text-xs); cursor:pointer;">
                            <input type="checkbox" name="is_active" value="1" {{ $pkg->is_active ? 'checked' : '' }} class="accent-deepsage">
                            <span style="font-size:11px; color:var(--ax-text-muted);">Aktif</span>
                        </label>
                    </div>

                    <div class="ax-card__body">
                        <!-- Pricing Grid -->
                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--ax-space-3); margin-bottom:var(--ax-space-3);">
                            <div>
                                <label style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:600;">Harga Jual (IDR)</label>
                                <input type="number" name="price" value="{{ $pkg->price }}" style="width:100%; padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); font-size:var(--ax-text-xs); font-weight:700; color:var(--ax-accent); background:var(--ax-surface);">
                            </div>
                            <div>
                                <label style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:600;">Harga Coret (Rp)</label>
                                <input type="number" name="original_price" value="{{ $pkg->original_price }}" placeholder="Opsional" style="width:100%; padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                            </div>
                        </div>

                        <!-- Badge Promo & Kuota Galeri -->
                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--ax-space-3); margin-bottom:var(--ax-space-3);">
                            <div>
                                <label style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:600;">Badge Promo</label>
                                <input type="text" name="badge" value="{{ $pkg->badge }}" placeholder="Kosongkan jika tdk ada" style="width:100%; padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); font-size:var(--ax-text-xs); background:var(--ax-surface);">
                            </div>
                            <div>
                                <label style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:600;">Maks. Foto Galeri</label>
                                <input type="number" name="max_gallery_photos" value="{{ $pkg->max_gallery_photos ?? 4 }}" min="0" max="50" style="width:100%; padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); font-size:var(--ax-text-xs); font-weight:700; background:var(--ax-surface);">
                            </div>
                        </div>

                        <!-- ASSIGN SECTION CHECKLIST -->
                        <div style="margin-bottom:var(--ax-space-3); padding:10px; background:var(--ax-accent-wash); border-radius:var(--ax-radius-sm); border:1px solid var(--ax-border);">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                                <label style="font-size:11px; font-weight:700; color:var(--ax-text-strong);">
                                    Assign Section Undangan
                                </label>
                                <span style="font-size:10px; color:var(--ax-text-muted);">
                                    {{ count($pkg->allowed_sections ?? []) }} Terpilih
                                </span>
                            </div>
                            <div style="display:grid; grid-template-columns:1fr; gap:6px;">
                                @php
                                    $assigned = $pkg->allowed_sections ?? ['countdown', 'quote', 'couple', 'event', 'gallery', 'gift', 'story', 'wishes'];
                                @endphp
                                @foreach($allAvailableSections as $secId => $secData)
                                    <label style="display:flex; align-items:center; justify-content:space-between; padding:4px 8px; background:white; border-radius:4px; border:1px solid #e2e8f0; font-size:11px; cursor:pointer;">
                                        <span>{{ $secData['name'] }}</span>
                                        <input type="checkbox" name="allowed_sections[]" value="{{ $secId }}" {{ in_array($secId, $assigned) ? 'checked' : '' }} class="accent-deepsage">
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Opsi Tambahan -->
                        <div style="margin-bottom:var(--ax-space-3); padding:8px 10px; background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm);">
                            <label style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:600; margin-bottom:4px;">Kemampuan Ekstra</label>
                            <div style="display:flex; flex-direction:column; gap:4px; font-size:11px;">
                                <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
                                    <input type="hidden" name="has_qris" value="0">
                                    <input type="checkbox" name="has_qris" value="1" {{ $pkg->has_qris ? 'checked' : '' }} class="accent-deepsage">
                                    <span>QRIS Upload Didukung</span>
                                </label>
                                <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
                                    <input type="hidden" name="has_streaming" value="0">
                                    <input type="checkbox" name="has_streaming" value="1" {{ $pkg->has_streaming ? 'checked' : '' }} class="accent-deepsage">
                                    <span>Fitur Live Streaming</span>
                                </label>
                                <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
                                    <input type="hidden" name="has_custom_theme" value="0">
                                    <input type="checkbox" name="has_custom_theme" value="1" {{ $pkg->has_custom_theme ? 'checked' : '' }} class="accent-deepsage">
                                    <span>Custom Tema Warna</span>
                                </label>
                            </div>
                        </div>

                        <!-- Fitur Textarea -->
                        <div style="margin-bottom:var(--ax-space-3);">
                            <label style="display:block; font-size:10px; color:var(--ax-text-muted); text-transform:uppercase; font-weight:600; margin-bottom:4px;">Fitur Promosi (1 baris / fitur)</label>
                            <textarea name="features_text" rows="4" style="width:100%; padding:8px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-sm); font-size:11px; line-height:1.5; background:var(--ax-surface);">{{ is_array($pkg->features) ? implode("\n", $pkg->features) : '' }}</textarea>
                        </div>
                    </div>

                    <div class="ax-card__footer" style="justify-content:space-between;">
                        <span class="ax-badge {{ $pkg->is_active ? 'ax-badge--success' : 'ax-badge--neutral' }} ax-badge--pill">
                            {{ $pkg->is_active ? 'Tersedia di Web' : 'Disembunyikan' }}
                        </span>
                        <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">
                            Simpan Perubahan
                        </button>
                    </div>
                </form>
            </section>
        @endforeach
    </div>
</div>
@endsection