@extends('layouts.app')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Edit Company</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('companies.index') }}">Companies</a></li>
                        <li class="breadcrumb-item active">Edit</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-8">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Company Information</h3>
                        </div>

                        <form action="{{ route('companies.update', $company) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="name">Company Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $company->name) }}" required>
                                    @error('name')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

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

                                <div class="form-group">
                                    <label for="address">Address <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address" rows="2" required>{{ old('address', $company->address) }}</textarea>
                                    @error('address')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="province_id">Province <span class="text-danger">*</span></label>
                                            <select class="form-control @error('province_id') is-invalid @enderror" id="province_id" name="province_id" required onchange="updateCities()">
                                                <option value="">-- Select Province --</option>
                                                @foreach($provinces as $province)
                                                    <option value="{{ $province->id }}" {{ old('province_id', $company->province_id) == $province->id ? 'selected' : '' }}>
                                                        {{ $province->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('province_id')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="city_id">City/Municipality <span class="text-danger">*</span></label>
                                            <select class="form-control @error('city_id') is-invalid @enderror" id="city_id" name="city_id" required onchange="updateBarangays()">
                                                <option value="">-- Select City --</option>
                                                @foreach($cities as $city)
                                                    <option value="{{ $city->id }}" {{ old('city_id', $company->city_id) == $city->id ? 'selected' : '' }}>
                                                        {{ $city->name }} ({{ $city->type }})
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('city_id')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="barangay_id">Barangay</label>
                                            <select class="form-control @error('barangay_id') is-invalid @enderror" id="barangay_id" name="barangay_id">
                                                <option value="">-- Select Barangay (Optional) --</option>
                                                @if(count($barangays) > 0)
                                                    @foreach($barangays as $barangay)
                                                        <option value="{{ $barangay->id }}" {{ old('barangay_id', $company->barangay_id) == $barangay->id ? 'selected' : '' }}>
                                                            {{ $barangay->name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            @error('barangay_id')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="postal_code">Postal Code</label>
                                            <input type="text" class="form-control @error('postal_code') is-invalid @enderror" id="postal_code" name="postal_code" value="{{ old('postal_code', $company->postal_code) }}" placeholder="e.g., 1234">
                                            @error('postal_code')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label 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', $company->currency_code) === $currency->code)>
                                                {{ $currency->symbol ?? $currency->code }} - {{ $currency->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('currency_code')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ old('is_active', $company->is_active) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_active">
                                            Active
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Save Changes
                                </button>
                                <a href="{{ route('companies.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Company Details</h3>
                        </div>
                        <div class="card-body">
                            <div class="list-group list-group-flush">
                                <div class="list-group-item">
                                    <strong>ID:</strong> {{ $company->id }}
                                </div>
                                <div class="list-group-item">
                                    <strong>Currency:</strong> {{ $company->currency_code }}
                                </div>
                                <div class="list-group-item">
                                    <strong>Status:</strong>
                                    @if($company->is_active)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-danger">Inactive</span>
                                    @endif
                                </div>
                                <div class="list-group-item">
                                    <strong>Created:</strong> {{ $company->created_at->format('M d, Y') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</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(`/api/address/provinces/${provinceId}/cities`);
        const cities = await response.json();
        
        cities.forEach(city => {
            const option = document.createElement('option');
            option.value = city.id;
            option.textContent = city.name + (city.type ? ` (${city.type})` : '');
            if ({{ old('city_id', $company->city_id ?? 'null') }} == city.id) option.selected = true;
            citySelect.appendChild(option);
        });
    } catch (error) {
        console.error('Error loading cities:', error);
    }
}

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(`/api/address/cities/${cityId}/barangays`);
        const barangays = await response.json();
        
        barangays.forEach(barangay => {
            const option = document.createElement('option');
            option.value = barangay.id;
            option.textContent = barangay.name;
            if ({{ old('barangay_id', $company->barangay_id ?? 'null') }} == barangay.id) option.selected = true;
            barangaySelect.appendChild(option);
        });
    } catch (error) {
        console.error('Error loading barangays:', error);
    }
}

// Load cities and barangays on page load
document.addEventListener('DOMContentLoaded', async function() {
    const provinceId = document.getElementById('province_id').value;
    const cityId = document.getElementById('city_id').value;
    const barangayId = document.getElementById('barangay_id').value;
    
    if (provinceId) {
        // Load cities first
        try {
            const response = await fetch(`/api/address/provinces/${provinceId}/cities`);
            const cities = await response.json();
            const citySelect = document.getElementById('city_id');
            
            cities.forEach(city => {
                const option = document.createElement('option');
                option.value = city.id;
                option.textContent = city.name + (city.type ? ` (${city.type})` : '');
                if (cityId == city.id) option.selected = true;
                citySelect.appendChild(option);
            });
            
            // Then load barangays if city is selected
            if (cityId) {
                setTimeout(async () => {
                    try {
                        const barangayResponse = await fetch(`/api/address/cities/${cityId}/barangays`);
                        const barangays = await barangayResponse.json();
                        const barangaySelect = document.getElementById('barangay_id');
                        
                        barangays.forEach(barangay => {
                            const option = document.createElement('option');
                            option.value = barangay.id;
                            option.textContent = barangay.name;
                            if (barangayId == barangay.id) option.selected = true;
                            barangaySelect.appendChild(option);
                        });
                    } catch (error) {
                        console.error('Error loading barangays:', error);
                    }
                }, 100);
            }
        } catch (error) {
            console.error('Error loading cities:', error);
        }
    }
});
</script>
@endsection