@section('title')
    Séries de documentos
@stop

@section('content-header')
    Séries de documentos
@stop

@section('breadcrumb')
    <li>Entidades</li>
    <li class="active">Séries</li>
@stop

@section('content')
    <style>
        #series-table th, #series-table td {
            white-space: nowrap;
            padding: 8px 15px;
        }
        #series-table th:nth-child(1),
        #series-table td:nth-child(1) {
            width: 30%;
        }
        #series-table th:nth-child(2),
        #series-table td:nth-child(2) {
            width: 10%;
        }
    </style>
    <div class="box no-border">
        <div class="box-body">
            <ul class="datatable-filters list-inline pull-left" data-target="#datatable">
                <li>
                    <button type="button" class="btn btn-success btn-sm" id="openSeriesModal">
                        <i class="fas fa-plus"></i> Nova Série
                    </button>
                </li>
            </ul>
        </div>
    <div class="container">
        <table id="series-table" class="table table-striped">
            <thead>
            <tr>
                <th class="header panel-blue">Sequência</th>
                <th class="header panel-blue">Ações</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
        <div class="modal fade" id="seriesModal" tabindex="-1" role="dialog" aria-labelledby="seriesModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="seriesModalLabel">Nova Série</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">X</span>
                        </button>
                    </div>
                    <div class="modal-body" id="seriesModalBody">

                    </div>
                </div>
            </div>
        </div>

        @endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            function openEditModal() {
                var id_series = $(this).data('id');
                $.get("{{ url('admin/series') }}/" + id_series + "/edit", function(data) {
                    $('#seriesModalBody').html(data);
                    $('#seriesModalLabel').text('Editar Série');
                    $('#seriesModal').modal('show');
                });
            }
            $(document).on('click', '.openEditModal', openEditModal);
            var seriesTable = $('#series-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.series.datatable') }}",
                    data: function (d) {
                    }
                },
                columns: [
                    { data: 'sequence', name: 'sequence', searchable: true, orderable:true },
                    { data: 'actions', name: 'actions', searchable: false, orderable:false },
                ],
                order: [
                    [0, 'asc']
                ]
            });
            $('.filter-datatable').on('change', function (e) {
                seriesTable.draw();
                e.preventDefault();
            });
            $('#openSeriesModal').click(function() {
                $.get("{{ route('admin.series.create') }}", function(data) {
                    $('#seriesModalBody').html(data);
                    $('#seriesModal').modal('show');
                });
            });
        });
    </script>
@endsection