@extends('admin.layouts.app')

@section('title', 'View All ORIC Event Categories')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between py-4">
        <p class="page-title">ORIC Event Categories</p>

        @can('oric-event-category-create')
            <a class="btn btn-sm btn-success"
                href="{{ route('oric-event-category.create') }}">
                Add New
            </a>
        @endcan
    </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>#</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Sort Order</th>
                            <th>Status</th>
                            <th>Created By</th>
                            <th>Updated By</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
$(function () {

    $('.dataTable').DataTable({
        processing: true,
        serverSide: true,
        order: [
            [2, 'asc'], // Type (Event Type / Event Level)
            [3, 'asc'], // Sort Order
            [1, 'asc']  // Name
        ],
        ajax: "{{ route('get-oric-event-category') }}",

        columns: [
            { data: 'id', orderable: false },
            { data: 'name' },
            { data: 'type' },
            { data: 'sort_order' },
            { data: 'is_active' },
            { data: 'created_by' },
            { data: 'updated_by' },
            { data: null }
        ],

        columnDefs: [

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

            {
                targets: 4,
                searchable: false,
                orderable: false,
                render: function (data) {
                    return data == 1
                        ? '<span class="badge bg-success">Active</span>'
                        : '<span class="badge bg-danger">Inactive</span>';
                }
            },

            {
                targets: -1,
                searchable: false,
                orderable: false,

                render: function (data) {

                    let edit = '{{ route("oric-event-category.edit", ":id") }}'.replace(':id', data.id);
                    let del = '{{ route("oric-event-category.delete", ":id") }}'.replace(':id', data.id);
                    let sdel = '{{ route("oric-event-category.destroy", ":id") }}'.replace(':id', data.id);
                    let restore = '{{ route("oric-event-category.restore", ":id") }}'.replace(':id', data.id);

                    if(data.deleted_at){
                    return '<div class="d-flex">' +
                            @can('oric-event-category-restore')
                                '<a href="'+restore+'" class="btn btn-sm btn-warning me-2">restore</a>'+
                            @endcan
                            @can('oric-event-category-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 me-2" onclick="return confirm(`Are you sure? This item will get permanently deleted`)"><i class="fa fa-trash"></i></button>'+
                                '</form>'+
                            @endcan
                        '</div>';
                    }
                    if (!data.deleted_at) {
                        return '<div class="d-flex">' +
                            @can('oric-event-category-edit')
                                '<a href="'+edit+'" class="btn btn-sm btn-warning me-2"><i class="fa fa-edit"></i></a>'+
                            @endcan
                            @can('oric-event-category-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 me-2" onclick="return confirm(`Are you sure? This item will get soft deleted`)"><i class="fa fa-trash"></i></button>'+
                                '</form>'+
                            @endcan
                        '</div>';
                    }
                }
            }

        ]
    });

});
</script>
@endpush