@extends('layouts.admin')

@section('page-title', isset($brand) ? 'Edit Brand: ' . $brand->name : 'Tambah Brand Baru')

@section('header-actions')
    <a href="{{ route('admin.brands.index') }}" class="btn-admin-ghost">← Kembali</a>
@endsection

@section('content')
<div class="admin-form-wrap">
    <form method="POST"
          action="{{ isset($brand) ? route('admin.brands.update', $brand) : route('admin.brands.store') }}"
          enctype="multipart/form-data">
        @csrf
        @if (isset($brand)) @method('PUT') @endif

        <div class="form-grid">
            {{-- Left Column --}}
            <div class="form-col">
                <div class="form-card">
                    <h3 class="form-card-title">Informasi Dasar</h3>

                    <div class="form-group">
                        <label class="form-label">Nama Brand <span class="required">*</span></label>
                        <input type="text" name="name" class="form-input"
                               value="{{ old('name', $brand->name ?? '') }}" required
                               oninput="generateSlug(this.value)">
                    </div>

                    <div class="form-group">
                        <label class="form-label">Slug (URL)</label>
                        <div class="input-prefix">
                            <span class="prefix">/</span>
                            <input type="text" name="slug" id="slug" class="form-input"
                                   value="{{ old('slug', $brand->slug ?? '') }}"
                                   placeholder="otomatis dari nama">
                        </div>
                        <p class="form-hint">URL: <code>{{ config('app.url') }}/<span id="slug-preview">{{ $brand->slug ?? '...' }}</span></code></p>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Tagline</label>
                        <input type="text" name="tagline" class="form-input"
                               value="{{ old('tagline', $brand->tagline ?? '') }}"
                               placeholder="Satu kalimat singkat">
                    </div>

                    <div class="form-group">
                        <label class="form-label">Deskripsi</label>
                        <textarea name="description" class="form-textarea" rows="4"
                                  placeholder="Deskripsi brand untuk portal card">{{ old('description', $brand->description ?? '') }}</textarea>
                    </div>
                </div>

                <div class="form-card">
                    <h3 class="form-card-title">SEO</h3>
                    <div class="form-group">
                        <label class="form-label">Meta Title</label>
                        <input type="text" name="meta_title" class="form-input"
                               value="{{ old('meta_title', $brand->meta_title ?? '') }}"
                               maxlength="160">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Meta Description</label>
                        <textarea name="meta_description" class="form-textarea" rows="3"
                                  maxlength="320">{{ old('meta_description', $brand->meta_description ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Right Column --}}
            <div class="form-col form-col--side">
                <div class="form-card">
                    <h3 class="form-card-title">Status & Tampilan</h3>

                    <div class="form-group">
                        <label class="form-label">Status <span class="required">*</span></label>
                        <select name="status" class="form-select">
                            @foreach (['active' => 'Aktif', 'coming_soon' => 'Segera Hadir', 'inactive' => 'Nonaktif'] as $val => $label)
                                <option value="{{ $val }}" {{ old('status', $brand->status ?? '') === $val ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label form-label--checkbox">
                            <input type="checkbox" name="show_on_portal" value="1"
                                   {{ old('show_on_portal', $brand->show_on_portal ?? true) ? 'checked' : '' }}>
                            Tampilkan di Portal
                        </label>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Urutan Tampil</label>
                        <input type="number" name="sort_order" class="form-input"
                               value="{{ old('sort_order', $brand->sort_order ?? 0) }}" min="0">
                    </div>
                </div>

                <div class="form-card">
                    <h3 class="form-card-title">Warna Brand</h3>
                    <div class="form-group">
                        <label class="form-label">Warna Utama</label>
                        <div class="color-input-wrap">
                            <input type="color" name="primary_color" class="form-color"
                                   value="{{ old('primary_color', $brand->primary_color ?? '#1E6FD9') }}">
                            <input type="text" class="form-input form-input--color-text"
                                   value="{{ old('primary_color', $brand->primary_color ?? '#1E6FD9') }}"
                                   oninput="syncColor(this, 'primary_color')">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Warna Aksen</label>
                        <div class="color-input-wrap">
                            <input type="color" name="accent_color" class="form-color"
                                   value="{{ old('accent_color', $brand->accent_color ?? '#00C2A8') }}">
                            <input type="text" class="form-input form-input--color-text"
                                   value="{{ old('accent_color', $brand->accent_color ?? '#00C2A8') }}"
                                   oninput="syncColor(this, 'accent_color')">
                        </div>
                    </div>
                </div>

                <div class="form-card">
                    <h3 class="form-card-title">Logo</h3>
                    @if (isset($brand) && $brand->logo_url)
                        <img src="{{ $brand->logo_url }}" class="logo-preview" alt="Logo saat ini">
                    @endif
                    <div class="form-group">
                        <label class="form-label">Upload Logo</label>
                        <input type="file" name="logo" class="form-file" accept="image/*">
                        <p class="form-hint">Format: JPG, PNG, SVG. Maks 2MB.</p>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-admin-primary btn-full">
                        {{ isset($brand) ? 'Simpan Perubahan' : 'Buat Brand' }}
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function generateSlug(name) {
    const slug = name.toLowerCase()
        .replace(/[^\w\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .trim();
    const el = document.getElementById('slug');
    if (!el.dataset.manual) el.value = slug;
    document.getElementById('slug-preview').textContent = slug || '...';
}
document.getElementById('slug').addEventListener('input', function () {
    this.dataset.manual = '1';
    document.getElementById('slug-preview').textContent = this.value || '...';
});
function syncColor(textInput, name) {
    const colorInput = document.querySelector(`input[type=color][name=${name}]`);
    if (colorInput) colorInput.value = textInput.value;
}
</script>
@endpush