@extends('layouts.app-layout')

@php
    use App\Enums\VentasEnum;
    use App\Enums\CantidadPersonasEnum;
    use App\Enums\EstadoFormalizacionEnum;
    use App\Enums\TipoUnidadEnum;
    use App\Enums\CanalVentaEnum;

    $isRegistroPublico = $isRegistroPublico ?? false;
    $formAction = $formAction ?? route('registro.unidad.store');
@endphp

@section('title', $isRegistroPublico ? 'Unidad de atención' : 'Crear unidad de atención')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4 p-md-5">
                        <div class="d-flex align-items-center mb-4">
                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3" style="width:44px;height:44px;">{{ $isRegistroPublico ? '2' : '+' }}</div>
                            <div>
                                @if($isRegistroPublico)
                                    <p class="text-muted mb-0 small text-uppercase" style="letter-spacing:0.08em;">Paso 2 de 3</p>
                                    <h2 class="h5 fw-bold mb-0">Unidad de atención</h2>
                                    <p class="text-muted mb-0">Contanos brevemente sobre tu idea o proyecto.</p>
                                @else
                                    <h2 class="h5 fw-bold mb-0">Nueva unidad de atención</h2>
                                    <p class="text-muted mb-0">Carga los datos de la unidad.</p>
                                @endif
                            </div>
                        </div>

                        <form action="{{ $formAction }}" method="POST" novalidate>
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small text-muted mb-1">Nombre comercial</label>
                                    <input type="text" name="nombre_comercial" class="form-control @error('nombre_comercial') is-invalid @enderror"
                                           value="{{ old('nombre_comercial') }}">
                                    @error('nombre_comercial')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small text-muted mb-1">Tipo de unidad</label>
                                    <select name="tipo_unidad" id="tipo-unidad" class="form-select @error('tipo_unidad') is-invalid @enderror">
                                        <option value="" disabled {{ old('tipo_unidad') ? '' : 'selected' }}>Seleccionar</option>
                                        @foreach(TipoUnidadEnum::cases() as $opt)
                                            <option value="{{ $opt->value }}" @selected(old('tipo_unidad','idea') === $opt->value)>{{ $opt->label() }}</option>
                                        @endforeach
                                    </select>
                                    @error('tipo_unidad')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label small text-muted mb-1">Cantidad de personas</label>
                                    <select name="cantidad_personas" class="form-select @error('cantidad_personas') is-invalid @enderror">
                                        <option value="" disabled {{ old('cantidad_personas') ? '' : 'selected' }}>Seleccionar</option>
                                        @foreach(CantidadPersonasEnum::cases() as $opt)
                                            <option value="{{ $opt->value }}" @selected(old('cantidad_personas') === $opt->value)>{{ $opt->label() }}</option>
                                        @endforeach
                                    </select>
                                    @error('cantidad_personas')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6" id="estado-wrapper">
                                    <label class="form-label small text-muted mb-1">Estado de formalización</label>
                                    <select name="estado_formalizacion" id="estado_formalizacion" class="form-select @error('estado_formalizacion') is-invalid @enderror">
                                        <option value="" disabled {{ old('estado_formalizacion') ? '' : 'selected' }}>Seleccionar</option>
                                        @foreach(EstadoFormalizacionEnum::cases() as $opt)
                                            <option value="{{ $opt->value }}" @selected(old('estado_formalizacion') === $opt->value)>{{ $opt->label() }}</option>
                                        @endforeach
                                    </select>
                                    @error('estado_formalizacion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6 d-none" id="ventas-wrapper">
                                    <label class="form-label small text-muted mb-1">Ventas</label>
                                    <select name="ventas" class="form-select @error('ventas') is-invalid @enderror">
                                        <option value="" disabled {{ old('ventas') ? '' : 'selected' }}>Seleccionar</option>
                                        @foreach(VentasEnum::cases() as $opt)
                                            <option value="{{ $opt->value }}" @selected(old('ventas') === $opt->value)>{{ $opt->label() }}</option>
                                        @endforeach
                                    </select>
                                    @error('ventas')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 d-none" id="razon-wrapper">
                                    <label class="form-label small text-muted mb-1">Razón social</label>
                                    <input type="text" name="razon_social" class="form-control @error('razon_social') is-invalid @enderror" value="{{ old('razon_social') }}">
                                    @error('razon_social')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6 d-none" id="rut-wrapper">
                                    <label class="form-label small text-muted mb-1">RUT</label>
                                    <input type="text" name="rut" class="form-control @error('rut') is-invalid @enderror" value="{{ old('rut') }}">
                                    @error('rut')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 d-none" id="rubro-wrapper">
                                    <label class="form-label small text-muted mb-1">Rubro CIU</label>
                                    <input type="text" name="rubro_ciu" class="form-control @error('rubro_ciu') is-invalid @enderror" value="{{ old('rubro_ciu') }}">
                                    @error('rubro_ciu')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6 d-none" id="anio-wrapper">
                                    <label class="form-label small text-muted mb-1">Año de inicio</label>
                                    <input type="number" name="anio_inicio" class="form-control @error('anio_inicio') is-invalid @enderror" value="{{ old('anio_inicio') }}" min="1900" max="{{ date('Y') + 1 }}">
                                    @error('anio_inicio')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 d-none" id="canales-wrapper">
                                    <label class="form-label small text-muted mb-1">Canales de venta</label>
                                    @php
                                        $canales = old('canal_venta', []);
                                        $canalesEnum = CanalVentaEnum::cases();
                                    @endphp
                                    <div class="border rounded p-3 @error('canal_venta') border-danger @enderror">
                                        <div class="row g-2">
                                            @foreach($canalesEnum as $opt)
                                                <div class="col-6">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="canal_venta[]" value="{{ $opt->value }}" id="canal_{{ $opt->value }}" @checked(in_array($opt->value, $canales))>
                                                        <label class="form-check-label small" for="canal_{{ $opt->value }}">{{ $opt->label() }}</label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @error('canal_venta')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-12 d-none" id="direccion-wrapper">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label small text-muted mb-1">Departamento</label>
                                            <input type="text" name="departamento" class="form-control @error('departamento') is-invalid @enderror" value="{{ old('departamento') }}">
                                            @error('departamento')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small text-muted mb-1">Localidad</label>
                                            <input type="text" name="localidad" class="form-control @error('localidad') is-invalid @enderror" value="{{ old('localidad') }}">
                                            @error('localidad')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small text-muted mb-1">Calle</label>
                                            <input type="text" name="calle" class="form-control @error('calle') is-invalid @enderror" value="{{ old('calle') }}">
                                            @error('calle')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small text-muted mb-1">Número de puerta</label>
                                            <input type="text" name="numero_puerta" class="form-control @error('numero_puerta') is-invalid @enderror" value="{{ old('numero_puerta') }}">
                                            @error('numero_puerta')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small text-muted mb-1">Código postal</label>
                                            <input type="text" name="codigo_postal" class="form-control @error('codigo_postal') is-invalid @enderror" value="{{ old('codigo_postal') }}">
                                            @error('codigo_postal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row g-3 mt-2">
                                <div class="col-12">
                                    <label class="form-label small text-muted mb-1">Descripción</label>
                                    <textarea name="descripcion" rows="4" class="form-control @error('descripcion') is-invalid @enderror">{{ old('descripcion') }}</textarea>
                                    @error('descripcion')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="pt-3 d-flex justify-content-between align-items-center">
                                <a href="{{ $isRegistroPublico ? route('registro.contacto') : url()->previous() }}" class="btn btn-link text-decoration-none">Volver</a>
                                <button type="submit" class="btn btn-primary px-4">
                                    {{ $isRegistroPublico ? 'Continuar' : 'Guardar unidad' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    (function () {
        const estadoSelect = document.querySelector('select[name="estado_formalizacion"]');
        const ventasWrapper = document.getElementById('ventas-wrapper');
        const ventasSelect = document.querySelector('select[name="ventas"]');
        const tipoUnidad = document.getElementById('tipo-unidad');
        const estadoWrapper = document.getElementById('estado-wrapper');
        const razonWrapper = document.getElementById('razon-wrapper');
        const rutWrapper = document.getElementById('rut-wrapper');
        const rubroWrapper = document.getElementById('rubro-wrapper');
        const anioWrapper = document.getElementById('anio-wrapper');
        const direccionWrapper = document.getElementById('direccion-wrapper');
        const canalesWrapper = document.getElementById('canales-wrapper');
        const canalChecks = document.querySelectorAll('input[name="canal_venta[]"]');

        const businessFields = ['razon_social','rut','rubro_ciu','anio_inicio'];
        const direccionFields = ['departamento','localidad','calle','numero_puerta','codigo_postal'];

        function toggleFormalizacionDependants() {
            toggleEmpresa();
        }

        function toggleEmpresa() {
            const isIdea = tipoUnidad && tipoUnidad.value === 'idea';
            const esEmpresaOEmprendimiento = tipoUnidad
                && ['empresa', 'emprendimiento'].includes(tipoUnidad.value);
            if (estadoWrapper) estadoWrapper.classList.toggle('d-none', isIdea);
            if (isIdea && estadoSelect) {
                estadoSelect.value = 'no_formalizado';
            }

            const estado = estadoSelect ? estadoSelect.value : 'no_formalizado';
            const canalesSeleccionados = Array.from(canalChecks)
                .filter(c => c.checked)
                .map(c => c.value);
            const tieneCanalConDireccion = canalesSeleccionados.includes('local')
                || canalesSeleccionados.includes('distribucion');
            const showExtra = esEmpresaOEmprendimiento && !!estado && estado !== 'no_formalizado';
            const showDireccion = esEmpresaOEmprendimiento
                && estado === 'formalizado'
                && tieneCanalConDireccion;
            const showCanales = true;

            [razonWrapper, rutWrapper, rubroWrapper, anioWrapper].forEach(el => {
                if (el) el.classList.toggle('d-none', !showExtra);
            });
            if (ventasWrapper) ventasWrapper.classList.toggle('d-none', !showExtra);
            if (canalesWrapper) canalesWrapper.classList.toggle('d-none', !showCanales);
            if (direccionWrapper) direccionWrapper.classList.toggle('d-none', !showDireccion);

            if (!showExtra) {
                if (ventasSelect) ventasSelect.value = '';
                businessFields.forEach(name => {
                    const f = document.querySelector(`[name=\"${name}\"]`);
                    if (f) f.value = '';
                });
            }

            if (!showDireccion) {
                direccionFields.forEach(name => {
                    const f = document.querySelector(`[name=\"${name}\"]`);
                    if (f) f.value = '';
                });
            }

        }

        estadoSelect?.addEventListener('change', toggleFormalizacionDependants);
        tipoUnidad?.addEventListener('change', toggleEmpresa);
        canalChecks.forEach(c => c.addEventListener('change', () => {
            toggleEmpresa();
        }));

        toggleFormalizacionDependants();
    })();
</script>
@endpush