@extends('layouts.admin')

@section('styles')
<style>
   .scrolling-wrapper {
      height: 358px;
      overflow-y: scroll;

   }
</style>


<link rel="stylesheet" href="{{asset('plugins/datepicker/default.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datepicker/default.date.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datepicker/default.time.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datepicker_material/datetimepicker.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datepicker_material/iconos.css')}}">
@endsection

@section('content')

<div class="container-fluid">
   <div class="row">
      <div class="col-md-6">
         <div class="card">
            <div class="card-body">
               <h4 class="card-title">Agendar</h4>

               <form action="{{route('agenda.store')}}" method="post">
                  @csrf()
                  @include('admin.agenda.form')

                  <button type="submit" class="btn btn-outline-primary"> <i class="fas fa-save    "></i> Agendar</button>
               </form>



            </div>
         </div>
      </div>

      <div class="col-md-6 scrolling-wrapper overflow-auto">
         @include('admin.agenda.agendado')
      </div>
   </div>

   <div class="row">
      <div class="col-md-4">
         <div class="card">
            <div class="card-body">
               <h4 class="card-title">BUSQUEDA</h4> <br>
               <form action="{{route('agenda.indexpos')}}" method="post">
                  @csrf

                  @include('admin.agenda.formsearch')

                  <button type="submit" class="btn btn-primary"> <i class="fa fa-search" aria-hidden="true"></i> Buscar</button>

               </form>
            </div>
         </div>
      </div>
      <div class="col-md-8">
         <div class="table-responsive">
            <table class="table table-sm ">
               <thead class="">
                  <tr>
                     <th>Paciente</th>
                     <th>Tratamiento</th>
                     <th>Fecha y Hora</th>
                     <th></th>
                  </tr>
               </thead>
               <tbody>

                  @foreach ( $pacientes as $paciente)
                  <tr>
                     <td>{{$paciente->paciente}}</td>
                     <td>{{$paciente->tratamiento}}</td>
                     <td>{{$paciente->fecha}} - {{ date("g:i a", strtotime($paciente->hora)) }} </td>
                     <td>
                        <form action="{{route('agenda.delete', $paciente->id)}}" method="post" enctype="multipart/form">
                           @csrf
                           @method('DELETE')

                           <a class="btn btn-primary" href="{{route('agenda.edit', ['id' => $paciente->id])}}" role="button"><i class="fas fa-edit"></i></a>

                           <button type="submit" class="btn btn-danger" onclick="return confirm('¿Esta Seguro de Elimar?')"> <i class="fa fa-trash" aria-hidden="true"></i> </button>
                        </form>

                     </td>
                  </tr>
                  @endforeach

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


@endsection

@section('scripts')
<script src="{{asset('plugins/datepicker/picker.js')}}"></script>
<script src="{{asset('plugins/datepicker/picker.date.js')}}"></script>
<script src="{{asset('plugins/datepicker/picker.time.js')}}"></script>

<script src="{{asset('plugins/datepicker_material/moment.min.js')}}"></script>
<script src="{{asset('plugins/datepicker_material/es.min.js')}}"></script>
<script src="{{asset('plugins/datepicker_material/datetimepicker.js')}}"></script>

<script>
   $('.datepicker').pickadate({
      weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
      // Strings and translations
      monthsFull: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembrr', 'Octubre', 'Noviembre', 'Deciembre'],
      monthsShort: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octuber', 'Noviembre', 'Diciembre'],
      showMonthsShort: true,
      today: 'Hoy',
      clear: 'Limpiar',
      close: 'Cerrar',
      format: 'yyyy-m-d',
   });



   $('#time').bootstrapMaterialDatePicker({
      date: false,
      shortTime: true,
      format: 'HH:mm'
   });
</script>

@endsection