@extends('layouts.user')

@section('content')
    <div class="block-center mt-4" style="max-width: 600px;">
        <!-- START card-->
        <div class="card card-flat">
            <div class="card-header text-center bg-dark">
                <a href="{{ route('login') }}">
                    <img class="block-center" src="{{ asset('img/logo.png') }}" alt="Logo" />
                </a>
            </div>
            <div class="card-body">
                <p class="text-center py-2">REGISTER YOUR WATER COMPANY</p>

                @if ($errors->any())
                    <div class="alert alert-danger" role="alert">
                        <strong>Registration Failed!</strong>
                        @foreach ($errors->all() as $error)
                            <div>{{ $error }}</div>
                        @endforeach
                    </div>
                @endif

                <form method="POST" action="{{ route('company-register.store') }}" class="mb-3">
                    @csrf

                    <!-- Company Information -->
                    <h6 class="text-muted mt-3 mb-2">
                        <i class="fa fa-building me-2"></i>Company Information
                    </h6>
                    <hr>

                    <div class="form-group">
                        <label class="text-muted" for="company_name">Company Name <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('company_name') is-invalid @enderror" 
                            id="company_name" 
                            type="text" 
                            name="company_name"
                            value="{{ old('company_name') }}"
                            placeholder="Enter company name" 
                            required
                            autofocus
                        />
                        @error('company_name')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="company_email">Company Email <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('company_email') is-invalid @enderror" 
                            id="company_email" 
                            type="email" 
                            name="company_email"
                            value="{{ old('company_email') }}"
                            placeholder="Enter company email" 
                            required
                        />
                        @error('company_email')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="company_phone">Phone Number <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('company_phone') is-invalid @enderror" 
                            id="company_phone" 
                            type="tel" 
                            name="company_phone"
                            value="{{ old('company_phone') }}"
                            placeholder="Enter phone number" 
                            required
                        />
                        @error('company_phone')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="province">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')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="city">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')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="barangay">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>
                            @if(old('city') && isset($barangays[old('city')]))
                                @foreach($barangays[old('city')] as $barangay)
                                    <option value="{{ $barangay }}" {{ old('barangay') === $barangay ? 'selected' : '' }}>
                                        {{ $barangay }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                        @error('barangay')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="zip_code">Zip Code <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('zip_code') is-invalid @enderror" 
                            id="zip_code" 
                            type="text" 
                            name="zip_code"
                            value="{{ old('zip_code') }}"
                            placeholder="Enter zip code" 
                            required
                        />
                        @error('zip_code')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

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

                    <div class="form-group">
                        <label class="text-muted" for="currency_code">Currency <span class="text-danger">*</span></label>
                        <select class="form-control @error('currency_code') is-invalid @enderror" id="currency_code" name="currency_code" required>
                            <option value="">Select 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')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Admin Account Information -->
                    <h6 class="text-muted mt-3 mb-2">
                        <i class="fa fa-user-shield me-2"></i>Admin Account Information
                    </h6>
                    <hr>

                    <div class="form-group">
                        <label class="text-muted" for="admin_name">Full Name <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('admin_name') is-invalid @enderror" 
                            id="admin_name" 
                            type="text" 
                            name="admin_name"
                            value="{{ old('admin_name') }}"
                            placeholder="Enter your full name" 
                            required
                        />
                        @error('admin_name')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="admin_email">Email <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('admin_email') is-invalid @enderror" 
                            id="admin_email" 
                            type="email" 
                            name="admin_email"
                            value="{{ old('admin_email') }}"
                            placeholder="Enter your email" 
                            required
                        />
                        @error('admin_email')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="password">Password <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('password') is-invalid @enderror" 
                            id="password" 
                            type="password" 
                            name="password"
                            placeholder="Enter password" 
                            required
                        />
                        @error('password')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="text-muted" for="password_confirmation">Confirm Password <span class="text-danger">*</span></label>
                        <input 
                            class="form-control @error('password_confirmation') is-invalid @enderror" 
                            id="password_confirmation" 
                            type="password" 
                            name="password_confirmation"
                            placeholder="Confirm your password" 
                            required
                        />
                        @error('password_confirmation')
                            <span class="text-danger small">{{ $message }}</span>
                        @enderror
                    </div>

                    <button class="btn btn-block btn-primary mt-3" type="submit">
                        <i class="fa fa-check me-2"></i>Register Company
                    </button>
                </form>

                <p class="pt-3 text-center">Already registered? <a href="{{ route('login') }}">Login here</a></p>
            </div>
        </div>
        <!-- END card-->
        @include("layouts.includes.footer-page")
    </div>
@endsection

@section('scripts')
    <script src="{{ mix('/js/pages.js') }}"></script>
    <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