@extends('layouts.app')

@section('title', 'Tambah Akun Baru')

@section('content')
<div class="container mx-auto p-4 max-w-2xl">
    <div class="bg-white p-8 rounded-2xl shadow-lg">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-3xl font-bold text-gray-900">Tambah Akun Baru</h2>
            <a href="{{ route('accounts.index', ['brand_id' => request('brand_id')]) }}" class="text-gray-600 hover:text-gray-900">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </a>
        </div>

        @if($errors->any())
            <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                <ul class="list-disc list-inside text-red-600">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('accounts.store') }}" method="POST" class="space-y-4">
            @csrf

            <!-- Brand Selection -->
            <div>
                <label for="brand_id" class="block text-sm font-medium text-gray-700 mb-1">Brand *</label>
                <select name="brand_id" id="brand_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Pilih Brand</option>
                    @foreach($brands as $brand)
                        <option value="{{ $brand->id }}" {{ old('brand_id', request('brand_id')) == $brand->id ? 'selected' : '' }}>
                            {{ $brand->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Category Selection -->
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Kategori *</label>
                <select name="category" id="category" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Pilih Kategori</option>
                    <option value="gmail" {{ old('category', request('category')) == 'gmail' ? 'selected' : '' }}>Gmail</option>
                    <option value="ecommerce" {{ old('category', request('category')) == 'ecommerce' ? 'selected' : '' }}>E-Commerce</option>
                    <option value="sosmed" {{ old('category', request('category')) == 'sosmed' ? 'selected' : '' }}>Sosial Media</option>
                    <option value="iklan" {{ old('category', request('category')) == 'iklan' ? 'selected' : '' }}>Iklan</option>
                    <option value="lainnya" {{ old('category', request('category')) == 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                </select>
            </div>

            <!-- Conditional Fields Based on Category -->
            <div id="field-tujuan" class="hidden">
                <label for="tujuan" class="block text-sm font-medium text-gray-700 mb-1">Tujuan</label>
                <input type="text" name="tujuan" id="tujuan" value="{{ old('tujuan') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div id="field-platform" class="hidden">
                <label for="platform" class="block text-sm font-medium text-gray-700 mb-1">Platform</label>
                <input type="text" name="platform" id="platform" value="{{ old('platform') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div id="field-nama_toko" class="hidden">
                <label for="nama_toko" class="block text-sm font-medium text-gray-700 mb-1">Nama Toko</label>
                <input type="text" name="nama_toko" id="nama_toko" value="{{ old('nama_toko') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div id="field-username" class="hidden">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
                <input type="text" name="username" id="username" value="{{ old('username') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div id="field-id_akun" class="hidden">
                <label for="id_akun" class="block text-sm font-medium text-gray-700 mb-1">ID Akun</label>
                <input type="text" name="id_akun" id="id_akun" value="{{ old('id_akun') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <!-- Common Fields -->
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email / Username Login</label>
                <input type="text" name="email" id="email" value="{{ old('email') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                <input type="text" name="password" id="password" value="{{ old('password') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label for="email_recovery" class="block text-sm font-medium text-gray-700 mb-1">Email Recovery</label>
                <input type="text" name="email_recovery" id="email_recovery" value="{{ old('email_recovery') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label for="phone_recovery" class="block text-sm font-medium text-gray-700 mb-1">HP Recovery</label>
                <input type="text" name="phone_recovery" id="phone_recovery" value="{{ old('phone_recovery') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label for="catatan" class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
                <textarea name="catatan" id="catatan" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">{{ old('catatan') }}</textarea>
            </div>

            <!-- Submit Buttons -->
            <div class="flex justify-end gap-4 pt-4">
                <a href="{{ route('accounts.index', ['brand_id' => request('brand_id')]) }}" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
                    Batal
                </a>
                <button type="submit" class="px-6 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Field visibility based on category
    const categoryFields = {
        gmail: ['tujuan'],
        ecommerce: ['platform', 'nama_toko'],
        sosmed: ['platform', 'username'],
        iklan: ['platform', 'id_akun'],
        lainnya: ['platform']
    };

    function updateFields() {
        const category = document.getElementById('category').value;
        const allFields = ['tujuan', 'platform', 'nama_toko', 'username', 'id_akun'];
        
        // Hide all conditional fields
        allFields.forEach(field => {
            const fieldDiv = document.getElementById(`field-${field}`);
            if (fieldDiv) {
                fieldDiv.classList.add('hidden');
                document.getElementById(field).removeAttribute('required');
            }
        });
        
        // Show relevant fields
        if (category && categoryFields[category]) {
            categoryFields[category].forEach(field => {
                const fieldDiv = document.getElementById(`field-${field}`);
                if (fieldDiv) {
                    fieldDiv.classList.remove('hidden');
                }
            });
        }
    }

    document.getElementById('category').addEventListener('change', updateFields);
    
    // Run on page load
    updateFields();
</script>
@endpush
@endsection