@extends('admin.layouts.app')
@section('title', 'View All ORIC Events')
@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between py-4">
        <p class="page-title">ORIC Events</p>
        @can('oric-event-create')
            <a href="{{ route('oric-event.create') }}" class="btn btn-sm btn-success">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 w-100">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Banner</th>
                        <th>Title</th>
                        <th>Resource Person(s)</th>
                        <th>Type</th>
                        <th>Level</th>
                        <th>Event Date</th>
                        <th>Homepage</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: [[6,'desc']],
            ajax: "{{ route('get-oric-events') }}",
            columns: [
                { data: 'id', orderable: false },
                { data: 'banner', orderable: false, searchable: false },
                { data: 'title' },
                { data: 'resource_person' },
                { data: 'e_type' },
                { data: 'e_level' },
                { data: 'e_date' },
                { data: 'show_on_homepage' },
                { data: 'is_active' },
                { data: 'created_by' },
                { data: 'updated_by' },
                { data: null }
            ],
            columnDefs: [
                {
                    targets: 0,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    targets: 1,
                    render: function (data) {
                        if (!data) {
                            return '<span class="text-muted">No Image</span>';
                        }
                        return `
                            <img src="/front/images/new-giu/oric/events/banner/${data}" class="img-thumbnail" style="width:70px;height:45px;object-fit:cover;">
                        `;
                    }
                },
                {
                    targets: 7,
                    render: function (data) {
                        return data ? '<span class="badge bg-primary">Yes</span>' : '<span class="badge bg-secondary">No</span>';
                    }
                },
                {
                    targets: 8,
                    render: function (data) {
                        return data ? '<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.edit", ":id") }}'.replace(':id', data.id);
                        let del = '{{ route("oric-event.delete", ":id") }}'.replace(':id', data.id);
                        let sdel = '{{ route("oric-event.destroy", ":id") }}'.replace(':id', data.id);
                        let restore = '{{ route("oric-event.restore", ":id") }}'.replace(':id', data.id);

                        if(data.deleted_at){
                        return '<div class="d-flex">' +
                                @can('oric-event-restore')
                                    '<a href="'+restore+'" class="btn btn-sm btn-warning me-2">restore</a>'+
                                @endcan
                                @can('oric-event-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-edit')
                                    '<a href="'+edit+'" class="btn btn-sm btn-warning me-2"><i class="fa fa-edit"></i></a>'+
                                @endcan
                                @can('oric-event-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