@extends('admin.layout')

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

@section('content')
<!-- Breadcrumb -->
<div style="margin-bottom: 1.5rem;">
    <a href="{{ route('admin.brands.show', [$categorySlug, $brand->slug]) }}" style="color: var(--admin-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
        Kembali ke {{ $brand->name }}
    </a>
</div>

@if(session('success'))
<div class="alert alert-success" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem;">
    {{ session('success') }}
</div>
@endif

<form action="{{ route('admin.brands.update', [$categorySlug, $brand->slug]) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
        <!-- Left Column - Image -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Gambar Brand</h2>
            </div>
            <div class="card-body">
                <!-- Current Image Preview -->
                <div style="margin-bottom: 1.5rem;">
                    <div id="imagePreview" style="width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 12px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto;">
                        @if($brand->image)
                        <img src="{{ $brand->image_url }}" alt="{{ $brand->name }}" style="width: 100%; height: 100%; object-fit: cover;">
                        @else
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="color: var(--admin-text-secondary);">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
                            <polyline points="21 15 16 10 5 21"></polyline>
                        </svg>
                        @endif
                    </div>
                </div>

                <!-- Upload New Image -->
                <div class="form-group">
                    <label class="form-label">Upload Gambar Baru</label>
                    <input type="file" name="image" id="imageInput" accept="image/*" class="form-input" onchange="previewImage(this)">
                    <small style="color: var(--admin-text-secondary); display: block; margin-top: 0.5rem;">Format: JPG, PNG, GIF, WEBP. Max: 2MB</small>
                </div>

                @if($brand->image)
                <!-- Delete Image Button -->
                <div style="margin-top: 1rem;">
                    <button type="button" onclick="confirmDeleteImage()" class="btn btn-danger" style="width: 100%;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
                        </svg>
                        Hapus Gambar
                    </button>
                </div>
                @endif
            </div>
        </div>

        <!-- Right Column - Details -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Detail Brand</h2>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label class="form-label">Nama Brand</label>
                    <input type="text" class="form-input" value="{{ $brand->name }}" disabled style="background: rgba(0,0,0,0.05);">
                    <small style="color: var(--admin-text-secondary);">Nama brand dari Digiflazz (tidak bisa diubah)</small>
                </div>

                <div class="form-group">
                    <label class="form-label">Kategori</label>
                    <input type="text" class="form-input" value="{{ ucwords($brand->category) }}" disabled style="background: rgba(0,0,0,0.05);">
                </div>

                <div class="form-group">
                    <label class="form-label">Developer / Publisher</label>
                    <input type="text" name="developer" class="form-input" value="{{ old('developer', $brand->developer) }}" placeholder="Contoh: Moonton, Garena, Tencent">
                    @error('developer')
                    <small style="color: #ef4444;">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Deskripsi</label>
                    <textarea name="description" class="form-input" rows="4" placeholder="Deskripsi singkat tentang brand/game ini...">{{ old('description', $brand->description) }}</textarea>
                    @error('description')
                    <small style="color: #ef4444;">{{ $message }}</small>
                    @enderror
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                    <label class="checkbox-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" name="is_popular" value="1" {{ $brand->is_popular ? 'checked' : '' }} style="width: 18px; height: 18px;">
                        <span>Brand Populer</span>
                    </label>

                    <label class="checkbox-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" name="is_active" value="1" {{ $brand->is_active ? 'checked' : '' }} style="width: 18px; height: 18px;">
                        <span>Aktif</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Submit Button -->
    <div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
        <a href="{{ route('admin.brands.show', [$categorySlug, $brand->slug]) }}" class="btn btn-secondary">Batal</a>
        <button type="submit" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"></path>
                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                <polyline points="7 3 7 8 15 8"></polyline>
            </svg>
            Simpan Perubahan
        </button>
    </div>
</form>

<!-- Delete Image Form (hidden) -->
<form id="deleteImageForm" action="{{ route('admin.brands.delete-image', [$categorySlug, $brand->slug]) }}" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<script>
function previewImage(input) {
    const preview = document.getElementById('imagePreview');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.innerHTML = `<img src="${e.target.result}" alt="Preview" style="width: 100%; height: 100%; object-fit: cover;">`;
        }
        reader.readAsDataURL(input.files[0]);
    }
}

function confirmDeleteImage() {
    if (confirm('Apakah Anda yakin ingin menghapus gambar ini?')) {
        document.getElementById('deleteImageForm').submit();
    }
}
</script>

<style>
    .form-group {
        margin-bottom: 1rem;
    }
    .form-label {
        display: block;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--admin-text-primary);
    }
    .form-input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 8px;
        font-size: 0.95rem;
        background: var(--admin-card);
        color: var(--admin-text-primary);
    }
    .form-input:focus {
        outline: none;
        border-color: var(--admin-primary);
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    }
    .btn-danger {
        background: #ef4444;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .btn-danger:hover {
        background: #dc2626;
    }
</style>
@endsection