@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <h1>Crear Compañía</h1>

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

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

        <div class="row">
            <div class="col-md-6 mb-3">
                <label for="name" class="form-label">Nombre</label>
                <input type="text" class="form-control" id="name" name="name"
                    value="{{ old('name') }}" required>
            </div>
            <div class="col-md-6 mb-3">
                <label for="business_name" class="form-label">Razón Social</label>
                <input type="text" class="form-control" id="business_name" name="business_name"
                    value="{{ old('business_name') }}">
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 mb-3">
                <label for="nit" class="form-label">NIT</label>
                <input type="text" class="form-control" id="nit" name="nit"
                    value="{{ old('nit') }}" required>
            </div>
            <div class="col-md-2 mb-3">
                <label for="verification_digit" class="form-label">Dígito Verificación</label>
                <input type="text" class="form-control" id="verification_digit" name="verification_digit"
                    value="{{ old('verification_digit') }}">
            </div>
            <div class="col-md-6 mb-3">
                <label for="address" class="form-label">Dirección</label>
                <input type="text" class="form-control" id="address" name="address"
                    value="{{ old('address') }}">
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 mb-3">
                <label for="phone" class="form-label">Teléfono</label>
                <input type="text" class="form-control" id="phone" name="phone"
                    value="{{ old('phone') }}">
            </div>
            <div class="col-md-4 mb-3">
                <label for="mobile" class="form-label">Móvil</label>
                <input type="text" class="form-control" id="mobile" name="mobile"
                    value="{{ old('mobile') }}">
            </div>
            <div class="col-md-4 mb-3">
                <label for="email" class="form-label">Correo</label>
                <input type="email" class="form-control" id="email" name="email"
                    value="{{ old('email') }}">
            </div>
        </div>

        <div class="row">
            <!-- Departamento -->
            <div class="col-md-4 mb-3">
                <label for="department_id" class="form-label">Departamento</label>
                <select class="form-select" id="department_id" name="department_id" required>
                    <option value="">Seleccione...</option>
                    @foreach($departments as $department)
                    <option value="{{ $department->id }}"
                        {{ old('department_id') == $department->id ? 'selected' : '' }}>
                        {{ $department->name }}
                    </option>
                    @endforeach
                </select>
            </div>

            <!-- Ciudad -->
            <div class="col-md-4 mb-3">
                <label for="city_id" class="form-label">Ciudad</label>
                <select class="form-select" id="city_id" name="city_id" required>
                    <option value="">Seleccione un departamento primero...</option>
                </select>
            </div>

            <!-- Compañía Padre -->
            <div class="col-md-4 mb-3">
                <label for="company_id" class="form-label">Compañía Padre</label>
                <select class="form-select" id="company_id" name="company_id">
                    <option value="">Ninguna</option>
                    @foreach($companies as $company)
                    <option value="{{ $company->id }}"
                        {{ old('company_id') == $company->id ? 'selected' : '' }}>
                        {{ $company->name }}
                    </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row">
            <!-- Estado -->
            <div class="col-md-4 mb-3">
                <label for="status_id" class="form-label">Estado</label>
                <select class="form-select" id="status_id" name="status_id" required>
                    <option value="">Seleccione...</option>
                    @foreach($statuses as $status)
                    <option value="{{ $status->id }}"
                        {{ old('status_id') == $status->id ? 'selected' : '' }}>
                        {{ $status->description }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4 mb-3">
                <label for="external_id" class="form-label">ID Externo</label>
                <input type="text" class="form-control" id="external_id" name="external_id"
                    value="{{ old('external_id') }}">
            </div>
            <div class="col-md-4 mb-3">
                <label for="external_model" class="form-label">Modelo Externo</label>
                <input type="text" class="form-control" id="external_model" name="external_model"
                    value="{{ old('external_model') }}">
            </div>
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-success">Crear</button>
            <a href="{{ route('companies.index') }}" class="btn btn-secondary">Volver</a>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('department_id').addEventListener('change', function() {
        let departmentId = this.value;
        let citySelect = document.getElementById('city_id');

        citySelect.innerHTML = '<option value="">Cargando...</option>';

        if (departmentId) {
            fetch(`/departments/${departmentId}/cities`)
                .then(response => response.json())
                .then(data => {
                    citySelect.innerHTML = '<option value="">Seleccione...</option>';
                    data.forEach(city => {
                        let option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = city.name;
                        option.selected = "{{ old('city_id') }}" == city.id;
                        citySelect.appendChild(option);
                    });
                });
        } else {
            citySelect.innerHTML = '<option value="">Seleccione un departamento primero...</option>';
        }
    });
</script>
@endsection