@extends('admin.layouts.app')
@section('title', 'View All ORIC Teams')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">ORIC Teams</p>
            @can('oric-team-create')
                <a class="btn btn-sm btn-success" href="{{ route('oric-team.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>Image</th>
                                <th>Name</th>
                                <th>Designation</th>
                                <th>Sort Order</th>
                                <th>Frontend</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: [[0, 'asc']],
                ajax: "{{route('get-oric-team')}}",
                columns: [
                    { data: 'id', orderable: false },
                    { data: 'image', orderable: false, searchable: false },
                    { data: 'name' },
                    { data: 'designation' },
                    { data: 'sort_order' },
                    { data: 'show_on_frontend' },
                    { data: 'is_active' },
                    { data: 'created_by' },
                    { data: 'updated_by' },
                    { data: null }
                ],
                
                columnDefs: [
                    {
                        targets: 0,
                        searchable: false,
                        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/teams/${data}" class="img-thumbnail" width="50" height="50">`;
                        }
                    },
                    {
                        targets: 5,
                        render: function (data) {
                            return data ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>';
                        }
                    },
                    {
                        targets: 6,
                        render: function (data) {
                            return data ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-danger">Inactive</span>';
                        }
                    },
                    {
                        searchable: false,
                        orderable: false,
                        targets: -1,
                        render: function (data) {
                            var edit = '{{ route("oric-team.edit", ":id") }}'.replace(':id', data.id);
                            var del = '{{ route("oric-team.delete", ":id") }}'.replace(':id', data.id);
                            var sdel = '{{ route("oric-team.destroy", ":id") }}'.replace(':id', data.id);
                            var restore = '{{ route("oric-team.restore", ":id") }}'.replace(':id', data.id);

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