@php
    $integracion = $integracion ?? null;
    $tipoIntegracion = strtoupper(old('tipo_integracion', $integracion->tipo_integracion ?? 'FTP'));
@endphp

<div class="row">
    {{-- Naviera --}}
    <div class="col-md-6">
        <div class="form-group">
            <label for="naviera_id">Naviera</label>
            <select name="naviera_id" id="naviera_id" class="form-control form-control-sm">
                <option value="">-- Selecciona una naviera --</option>
                @foreach($navieras as $naviera)
                    <option value="{{ $naviera->id }}"
                        {{ (string) old('naviera_id', $integracion->naviera_id ?? '') === (string) $naviera->id ? 'selected' : '' }}>
                        {{ $naviera->nombre }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Nombre texto legacy --}}
    <div class="col-md-6">
        <div class="form-group">
            <label for="naviera">Nombre naviera (texto)</label>
            <input
                type="text"
                name="naviera"
                id="naviera"
                class="form-control form-control-sm"
                value="{{ old('naviera', $integracion->naviera ?? '') }}"
                placeholder="Solo si aplica compatibilidad histórica"
            >
        </div>
    </div>

    {{-- Tipo de integración --}}
    <div class="col-md-4">
        <div class="form-group">
            <label for="tipo_integracion">Tipo de integración</label>
            <select name="tipo_integracion" id="tipo_integracion" class="form-control form-control-sm">
                <option value="FTP" {{ $tipoIntegracion === 'FTP' ? 'selected' : '' }}>FTP</option>
                <option value="SFTP" {{ $tipoIntegracion === 'SFTP' ? 'selected' : '' }}>SFTP</option>
                <option value="EMAIL" {{ $tipoIntegracion === 'EMAIL' ? 'selected' : '' }}>EMAIL</option>
                <option value="API" {{ $tipoIntegracion === 'API' ? 'selected' : '' }}>API(Developing)</option>
            </select>
        </div>
    </div>

    {{-- Activo --}}
    <div class="col-md-4">
        <div class="form-group">
            <label for="activo">Estatus</label>
            <select name="activo" id="activo" class="form-control form-control-sm">
                <option value="1" {{ (string) old('activo', $integracion->activo ?? 1) === '1' ? 'selected' : '' }}>Activo</option>
                <option value="0" {{ (string) old('activo', $integracion->activo ?? 1) === '0' ? 'selected' : '' }}>Inactivo</option>
            </select>
        </div>
    </div>

    {{-- Timeout --}}
    <div class="col-md-4">
        <div class="form-group">
            <label for="timeout">Timeout</label>
            <input
                type="number"
                name="timeout"
                id="timeout"
                class="form-control form-control-sm"
                value="{{ old('timeout', $integracion->timeout ?? 30) }}"
                min="1"
            >
        </div>
    </div>
</div>

<hr>

<div id="bloque-ftp-sftp">
    <div class="row">
        <div class="col-12">
            <h6 class="text-primary">
                <i class="fas fa-server mr-1"></i>
                Configuración FTP / SFTP
            </h6>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="host">Host</label>
                <input type="text" name="host" id="host" class="form-control form-control-sm"
                    value="{{ old('host', $integracion->host ?? '') }}">
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                <label for="port">Puerto</label>
                <input type="number" name="port" id="port" class="form-control form-control-sm"
                    value="{{ old('port', $integracion->port ?? '') }}">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="username">Usuario</label>
                <input type="text" name="username" id="username" class="form-control form-control-sm"
                    value="{{ old('username', $integracion->username ?? '') }}">
            </div>
        </div>

        <div class="col-md-3" id="grupo_password">
            <div class="form-group">
                <label for="password">Contraseña</label>
                <input type="text" name="password" id="password" class="form-control form-control-sm"
                    value="{{ old('password', $integracion->password ?? '') }}">
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="remote_path_entrada">Ruta remota entrada</label>
                <input type="text" name="remote_path_entrada" id="remote_path_entrada" class="form-control form-control-sm"
                    value="{{ old('remote_path_entrada', $integracion->remote_path_entrada ?? '') }}">
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="remote_path_salida">Ruta remota salida</label>
                <input type="text" name="remote_path_salida" id="remote_path_salida" class="form-control form-control-sm"
                    value="{{ old('remote_path_salida', $integracion->remote_path_salida ?? '') }}">
            </div>
        </div>

        <div class="col-md-3" id="grupo_passive_mode">
            <div class="form-group">
                <label for="passive_mode">Modo pasivo</label>
                <select name="passive_mode" id="passive_mode" class="form-control form-control-sm">
                    <option value="1" {{ (string) old('passive_mode', $integracion->passive_mode ?? 1) === '1' ? 'selected' : '' }}>Sí</option>
                    <option value="0" {{ (string) old('passive_mode', $integracion->passive_mode ?? 1) === '0' ? 'selected' : '' }}>No</option>
                </select>
            </div>
        </div>

        <div class="col-md-3" id="grupo_ssl">
            <div class="form-group">
                <label for="ssl">SSL</label>
                <select name="ssl" id="ssl" class="form-control form-control-sm">
                    <option value="1" {{ (string) old('ssl', $integracion->ssl ?? 0) === '1' ? 'selected' : '' }}>Sí</option>
                    <option value="0" {{ (string) old('ssl', $integracion->ssl ?? 0) === '0' ? 'selected' : '' }}>No</option>
                </select>
            </div>
        </div>

        <div class="col-md-3" id="grupo_sftp_auth_mode">
            <div class="form-group">
                <label for="sftp_auth_mode">Autenticación SFTP</label>
                <select name="sftp_auth_mode" id="sftp_auth_mode" class="form-control form-control-sm">
                    <option value="">Por defecto</option>
                    <option value="password" {{ old('sftp_auth_mode', $integracion->sftp_auth_mode ?? '') === 'password' ? 'selected' : '' }}>Password</option>
                    <option value="private_key" {{ old('sftp_auth_mode', $integracion->sftp_auth_mode ?? '') === 'private_key' ? 'selected' : '' }}>Llave privada</option>
                </select>
            </div>
        </div>

        <div id="grupo_sftp_key" class="row w-100 mx-0">
            <div class="col-md-5">
                <div class="form-group">
                    <label for="sftp_private_key_path">Ruta llave privada</label>
                    <input
                        type="text"
                        name="sftp_private_key_path"
                        id="sftp_private_key_path"
                        class="form-control form-control-sm"
                        value="{{ old('sftp_private_key_path', $integracion->sftp_private_key_path ?? '') }}"
                        placeholder="app/keysRSA/key_Arbol"
                    >
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    <label for="sftp_private_key_passphrase">Passphrase llave</label>
                    <input
                        type="text"
                        name="sftp_private_key_passphrase"
                        id="sftp_private_key_passphrase"
                        class="form-control form-control-sm"
                        value="{{ old('sftp_private_key_passphrase', $integracion->sftp_private_key_passphrase ?? '') }}"
                    >
                </div>
            </div>
        </div>
    </div>
</div>

<div id="bloque-email">
    <div class="row">
        <div class="col-12">
            <h6 class="text-primary">
                <i class="fas fa-envelope mr-1"></i>
                Configuración EMAIL / SMTP
            </h6>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="smtp_host">SMTP Host</label>
                <input type="text" name="smtp_host" id="smtp_host" class="form-control form-control-sm"
                    value="{{ old('smtp_host', $integracion->smtp_host ?? '') }}">
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                <label for="smtp_port">SMTP Puerto</label>
                <input type="number" name="smtp_port" id="smtp_port" class="form-control form-control-sm"
                    value="{{ old('smtp_port', $integracion->smtp_port ?? '') }}">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="smtp_username">SMTP Usuario</label>
                <input type="text" name="smtp_username" id="smtp_username" class="form-control form-control-sm"
                    value="{{ old('smtp_username', $integracion->smtp_username ?? '') }}">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="smtp_password">SMTP Contraseña</label>
                <input type="text" name="smtp_password" id="smtp_password" class="form-control form-control-sm"
                    value="{{ old('smtp_password', $integracion->smtp_password ?? '') }}">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="smtp_encryption">Encriptación</label>
                <select name="smtp_encryption" id="smtp_encryption" class="form-control form-control-sm">
                    <option value="">Ninguna</option>
                    <option value="tls" {{ strtolower(old('smtp_encryption', $integracion->smtp_encryption ?? '')) === 'tls' ? 'selected' : '' }}>TLS</option>
                    <option value="ssl" {{ strtolower(old('smtp_encryption', $integracion->smtp_encryption ?? '')) === 'ssl' ? 'selected' : '' }}>SSL</option>
                </select>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="email_from">Correo remitente</label>
                <input type="email" name="email_from" id="email_from" class="form-control form-control-sm"
                    value="{{ old('email_from', $integracion->email_from ?? '') }}">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="email_from_name">Nombre remitente</label>
                <input type="text" name="email_from_name" id="email_from_name" class="form-control form-control-sm"
                    value="{{ old('email_from_name', $integracion->email_from_name ?? '') }}">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="email_attach_files">Adjuntar archivos</label>
                <select name="email_attach_files" id="email_attach_files" class="form-control form-control-sm">
                    <option value="1" {{ (string) old('email_attach_files', $integracion->email_attach_files ?? 1) === '1' ? 'selected' : '' }}>Sí</option>
                    <option value="0" {{ (string) old('email_attach_files', $integracion->email_attach_files ?? 1) === '0' ? 'selected' : '' }}>No</option>
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="email_to">Para</label>
                <textarea name="email_to" id="email_to" rows="2" class="form-control form-control-sm">{{ old('email_to', $integracion->email_to ?? '') }}</textarea>
                <small class="text-muted">Separar con coma, punto y coma o salto de línea.</small>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="email_cc">CC</label>
                <textarea name="email_cc" id="email_cc" rows="2" class="form-control form-control-sm">{{ old('email_cc', $integracion->email_cc ?? '') }}</textarea>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="email_bcc">BCC</label>
                <textarea name="email_bcc" id="email_bcc" rows="2" class="form-control form-control-sm">{{ old('email_bcc', $integracion->email_bcc ?? '') }}</textarea>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="email_subject_entrada">Asunto entrada</label>
                <input type="text" name="email_subject_entrada" id="email_subject_entrada" class="form-control form-control-sm"
                    value="{{ old('email_subject_entrada', $integracion->email_subject_entrada ?? '') }}">
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="email_subject_salida">Asunto salida</label>
                <input type="text" name="email_subject_salida" id="email_subject_salida" class="form-control form-control-sm"
                    value="{{ old('email_subject_salida', $integracion->email_subject_salida ?? '') }}">
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="email_body_entrada">Cuerpo correo entrada</label>
                <textarea name="email_body_entrada" id="email_body_entrada" rows="8" class="form-control form-control-sm">{{ old('email_body_entrada', $integracion->email_body_entrada ?? '') }}</textarea>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="email_body_salida">Cuerpo correo salida</label>
                <textarea name="email_body_salida" id="email_body_salida" rows="8" class="form-control form-control-sm">{{ old('email_body_salida', $integracion->email_body_salida ?? '') }}</textarea>
            </div>
        </div>
    </div>
</div>

<hr>

<div class="row">
    <div class="col-12">
        <h6 class="text-primary">
            <i class="fas fa-file-code mr-1"></i>
            Configuración EDI / CODECO
        </h6>
    </div>

    <div class="col-md-4">
        <div class="form-group">
            <label for="sender_code">Sender Code</label>
            <input type="text" name="sender_code" id="sender_code" class="form-control form-control-sm"
                value="{{ old('sender_code', $integracion->sender_code ?? '') }}">
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group">
            <label for="receiver_code">Receiver Code</label>
            <input type="text" name="receiver_code" id="receiver_code" class="form-control form-control-sm"
                value="{{ old('receiver_code', $integracion->receiver_code ?? '') }}">
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group">
            <label for="codeco_version">Versión CODECO</label>
            <input type="text" name="codeco_version" id="codeco_version" class="form-control form-control-sm"
                value="{{ old('codeco_version', $integracion->codeco_version ?? 'D95B') }}">
        </div>
    </div>

    <div class="col-md-12">
        <div class="form-group">
            <label for="observaciones">Observaciones</label>
            <textarea name="observaciones" id="observaciones" rows="3" class="form-control form-control-sm">{{ old('observaciones', $integracion->observaciones ?? '') }}</textarea>
        </div>
    </div>
</div>

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tipoIntegracion = document.getElementById('tipo_integracion');
    const sftpAuthMode = document.getElementById('sftp_auth_mode');

    const bloqueFtpSftp = document.getElementById('bloque-ftp-sftp');
    const bloqueEmail = document.getElementById('bloque-email');

    const grupoPassword = document.getElementById('grupo_password');
    const grupoSftpKey = document.getElementById('grupo_sftp_key');
    const grupoPassiveMode = document.getElementById('grupo_passive_mode');
    const grupoSsl = document.getElementById('grupo_ssl');
    const grupoSftpAuthMode = document.getElementById('grupo_sftp_auth_mode');
    const passwordInput = document.getElementById('password');

    function toggleBloques() {
        const tipo = (tipoIntegracion?.value || '').toUpperCase();
        const authMode = sftpAuthMode?.value || '';

        bloqueFtpSftp.style.display = (tipo === 'FTP' || tipo === 'SFTP') ? 'block' : 'none';
        bloqueEmail.style.display = (tipo === 'EMAIL') ? 'block' : 'none';

        if (grupoPassword) grupoPassword.style.display = 'none';
        if (grupoSftpKey) grupoSftpKey.style.display = 'none';
        if (grupoPassiveMode) grupoPassiveMode.style.display = 'none';
        if (grupoSsl) grupoSsl.style.display = 'none';
        if (grupoSftpAuthMode) grupoSftpAuthMode.style.display = 'none';

        if (tipo === 'FTP') {
            if (grupoPassword) grupoPassword.style.display = 'block';
            if (grupoPassiveMode) grupoPassiveMode.style.display = 'block';
            if (grupoSsl) grupoSsl.style.display = 'block';
        }

        if (tipo === 'SFTP') {
            if (grupoSftpAuthMode) grupoSftpAuthMode.style.display = 'block';

            if (authMode === 'private_key') {
                if (grupoSftpKey) grupoSftpKey.style.display = 'flex';
                if (passwordInput) passwordInput.value = '';
            } else {
                if (grupoPassword) grupoPassword.style.display = 'block';
            }
        }
    }

    tipoIntegracion?.addEventListener('change', toggleBloques);
    sftpAuthMode?.addEventListener('change', toggleBloques);

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