@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css') }}">
<link rel="stylesheet" href="{{asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}">
@endsection



@section('content')


<div class="container-fluid mb-5">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-body">

          <div class="d-flex justify-content-sm-between">
            <h3 class="card-title">Listado de Pacientes</h3>

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modelId">
              PACIENTE
            </button>

          </div>

          <br>


          <!-- Modal -->
          <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">NUEVO PACIENTE</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <form action="{{route('paciente.store')}}" method="post">
                  @csrf
                  <div class="modal-body">


                    <div class="form-group">
                      <label for="">DOCTOR</label>
                      <select class="form-control" name="doctor_id" id="doctor_id" required>
                        <option>SELECCIONE DOCTOR</option>
                        @foreach ($doctor as $doc)
                        <option value="{{$doc->id}}">{{$doc->nombre}}</option>
                        @endforeach
                      </select>
                    </div>

                    <div class="form-group">
                      <label for="">NOMBRE</label>
                      <input type="text" class="form-control" name="nombre">
                    </div>
                    <div class="form-group">
                      <label for="">DIRECCION</label>
                      <input type="text" class="form-control" name="direccion">
                    </div>
                    <div class="form-group">
                      <label for="">TELEFONO</label>
                      <input type="text" class="form-control" name="telefono">
                    </div>
                    <!-- <div class="form-group">
                      <label for="">CUI</label>
                      <input type="text" class="form-control" name="cui">
                    </div> -->

                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save    "></i> GUARDAR</button>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <div class="table-responsive mb-5">
            <table class="table table-hover" id="table_id" data-page-length="15">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Direccion</th>
                  <th>Telefono 1</th>
                  <th>Accion </th>
                </tr>
              </thead>
              <tbody>
                @foreach($pacientes as $cli)
                <tr>
                  <td>{{$cli->paciente->nombre}} <br> Dr. {{$cli->cliente->nombre}} </td>
                  <td>{{$cli->paciente->direccion}}</td>
                  <td>{{$cli->paciente->telefono}}</td>
                  <td>
                    <a class="btn btn-sm btn-primary" href="{{route('paciente.show', ['id' => $cli->paciente->id])}}"><i class="fa fa-eye" aria-hidden="true"></i>Datos</a>

                    <a class="btn btn-sm btn-danger" onclick="return confirm('Esta Seguro de Eliminar?')" href="{{route('paciente.delete', ['id' => $cli->paciente->id])}}"><i class="fa fa-trash" aria-hidden="true"></i> Eliminar</a>
                  </td>

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


@endsection

@section('scripts')
<script src="{{asset('plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatable/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/slim-select/slimselect.min.js') }}"></script>

<script>
  setTimeout(function() {
    new SlimSelect({
      select: '#doctor_id',
      placeholder: 'Select Permissions',
      deselectLabel: '<span>&times;</span>',
      hideSelectedOption: true,
    })
  }, 300);

  $(document).ready(function() {
    $('#table_id').DataTable({
      "language": {
        'info': '_TOTAL_ Registros',
        'search': 'Buscar',
        'paginate': {
          'next': 'SIGUIENTE',
          'previous': 'ATRAS'
        },
        'loadingRecords': 'CARGANDO',
        'emptyTable': 'NO HAY DATOS',
        'zeroRecords': 'NO HAY DATOS IGUALES'
      }
    });
  });
</script>
@endsection