@extends('modules.head') @section('contenido')
<link rel="stylesheet" href="{{ asset('js/timepicker/bootstrap-timepicker.min.css') }}"/>
<h3 ><a class="ruta" class="" href="{{url('/notifications')}}">{{ Lang::get('messages.screen_create_notifications_tag1')}}  </a> <span class="separador-ruta">|</span><a class="ruta" class="" href="{{url('/notifications/add')}}">{{ Lang::get('messages.screen_create_notifications_tag2')}} </a> </h3>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">{{ Lang::get('messages.screen_create_notifications_tag1')}}</h3>
    </div>

    <!-- /.box-header -->
    <div class="box-body">
        <form role="form" id="createNotification" data-toggle="validator">
            <div class="row">
                <div class="col-4 col-md-4">
                    <div class="form-group">
                        <label for="target_id">{{ Lang::get('messages.screen_create_notifications_tag11')}} </label>
                        <select class="form-control" name="target_id" >
                            <option value=""> Seleccionar </option>
                            @foreach($targets as $target)
                            <option value="{{$target->id}}">{{$target->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-4 col-md-4">
                    <div class="form-group">
                        <label for="email_user">{{Lang::get('messages.screen_sale_tag20')}}</label>
                        <input type="email_user" data-id="" id="email_user" class="form-control" name="email_user">
                    </div>
                </div>
                <div class="col-4 col-md-4">
                    <div class="form-group m-t-30">
                        <span id="name_user"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-4 col-md-4">
                    <div class="form-group">
                        <label for="link">{{Lang::get('messages.screen_banners_tag5')}}</label>
                        <input type="link" data-id="" id="link" class="form-control" name="link">
                    </div>
                </div>

                <div class="col-4 col-md-4">
                    <div class="form-group">
                    <label for="limit_discount">{{ Lang::get('messages.screen_create_notifications_tag5')}}</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" required>
                    </div>
                    </div>
                </div>

                <div class="col-4 col-md-4">
                    <div class="bootstrap-timepicker">
                    <div class="form-group">
                        <label for="limit_hour_discount">{{ Lang::get('messages.screen_create_notifications_tag6')}}</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" required>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="message">{{ Lang::get('messages.screen_create_notifications_tag4')}} </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 ">{{ Lang::get('messages.screen_create_notifications_tag7')}}</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')}}">{{ Lang::get('messages.screen_create_notifications_tag8')}} </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">
    $(document).ready(function () {

      $.fn.datepicker.dates['en'] = {
          days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
          daysShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
          daysMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
          months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
          monthsShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
          today: "Hoy",
          clear: "Clear",
          format: "yyyy-mm-dd",
          titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
          weekStart: 0
      };

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

      new EmojiPicker();
    });


</script>
 @endsection