@extends('layouts.app')

@section('title', 'Edit Akun')

@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">Edit Akun</h2>
            <a href="{{ route('accounts.index', ['brand_id' => $account->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.update', $account->id) }}" method="POST" class="space-y-4">
            @csrf
            @method('PUT')

            <!-- 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', $account->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', $account->category) == 'gmail' ? 'selected' : '' }}>Gmail</option>
                    <option value="ecommerce" {{ old('category', $account->category) == 'ecommerce' ? 'selected' : '' }}>E-Commerce</option>
                    <option value="sosmed" {{ old('category', $account->category) == 'sosmed' ? 'selected' : '' }}>Sosial Media</option>
                    <option value="iklan" {{ old('category', $account->category) == 'iklan' ? 'selected' : '' }}>Iklan</option>
                    <option value="lainnya" {{ old('category', $account->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', $account->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', $account->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', $account->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', $account->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', $account->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', $account->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', $account->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', $account->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', $account->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', $account->catatan) }}</textarea>
            </div>

            <!-- Submit Buttons -->
            <div class="flex justify-end gap-4 pt-4">
                <a href="{{ route('accounts.index', ['brand_id' => $account->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">
                    Update
                </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 and CLEAR their values
        allFields.forEach(field => {
            const fieldDiv = document.getElementById(`field-${field}`);
            const fieldInput = document.getElementById(field);
            
            if (fieldDiv && fieldInput) {
                fieldDiv.classList.add('hidden');
                fieldInput.removeAttribute('required');
                
                // PENTING: Clear value jika field tidak digunakan untuk kategori ini
                if (!category || !categoryFields[category] || !categoryFields[category].includes(field)) {
                    fieldInput.value = '';
                }
            }
        });
        
        // 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
    document.addEventListener('DOMContentLoaded', function() {
        updateFields();
    });
</script>
@endpush
@endsection