@extends('layouts.admin')
@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"> Listado de Mis Reservas</h3>

                </div>
                <div class="card-body">

                    <table id="example1" class="table table-bordered table-hover table-sm">
                        <thead style="background-color: #4e4e50">
                        <tr>
                            <th style="text-align:center" scope="col"><b>Nro</b></th>
                            <th style="text-align:center" scope="col"><b>Doctor</b></th>
                            <th style="text-align:center" scope="col"><b>Especialidad</b></th>
                            <th style="text-align:center" scope="col"><b>Fecha Reserva</b></th>
                            <th style="text-align:center" scope="col"><b>Hora Reserva</b></th>
                            <th style="text-align:center" scope="col"><b>Fechay Hora de Registro</b></th>
                            <th style="text-align:center" scope="col"><b>Acciones</b></th>

                        </tr>
                        </thead>
                        <tbody>
                                                @foreach($eventos as $evento)
                            <tr>
                                <td style="text-align:center">{{$contador++}}</td>
                                <td style="text-align: center">{{$evento->doctor->nombres.' '.$evento->doctor->apellidos}} </td>
                                <td style="text-align: center">{{$evento->doctor->especialidad}}</td>
                                <td style="text-align: center">{{Carbon\Carbon::parse($evento->start)->format('Y-m-d')}}</td>
                               <td style="text-align: center">{{Carbon\Carbon::parse($evento->start)->format('H:i')}}</td>
                               <td style="text-align: center">{{$evento->created_at}}</td>

                                <td style="text-align: center">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <form action="{{url('/admin/eventos/destroy',$evento->id)}}"
                                              id="formulario{{$evento->id}}" onclick="preguntar{{$evento->id}}(event)" method="post">
                                            @csrf
                                            @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                        </form>

                                        <script>
                                            function preguntar{{$evento->id}}(event) {
                                            event.preventDefault();
                                                Swal.fire({
                                                    title: "Seguro Deseas eliminar este registro?",
                                                    text: "al eliminar este registro ese horario queda disponible",
                                                    icon: "question",
                                                    showDenyButton: true,
                                                    showCancelButton: false,
                                                    confirmButtonText: "Eliminar",
                                                    denyButtonText: `Cancelar`
                                                }).then((result) => {
                                                    /* Read more about isConfirmed, isDenied below */
                                                    if (result.isConfirmed) {
                                                        var  form=$('#formulario{{$evento->id}}');
                                                        form.submit();
                                                    } else if (result.isDenied) {

                                                    }
                                                });
                                            }
                                        </script>

                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                    <script>
                        $(function () {
                            $("#example1").DataTable({
                                "pageLength": 10,
                                "language": {
                                    "emptyTable": "No hay información",
                                    "info": "Mostrando _START_ a _END_ de TOTAL Mis reservas",
                                    "infoEmpty": "Mostrando 0 a 0 de 0 Reservas",
                                    "infoFiltered": "(Filtrado de MAX total Reservas)",
                                    "infoPostFix": "",
                                    "thousands": ",",
                                    "lengthMenu": "Mostrar MENU Reservas",
                                    "loadingRecords": "Cargando...",
                                    "processing": "Procesando...",
                                    "search": "Buscador:",
                                    "zeroRecords": "Sin resultados encontrados",
                                    "paginate": {
                                        "first": "Primero",
                                        "last": "Ultimo",
                                        "next": "Siguiente",
                                        "previous": "Anterior"
                                    }
                                },
                                "responsive": true, "lengthChange": true, "autoWidth": false,
                                buttons: [{
                                    extend: 'collection',
                                    text: 'Reportes',
                                    orientation: 'landscape',
                                    buttons: [{
                                        text: 'Copiar',
                                        extend: 'copy',
                                    }, {
                                        extend: 'pdf'
                                    },{
                                        extend: 'csv'
                                    },{
                                        extend: 'excel'
                                    },{
                                        text: 'Imprimir',
                                        extend: 'print'
                                    }
                                    ]
                                },
                                    {
                                        extend: 'colvis',
                                        text: 'Visor de columnas',
                                        collectionLayout: 'fixed three-column'
                                    }
                                ],
                            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
@endsection