@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-file-alt me-2"></i>
                        New Subscriber Application - Step 1: Customer Information
                    </h5>
                </div>
                <div class="card-body p-4">
                    <p class="text-muted mb-4">
                        <small>Please fill out all fields with accurate information. This application will be reviewed and approved by our team.</small>
                    </p>

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

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

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

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

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="province" class="form-label">Province <span class="text-danger">*</span></label>
                                <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">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="city" class="form-label">Municipality / City <span class="text-danger">*</span></label>
                                <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">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="barangay" class="form-label">Barangay <span class="text-danger">*</span></label>
                                <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">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="zip_code" class="form-label">Zip Code <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('zip_code') is-invalid @enderror" id="zip_code" name="zip_code" value="{{ old('zip_code') }}" required>
                                @error('zip_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="meter_location" class="form-label">Meter Location</label>
                            <input type="text" class="form-control @error('meter_location') is-invalid @enderror" id="meter_location" name="meter_location" value="{{ old('meter_location') }}" placeholder="e.g., Front yard, Side wall">
                            @error('meter_location')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="property_description" class="form-label">Property Description</label>
                            <textarea class="form-control @error('property_description') is-invalid @enderror" id="property_description" name="property_description" rows="4" placeholder="Brief description of the property (type, size, features, etc.)">{{ old('property_description') }}</textarea>
                            @error('property_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>
                                Submit Application
                            </button>
                            <a href="{{ route('dashboard') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </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