@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-4"></div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-light">
                Descripción de Notificación
            </div>
            
            <div class="card-body">                
                <div class="row">
                    <div class="cc-selector panel-body">
                    <div class="table-responsive">
                        <table id="quiq-drivers-table" class="table hover mb-0">
                            <tbody>                                
                                <tr>
                                    <td>Notificación: </td>
                                    <td>{{$notification->data['name']}}</td>
                                </tr>                             
                                <tr>
                                    <td>Descripción: </td>
                                    <td>{{$notification->data['description']}}</td>
                                </tr>
                                <tr>
                                    <td>Fecha - Hora</td>
                                    <td><script>document.write(moment.utc('{{$notification->data['date_time']}}').local().format('MMMM D, YYYY HH:mm')); </script></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>                    
                </div>
            </div>
        </div>
    </div>    
    <div class="col-md-4"></div>
</div>
@endsection

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

<script>
    $(document).ready(function(){
        //setting language for moment.js
        moment.locale('es');
        
         $('#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