@extends('layouts.app')

@section('title', 'Langkah 1: Data Perusahaan - FIN-ANALYSIS PRO')

@section('content')
<div class="max-w-3xl mx-auto">
    <!-- Header -->
    <div class="mb-8 text-center">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Data Perusahaan
        </h1>
        <p class="text-gray-600 dark:text-gray-400">
            Lengkapi informasi perusahaan untuk memulai analisis keuangan
        </p>
    </div>

    <!-- Step Indicator (Mobile Friendly) -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-primary-600 dark:text-primary-400">
                <div class="step-circle step-circle-active">1</div>
                <span class="ml-2 font-medium hidden sm:inline">Data Perusahaan</span>
            </div>
            <div class="flex-1 mx-4 h-0.5 bg-gray-300 dark:bg-gray-700"></div>
            <div class="flex items-center text-gray-400 dark:text-gray-600">
                <div class="step-circle step-circle-inactive">2</div>
                <span class="ml-2 font-medium hidden sm:inline">Data Keuangan</span>
            </div>
            <div class="flex-1 mx-4 h-0.5 bg-gray-300 dark:bg-gray-700"></div>
            <div class="flex items-center text-gray-400 dark:text-gray-600">
                <div class="step-circle step-circle-inactive">3</div>
                <span class="ml-2 font-medium hidden sm:inline">Hasil Analisis</span>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="card">
        <form action="{{ route('analysis.step1.save') }}" method="POST" id="companyForm">
            @csrf

            <!-- Periode dan Mata Uang -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <!-- Periode -->
                <div class="form-group">
                    <label for="period" class="label-field required">
                        Periode Laporan
                    </label>
                    <div class="relative">
                        <input type="text" 
                               id="period" 
                               name="period" 
                               class="input-field @error('period') input-error @enderror"
                               placeholder="Januari 2024"
                               value="{{ old('period', $companyData['period'] ?? '') }}"
                               required>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <i class="fas fa-calendar-alt text-gray-400"></i>
                        </div>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">
                        Contoh: Januari 2024, Februari 2024, dll.
                    </p>
                    @error('period')
                        <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Mata Uang -->
                <div class="form-group">
                    <label for="currency" class="label-field required">
                        Mata Uang
                    </label>
                    <select id="currency" 
                            name="currency" 
                            class="input-field @error('currency') input-error @enderror"
                            required>
                        <option value="">Pilih Mata Uang</option>
                        <option value="IDR" {{ old('currency', $companyData['currency'] ?? '') == 'IDR' ? 'selected' : '' }}>IDR - Rupiah Indonesia</option>
                        <option value="USD" {{ old('currency', $companyData['currency'] ?? '') == 'USD' ? 'selected' : '' }}>USD - Dolar Amerika</option>
                        <option value="EUR" {{ old('currency', $companyData['currency'] ?? '') == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                        <option value="GBP" {{ old('currency', $companyData['currency'] ?? '') == 'GBP' ? 'selected' : '' }}>GBP - Pound Sterling</option>
                        <option value="SGD" {{ old('currency', $companyData['currency'] ?? '') == 'SGD' ? 'selected' : '' }}>SGD - Dolar Singapura</option>
                        <option value="MYR" {{ old('currency', $companyData['currency'] ?? '') == 'MYR' ? 'selected' : '' }}>MYR - Ringgit Malaysia</option>
                        <option value="JPY" {{ old('currency', $companyData['currency'] ?? '') == 'JPY' ? 'selected' : '' }}>JPY - Yen Jepang</option>
                        <option value="CNY" {{ old('currency', $companyData['currency'] ?? '') == 'CNY' ? 'selected' : '' }}>CNY - Yuan China</option>
                    </select>
                    @error('currency')
                        <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Nama Perusahaan -->
            <div class="form-group mb-6">
                <label for="company_name" class="label-field required">
                    Nama Perusahaan
                </label>
                <input type="text" 
                       id="company_name" 
                       name="company_name" 
                       class="input-field @error('company_name') input-error @enderror"
                       placeholder="PT. Contoh Perusahaan"
                       value="{{ old('company_name', $companyData['company_name'] ?? '') }}"
                       required>
                @error('company_name')
                    <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Bidang Usaha -->
            <div class="form-group mb-6">
                <label for="business_field" class="label-field required">
                    Bidang Usaha
                </label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                    @php
                        $fields = ['Makanan', 'Fashion', 'Kerajinan', 'Jasa', 'Pariwisata', 'Lainnya'];
                        $selectedField = old('business_field', $companyData['business_field'] ?? '');
                    @endphp
                    
                    @foreach($fields as $field)
                        <label class="relative flex items-center p-3 border rounded-lg cursor-pointer transition-all
                                      {{ $selectedField == $field 
                                         ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' 
                                         : 'border-gray-300 hover:border-gray-400 dark:border-gray-700' }}">
                            <input type="radio" 
                                   name="business_field" 
                                   value="{{ $field }}"
                                   class="w-4 h-4 text-primary-600 focus:ring-primary-500"
                                   {{ $selectedField == $field ? 'checked' : '' }}
                                   required>
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                                {{ $field }}
                            </span>
                        </label>
                    @endforeach
                </div>
                @error('business_field')
                    <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Bidang Usaha Lainnya (kondisional) -->
            <div class="form-group mb-6 hidden" id="otherFieldContainer">
                <label for="other_field" class="label-field required">
                    Sebutkan Bidang Usaha
                </label>
                <input type="text" 
                       id="other_field" 
                       name="other_field" 
                       class="input-field @error('other_field') input-error @enderror"
                       placeholder="Contoh: Teknologi, Pendidikan, dll."
                       value="{{ old('other_field', $companyData['other_field'] ?? '') }}">
                @error('other_field')
                    <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Informasi Tambahan -->
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300">
                            Informasi
                        </h3>
                        <div class="mt-2 text-sm text-blue-700 dark:text-blue-400">
                            <p>Data perusahaan ini akan digunakan untuk analisis Altman Z-Score. Pastikan data yang dimasukkan akurat dan sesuai dengan laporan keuangan perusahaan.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tombol Aksi -->
            <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
                <a href="{{ route('home') }}" class="btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Batal
                </a>
                <button type="submit" class="btn-primary">
                    Lanjut ke Data Keuangan
                    <i class="fas fa-arrow-right ml-2"></i>
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const businessFieldRadios = document.querySelectorAll('input[name="business_field"]');
    const otherFieldContainer = document.getElementById('otherFieldContainer');
    const otherFieldInput = document.getElementById('other_field');

    function toggleOtherField() {
        const selectedField = document.querySelector('input[name="business_field"]:checked');
        if (selectedField && selectedField.value === 'Lainnya') {
            otherFieldContainer.classList.remove('hidden');
            otherFieldInput.setAttribute('required', 'required');
        } else {
            otherFieldContainer.classList.add('hidden');
            otherFieldInput.removeAttribute('required');
            otherFieldInput.value = ''; // Clear value
        }
    }

    // Initial check
    toggleOtherField();

    // Add event listeners
    businessFieldRadios.forEach(radio => {
        radio.addEventListener('change', toggleOtherField);
    });

    // Auto-format period input (optional)
    const periodInput = document.getElementById('period');
    if (periodInput) {
        periodInput.addEventListener('blur', function() {
            let value = this.value.trim();
            // Simple validation for month-year format
            const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 
                           'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
            
            // Check if input contains month and year
            const hasMonth = months.some(month => value.toLowerCase().includes(month.toLowerCase()));
            
            if (!hasMonth && value.length > 0) {
                // Show warning but don't prevent submission
                showNotification('Format periode sebaiknya: Bulan Tahun (contoh: Januari 2024)', 'warning');
            }
        });
    }
});

// Simple notification function
function showNotification(message, type = 'info') {
    // You can implement this or use the one from app.blade.php
    if (window.showNotification) {
        window.showNotification(message, type);
    } else {
        alert(message);
    }
}
</script>
@endpush