@extends('layouts.guest-horizontal')
@section('content')
    <div class="content-heading">
        <div>
            New Water Service Application
            @if($company)
                <small>{{ $company->name }}</small>
            @endif
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <div class="card-title">
                        @if($company)
                            Submit your application to {{ $company->name }}
                        @else
                            Water Service Application Form
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <strong>Please fix the following errors:</strong>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('application.store-public', $company->slug ?? 'error') }}" class="form-horizontal">
                        @csrf

                        <!-- PERSONAL INFORMATION SECTION -->
                        <fieldset>
                            <legend class="text-muted">Personal Information</legend>

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

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

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

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="phone">Phone Number <span class="text-danger">*</span></label>
                                <div class="col-md-9">
                                    <input class="form-control @error('phone') is-invalid @enderror" 
                                           id="phone" name="phone" type="tel" 
                                           value="{{ old('phone') }}" required />
                                    @error('phone')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </fieldset>

                        <!-- ADDRESS INFORMATION SECTION -->
                        <fieldset>
                            <legend class="text-muted">Address Information</legend>

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="province">Province <span class="text-danger">*</span></label>
                                <div class="col-md-9">
                                    <select class="form-control @error('province') is-invalid @enderror" 
                                            id="province" name="province" required>
                                        <option value="">-- Select Province --</option>
                                        @foreach($provinces as $province)
                                            <option value="{{ $province }}" {{ old('province') === $province ? 'selected' : '' }}>
                                                {{ $province }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('province')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="city">Municipality / City <span class="text-danger">*</span></label>
                                <div class="col-md-9">
                                    <select class="form-control @error('city') is-invalid @enderror" 
                                            id="city" name="city" required>
                                        <option value="">-- Select City --</option>
                                        @if(old('province') && isset($cities[old('province')]))
                                            @foreach($cities[old('province')] as $city)
                                                <option value="{{ $city }}" {{ old('city') === $city ? 'selected' : '' }}>
                                                    {{ $city }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('city')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="barangay">Barangay <span class="text-danger">*</span></label>
                                <div class="col-md-9">
                                    <select class="form-control @error('barangay') is-invalid @enderror" 
                                            id="barangay" name="barangay" required>
                                        <option value="">-- Select Barangay --</option>
                                    </select>
                                    @error('barangay')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="zip_code">Zip Code <span class="text-danger">*</span></label>
                                <div class="col-md-9">
                                    <input class="form-control @error('zip_code') is-invalid @enderror" 
                                           id="zip_code" name="zip_code" type="text" 
                                           value="{{ old('zip_code') }}" required />
                                    @error('zip_code')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="street_address">Street Address <span class="text-danger">*</span></label>
                                <div class="col-md-9">
                                    <input class="form-control @error('street_address') is-invalid @enderror" 
                                           id="street_address" name="street_address" type="text" 
                                           placeholder="House number, street name" 
                                           value="{{ old('street_address') }}" required />
                                    @error('street_address')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </fieldset>

                        <!-- PROPERTY INFORMATION SECTION -->
                        <fieldset>
                            <legend class="text-muted">Property Information</legend>

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="meter_location">Meter Location</label>
                                <div class="col-md-9">
                                    <input class="form-control @error('meter_location') is-invalid @enderror" 
                                           id="meter_location" name="meter_location" type="text" 
                                           placeholder="e.g., Front gate, Main entrance" 
                                           value="{{ old('meter_location') }}" />
                                    @error('meter_location')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-3 col-form-label" for="property_description">Property Description</label>
                                <div class="col-md-9">
                                    <textarea class="form-control @error('property_description') is-invalid @enderror" 
                                              id="property_description" name="property_description" rows="4" 
                                              placeholder="Describe your property (residential, commercial, etc.)">{{ old('property_description') }}</textarea>
                                    @error('property_description')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </fieldset>

                        <!-- FORM ACTIONS -->
                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                <button class="btn btn-primary" type="submit">
                                    <em class="icon-check"></em>
                                    Submit Application
                                </button>
                                <a href="/" class="btn btn-secondary">Cancel</a>
                            </div>
                        </div>
                    </form>

                    <!-- INFO ALERT -->
                    <div class="alert alert-info mt-4">
                        <strong>Application Processing:</strong> Your application will be reviewed within 2-3 business days. You will receive a reference number upon submission for tracking your application status.
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');
    const barangaySelect = document.getElementById('barangay');

    // Load cities when province changes
    if (provinceSelect) {
        provinceSelect.addEventListener('change', function() {
            const province = this.value;
            
            if (!province) {
                citySelect.innerHTML = '<option value="">-- Select City --</option>';
                barangaySelect.innerHTML = '<option value="">-- Select Barangay --</option>';
                return;
            }

            // Fetch cities from API
            fetch(`/api/provinces/${encodeURIComponent(province)}/cities`)
                .then(response => response.json())
                .then(data => {
                    let html = '<option value="">-- Select City --</option>';
                    Object.entries(data).forEach(([key, city]) => {
                        html += `<option value="${city}">${city}</option>`;
                    });
                    citySelect.innerHTML = html;
                    barangaySelect.innerHTML = '<option value="">-- Select Barangay --</option>';
                })
                .catch(error => {
                    console.error('Error loading cities:', error);
                    citySelect.innerHTML = '<option value="">-- Error loading cities --</option>';
                });
        });
    }

    // Load barangays when city changes
    if (citySelect) {
        citySelect.addEventListener('change', function() {
            const city = this.value;
            
            if (!city) {
                barangaySelect.innerHTML = '<option value="">-- Select Barangay --</option>';
                return;
            }

            // Fetch barangays from API
            fetch(`/api/cities/${encodeURIComponent(city)}/barangays`)
                .then(response => response.json())
                .then(data => {
                    let html = '<option value="">-- Select Barangay --</option>';
                    Object.entries(data).forEach(([key, barangay]) => {
                        html += `<option value="${barangay}">${barangay}</option>`;
                    });
                    barangaySelect.innerHTML = html;
                })
                .catch(error => {
                    console.error('Error loading barangays:', error);
                    barangaySelect.innerHTML = '<option value="">-- Error loading barangays --</option>';
                });
        });
    }
});
</script>
@endsection