@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 Horarios</h3>

                    <div class="card-tools">
                        <a href="{{url('admin/horarios/create')}}" class="btn btn-primary" >
                            Registrar Horario
                        </a>
                    </div>

                </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>Consultorio</b></th>
                            <th style="text-align:center" scope="col"><b>Dia de Atención</b></th>
                            <th style="text-align:center" scope="col"><b>Hora Inicio</b></th>
                            <th style="text-align:center" scope="col"><b>Hora Fin</b></th>
                            <th style="text-align:center" scope="col"><b>Acciones</b></th>

                        </tr>
                        </thead>
                        <tbody>
                                                @foreach($horarios as $horario)
                            <tr>
                                <td style="text-align:center">{{$contador++}}</td>
                                <td>{{$horario->doctor->nombres." ".$horario->doctor->apellidos}}</td>
                                <td>{{$horario->doctor->especialidad}}</td>
                                <td>{{$horario->consultorio->nombre}}</td>
                                <td>{{$horario->dia}}</td>
                                <td>{{$horario->hora_inicio}}</td>
                                <td>{{$horario->hora_fin}}</td>

                                <td style="text-align: center">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <a href="{{url('admin/horarios/'.$horario->id)}}" type="button" class="btn btn-info btn-sm"><i class="bi bi-eye"></i></a>
                                        <a href="{{url('/admin/horarios/'.$horario->id.'/edit')}}" type="button" class="btn btn-success btn-sm"><i class="bi bi-pencil"></i></a>
                                        <a href="{{url('/admin/horarios/'.$horario->id.'/confirm-delete')}}" type="button" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></a>
                                    </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_ Horarios",
                                    "infoEmpty": "Mostrando 0 a 0 de 0 Horarios",
                                    "infoFiltered": "(Filtrado de MAX total Horarios)",
                                    "infoPostFix": "",
                                    "thousands": ",",
                                    "lengthMenu": "Mostrar MENU Horarios",
                                    "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>
    <br>
    <div class="row">
        <!-- tabla calendario -->
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                   <div class="row">
                       <div class="col-md-4">
                           <h4 style="font-size: 20px"> Calendario de Atencion Doctores</h4>
                       </div>
                       <div class="col-md-4" >
                           <div style="float: right; font-size: 20px">
                               <label for="">Consultorio</label>
                           </div>
                       </div>

                       <div class="col-md-4">
                           <select name="consultorio_id" id="consultorio_select" class="form-control">
                               <option value="">Seleccione Consultorio</option>
                               @foreach($consultorios as $consultorio)
                                   <option value={{$consultorio->id}}>{{$consultorio->nombre." - ".$consultorio->ubicacion}}</option>
                               @endforeach
                           </select>
                       </div>
                   </div>

                </div>
                <div class="card-body">
                    <script>
                        $('#consultorio_select').on('change', function (){
                          var consultorio_id = $('#consultorio_select').val();
                            //alert(consultorio_id);
                          var url="{{route('admin.horarios.cargar_datos_consultorios',':id')}}";
                          url = url.replace(':id',consultorio_id);

                           if(consultorio_id){
                              $.ajax({
                                  url: url,
                                  type: 'GET',
                                  success:function (data){
                                      $('#consultorio_info').html(data);
                                  },
                                    error:function (){
                                      alert('Error al Obtender los datos del Consultorio');
                                  }
                              });
                            }else {
                               $('#consultorio_info').html('');
                           }
                        });
                    </script>
                    <hr>
                    <div id="consultorio_info">

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