@props([
    'companyData' => [],
    'action' => null,
    'method' => 'POST',
    'showCancel' => true,
    'cancelUrl' => null,
    'submitText' => 'Simpan & Lanjutkan',
    'readonly' => false
])

<div class="company-form card">
    <div class="card-header">
        <h3 class="text-lg font-semibold">
            <i class="fas fa-building text-primary-600 mr-2"></i>
            Form Data Perusahaan
        </h3>
    </div>
    
    <form action="{{ $action }}" method="{{ $method === 'GET' ? 'GET' : 'POST' }}" 
          x-data="companyForm({{ json_encode($companyData) }})"
          @submit.prevent="submitForm">
        
        @csrf
        @if(!in_array($method, ['GET', 'POST']))
            @method($method)
        @endif
        
        <div class="space-y-6">
            <!-- Periode dan Mata Uang -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Periode -->
                <div class="form-group">
                    <label for="period" class="label-field required">
                        Periode Laporan
                    </label>
                    <div class="relative" x-data="{ month: '', year: '' }">
                        <div class="flex space-x-2">
                            <select x-model="month" 
                                    @change="$dispatch('input', month + ' ' + year)"
                                    class="input-field flex-1"
                                    :disabled="{{ $readonly ? 'true' : 'false' }}"
                                    {{ $readonly ? '' : 'required' }}>
                                <option value="">Bulan</option>
                                <option value="Januari">Januari</option>
                                <option value="Februari">Februari</option>
                                <option value="Maret">Maret</option>
                                <option value="April">April</option>
                                <option value="Mei">Mei</option>
                                <option value="Juni">Juni</option>
                                <option value="Juli">Juli</option>
                                <option value="Agustus">Agustus</option>
                                <option value="September">September</option>
                                <option value="Oktober">Oktober</option>
                                <option value="November">November</option>
                                <option value="Desember">Desember</option>
                            </select>
                            
                            <select x-model="year"
                                    @change="$dispatch('input', month + ' ' + year)"
                                    class="input-field w-32"
                                    :disabled="{{ $readonly ? 'true' : 'false' }}"
                                    {{ $readonly ? '' : 'required' }}>
                                <option value="">Tahun</option>
                                @for($y = date('Y'); $y >= date('Y') - 10; $y--)
                                    <option value="{{ $y }}">{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                        <input type="hidden" name="period" x-model="period" value="{{ $companyData['period'] ?? '' }}">
                    </div>
                    @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 name="currency" 
                            id="currency" 
                            class="input-field"
                            {{ $readonly ? 'disabled' : '' }}
                            required>
                        <option value="">Pilih Mata Uang</option>
                        @php
                            $currencies = [
                                'IDR' => 'Rupiah Indonesia',
                                'USD' => 'Dolar Amerika',
                                'EUR' => 'Euro',
                                'GBP' => 'Pound Sterling',
                                'SGD' => 'Dolar Singapura',
                                'MYR' => 'Ringgit Malaysia',
                                'JPY' => 'Yen Jepang',
                                'CNY' => 'Yuan China'
                            ];
                        @endphp
                        
                        @foreach($currencies as $code => $name)
                            <option value="{{ $code }}" 
                                {{ ($companyData['currency'] ?? '') == $code ? 'selected' : '' }}>
                                {{ $code }} - {{ $name }}
                            </option>
                        @endforeach
                    </select>
                    @error('currency')
                        <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <!-- Nama Perusahaan -->
            <div class="form-group">
                <label for="company_name" class="label-field required">
                    Nama Perusahaan
                </label>
                <input type="text" 
                       name="company_name" 
                       id="company_name"
                       class="input-field"
                       value="{{ $companyData['company_name'] ?? '' }}"
                       placeholder="PT. Contoh Perusahaan"
                       {{ $readonly ? 'readonly' : '' }}
                       required>
                @error('company_name')
                    <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Bidang Usaha -->
            <div class="form-group">
                <label 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 = $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' }}
                                      {{ $readonly ? 'cursor-not-allowed opacity-60' : '' }}">
                            <input type="radio" 
                                   name="business_field" 
                                   value="{{ $field }}"
                                   class="w-4 h-4 text-primary-600 focus:ring-primary-500"
                                   {{ $selectedField == $field ? 'checked' : '' }}
                                   {{ $readonly ? 'disabled' : '' }}
                                   @change="toggleOtherField"
                                   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 -->
            <div class="form-group {{ ($selectedField ?? '') !== 'Lainnya' ? 'hidden' : '' }}" 
                 id="otherFieldContainer"
                 x-show="showOtherField">
                <label for="other_field" class="label-field required">
                    Sebutkan Bidang Usaha
                </label>
                <input type="text" 
                       name="other_field" 
                       id="other_field"
                       class="input-field"
                       value="{{ $companyData['other_field'] ?? '' }}"
                       placeholder="Contoh: Teknologi, Pendidikan, dll."
                       {{ $readonly ? 'readonly' : '' }}
                       :required="showOtherField">
                @error('other_field')
                    <p class="mt-1 text-sm text-danger-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Informasi Tambahan (Optional Fields) -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
                <h4 class="font-medium mb-3 flex items-center">
                    <i class="fas fa-info-circle text-gray-400 mr-2"></i>
                    Informasi Tambahan (Opsional)
                </h4>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- NPWP -->
                    <div class="form-group">
                        <label for="tax_id" class="label-field">NPWP</label>
                        <input type="text" 
                               name="tax_id" 
                               id="tax_id"
                               class="input-field"
                               value="{{ $companyData['tax_id'] ?? '' }}"
                               placeholder="XX.XXX.XXX.X-XXX.XXX"
                               {{ $readonly ? 'readonly' : '' }}>
                    </div>
                    
                    <!-- Tahun Berdiri -->
                    <div class="form-group">
                        <label for="established_year" class="label-field">Tahun Berdiri</label>
                        <select name="established_year" 
                                id="established_year" 
                                class="input-field"
                                {{ $readonly ? 'disabled' : '' }}>
                            <option value="">Pilih Tahun</option>
                            @for($y = date('Y'); $y >= 1900; $y--)
                                <option value="{{ $y }}" 
                                    {{ ($companyData['established_year'] ?? '') == $y ? 'selected' : '' }}>
                                    {{ $y }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    
                    <!-- Email -->
                    <div class="form-group">
                        <label for="email" class="label-field">Email</label>
                        <input type="email" 
                               name="email" 
                               id="email"
                               class="input-field"
                               value="{{ $companyData['email'] ?? '' }}"
                               placeholder="perusahaan@example.com"
                               {{ $readonly ? 'readonly' : '' }}>
                    </div>
                    
                    <!-- Telepon -->
                    <div class="form-group">
                        <label for="phone" class="label-field">Telepon</label>
                        <input type="tel" 
                               name="phone" 
                               id="phone"
                               class="input-field"
                               value="{{ $companyData['phone'] ?? '' }}"
                               placeholder="021-1234567"
                               {{ $readonly ? 'readonly' : '' }}>
                    </div>
                    
                    <!-- Website -->
                    <div class="form-group md:col-span-2">
                        <label for="website" class="label-field">Website</label>
                        <input type="url" 
                               name="website" 
                               id="website"
                               class="input-field"
                               value="{{ $companyData['website'] ?? '' }}"
                               placeholder="https://www.example.com"
                               {{ $readonly ? 'readonly' : '' }}>
                    </div>
                    
                    <!-- Alamat -->
                    <div class="form-group md:col-span-2">
                        <label for="address" class="label-field">Alamat</label>
                        <textarea name="address" 
                                  id="address" 
                                  rows="2"
                                  class="input-field"
                                  {{ $readonly ? 'readonly' : '' }}>{{ $companyData['address'] ?? '' }}</textarea>
                    </div>
                    
                    <!-- Deskripsi -->
                    <div class="form-group md:col-span-2">
                        <label for="description" class="label-field">Deskripsi Perusahaan</label>
                        <textarea name="description" 
                                  id="description" 
                                  rows="3"
                                  class="input-field"
                                  {{ $readonly ? 'readonly' : '' }}>{{ $companyData['description'] ?? '' }}</textarea>
                    </div>
                </div>
            </div>
            
            <!-- Form Actions -->
            @if(!$readonly)
                <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
                    @if($showCancel)
                        <a href="{{ $cancelUrl ?? route('home') }}" class="btn-secondary">
                            <i class="fas fa-times mr-2"></i>
                            Batal
                        </a>
                    @endif
                    
                    <div class="flex space-x-3">
                        <button type="button" @click="resetForm" class="btn-outline">
                            <i class="fas fa-undo mr-2"></i>
                            Reset
                        </button>
                        
                        <button type="submit" class="btn-primary">
                            <i class="fas fa-save mr-2"></i>
                            {{ $submitText }}
                        </button>
                    </div>
                </div>
            @endif
        </div>
    </form>
</div>

@push('scripts')
<script>
function companyForm(companyData) {
    return {
        period: companyData.period || '',
        showOtherField: companyData.business_field === 'Lainnya',
        
        init() {
            // Parse period into month and year if exists
            if (this.period) {
                const parts = this.period.split(' ');
                if (parts.length >= 2) {
                    this.$data.month = parts[0];
                    this.$data.year = parts[1];
                }
            }
        },
        
        toggleOtherField(event) {
            this.showOtherField = event.target.value === 'Lainnya';
        },
        
        resetForm() {
            if (confirm('Apakah Anda yakin ingin mereset form?')) {
                this.period = '';
                this.$data.month = '';
                this.$data.year = '';
                this.showOtherField = false;
                
                // Reset form inputs
                const form = this.$el;
                form.reset();
            }
        },
        
        submitForm() {
            // Validate required fields
            if (!this.period) {
                alert('Periode laporan harus diisi');
                return;
            }
            
            if (!this.$data.month || !this.$data.year) {
                alert('Periode laporan harus diisi lengkap (bulan dan tahun)');
                return;
            }
            
            // Submit form
            this.$el.submit();
        }
    };
}
</script>
@endpush