@extends('layout.structure')
@section('title-tab')
    Elenco avvisi
@endsection
@section('title-page')
    Elenco avvisi
@endsection
@section('content')
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    <div class="card shadow mb-1">
        <div class="card-body text-right p-2">
            <a class="btn btn-success btn-sm" href="{{route('announcement.create')}}"><i class="fas fa-plus-square"></i> Crea nuovo avviso</a>
        </div>
    </div>
    <div class="card">
        <div class="card-body">

            <table class="table table-striped table-bordered w-100" id="ann-table">
                <thead>
                <tr>
                    <th>Titolo</th>
                    <th>Autore</th>
                    <th>Data invio</th>
                    <th>Numero di destinatari</th>
                    <th>Numero visualizzazioni</th>
                    <th>Azioni</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>


    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="infoModalLabel">Info annuncio</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('head')
    @parent
@endsection

@section('footer')
    @parent
    <script>

        var annTable = $('#ann-table').DataTable({
            processing:true,
            serverSide:true,
            ajax: '{{route('announcement.list')}}',
            columns:[
                {data: 'title', name:'title'},
                {data: 'user', name:'user'},
                {data: 'created_at', name:'created_at'},
                {data: 'recipients', name:'recipients'},
                {data: 'views', name:'views'},
                {data: 'actions', name:'Azioni', orderable: false, searchable: false},
            ]
        });

        $('#ann-table tbody').on('click','.info-announcement',function(e){
            var route = $(this).data('route');
            $.ajax(
                route,
                {
                    method:'GET',
                    success:function (msg) {
                        $('#infoModal').find('.modal-body').html(msg);
                        $('#infoModal').modal('show');
                    }
                }
            )
        });

    </script>
@endsection