@extends('admin.layout')

@section('title', 'Konfigurasi Brand Input')

@section('content')
<div class="p-6">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Konfigurasi Input Brand</h1>
        <p class="mt-1 text-sm text-gray-600">Kelola field input yang diperlukan untuk setiap brand</p>
    </div>

    @if(session('success'))
    <div class="mb-6 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
        </svg>
        {{ session('success') }}
    </div>
    @endif

    <!-- Filter -->
    <div class="mb-6 bg-white rounded-lg shadow-md p-4">
        <form action="{{ route('admin.config.brand-inputs') }}" method="GET" class="flex gap-4">
            <select name="category" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0C951E] focus:border-transparent">
                <option value="">Semua Kategori</option>
                @foreach($categories ?? [] as $cat)
                <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                    {{ $cat->name }}
                </option>
                @endforeach
            </select>
            <button type="submit" class="px-4 py-2 bg-[#0C951E] text-white rounded-lg hover:bg-green-700 transition-colors">
                Filter
            </button>
            @if(request('category'))
            <a href="{{ route('admin.config.brand-inputs') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                Reset
            </a>
            @endif
        </form>
    </div>

    <!-- Brand Input Configs -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        @forelse($brands ?? [] as $brand)
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6 border-b border-gray-200 bg-gray-50">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">{{ $brand->name }}</h3>
                        <p class="text-sm text-gray-500">{{ $brand->category->name ?? '-' }}</p>
                    </div>
                    <span class="px-3 py-1 {{ $brand->input_config ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }} text-xs font-semibold rounded-full">
                        {{ $brand->input_config ? 'Terkonfigurasi' : 'Belum Dikonfigurasi' }}
                    </span>
                </div>
            </div>

            <div class="p-6">
                <form action="{{ route('admin.config.brand-inputs.update', $brand->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4">
                        <!-- Primary Field (always required) -->
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-blue-900 mb-3">Field Utama</h4>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Label Field Utama <span class="text-red-500">*</span>
                                </label>
                                <input 
                                    type="text" 
                                    name="primary_label" 
                                    value="{{ old('primary_label', $brand->input_config->primary_label ?? 'User ID') }}"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0C951E] focus:border-transparent text-sm"
                                    placeholder="Contoh: User ID, Nomor HP, Email"
                                    required
                                >
                            </div>

                            <div class="mt-3">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Placeholder
                                </label>
                                <input 
                                    type="text" 
                                    name="primary_placeholder" 
                                    value="{{ old('primary_placeholder', $brand->input_config->primary_placeholder ?? 'Masukkan User ID') }}"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0C951E] focus:border-transparent text-sm"
                                    placeholder="Placeholder untuk field utama"
                                >
                            </div>
                        </div>

                        <!-- Secondary Field (optional) -->
                        <div>
                            <label class="flex items-center mb-3">
                                <input 
                                    type="checkbox" 
                                    name="requires_secondary" 
                                    value="1"
                                    class="h-4 w-4 text-[#0C951E] focus:ring-[#0C951E] border-gray-300 rounded"
                                    {{ old('requires_secondary', $brand->input_config->requires_secondary ?? false) ? 'checked' : '' }}
                                    onchange="toggleSecondaryFields(this)"
                                >
                                <span class="ml-2 text-sm font-medium text-gray-700">Memerlukan field kedua</span>
                            </label>

                            <div id="secondary-fields-{{ $brand->id }}" class="space-y-3 {{ (old('requires_secondary', $brand->input_config->requires_secondary ?? false)) ? '' : 'hidden' }}">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Label Field Kedua
                                    </label>
                                    <input 
                                        type="text" 
                                        name="secondary_label" 
                                        value="{{ old('secondary_label', $brand->input_config->secondary_label ?? 'Zone ID') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0C951E] focus:border-transparent text-sm"
                                        placeholder="Contoh: Zone ID, Server"
                                    >
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Placeholder
                                    </label>
                                    <input 
                                        type="text" 
                                        name="secondary_placeholder" 
                                        value="{{ old('secondary_placeholder', $brand->input_config->secondary_placeholder ?? 'Masukkan Zone ID') }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0C951E] focus:border-transparent text-sm"
                                        placeholder="Placeholder untuk field kedua"
                                    >
                                </div>
                            </div>
                        </div>

                        <!-- Validation Options -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Tipe Validasi
                            </label>
                            <select 
                                name="validation_type" 
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0C951E] focus:border-transparent text-sm"
                            >
                                <option value="text" {{ old('validation_type', $brand->input_config->validation_type ?? 'text') == 'text' ? 'selected' : '' }}>Text</option>
                                <option value="numeric" {{ old('validation_type', $brand->input_config->validation_type ?? 'text') == 'numeric' ? 'selected' : '' }}>Numeric</option>
                                <option value="email" {{ old('validation_type', $brand->input_config->validation_type ?? 'text') == 'email' ? 'selected' : '' }}>Email</option>
                                <option value="phone" {{ old('validation_type', $brand->input_config->validation_type ?? 'text') == 'phone' ? 'selected' : '' }}>Phone</option>
                            </select>
                        </div>

                        <!-- Additional Info -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Informasi Tambahan
                            </label>
                            <textarea 
                                name="additional_info" 
                                rows="3"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0C951E] focus:border-transparent text-sm"
                                placeholder="Informasi tambahan untuk user (opsional)"
                            >{{ old('additional_info', $brand->input_config->additional_info ?? '') }}</textarea>
                        </div>
                    </div>

                    <div class="mt-6">
                        <button 
                            type="submit" 
                            class="w-full bg-[#0C951E] text-white px-4 py-3 rounded-lg hover:bg-green-700 transition-colors font-medium"
                        >
                            Simpan Konfigurasi
                        </button>
                    </div>
                </form>
            </div>
        </div>
        @empty
        <div class="col-span-2">
            <div class="bg-white rounded-lg shadow-md p-12 text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                </svg>
                <p class="text-gray-500">Belum ada brand untuk dikonfigurasi</p>
            </div>
        </div>
        @endforelse
    </div>
</div>

<script>
function toggleSecondaryFields(checkbox) {
    const brandId = checkbox.closest('form').querySelector('[id^="secondary-fields-"]').id.split('-').pop();
    const secondaryFields = document.getElementById('secondary-fields-' + brandId);
    
    if (checkbox.checked) {
        secondaryFields.classList.remove('hidden');
    } else {
        secondaryFields.classList.add('hidden');
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[name="requires_secondary"]').forEach(checkbox => {
        toggleSecondaryFields(checkbox);
    });
});
</script>
@endsection