@extends('layout.sidebar')
@section('content')
    <style>
        .active {
            background-color: #c6c8ca !important;
            color: black !important;
        }
    </style>
    @csrf
    <div class="row">
        <div class="col materiasTitulo">Académico:</div>
    </div>
    <div class="container-fluid mt-2">
        <div class="row">
            <ul class="nav nav-tabs" id="myTabs">
                <!--<button id="miBotonAjax"><i class="far fa-calendar-alt"></i> Calendario</button>
                -->
                <li class="nav-item" id="calendarNav" name="calendarNav" idnav="calendarNav">
                    <a class="nav-link text-black-50" id="tab1" data-toggle="tab" href="#panel1" role="tab">
                        <i class="far fa-calendar-alt"></i> Calendario
                    </a>
                </li>
                <li class="nav-item" id="activityNav" name="activityNav" idnav="activityNav">
                    <a class="nav-link text-black-50" id="tab2" data-toggle="tab" href="#panel2" role="tab">
                        <i class="fas fa-pencil-ruler"></i> Actividades
                    </a>
                </li>
                <li class="nav-item" id="testNav" name="testNav" idnav="testNav">
                    <a class="nav-link text-black-50" id="tab3" data-toggle="tab" href="#panel3" role="tab">
                        <i class="fas fa-graduation-cap"></i> Examenes
                    </a>
                </li>
                <li class="nav-item" id="skillsNav" id="skillsNav" idnav="skillsNav">
                    <a class="nav-link text-black-50" id="tab4" data-toggle="tab" href="#panel4" role="tab">
                        <i class="fas fa-shapes"></i> Destrezas
                    </a>
                </li>
                <li class="nav-item"  id="statisticNav" id="statisticNav" idnav="statisticNav">
                    <a class="nav-link text-black-50" id="tab5" data-toggle="tab" href="#panel5" role="tab">
                        <i class="fas fa-envelope"></i> Estadísticas
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-black-50" id="tab6" idnav="tab6" data-toggle="tab" href="#panel6" role="tab">
                        <i class="fas fa-chart-bar"></i> Tab 5
                    </a>
                </li>
            </ul>
        </div>
        <div class="row mt-3">
            <div class="col-md-12" id="contentNav">

            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('.nav-item').click(function () {
                ajaxindicatorstart("Espere un momento por favor")
                $('#contentNav').html('')
                $.ajax({
                    url: '{{ route('/contentNav') }}',
                    type: 'POST',
                    dataType: 'HTML',
                    data: {
                        _token: $('[name=_token]').val(),
                        idnav: $(this).attr('idnav')
                    },
                    success: function (response) {
                        $('#contentNav').html(response)
                        ajaxindicatorstop()

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log('Error en la solicitud Ajax:', textStatus, errorThrown);
                    }
                });
            });

        });


    </script>
@stop