@extends('layouts.main')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-datetimepicker.min.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
@endpush
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-light">
                {{__('strings.new_reminder')}}
            </div>
            
            <form method="post" action="{{route('reminders_post')}}">
            {{ csrf_field() }}
            {{ method_field('post') }}
            <div class="card-body">                
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.name')}}</label>
                            <input id="normal-input" class="form-control" name="name" required>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label">{{__('strings.date_time')}}</label>
                            <input type='text' class="form-control" id='date_time' required/>
                            <input type='hidden' id="utc_date_time" name="utc_date_time"/>
                        </div>
                    </div>
                    
                    
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="single-select">{{__('strings.notify')}}</label>
                            <select id="single-select" class="form-control" name="minutes_before">
                                <option value="5">5 min. antes</option>
                                <option value="15">15  min. antes</option>
                                <option value="30">30  min. antes</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="textarea">{{__('strings.description')}}</label>
                            <textarea id="textarea" class="form-control" rows="6" name="description"></textarea>
                        </div>
                    </div>
                    
                    
                    <div class="col-md-12 mb-4">
                        <div class="custom-control custom-checkbox mt-4">
                        <div data-ts-color="primary">
                            <input type="checkbox" class="custom-control-input" name="repeating" id="repeating">
                            <label class="custom-control-label" for="repeating">{{__('strings.repeating')}}</label>
                        </div>
                        </div>
                    </div>
                    
                    <br><hr>
                    <div class="col-md-6">
                        <button onclick="goBack()" class="btn btn-secondary">{{__('strings.cancel')}}</button>&nbsp;
                        <input type="submit" class="btn btn-primary" value="{{__('strings.save')}}" >
                    </div>
                </div>
            </div>
        </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src='{{asset('js/bootstrap-datetimepicker.min.js')}}'></script>

<script>
    $(document).ready(function(){
         $('#date_time').datetimepicker({
                format: 'YYYY-MM-DD HH:mm',
                stepping: 5,
                icons:{
                    time: 'far fa-clock',
                    date: 'far fa-calendar-alt',
                    up: 'fas fa-chevron-up',
                    down: 'fas fa-chevron-down',
                    previous: 'fas fa-chevron-left',
                    next: 'fas fa-chevron-right',
                    clear: 'far fa-trash-alt',
                    close: 'fas fa-times'
                }
            });
    });
    
    $("#date_time").on("dp.change", function (e) {
        var utcDateTime = moment($("#date_time").val()).utc().format('YYYY-MM-DD HH:mm');
        $('#utc_date_time').val(utcDateTime);
    });
</script>
@endpush