@extends('layouts.admin')

@section('title', isset($product) ? 'Edit Produk' : 'Tambah Produk')
@section('page-title', isset($product) ? 'Edit Produk' : 'Tambah Produk Baru')
@section('breadcrumb')
<a href="{{ route('admin.products.index') }}">Produk</a>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<span class="current">{{ isset($product) ? 'Edit' : 'Tambah' }}</span>
@endsection

@section('content')
<div class="max-w-3xl">
    <form method="POST" action="{{ isset($product) ? route('admin.products.update', $product) : route('admin.products.store') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @if(isset($product)) @method('PUT') @endif

        <div class="admin-card">
            <div class="admin-card-body space-y-5">
                <div class="admin-section-title">
                    <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    Detail Produk
                </div>
                <div>
                    <label class="admin-label">Nama Produk *</label>
                    <input type="text" name="title" value="{{ old('title', $product->title ?? '') }}" required class="admin-input">
                    @error('title') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="admin-label">Kategori *</label>
                        <select name="category_id" required class="admin-select">
                            <option value="">Pilih Kategori</option>
                            @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id ?? '') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                        @error('category_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="admin-label">Brand</label>
                        <input type="text" name="brand" value="{{ old('brand', $product->brand ?? '') }}" placeholder="Contoh: Arduino" class="admin-input">
                    </div>
                </div>

                <div>
                    <label class="admin-label">Deskripsi Singkat *</label>
                    <textarea name="short_description" rows="2" required class="admin-textarea">{{ old('short_description', $product->short_description ?? '') }}</textarea>
                    @error('short_description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="admin-label">Deskripsi Lengkap *</label>
                    <textarea id="editor-content" name="description" rows="8" class="admin-textarea">{{ old('description', $product->description ?? '') }}</textarea>
                    @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-3 gap-5">
                    <div>
                        <label class="admin-label">Harga (Rp)</label>
                        <input type="number" name="price" value="{{ old('price', $product->price ?? '') }}" min="0" step="1000" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Harga Diskon (Rp)</label>
                        <input type="number" name="discount_price" value="{{ old('discount_price', $product->discount_price ?? '') }}" min="0" step="1000" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">No. WhatsApp</label>
                        <input type="text" name="whatsapp_number" value="{{ old('whatsapp_number', $product->whatsapp_number ?? '') }}" placeholder="6281234567890" class="admin-input">
                    </div>
                </div>

                <div>
                    <label class="admin-label">Cover Image</label>
                    @if(isset($product) && $product->cover_image)
                    <img src="{{ $product->cover_url }}" class="w-28 h-28 object-cover rounded-xl mb-2 border border-gray-200">
                    @endif
                    <input type="file" name="cover_image" accept="image/*" class="admin-input">
                </div>

                <div class="flex items-center gap-6">
                    <label class="admin-toggle">
                        <input type="hidden" name="is_published" value="0">
                        <input type="checkbox" name="is_published" value="1"
                               {{ old('is_published', $product->is_published ?? true) ? 'checked' : '' }}>
                        <span class="text-sm font-medium text-gray-700">Publikasikan</span>
                    </label>
                    <label class="admin-toggle">
                        <input type="hidden" name="is_featured" value="0">
                        <input type="checkbox" name="is_featured" value="1"
                               {{ old('is_featured', $product->is_featured ?? false) ? 'checked' : '' }}>
                        <span class="text-sm font-medium text-gray-700">Tampilkan di Beranda</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="admin-btn admin-btn-primary">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                {{ isset($product) ? 'Perbarui' : 'Simpan' }}
            </button>
            <a href="{{ route('admin.products.index') }}" class="admin-btn admin-btn-secondary">Batal</a>
        </div>
    </form>
</div>

@push('scripts')
<script>
    ClassicEditor.create(document.querySelector('#editor-content'), {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'undo', 'redo']
    }).catch(error => console.error(error));
</script>
@endpush
@endsection