{{-- CONTENT SECTION --}}
@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row justify-content-end align-items-end">
                        <div class="col">
                            <h3 class="page-title">Title</h3>
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" data-toggle="modal" id="btnNuevo"><i
                                    class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">Col 1</th>
                                    <th class="text-center">Col 2</th>
                                    <th class="text-center">Col 3</th>
                                    <th class="text-center">Col 4</th>
                                    <th class="text-center">Col 5</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

{{-- PRIMARY BUTTON --}}
<button type="submit" class="btn btn-primary">Submit</button>

{{-- TABLE SAMPLE --}}
<div class="row">
    <div class="col-lg-12">

        <div class="card card-table comman-shadow shadow-lg">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">Title</h3>
                    </div>
                    <div class="col-auto text-end float-end ms-auto download-grp">
                        <a href="#" type="button" class="btn btn-primary" data-toggle="modal" id="btnNuevo"><i
                                class="fas fa-plus"></i></a>
                    </div>
                </div>
                <br>
                <div class="table-responsive">
                    <table id="" class="table table-hover table-center table-bordered table-striped"
                        style="width:100%">
                        <thead class="thead-light">
                            <tr>
                                <th class="text-center">Col 1</th>
                                <th class="text-center">Col 2</th>
                                <th class="text-center">Col 3</th>
                                <th class="text-center">Col 4</th>
                                <th class="text-center">Col 5</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- SMALL CARDS --}}
<div class="row">
    <div class="col-xl-3 col-sm-6 col-12 d-flex">
        <div class="card bg-comman w-100">
            <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                    <div class="db-info">
                        <h6>Students</h6>
                        <h3>50055</h3>
                    </div>
                    <div class="db-icon">
                        <img src="assets/img/icons/dash-icon-01.svg" alt="Dashboard Icon">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 col-12 d-flex">
        <div class="card bg-comman w-100">
            <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                    <div class="db-info">
                        <h6>Awards</h6>
                        <h3>50+</h3>
                    </div>
                    <div class="db-icon">
                        <img src="assets/img/icons/dash-icon-02.svg" alt="Dashboard Icon">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 col-12 d-flex">
        <div class="card bg-comman w-100">
            <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                    <div class="db-info">
                        <h6>Department</h6>
                        <h3>30+</h3>
                    </div>
                    <div class="db-icon">
                        <img src="assets/img/icons/dash-icon-03.svg" alt="Dashboard Icon">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 col-12 d-flex">
        <div class="card bg-comman w-100">
            <div class="card-body">
                <div class="db-widgets d-flex justify-content-between align-items-center">
                    <div class="db-info">
                        <h6>Revenue</h6>
                        <h3>$505</h3>
                    </div>
                    <div class="db-icon">
                        <img src="assets/img/icons/dash-icon-04.svg" alt="Dashboard Icon">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- LARGE CARDS --}}
<div class="row">
    <div class="col-md-12 col-lg-6">

        <div class="card card-chart">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-6">
                        <h5 class="card-title">Overview</h5>
                    </div>
                    <div class="col-6">
                        <ul class="chart-list-out">
                            <li><span class="circle-blue"></span>Teacher</li>
                            <li><span class="circle-green"></span>Student</li>
                            <li class="star-menus"><a href="javascript:;"><i class="fas fa-ellipsis-v"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="apexcharts-area"></div>
            </div>
        </div>

    </div>
    <div class="col-md-12 col-lg-6">

        <div class="card card-chart">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-6">
                        <h5 class="card-title">Number of Students</h5>
                    </div>
                    <div class="col-6">
                        <ul class="chart-list-out">
                            <li><span class="circle-blue"></span>Girls</li>
                            <li><span class="circle-green"></span>Boys</li>
                            <li class="star-menus"><a href="javascript:;"><i class="fas fa-ellipsis-v"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="bar"></div>
            </div>
        </div>

    </div>
</div>


{{-- VIEW SAMPLE --}}
@extends('layouts.menu')

@section('tittle')
    TITLE
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">Title</h3>
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Desde</label>
                            <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                value="{{ $date1 }}">
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Hasta</label>
                            <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                value="{{ $date }}">
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" id="btnNuevo" data-toggle="modal"
                                title="Crear Nuevo" alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="proyectosTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">Col 1</th>
                                    <th class="text-center">Col 2</th>
                                    <th class="text-center">Col 3</th>
                                    <th class="text-center">Col 4</th>
                                    <th class="text-center">Col 5</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Brtlip";

            $('#menu, #sub_menu').addClass('active');

            var toastMixin = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 2500,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var toastMixinLong = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });
        });
    </script>
@endsection



{{-- SAMPLE MODAL --}}
<div class="modal fade" id="modal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
            </div>
            <div class="modal-body">

                <div class="row">

                </div>

                <div class="modal-footer">
                    <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                    <button type="button" class="btn btn-secondary" id="btnCancelar"
                        data-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- CONFIRM DIALOG --}}
<script>
    Swal.fire({
        title: "    titulo  ?",
        text: "",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Confirmar!'
    }).then((result) => {
        if (result.isConfirmed) {
            //
            //
            //
        }
    });
</script>