@extends('org.layout.adminPanel')
@section('title', 'Projects')
@section('section')
    dep one
    /
    Projects
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">

@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid pb-5">
        <div class="container">
            <a href="{{ route('org.project.form', compact('subdomain')) }}">
                <div class="d-flex create-area text-center primary-area">
                    + Add Project
                </div>
            </a>
            <br>
            <div class="table-wrapper">
                <table id="project" class="display responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script>
        $(document).ready(function() {
            $('#project').DataTable({
                responsive: true,
                ajax: "{{ route('org.project.fetch', compact('subdomain')) }}",
                columns: [{
                        data: "DT_RowIndex",
                        name: "DT_RowIndex"
                    },
                    {
                        data: "name",
                        name: "name"
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ],
            });
        });
    </script>
@endsection