@extends('org.layout.adminPanel')
@section('title', 'Organisation')
@section('section')
    @php
        $location = $org->locationdata[0];
    @endphp
    <a href="{{ route('org.view', compact('subdomain')) }}"
        style="text-decoration: none; color:var(--primary);" class="link">Organisation</a>
    /
    <a href="{{ route('org.form', ['subdomain' => $subdomain, 'id' => encode($org->id)]) }}"
        style="text-decoration: none; color:var(--primary);" class="link">{{ $org->name }}</a>
    / {{ $location->name }}
    / Assign
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(ADMINCSS) }}/layout/customDatatable.css">
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid pb-5">
        <div class="container">
            <div class="text-center py-2">
                <h2>{{ $location->name }} - Division</h2>
            </div>
            <a href="{{ route('org.user.form', ["subdomain"=>$subdomain,"where"=>"location","where_id"=>encode($location->id)]) }}">
                <div class="d-flex create-area text-center primary-area">
                    + Add User
                </div>
            </a>
            <h3 class="mt-5">Department Managers</h3>
            <div class="table-wrapper mt-3">
                <table id="depManager" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Department</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <h3 class="mt-5">Project Managers</h3>
            <div class="table-wrapper mt-3">
                <table id="projectManager" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Project</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <h3 class="mt-5">Governance Team</h3>
            <div class="table-wrapper mt-3">
                <table id="govTeam" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <h3 class="mt-5">Reviewer</h3>
            <div class="table-wrapper mt-3">
                <table id="reviewer" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script>
        $(document).ready(function() {
            $('#depManager').DataTable({
                ajax: "{{ route('org.location.fetch.dep', compact('subdomain', 'id')) }}",
                columns: [{
                        data: "id",
                        name: "id"
                    },
                    {
                        data: "first_name",
                        name: "first_name"
                    },
                    {
                        data: "last_name",
                        name: "last_name"
                    },
                    {
                        data: "department",
                        name: "department"
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ]
            });
            $("#projectManager").DataTable();
            $("#govTeam").DataTable();
            $("#reviewer").DataTable();
        });
    </script>
@endsection