@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Agenda";
        $modulo = "Agenda";
        $vista="Listado";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
@endsection

@section("contenido")
    <div class="row">

        <div class="card mb-2 col-md-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-10">
                        <label for="fecha">
                            <span class="fs-6"><b>Escoja un fecha</b></span>
                        </label>
                        <input type="date" class="form-control" name="fecha" id="fecha" value="{{date("Y-m-d")}}">
                    </div>
                    <div class="col-md-2 py-7">
                        <button class="btn btn-info btn-sm" id="btnFiltro"> <i class="fas fa-search"></i></button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="card mt-1">
        <div class="card-body my-0">
            <div class="row">
                <div class="col-md-12">
                    <table id="tabla" class="table"></table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")
    <script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>

    <script>
        let tabla;
        let url_dt="{{route('admin::agenda.listadoDT',date("Y-m-d"))}}";
        $( document ).ready(function() {
            tabla= $('#tabla').DataTable({
                dom:
                    "<'row'<'col-sm-6 text-left'f><'col-sm-6 text-right'B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",

                buttons: [
                    'excelHtml5',
                    {
                        text: 'Imprimir',
                        action: function ( e, dt, node, config ) {
                            let fecha=$("#fecha").val();
                            let url="{{route("admin::agenda.pdf",":fecha")}}".replace(":fecha",fecha);
                            let newTab = window.open();
                            newTab.location.href = url;
                        }
                    },
                ],
                responsive: true,
                fixedHeader: true,
                pageLength : 25,
                processing: true,
                language: { url: "//cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json" },
                ajax: {
                    url: url_dt,
                    type: 'GET',
                    dataType: 'json',
                },
                order: [[1,"asc"]],
                columns: [
                    {
                        title: "Fecha",
                        data: 'start',
                        render: function (data, type, row) {
                            // Si el tipo es 'display' (para la visualización en la tabla), formatea la fecha
                            if (type === 'display') {
                                var fecha = moment(data); // Suponiendo que estás utilizando moment.js para manejar fechas
                                return fecha.format('YYYY-MM-DD'); // Formato de fecha deseado
                            }
                            return data; // Devuelve la fecha sin formato para otros tipos
                        }
                    },
                    { title: "Hora", data: 'start', render: function (data, type, row) {
                            // Si el tipo es 'display', formatea la hora
                            if (type === 'display') {
                                var fecha = moment(data);
                                return fecha.format('HH:mm'); // Formato de hora deseado
                            }
                            return data; // Devuelve la hora sin formato para otros tipos
                        } },
                    {title:"Estudiante", data: 'title', },
                    {title:"Acciones", data: null, responsivePriority: 2, },
                ],
                columnDefs: [

                ]
            });

            $('#btnFiltro').on('click', function () {
                let fecha = $("#fecha").val();
                let url_dt="{{route('admin::agenda.listadoDT',":fecha")}}";
                url_dt=url_dt.replace(":fecha",fecha);
                tabla.ajax.url(url_dt).load();
            });
        });
    </script>
@endsection