@extends('org.layout.adminPanel')
@section('title', 'Organisation')
@section('section')
    {{ $data->name }} / Division
@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 pt-3 pb-5">
        <div class="container">
            <div class="form-wrapper-4 mx-auto">
                {{-- if edit --}}
                <h3 class="text-center">Division</h3>
                <div class="table-wrapper mt-5">
                    <table id="location" class="display responsive nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($data->locationdata) && count($data->locationdata) > 0)
                                @foreach ($data->locationdata as $location)
                                    <tr>
                                        <td>{{ $location->id }}</td>
                                        <td>{{ $location->name }}</td>
                                        <td>
                                            <a
                                                href="{{ route('org.orglocation.form', ['is_edit' => encode($location->id), 'id' => $id, 'subdomain' => $subdomain, 'is_orgAdmin' => true]) }}">
                                                <button class='button btn-primary mx-1'>
                                                    <i class='bi bi-pencil-fill text-white me-2'></i>Edit
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="3">
                                    <a
                                        href="{{ route('org.orglocation.form', ['id' => $id, 'subdomain' => $subdomain, 'is_orgAdmin' => true]) }}">
                                        <div class="d-flex create-area text-center primary-area">
                                            + Add division
                                        </div>
                                    </a>
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </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() {
            $('#location').DataTable({
                responsive: true,
                columns: [{
                        data: "DT_RowIndex",
                        name: "DT_RowIndex"
                    },
                    {
                        data: "name",
                        name: "name"
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endsection