@extends('layouts.app')
@section('content')
    <div class="page-title"><i class="fas fa-plus me-2"></i>Register New Company</div>
    <p class="page-subtitle">Create a new water company and assign an administrator</p>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-building me-2"></i>Company Registration Form
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong><i class="fas fa-exclamation-triangle me-2"></i>Validation Errors:</strong>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('companies.store') }}">
                        @csrf

                        <!-- Company Information Section -->
                        <fieldset class="mb-4">
                            <legend class="h5 mb-3" style="color: #667eea;">
                                <i class="fas fa-water me-2"></i>Company Information
                            </legend>
                            <hr>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="company_name" class="form-label">Company Name <span class="text-danger">*</span></label>
                                    <input type="text" id="company_name" name="company_name" class="form-control @error('company_name') is-invalid @enderror" value="{{ old('company_name') }}" required>
                                    @error('company_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">Company Email <span class="text-danger">*</span></label>
                                    <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" id="phone" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}" placeholder="e.g., +63912345678">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="address" class="form-label">Street Address</label>
                                    <input type="text" id="address" name="address" class="form-control @error('address') is-invalid @enderror" value="{{ old('address') }}" placeholder="Street address">
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="province_id" class="form-label">Province <span class="text-danger">*</span></label>
                                    <select id="province_id" name="province_id" class="form-select @error('province_id') is-invalid @enderror" required onchange="updateCities()">
                                        <option value="">-- Select Province --</option>
                                        @foreach($provinces as $province)
                                            <option value="{{ $province->id }}" @selected(old('province_id') == $province->id)>
                                                {{ $province->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('province_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="city_id" class="form-label">City/Municipality <span class="text-danger">*</span></label>
                                    <select id="city_id" name="city_id" class="form-select @error('city_id') is-invalid @enderror" required onchange="updateBarangays()">
                                        <option value="">-- Select City --</option>
                                    </select>
                                    @error('city_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="barangay_id" class="form-label">Barangay</label>
                                    <select id="barangay_id" name="barangay_id" class="form-select @error('barangay_id') is-invalid @enderror">
                                        <option value="">-- Select Barangay (Optional) --</option>
                                    </select>
                                    @error('barangay_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="postal_code" class="form-label">Postal Code</label>
                                    <input type="text" id="postal_code" name="postal_code" class="form-control @error('postal_code') is-invalid @enderror" value="{{ old('postal_code') }}" placeholder="e.g., 1234">
                                    @error('postal_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="currency_code" class="form-label">Currency <span class="text-danger">*</span></label>
                                    <select id="currency_code" name="currency_code" class="form-select @error('currency_code') is-invalid @enderror" required>
                                        <option value="">Select company currency...</option>
                                        @foreach($currencies as $currency)
                                            <option value="{{ $currency->code }}" @selected(old('currency_code') === $currency->code)>
                                                {{ $currency->code }} - {{ $currency->name }} ({{ $currency->symbol }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('currency_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </fieldset>

                        <!-- Admin Information Section -->
                        <fieldset class="mb-4">
                            <legend class="h5 mb-3" style="color: #667eea;">
                                <i class="fas fa-user-tie me-2"></i>Company Administrator
                            </legend>
                            <hr>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="admin_name" class="form-label">Admin Full Name <span class="text-danger">*</span></label>
                                    <input type="text" id="admin_name" name="admin_name" class="form-control @error('admin_name') is-invalid @enderror" value="{{ old('admin_name') }}" required>
                                    @error('admin_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="admin_email" class="form-label">Admin Email <span class="text-danger">*</span></label>
                                    <input type="email" id="admin_email" name="admin_email" class="form-control @error('admin_email') is-invalid @enderror" value="{{ old('admin_email') }}" required>
                                    @error('admin_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="admin_password" class="form-label">Password <span class="text-danger">*</span></label>
                                    <input type="password" id="admin_password" name="admin_password" class="form-control @error('admin_password') is-invalid @enderror" required>
                                    @error('admin_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Minimum 8 characters, must include uppercase, lowercase, number, and symbol</small>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="admin_password_confirmation" class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                    <input type="password" id="admin_password_confirmation" name="admin_password_confirmation" class="form-control" required>
                                </div>
                            </div>
                        </fieldset>

                        <!-- Form Actions -->
                        <div class="row">
                            <div class="col-md-12">
                                <a href="{{ route('companies.index') }}" class="btn btn-secondary me-2">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-check me-1"></i>Register Company & Create Admin
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>
async function updateCities() {
    const provinceSelect = document.getElementById('province_id');
    const citySelect = document.getElementById('city_id');
    const barangaySelect = document.getElementById('barangay_id');
    const provinceId = provinceSelect.value;
    
    // Clear cities and barangays
    citySelect.innerHTML = '<option value="">-- Select City --</option>';
    barangaySelect.innerHTML = '<option value="">-- Select Barangay (Optional) --</option>';
    
    if (!provinceId) return;
    
    try {
        const response = await fetch(`{{ url('api/address/provinces') }}/${provinceId}/cities`);
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const cities = await response.json();
        
        if (Array.isArray(cities) && cities.length > 0) {
            cities.forEach(city => {
                const option = document.createElement('option');
                option.value = city.id;
                option.textContent = city.name;
                citySelect.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading cities:', error);
        citySelect.innerHTML = '<option value="">-- Error loading cities --</option>';
    }
}

async function updateBarangays() {
    const citySelect = document.getElementById('city_id');
    const barangaySelect = document.getElementById('barangay_id');
    const cityId = citySelect.value;
    
    // Clear barangays
    barangaySelect.innerHTML = '<option value="">-- Select Barangay (Optional) --</option>';
    
    if (!cityId) return;
    
    try {
        const response = await fetch(`{{ url('api/address/cities') }}/${cityId}/barangays`);
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const barangays = await response.json();
        
        if (Array.isArray(barangays) && barangays.length > 0) {
            barangays.forEach(barangay => {
                const option = document.createElement('option');
                option.value = barangay.id;
                option.textContent = barangay.name;
                barangaySelect.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading barangays:', error);
        barangaySelect.innerHTML = '<option value="">-- Error loading barangays --</option>';
    }
}

// Load cities on page load if province is selected
document.addEventListener('DOMContentLoaded', function() {
    const provinceId = document.getElementById('province_id').value;
    if (provinceId) {
        updateCities();
        // If city was previously selected, load barangays
        setTimeout(() => {
            const cityId = document.getElementById('city_id').value;
            if (cityId) {
                updateBarangays();
            }
        }, 500);
    }
});
</script>
@endsection