@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <h1>Crear Tercero</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('entity.store') }}">
        @csrf

        <div class="mb-3">
            <label for="person_type" class="form-label">Tipo de Persona</label>
            <select class="form-select" id="person_type" name="person_type" required>
                <option value="">Seleccione</option>
                <option value="Natural">Natural</option>
                <option value="Juridica">Jurídica</option>
            </select>
        </div>

        <!-- Persona Natural -->
        <div class="row">
            <div class="col-md-3 mb-3">
                <label for="first_name" class="form-label">Primer Nombre</label>
                <input type="text" class="form-control" id="first_name" name="first_name">
            </div>
            <div class="col-md-3 mb-3">
                <label for="second_name" class="form-label">Segundo Nombre</label>
                <input type="text" class="form-control" id="second_name" name="second_name">
            </div>
            <div class="col-md-3 mb-3">
                <label for="first_surname" class="form-label">Primer Apellido</label>
                <input type="text" class="form-control" id="first_surname" name="first_surname">
            </div>
            <div class="col-md-3 mb-3">
                <label for="second_surname" class="form-label">Segundo Apellido</label>
                <input type="text" class="form-control" id="second_surname" name="second_surname">
            </div>
        </div>

        <!-- Persona Jurídica -->
        <div class="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">
        </div>

        <div class="mb-3">
            <label for="legal_representative" class="form-label">Representante Legal</label>
            <input type="text" class="form-control" id="legal_representative" name="legal_representative">
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label for="identification_type_id" class="form-label">Tipo de Identificación</label>
                <select class="form-select" id="identification_type_id" name="identification_type_id" required>
                    <option value="">Seleccione</option>
                    @foreach($identificationTypes as $type)
                    <option value="{{ $type->id }}">{{ $type->description }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 mb-3">
                <label for="identification" class="form-label">Número de Identificación</label>
                <input type="text" class="form-control" id="identification" name="identification" required>
            </div>
            <div class="col-md-3 mb-3">
                <label for="verification_digit" class="form-label">Dígito de Verificación</label>
                <input type="text" class="form-control" id="verification_digit" name="verification_digit">
            </div>
        </div>

        <div class="mb-3">
            <label for="address" class="form-label">Dirección</label>
            <input type="text" class="form-control" id="address" name="address">
        </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>
            <div class="col-md-4 mb-3">
                <label for="company_id" class="form-label">Compañía</label>
                <select class="form-select" id="company_id" name="company_id">
                    <option value="">Seleccione</option>
                    @foreach($companies as $company)
                    <option value="{{ $company->id }}">{{ $company->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4 mb-3">
                <label for="status" class="form-label">Estado</label>
                <select class="form-select" id="status" name="status">
                    <option value="1">Activo</option>
                    <option value="0">Inactivo</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 mb-3">
                <label for="cellphone" class="form-label">Celular</label>
                <input type="text" class="form-control" id="cellphone" name="cellphone">
            </div>
            <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">
            </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">
            </div>
        </div>

        <div class="mb-3">
            <label for="observations" class="form-label">Observaciones</label>
            <textarea class="form-control" id="observations" name="observations"></textarea>
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-success">Crear</button>
            <a href="{{ route('entity.index') }}" class="btn btn-secondary">Volver</a>
        </div>
    </form>
</div>
<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