@extends('layouts.head') @section('content')
<link rel="stylesheet" href="{{ asset('js/timepicker/bootstrap-timepicker.min.css') }}" />

<div class="box">
  <div class="box-header with-border">
    <h3 class="box-title">{{ __('messages.notifications.title_1') }}</h3>
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <form role="form" id="createNotification" data-toggle="validator">
      <input type="hidden" name="user_id" id="user_id">
      <div class="row">
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="limit_discount">{{ __('messages.notifications.title_2') }}</label>
            <div class="input-group date">
              <div class="input-group-addon">
                <i class="fa fa-user"></i>
              </div>
              <input type="text" class="form-control pull-right" name="user_document" id="user_document" />
            </div>
          </div>
        </div>
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="limit_discount">{{ __('messages.notifications.title_3') }}</label>
            <div class="input-group">
              <div class="checkbox checbox-switch switch-success">
                <label>
                  {{ __("messages.insurances.no") }}
                  <input type="checkbox" class="chkInsurances" id="send_all" name="send_all" />
                  <span></span>
                  {{ __("messages.insurances.yes") }}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="limit_discount">{{ __('messages.notifications.title_4') }}</label>
            <div class="input-group date">
              <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
              </div>
              <input type="text" class="form-control pull-right" name="date" id="date" autocomplete="off" required />
            </div>
          </div>
        </div>

        <div class="col-4 col-md-4">
          <div class="bootstrap-timepicker">
            <div class="form-group">
              <label for="limit_hour_discount">{{ __('messages.notifications.title_5') }}</label>
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="fa fa-clock-o"></i>
                </div>
                <input type="text" class="form-control timepicker" name="time" id="time" autocomplete="off" required />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <label for="message">{{ __('messages.notifications.title_6') }}</label>
            <textarea class="form-control" name="message" id="message" cols="30" rows="10" data-emoji-picker="true"
              required></textarea>
          </div>
        </div>
      </div>

      <button onClick="createNotification()" id="btn-create-notification" class="btn btnBox pull-right ">
        {{ __('messages.notifications.title_7') }}
      </button>
      <button type="button" class="btn btnBox pull-right displayNone" style="display: none;" id=" spinnerButton">
        <i class="fa fa-spinner fa-spin"></i>
      </button>
      <button type="button" class="btn btnBox pull-right displayNone" id="spinnerButton">
        <i class="fa fa-spinner fa-spin"></i>
      </button>
      <button type="button" class="btn btn-default pull-right btnCancel">
        <a href="{{ url('/notifications') }}">{{ __('messages.notifications.title_8') }}</a>
      </button>
      {{ csrf_field() }}
    </form>
  </div>
  <!-- /.box-body -->
</div>

<!-- <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script> -->
<script src="{{ asset('js/notifications.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>

<script src="{{ asset('js/datetimepicker/moment.min.js') }}"></script>
<script src="{{ asset('js/datetimepicker/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ asset('js/timepicker/bootstrap-timepicker.min.js') }}"></script>
<script src="{{ asset('js/vanilla-emoji-picker-master/src/emojiPicker.js') }}"></script>

<script type="text/javascript">
  $("#user_document").autocomplete({
      source: "/pacientes/autocomplete",
      minLength: 3,
      select: function (event, ui) {
        $('#user_id').val(ui.item.id);
      }
    });

  $(document).ready(function() {
    $.fn.datepicker.dates["en"] = {
      days: ["{{ __('messages.dias.domingo') }}", "{{ __('messages.dias.lunes') }}", "{{ __('messages.dias.martes') }}", "{{ __('messages.dias.miercoles') }}", "{{ __('messages.dias.jueves') }}", "{{ __('messages.dias.viernes') }}", "{{ __('messages.dias.sabado') }}"],
      daysShort: ["{{ __('messages.days_short.domingo') }}", "{{ __('messages.days_short.lunes') }}", "{{ __('messages.days_short.martes') }}", "{{ __('messages.days_short.miercoles') }}", "{{ __('messages.days_short.jueves') }}", "{{ __('messages.days_short.viernes') }}", "{{ __('messages.days_short.sabado') }}"],
      daysMin: ["{{ __('messages.days_mini.domingo') }}", "{{ __('messages.days_mini.lunes') }}", "{{ __('messages.days_mini.martes') }}", "{{ __('messages.days_mini.miercoles') }}", "{{ __('messages.days_mini.jueves') }}", "{{ __('messages.days_mini.viernes') }}", "{{ __('messages.days_mini.sabado') }}"],
      months: [
        "{{ __('messages.meses.enero') }}",
        "{{ __('messages.meses.febrero') }}",
        "{{ __('messages.meses.marzo') }}",
        "{{ __('messages.meses.abril') }}",
        "{{ __('messages.meses.mayo') }}",
        "{{ __('messages.meses.junio') }}",
        "{{ __('messages.meses.julio') }}",
        "{{ __('messages.meses.agosto') }}",
        "{{ __('messages.meses.septiembre') }}",
        "{{ __('messages.meses.octubre') }}",
        "{{ __('messages.meses.noviembre') }}",
        "{{ __('messages.meses.diciembre') }}"
      ],
      monthsShort: [
        "{{ __('messages.meses_short.enero') }}",
        "{{ __('messages.meses_short.febrero') }}",
        "{{ __('messages.meses_short.marzo') }}",
        "{{ __('messages.meses_short.abril') }}",
        "{{ __('messages.meses_short.mayo') }}",
        "{{ __('messages.meses_short.junio') }}",
        "{{ __('messages.meses_short.julio') }}",
        "{{ __('messages.meses_short.agosto') }}",
        "{{ __('messages.meses_short.septiembre') }}",
        "{{ __('messages.meses_short.octubre') }}",
        "{{ __('messages.meses_short.noviembre') }}",
        "{{ __('messages.meses_short.diciembre') }}"
      ],
      today: "{{ __('messages.hoy') }}",
      clear: "{{ __('messages.clear') }}",
      format: "yyyy-mm-dd",
      titleFormat: "MM yyyy" /* Leverages same syntax as 'format' */,
      weekStart: 0
    };

    $("input[name='date']").datepicker();
    $(".timepicker").timepicker({
      stepping: 1,
      showInputs: false
    });
    $("#time").val("");

    new EmojiPicker();
  });


</script>
@endsection