@extends('admin.layouts.app')
@section('title','Contact')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Glimpses</p>
            <a class="btn btn-sm btn-success" href="{{route('glimpses.create')}}">Add New</a>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-sm dataTable">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Title</th>
                            <th scope="col">Image</th>
                            <th scope="col">Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(function () {
            var t = $('.dataTable').DataTable({
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                ajax: "{{route('get.glimpses')}}",
                columns: [
                    {data: 'id'},
                    {data: 'title'},
                    {data: null, orderable: false},
                    {data: null}
                ],
                columnDefs: [
                    {
                        render: function (data, type, row, meta) {
                            // Glimpse image src
                            var src = '{{route('get-image.glimpses',':id')}}';
                            src = src.replace(':id', row.id);

                            var up = '{{ route("swap-up.glimpses", [":id"]) }}';
                            up = up.replace(':id', data.id);

                            var down = '{{ route("swap-down.glimpses", [":id"]) }}';
                            down = down.replace(':id', data.id);

                            var key= data.key;
                            var size= data.size;

                            console.log(key)

                            return '<div>' +
                                '<img src="' + src + '" height="50" width="50" alt="No Image Uploaded"/>' +
                                '<div class="caret-arrow-icons d-inline-block ms-2">' +

                                @can('glimpses-swap-up')
                                    '<a href="' + up + '"><i class="fa fa-caret-up fa-lg d-block"></a></i>' +
                                @endcan
                                @can('glimpses-swap-down')
                                    '<a href="' + down + '"><i class="fa fa-caret-down fa-lg"></i></a>' +
                                @endcan
                                    '</div>' +
                                '</div>';
                        },


                        searchable: false,
                        orderable: false,
                        targets: 2
                    },
                    {
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        },
                        searchable: false,
                        orderable: true,
                        targets: 0
                    },
                    {
                        render: function (data, type, row, meta) {

                            var del ='{{ route("glimpses.delete", ":id") }}';
                            del = del.replace(':id', data.id);
                            var sdel ='{{ route("glimpses.destroy", ":id") }}';
                            sdel = sdel.replace(':id', data.id);
                            var restore ='{{ route("glimpses.restore", ":id") }}';
                            restore = restore.replace(':id', data.id);

                            if (data.deleted_at == '1') {
                                return '<div class="d-flex">' +
                                    @can('glimpses-restore')
                                        '<a href="' + restore + '" class="btn btn-sm btn-warning mx-2">restore</a>' +
                                    @endcan
                                        @can('glimpses-delete')
                                        '<form action="' + del + '" method="POST">' +
                                    '<input type="hidden" name="_token" value="{{ csrf_token() }}">' +
                                    '<input type="hidden" name="_method" value="delete" />' +
                                    '<button type="submit" class="btn btn-sm btn-danger mx-2" onclick="return confirm(Are you sure?)"><i class="fa fa-trash"></i></button>' +
                                    '</form>' +
                                    @endcan
                                        '</div>';
                            }

                            if (data.deleted_at == '0') {
                                return '<div class="d-flex">' +
                                    @can('glimpses-softdelete')
                                        '<form action="' + sdel + '" method="POST">' +
                                    '<input type="hidden" name="_token" value="{{ csrf_token() }}">' +
                                    '<input type="hidden" name="_method" value="delete" />' +
                                    '<button type="submit" class="btn btn-sm btn-danger mx-2" onclick="return confirm(Are you sure?)"><i class="fa fa-trash"></i></button>' +
                                    '</form>' +
                                    @endcan
                                        '</div>';
                            }
                        },
                        searchable: false,
                        orderable: false,
                        targets: -1
                    }
                ]
            });
        });
    </script>
@endpush