Como faço na Action Create do PessoasController para salvar os atributos de pessoa física e jurídica?

PessoasController:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "PessoaId,Telefone,Endereco,CEP,Cidade,Estado,Habilitado,Nome,CPF,DataNascimento,Profissao,EstadoCivil,Pontos,NomeFantasia,RazaoSocial,CNPJ,TelComercial,DataAbertura")] Pessoa pessoa)
    {
        if (ModelState.IsValid)
        {
            db.Pessoas.Add(pessoa);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(pessoa);         
    }

Views/Pessoas/Create:

    @model PraticarEsportes.Models.ViewModel
    @Scripts.Render("~/bundles/jquery")
    
    @{
        ViewBag.Title = "Cadastro de Usuário";
    }

    <h2>Cadastro de Usuário</h2>
    
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
    
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    
            <div class="form-group">
                @Html.LabelFor(model => model.Pessoa.Telefone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pessoa.Telefone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pessoa.Telefone, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Pessoa.Endereco, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pessoa.Endereco, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pessoa.Endereco, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Pessoa.CEP, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pessoa.CEP, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pessoa.CEP, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Pessoa.Cidade, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pessoa.Cidade, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pessoa.Cidade, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Pessoa.Estado, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pessoa.Estado, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pessoa.Estado, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Física (Praticante): Nome -->
            <div class="Nome">
                @Html.LabelFor(model => model.Praticante.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Praticante.Nome, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Praticante.Nome, "", new { @class = "text-danger" })
                </div>
            </div>
            
            <!-- Pessoa Física (Praticante): CPF -->
            <div class="CPF">
                @Html.LabelFor(model => model.Praticante.CPF, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Praticante.CPF, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Praticante.CPF, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Física (Praticante): DataNascimento -->
            <div class="DataNascimento">
                @Html.LabelFor(model => model.Praticante.DataNascimento, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Praticante.DataNascimento, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Praticante.DataNascimento, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Física (Praticante): Profissao -->
            <div class="Profissao">
                @Html.LabelFor(model => model.Praticante.Profissao, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Praticante.Profissao, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Praticante.Profissao, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Física (Praticante): EstadoCivil -->
            <div class="EstadoCivil">
                @Html.LabelFor(model => model.Praticante.EstadoCivil, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Praticante.EstadoCivil, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Praticante.EstadoCivil, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Física (Praticante): Pontos -->
            <div class="Pontos">
                @Html.LabelFor(model => model.Praticante.Pontos, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Praticante.Pontos, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Praticante.Pontos, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Jurídica (Estabelecimento): NomeFantasia -->
            <div class="NomeFantasia">
                @Html.LabelFor(model => model.Estabelecimento.NomeFantasia, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Estabelecimento.NomeFantasia, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Estabelecimento.NomeFantasia, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Jurídica (Estabelecimento): RazaoSocial -->
            <div class="RazaoSocial">
                @Html.LabelFor(model => model.Estabelecimento.RazaoSocial, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Estabelecimento.RazaoSocial, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Estabelecimento.RazaoSocial, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Jurídica (Estabelecimento): CNPJ -->
            <div class="CNPJ">
                @Html.LabelFor(model => model.Estabelecimento.CNPJ, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Estabelecimento.CNPJ, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Estabelecimento.CNPJ, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Jurídica (Estabelecimento): TelComercial -->
            <div class="TelComercial">
                @Html.LabelFor(model => model.Estabelecimento.TelComercial, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Estabelecimento.TelComercial, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Estabelecimento.TelComercial, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <!-- Pessoa Jurídica (Estabelecimento): DataAbertura -->
            <div class="DataAbertura" id="DataAberturaId">
                @Html.LabelFor(model => model.Estabelecimento.DataAbertura, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Estabelecimento.DataAbertura, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Estabelecimento.DataAbertura, "", new { @class = "text-danger" })
                </div>
            </div>    
    
            <!-- Radio button para selecionar pessoa física ou jurídica -->
            <div>
                <input id="pessoaFisicaId" type="radio" name="tipoPessoa" value="pessoaFisica" onClick="habilitaCampo(this.id)"/>Pessoa Física
                <input id="pessoaJuridicaId" type="radio" name="tipoPessoa" value="pessoaJuridica" onClick="habilitaCampo(this.id)"/>Pessoa Jurídica
            </div>
            
            <script type="text/javascript">
                $(document).ready(function () {
                    // Oculta os atributos da pessoa física
                    $(".Nome").hide();
                    $(".CPF").hide();
                    $(".DataNascimento").hide();
                    $(".Profissao").hide();
                    $(".EstadoCivil").hide();
                    $(".Pontos").hide();
                    // Oculta os atributos da pessoa jurídica
                    $(".NomeFantasia").hide();
                    $(".RazaoSocial").hide();
                    $(".CNPJ").hide();
                    $(".TelComercial").hide();
                    $(".DataAbertura").hide();
    
    
                    $("input[name=tipoPessoa]").on("click", function () {
                        // Se pessoa física estiver selecionado
                        if (pessoaFisicaId.checked) {
                            // Exibe os atributos da pessoa física
                            $(".Nome").show();
                            $(".CPF").show();
                            $(".DataNascimento").show();
                            $(".Profissao").show();
                            $(".EstadoCivil").show();
                            $(".Pontos").show();
                            // Oculta os atributos da pessoa jurídica
                            $(".NomeFantasia").hide();
                            $(".RazaoSocial").hide();
                            $(".CNPJ").hide();
                            $(".TelComercial").hide();
                            $(".DataAbertura").hide();
                        }
    
                        // Se pessoa jurídica estiver selecionado
                        else if (pessoaJuridicaId.checked) {
                            // Exibe os atributos da pessoa jurídica
                            $(".NomeFantasia").show();
                            $(".RazaoSocial").show();
                            $(".CNPJ").show();
                            $(".TelComercial").show();
                            $(".DataAbertura").show();
                            // Oculta os atributos da pessoa física
                            $(".Nome").hide();
                            $(".CPF").hide();
                            $(".DataNascimento").hide();
                            $(".Profissao").hide();
                            $(".EstadoCivil").hide();
                            $(".Pontos").hide();
                        }
    
                    });
                });
            </script>
            
        <!-- Botão Salvar -->
        <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type = "submit" value="Salvar" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    
    <!-- Botão voltar para lista -->
    <div>
        @*@Html.ActionLink("Back to List", "Index")*@
        <a href='@Url.Action("Index", "Pessoas")'>
            <img src='@Url.Content("~/Content/img/voltar.png")' class="botaoicone" title="Voltar" /> Lista de Usuários
        </a>
    </div>
   <!-- --> 
   

     @section scripts{
            <script>
                $(function () {
                    $('input, select, textarea').each(function () {
                        if ($(this).hasClass('input-validation-error'))
                        $(this).focus();
                    });
                });
            </script>
        }