@extends('layouts.admin')

@section('title', 'Master Produk')
@section('page_title', 'Master Produk')

@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;">Master Produk</h1>
                <p class="ax-page-head__subtitle">Kelola katalog produk, layanan custom VIP, add-on video teaser, domain, dan ekstra revisi.</p>
            </div>
            <div class="ax-page-head__actions">
                <button type="button" onclick="document.getElementById('newProductModal').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 Produk Baru</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Alert Messages -->
    @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
    @if(session('error'))
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(220,38,38,0.12); border:1px solid #dc2626; border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:#dc2626; display:flex; align-items:center; gap:8px;">
            <i data-lucide="alert-circle" style="width:16px;height:16px;"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <!-- Modal Form Tambah Produk -->
    <div id="newProductModal" 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 Katalog</span>
                    <h3 class="ax-card__title">Tambah Produk / Layanan Baru</h3>
                </div>
            </div>
            <div class="ax-card__body">
                <form action="{{ route('admin.products.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 SKU</label>
                            <input type="text" name="sku" required placeholder="misal: PROD-VIDEO-TEASER" 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 Produk / Layanan</label>
                            <input type="text" name="name" required placeholder="misal: Video Teaser Instagram" 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;">Satuan (Unit)</label>
                            <input type="text" name="unit" required value="paket" placeholder="paket / video / slot / pcs" 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 Standar (Rp)</label>
                            <input type="number" name="price" required placeholder="150000" 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;">Deskripsi Produk</label>
                            <input type="text" name="description" placeholder="Penjelasan detail manfaat produk..." 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:flex; align-items:center; gap:8px; font-size:var(--ax-text-xs); font-weight:600; cursor:pointer;">
                                <input type="checkbox" name="is_active" value="1" checked style="width:16px;height:16px;">
                                <span>Produk Aktif (Dapat Dipilih di Invoice)</span>
                            </label>
                        </div>
                    </div>
                    <div style="display:flex; justify-content:flex-end; gap:var(--ax-space-2);">
                        <button type="button" onclick="document.getElementById('newProductModal').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 Produk</button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <!-- Table Produk -->
    <section class="ax-card">
        <div class="ax-card__header">
            <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Daftar Item</span>
                <h3 class="ax-card__title">Katalog Master Produk &amp; Layanan ({{ $products->total() }})</h3>
            </div>
        </div>
        <div class="ax-card__body" style="padding:0;">
            <div style="overflow-x:auto;">
                <table style="width:100%; border-collapse:collapse; font-size:var(--ax-text-xs);">
                    <thead>
                        <tr style="border-bottom:1px solid var(--ax-border); background:var(--ax-surface-subtle); text-align:left;">
                            <th style="padding:12px 16px;">SKU</th>
                            <th style="padding:12px 16px;">Nama Produk</th>
                            <th style="padding:12px 16px;">Deskripsi</th>
                            <th style="padding:12px 16px;">Satuan</th>
                            <th style="padding:12px 16px; text-align:right;">Harga</th>
                            <th style="padding:12px 16px; text-align:center;">Status</th>
                            <th style="padding:12px 16px; text-align:center;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $p)
                            <tr style="border-bottom:1px solid var(--ax-border);">
                                <td style="padding:12px 16px; font-family:var(--ax-font-mono); font-weight:700;">{{ $p->sku }}</td>
                                <td style="padding:12px 16px; font-weight:600; color:var(--ax-text-strong);">{{ $p->name }}</td>
                                <td style="padding:12px 16px; color:var(--ax-text-muted);">{{ Str::limit($p->description, 60) }}</td>
                                <td style="padding:12px 16px;">{{ $p->unit }}</td>
                                <td style="padding:12px 16px; text-align:right; font-weight:700; color:var(--jk-deepsage);">
                                    Rp {{ number_format($p->price, 0, ',', '.') }}
                                </td>
                                <td style="padding:12px 16px; text-align:center;">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $p->is_active ? 'bg-emerald-100 text-emerald-800' : 'bg-gray-100 text-gray-800' }}">
                                        {{ $p->is_active ? 'Aktif' : 'Nonaktif' }}
                                    </span>
                                </td>
                                <td style="padding:12px 16px; text-align:center;">
                                    <div style="display:inline-flex; gap:6px;">
                                        <button type="button" onclick="editProduct({{ json_encode($p) }})" class="ax-btn ax-btn--secondary ax-btn--sm" style="padding:4px 8px;">
                                            <i data-lucide="edit-3" style="width:12px;height:12px;"></i>
                                        </button>
                                        <form action="{{ route('admin.products.delete', $p->id) }}" method="POST" onsubmit="return confirm('Hapus produk {{ $p->name }}?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="ax-btn ax-btn--secondary ax-btn--sm" style="padding:4px 8px; color:#dc2626;">
                                                <i data-lucide="trash-2" style="width:12px;height:12px;"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" style="padding:32px; text-align:center; color:var(--ax-text-muted);">
                                    Belum ada produk master. Tambahkan produk pertama Anda di atas.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($products->hasPages())
                <div style="padding:16px;">{{ $products->links() }}</div>
            @endif
        </div>
    </section>

    <!-- Modal Edit Produk -->
    <div id="editProductModal" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:16px;">
        <div style="background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:var(--ax-radius-lg); max-width:600px; width:100%; padding:24px; box-shadow:0 20px 25px -5px rgba(0,0,0,0.2);">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
                <h3 style="margin:0; font-size:var(--ax-text-md); font-weight:700;">Edit Produk Master</h3>
                <button type="button" onclick="closeEditProductModal()" style="background:none; border:none; cursor:pointer; color:var(--ax-text-muted); padding:4px;">
                    <i data-lucide="x" style="width:18px;height:18px;"></i>
                </button>
            </div>
            <form id="editProductForm" method="POST" action="{{ route('admin.products') }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_product_id">
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;">
                    <div>
                        <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">SKU</label>
                        <input type="text" name="sku" id="edit_sku" required style="width:100%; padding:8px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; font-family:var(--ax-font-mono);">
                    </div>
                    <div>
                        <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Nama Produk</label>
                        <input type="text" name="name" id="edit_name" required style="width:100%; padding:8px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                    </div>
                    <div>
                        <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Satuan</label>
                        <input type="text" name="unit" id="edit_unit" required style="width:100%; padding:8px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                    </div>
                    <div>
                        <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Harga (Rp)</label>
                        <input type="number" name="price" id="edit_price" required style="width:100%; padding:8px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                    </div>
                    <div style="grid-column:1 / -1;">
                        <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Deskripsi</label>
                        <input type="text" name="description" id="edit_description" style="width:100%; padding:8px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                    </div>
                    <div style="grid-column:1 / -1;">
                        <label style="display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; cursor:pointer;">
                            <input type="checkbox" name="is_active" id="edit_is_active" value="1" style="width:16px;height:16px;">
                            <span>Produk Aktif</span>
                        </label>
                    </div>
                </div>
                <div style="display:flex; justify-content:flex-end; gap:8px;">
                    <button type="button" onclick="closeEditProductModal()" class="ax-btn ax-btn--secondary ax-btn--sm">Batal</button>
                    <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm">Perbarui Produk</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const productUpdateRouteTemplate = "{{ route('admin.products.update', ['id' => '___ID___']) }}";

function editProduct(p) {
    const modal = document.getElementById('editProductModal');
    const form = document.getElementById('editProductForm');
    document.getElementById('edit_product_id').value = p.id;
    form.action = productUpdateRouteTemplate.replace('___ID___', p.id);
    document.getElementById('edit_sku').value = p.sku;
    document.getElementById('edit_name').value = p.name;
    document.getElementById('edit_unit').value = p.unit;
    document.getElementById('edit_price').value = parseInt(p.price);
    document.getElementById('edit_description').value = p.description || '';
    document.getElementById('edit_is_active').checked = !!p.is_active;
    modal.style.display = 'flex';
    if (window.lucide && typeof lucide.createIcons === 'function') {
        lucide.createIcons();
    }
}

function closeEditProductModal() {
    const modal = document.getElementById('editProductModal');
    if (modal) {
        modal.style.display = 'none';
    }
}

// Tutup modal jika klik di luar area dialog (backdrop)
document.addEventListener('click', function(e) {
    const modal = document.getElementById('editProductModal');
    if (modal && e.target === modal) {
        closeEditProductModal();
    }
});
</script>
@endpush