@extends('admin._layout.layout')

@section('header')
    {{ trans('admin.head.capsules') }}

      

@endsection

@section('main')
    <div class="row">

        <div class="col-md-12">
            <a target="_blank" href="{{ route('admin.capsule.export', ['format' => 'csv']) }}" class="btn btn-default">Export as .csv</a>
        </div>

        <div class="col-md-12">
            <hr/>
        </div>

        <div class="col-md-12">

            <div class="panel">
                <div class="table-primary">
                    <table class="table table-striped table-bordered" id="capsule-table" width="100%">
                        <thead>
                        <tr>
                            <th>{{ trans('admin.fields.id') }}</th>
                            <th>{{ trans('admin.fields.uuid') }}</th>
                            <th>{{ trans('admin.capsule.owner') }}</th>
                            <th>{{ trans('admin.fields.phone') }}</th>
                            <th>{{ trans('admin.fields.caption') }}</th>
                            <th>{{ trans('admin.capsule.likes') }}</th>
                            <th>{{ trans('admin.capsule.subscribers') }}</th>
                            <th>{{ trans('admin.capsule.comments') }}</th>
                            <th>{{ trans('admin.capsule.tagged_users') }}</th>
                            <th>{{ trans('admin.capsule.reports') }}</th>
                            <th>{{ trans('admin.capsule.blocked') }}</th>
                            <th>{{ trans('admin.fields.opens') }}</th>
                            <th>{{ trans('admin.fields.created') }}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable">
                                    <select class="form-control table-footer-search">
                                        <option value=""></option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th class="column-searchable"><input class="form-control table-footer-search" /></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <style>
        th{
            vertical-align: center;
        }
        td{
            vertical-align: center;
        }
    </style>
    <script>
        $(function() {
            var capsule_table = $('#capsule-table').DataTable({
                "processing": true,
                "serverSide": true,
                "pageLength": 20,
                "lengthMenu": [[15, 30], [15, 30]],
                "order": [[ 0, "desc" ]],
                "ajax": {
                    "url": "{{ route('admin.capsule.list') }}"
                },
                "columns": [
                    {data: 'id', name: 'capsule.id'},
                    {data: 'uuid', name: 'capsule.uuid'},
                    {data: 'nickname', name: 'user.nickname'},
                    {data: 'phone_number', name: 'user.phone_number'},
                    {data: 'caption', name: 'capsule.caption'},
                    {data: 'count_likes', name: 'capsule.count_likes'},
                    {data: 'count_subscribers', name: 'capsule.count_subscribers'},
                    {data: 'count_comments', name: 'capsule.count_comments'},
                    {data: 'count_tagged_users', name: 'capsule.count_tagged_users'},
                    {data: 'count_reports', name: 'capsule.count_reports'},
                    {data: 'blocked', name: 'blocked'},
                    {data: 'open_at', name: 'capsule.open_at'},
                    {data: 'created_at', name: 'capsule.created_at'},
                    {
                        data: 'id',
                        name: 'id',
                        render: function (data, type, row) {
                            return "<a class='btn btn-xs btn-info' href='" + row.showLink + "'>{{ __('admin.buttons.show') }}</a>" +
                                    "<a class='btn btn-xs btn-primary' href='" + row.editLink + "'>{{ __('admin.buttons.edit')}}</a>" +
                                    "<a class='btn btn-xs btn-danger delete-capsule' href='" + row.deleteLink + "'>{{ __('admin.buttons.delete')}}</a>";
                        },
                        orderable: false,
                        searchable: false
                    }
                ],
                "initComplete": function () {
                    this.api().columns().every(function () {
                        var column = this;
                        var column_class = column.footer().className;
                        if (column_class === 'column-searchable') {
                            var input = $(column.footer()).find('input');
                            var select = $(column.footer()).find('select');

                            if (input.length) {
                                input.on('change', function () {
                                    column.search($(this).val(), false, false, true).draw();
                                });
                            } else if (select.length) {
                                select.on('change', function () {
                                    column.search($(this).val(), false, false, true).draw();
                                });
                            }
                        }
                    });
                }
            });

            $(document).on('click', '.delete-capsule', function (e) {
                e.preventDefault();

                if (confirm('{{ __('admin.capsule.ask.delete')}}')) {
                    $.ajax({
                        url: $(this).attr('href'),
                        type: 'DELETE',
                        dataType: 'json',
                        data: { method: '_DELETE' }
                    }).always(function (result) {
                        if (typeof result.status !== 'undefined' && result.status === 'success') {
                            capsule_table.draw(false);
                        }
                    });
                }
            });
        });
    </script>
@endsection