@extends('layout.sidebar')
@section('content')
    <style>
        .active {
            background-color: #c6c8ca !important;
            color: black !important;
        }
    </style>
    @csrf
    <div class="row">
        <div class="col materiasTitulo">Estadísticas como docente:</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 optionImTeacher" id="courseNav" name="courseNav" idnav="courseNav">
                    <a class="nav-link text-black-50" id="tab1" data-toggle="tab" href="#panel1" role="tab">
                        <i class="far fa-calendar-alt"></i> Por curso
                    </a>
                </li>
                <li class="nav-item optionImTeacher" id="subjectNav" name="subjectNav" idnav="subjectNav">
                    <a class="nav-link text-black-50" id="tab2" data-toggle="tab" href="#panel2" role="tab">
                        <i class="fas fa-pencil-ruler"></i> Por materia
                    </a>
                </li>
                <li class="nav-item optionImTeacher" 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> Por estudiante
                    </a>
                </li>
            </ul>
        </div>
        <div class="row mt-3">
            <div class="col-md-12" id="contentNav">

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

    <script>
        $(document).ready(function () {
            $('.optionImTeacher').click(function () {
                ajaxindicatorstart("Espere un momento por favor")
                $('#contentNav').html('')
                $.ajax({
                    url: '{{ route('/teacher-statistic/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