@extends('layouts.admin')

@section('title', 'Tambah Mitra')

@section('content')
<div class="mb-8">
    <a href="{{ route('admin.partners.index') }}" class="inline-flex items-center gap-2 text-white/40 hover:text-white/60 text-sm transition-colors mb-4">
        <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="M15 19l-7-7 7-7"/></svg>
        Kembali ke Daftar Mitra
    </a>
    <h1 class="admin-page-title">Tambah Mitra Baru</h1>
    <p class="admin-page-subtitle">Tambahkan logo dan informasi mitra</p>
</div>

<form action="{{ route('admin.partners.store') }}" method="POST" enctype="multipart/form-data" class="max-w-2xl">
    @csrf

    <div class="admin-card p-6 space-y-6">
        {{-- Nama Mitra --}}
        <div>
            <label for="name" class="admin-label">Nama Mitra <span class="text-red-400">*</span></label>
            <input type="text" name="name" id="name" value="{{ old('name') }}" required
                   class="admin-input" placeholder="Contoh: PT Teknologi Indonesia">
            @error('name') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Logo --}}
        <div>
            <label for="logo" class="admin-label">Logo Mitra <span class="text-red-400">*</span></label>
            <div class="mt-1">
                <div id="logo-preview" class="hidden w-32 h-24 bg-white/5 rounded-xl border-2 border-dashed border-white/10 flex items-center justify-center overflow-hidden mb-3">
                    <img id="logo-preview-img" src="" alt="Preview" class="max-w-full max-h-full object-contain p-2">
                </div>
                <input type="file" name="logo" id="logo" accept="image/*" required
                       class="admin-input" onchange="previewLogo(this)">
                <p class="text-white/30 text-xs mt-1">Format: PNG, JPG, SVG, WebP. Maksimal 2MB. Disarankan logo dengan latar transparan.</p>
            </div>
            @error('logo') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- URL --}}
        <div>
            <label for="url" class="admin-label">Link Website (Opsional)</label>
            <input type="url" name="url" id="url" value="{{ old('url') }}"
                   class="admin-input" placeholder="https://www.contoh.com">
            @error('url') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Sort Order --}}
        <div>
            <label for="sort_order" class="admin-label">Urutan Tampil</label>
            <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                   class="admin-input w-32" placeholder="0">
            <p class="text-white/30 text-xs mt-1">Angka lebih kecil tampil lebih dulu</p>
        </div>

        {{-- Status --}}
        <div class="flex items-center gap-3">
            <input type="checkbox" name="is_active" id="is_active" value="1" checked
                   class="w-4 h-4 rounded bg-white/5 border-white/20 text-accent focus:ring-accent/50">
            <label for="is_active" class="text-white/60 text-sm">Aktifkan (tampil di website)</label>
        </div>
    </div>

    <div class="flex items-center gap-3 mt-6">
        <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>
            Simpan Mitra
        </button>
        <a href="{{ route('admin.partners.index') }}" class="admin-btn admin-btn-secondary">Batal</a>
    </div>
</form>

<script>
function previewLogo(input) {
    const preview = document.getElementById('logo-preview');
    const previewImg = document.getElementById('logo-preview-img');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            preview.classList.remove('hidden');
            preview.classList.add('flex');
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection