@extends('layouts.app', ['title' => 'Administrar Parametros'])
@section('content')

    <div class="container">
        <ul class="nav nav-tabs nav-fill" id="settingsTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="potential-tab" data-toggle="tab" href="#potential" role="tab" aria-controls="potential" aria-selected="true">
                    <img src="{{asset('images/icons/Icono_1.png')}}" width="24"> Potencial de Aprehendizaje
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="talent-tab" data-toggle="tab" href="#talent" role="tab" aria-controls="talent" aria-selected="false">
                    <img src="{{asset('images/icons/Icono_5.png')}}" width="24"> Campo de Talento
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="other" aria-selected="false">
                    <i class="fa fa-feather"></i> Otros
                </a>
            </li>
        </ul>

        <div class="tab-content" id="settingsTabContent">
            <div class="tab-pane fade show active py-3" id="potential" role="tabpanel" aria-labelledby="potential-tab">
                @include('admin.parameters._includes.potential')
            </div>

            <div class="tab-pane fade py-3" id="talent" role="tabpanel" aria-labelledby="talent-tab">
                @include('admin.parameters._includes.talent')
            </div>

            <div class="tab-pane fade py-3" id="other" role="tabpanel" aria-labelledby="other-tab">
                @include('admin.parameters._includes.other')
            </div>
        </div>
    </div>

@endsection
@push('js')
<script>
    $(`#${window.location.hash.replace('#tab-','')}-tab`).tab('show');
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        window.location.hash = 'tab-'+e.target.getAttribute('aria-controls');
    })
</script>
@endpush