@extends('layouts.app')

@section('scripts')

    <script src="{{ asset('https://cdn.dhtmlx.com/scheduler/5.3/sources/dhtmlxscheduler.js') }}"></script>
    <script src="https://export.dhtmlx.com/scheduler/api.js"></script>

    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_limit.js'])
    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_timeline.js'])
    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_readonly.js'])
    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_collision.js'])
    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_minical.js'])
    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_editors.js'])
    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_multiselect.js'])
    @vite(['resources/js/aulas/scheduler/dhtmlxscheduler_serialize.js'])

    @vite(['resources/js/locale_es.js'])
    @vite(['resources/js/aulas/aulas.js'])
    @vite(['resources/js/aulas/libres.js'])
    @vite(['resources/js/aulas/asignados.js'])

@endsection

    @vite(['resources/css/aulas/scheduler/dhtmlxscheduler.css'])
    @vite(['resources/css/aulas/asignacionEspacios.css'])

@section('title')
    {{ Breadcrumbs::render('asignacionEspacios') }}
    <div class="page-header">
        <h2>Asignación de espacios</h2>
    </div>
@endsection

@section('content')
    <nav id="menus-tabs">
        <div class="nav nav-tabs" id="nav-tab" role="tablist">

            <button class="nav-link active"  data-bs-toggle="tab" data-bs-target="#nav-libres"
                    type="button" role="tab" aria-controls="nav-libres-tab" aria-selected="true">Libres
            </button>

            <button class="nav-link "  data-bs-toggle="tab" data-bs-target="#nav-asignados" type="button"
                    role="tab" aria-controls="nav-asignados-tab" aria-selected="false" tabindex="-1">Asignados
            </button>

            <button class="nav-link "  data-bs-toggle="tab" data-bs-target="#nav-aulas" type="button"
                    role="tab" aria-controls="nav-aulas-tab" aria-selected="false" tabindex="-1"
                    id="tab-aulas" >Aulas
            </button>

        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane  show active" id="nav-libres" role="tabpanel" aria-labelledby="nav-libres-tab" tabindex="0">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-5">
                    @include('aulas.libres')
                </div>
            </div>
        </div>
        <div class="tab-pane  " id="nav-asignados" role="tabpanel" aria-labelledby="nav-asignados-tab" tabindex="0">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-5">
                    @include('aulas.asignados')
                </div>
            </div>
        </div>
        <div class="tab-pane  " id="nav-aulas" role="tabpanel" aria-labelledby="nav-aulas-tab" tabindex="0">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-5">
                    @include('aulas.aulas')
                </div>
            </div>
        </div>
    </div>

@endsection


@section('modal')

    @include('common.modals.mdl-confirmation')
    {!! Generate::modalErrors() !!}
@endsection