@extends('layouts.app')

@section('title', 'Create Notification |')

@section('content')

  <!-- Page Content -->
    <div class="content container-fluid" style="background: #fff; min-height: 820px;">         
    <div class="row">
        <div class="col-md-8 offset-2">
                 <!-- Page Header -->
        <div class="page-header" style="padding-top: 20px;">
            <div class="row align-items-center">
                <div class="col">
                    <h3>Publish a notification</h3>                              
                </div>

                <div class="col-auto float-right ml-auto">
                    <a href="{{ route('notifications') }}" class="btn btn-info btn-sm"> <i class="fa fa-arrow-left"></i> Back</a>
                </div>
            </div>
        </div>
        <!-- /Page Header -->

<div style="padding: 10px 10px;">
    {{ Form::open(array('url' => 'notifications/store', 'files' => true)) }}

<div class="form-group @if ($errors->has('subject')) has-error @endif">
    <label>Select user group</label>
    <select class="form-control" name="">
      <option value="">Select</option>
      <option value="">Our team</option>
      <option value="">Client</option>
    </select>
    @if ($errors->has('subject')) <p class="help-block">{{ $errors->first('subject') }}</p> @endif
    
</div>


<div class="form-group ">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="user_type" id="user_type1" value="option1" >
    <label class="form-check-label" for="user_type1">
    All Team
    </label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="user_type" id="user_type2" value="option1" >
    <label class="form-check-label" for="user_type2">
    Development Team
    </label>
  </div>

  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="user_type" id="user_type3" value="option1" >
    <label class="form-check-label" for="user_type3">
    Sales Team
    </label>
  </div>

   <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="user_type" id="user_type4" value="option1" >
    <label class="form-check-label" for="user_type4">
    Client
    </label>
  </div>

</div>

<div class="form-group @if ($errors->has('subject')) has-error @endif">
    {!! Form::label('subject', 'Select user', ['class' => 'lgfont']) !!}
    <select id="team_list" name="team_list[]" class="form-control" multiple>
      
    </select>
    <small class="text-muted">(Select an specific user or all)</small>
</div>

<!-- Title of Post Form Input -->
<div class="form-group @if ($errors->has('subject')) has-error @endif">
    {!! Form::label('subject', 'Subject', ['class' => 'lgfont']) !!}
    {!! Form::text('subject', null, ['class' => 'form-control', 'placeholder' => ' Subject']) !!}
    @if ($errors->has('subject')) <p class="help-block">{{ $errors->first('subject') }}</p> @endif
</div>

<!-- Text body Form Input -->
<div class="form-group @if ($errors->has('text')) has-error @endif">
    {!! Form::label('text', 'Message', ['class' => 'lgfont']) !!}
    {!! Form::textarea('text', null, ['class' => 'form-control summernote', 'placeholder' => ' description...']) !!}
    @if ($errors->has('text')) <p class="help-block">{{ $errors->first('text') }}</p> @endif
</div>

<!-- row -->
<div class="row timeLineDate " >
<div class="col-sm-6">
  <div class="form-group">
    <label>Start Date</label>
    <div class="cal-icon">
      <input class="form-control " id="from_date" type="text" name="start_date" placeholder="dd-mm-yyyy">
       @if ($errors->has('start_date')) <div class=" text-danger">{{ $errors->first('start_date') }}</div> @endif
    </div>
  </div>
</div>
<div class="col-sm-6">
  <div class="form-group">
    <label>End Date</label>
    <div class="cal-icon">
      <input class="form-control " id="to_date" type="text" name="end_date" placeholder="dd-mm-yyyy">
      @if ($errors->has('end_date')) <div class=" text-danger">{{ $errors->first('end_date') }}</div> @endif
    </div>
  </div>
</div>

</div>
<!-- row end -->

<div class="form-group">
    {!! Form::label('document', 'Upload File', ['class' => 'lgfont']) !!}
    <div class="input-group control-group increment" >
      <input type="file" name="document[]" class="form-control">
      <div class="input-group-btn"> 
        <button class="btn addMore btn-success btn-sm" type="button"><i class="fa fa-plus"></i> Add</button>
      </div>
    </div>
    <div class="clone hide">
      <div class="control-group input-group" style="margin-top:10px">
        <input type="file" name="document[]" class="form-control">
        <div class="input-group-btn"> 
          <button class="btn btn-sm btn-danger" type="button"><i class="fa fa-remove"></i> Remove</button>
        </div>
      </div>
    </div>
</div>

<div class="form-group ">
<label class="" style="display: flex;">
      <input type="checkbox" name="is_email_notify" checked value=""> Notify on email too.
    </label>    
</div>

<!-- Submit Form Button -->    
<div class="col-lg-12">    
    {!! Form::submit('Create', ['class' => 'btn btn-sm btn-success']) !!}
    {!! Form::close() !!}
</div>
    </div>
    </div>
</div>
</div>
</div>

@stack('scripts')

<script type="text/javascript">   


$(".addMore").click(function(){ 
    var html = $(".clone").html();
    $(".increment").after(html);
});

$("body").on("click",".btn-danger",function(){ 
    $(this).parents(".control-group").remove();
});

//
$( "#from_date,#to_date" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
autoclose:true,
todayHighlight: true,
format: 'dd-mm-yyyy',
startDate:'today'
});
 
$( "#from_date" ).datepicker({ dateFormat: 'dd-mm-yyyy' });
$( "#to_date" ).datepicker({ dateFormat: 'dd-mm-yyyy' });
 
$(document).on('change','#to_date',function() {

var start = $('#from_date').datepicker('getDate');
var end   = $('#to_date').datepicker('getDate');
 
if (start==end) {  
 // alert('ok');
  var days   = (end - start)/1000/60/60/24;
  $('.total_days').val('1');
}

if (start < end) {  
  var days   = (end - start)/1000/60/60/24+(1);
  $('.total_days').val(days);
}

if (start > end) {
  alert ("Please select appropriate date from!");
  $('#from_date').val("");
  $('#to_date').val("");
  $('.total_days').val("");
 }

 });

//

</script>             

@endsection