@extends('layouts.app')
@section('title', 'Departments')
@section('content')
    <div class="container-fluid mt-3">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Departments</p>
            <a class="btn btn-sm btn-success" href="{{ route('dept.create') }}">Add New</a>
        </div>
        <div class="table-responsive">
            <table class="table table-striped table-sm dataTable">
                <thead class="table-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Status</th>
                    <th scope="col">Actions</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(function () {
            var t = $('.dataTable').DataTable({
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                ajax: "{{ route('get.dept') }}",
                columns: [
                    {data: 'id'},
                    {data: 'title'},
                    {data: null}, // For status column
                    {data: null}  // For actions column
                ],
                columnDefs: [
                    {
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        },
                        searchable: false,
                        orderable: true,
                        targets: 0
                    },
                    {
                        targets: 2, // Status column
                        render: function (data, type, row) {
                            if (data.status === 1) {
                                return '<span class="badge bg-success">Active</span>';
                            } else {
                                return '<span class="badge bg-danger">In-Active</span>';
                            }
                        },
                        searchable: false,
                        orderable: false,
                    },
                    {
                        targets: -1, // Actions column
                        render: function (data, type, row) {

                            let editUrl = "{{ route('dept.edit', ':id') }}".replace(':id', data.id);
                            let deleteUrl = "{{ route('dept.destroy', ':id') }}".replace(':id', data.id);
                            let toggleStatusUrl = "{{ route('dept.update-department-status', ':id') }}".replace(':id', data.id);

                            return '<div class="d-flex">' +
                                @can('department-edit')
                                    '<a href="' + editUrl + '" class="btn btn-sm btn-warning mx-2"><i class="fa fa-edit"></i></a>' +
                                @endcan
                                    @can('department-delete')
                                    '<form action="' + deleteUrl + '" method="POST" onsubmit="return confirm(`Are you sure?`)">' +
                                '@csrf @method("DELETE")' +
                                '<button type="submit" class="btn btn-sm btn-danger mx-2"><i class="fa fa-trash"></i></button>' +
                                '</form>' +
                                @endcan

                                (data.status === 1
                                    ? '<a href="' + toggleStatusUrl + '" class="btn btn-sm btn-secondary mx-2">Deactivate</a>'
                                    : '<a href="' + toggleStatusUrl + '" class="btn btn-sm btn-primary mx-2">Activate</a>') +

                                    '</div>';
                        },
                        searchable: false,
                        orderable: false
                    }
                ]
            });
        });
    </script>
@endpush