@extends('org.layout.adminPanel')
@section('title', 'Organisation')
@section('section')
    <a href="{{ route('org.view', compact('subdomain')) }}" style="text-decoration: none; color:var(--primary);"
        class="link">Organisation</a>
    {{ isset($data->name) ? '/ ' . $data->name : '' }}
    / Form
@endsection
@section('css')
    {{-- css --}}
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.css">
    <link rel="stylesheet" href="{{ asset(CSS) }}/datatable.responsive.css">

    <link rel="stylesheet" href="{{ asset(ADMINCSS) . '/layout/horizontal_treeview.css' }}" />

    <style>
        [disabled] {
            background: #D8DBE0 !important;
        }

        .main-container {
            display: grid;
            grid-template-columns: 1fr;
        }

        @media screen and (min-width:1024px) {
            .main-container {
                grid-template-columns: .3fr .7fr;
            }
        }

        .trash-floting-icon {
            position: absolute;
            padding: .4em;
            background-color: var(--space);
            border-radius: 5rem;
            font-size: 1.3rem;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 4px;
            margin-left: 1.3em;
        }
    </style>
@endsection
@section('content')
    {{-- content --}}
    <div class="container-fluid pt-3 pb-5">
        <div class="container">
            @if (!empty($data))
                <div class="text-center py-2">
                    <h2>{{ $data->name }}</h2>
                </div>
                <div>
                    <center>
                        <a
                            href="{{ protocol() . '://' . $data->sub_domain }}.{{ config('app.domain') }}" class="link" target="_blank">{{ protocol() . '://' . $data->sub_domain }}.{{ config('app.domain') }}</a>
                    </center>
                </div>
            @else
                <div class="text-center py-2">
                    <h2>Organisation</h2>
                </div>
            @endif

            <div class="form-wrapper mx-auto mb-3">
                <form action="{{ !$isView ? route('org.form.store', compact('subdomain')) : '#' }}" method="post">
                    @csrf
                    <input type="hidden" name="is_edit" value="{{ $id ?? '' }}">
                    @if (!$isView)
                        <div class="mb-3">
                            <label for="orgname" class="form-label">Organisation Name</label>
                            <input type="text" class="form-control" id="orgname" name="organisation"
                                value="{{ $data->name ?? '' }}{{ old('organisation') }}"
                                {{ $isView ? 'readonly disabled' : '' }}>
                        </div>
                    @endif
                    @error('organisation')
                        <div class="alert alert-danger p-0 px-2" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    @if (!$isView)
                        <div class="mb-3 d-flex align-items-end">
                            <input type="text" class="border-top-0 border-start-0 border-bottom-2 border-end-0 p-0 pb-1"
                                style="background: none;" name="sub_domain"
                                value="{{ $data->sub_domain ?? '' }}{{ old('sub_domain') }}" placeholder="Subdomain"
                                aria-describedby="basic-addon2" {{ $isView ? 'readonly disabled' : '' }}>
                            <span class="pb-1" id="sub_domain">.{{ config('app.domain') }}</span>
                        </div>
                    @endif
                    @error('sub_domain')
                        <div class="alert alert-danger p-0 px-2" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    @if (!$isView)
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="button btn-primary">{{ $btn ?? 'Save' }}</button>
                        </div>
                    @endif
                </form>
            </div>
            @if ($isView)
                @isset($id)
                    <div data-container="tree-view">
                        <center><x-pre-loader :uibLoader="['class' => 'pre-loader mx-auto']" /></center>
                    </div>
                @endisset

                @if (isset($id))
                    <hr class="content-wrapper-3 mx-auto my-5">
                    <div class="form-wrapper-4 mx-auto">
                        {{-- if edit --}}
                        <h3 class="text-center mb-3">Division</h3>
                        <a href="{{ route('org.location.form', ['id' => $id, 'subdomain' => $subdomain]) }}">
                            <div class="d-flex create-area text-center primary-area">
                                + Add division
                            </div>
                        </a>
                        <div class="table-wrapper mt-4">
                            <table id="location" class="display responsive nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Manager</th>
                                        <th>Assign by</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    {{-- @foreach ($data->locationdata as $location)
                                        <tr>

                                            <td>{{ $location->id }}</td>
                                            <td>{{ $location->name }}</td>
                                            @php
                                                $manager = $location->assignTo->user ?? '';
                                                $assignByUser = $location->assignTo->assignByUser ?? '';
                                            @endphp
                                            <td> {{ $manager->first_name ?? '' }} {{ $manager->last_name ?? '' }} </td>
                                            <td>
                                                {{ $assignByUser->first_name ?? '' }}
                                                {{ $assignByUser->last_name ?? '' }}
                                            </td>
                                            <td>
                                                <div class='actionButtonWrapper'>
                                                    <a
                                                        href="{{ route('org.dep.view', [
                                                            'subdomain' => $subdomain,
                                                            'org_location_id' => encode($location->id),
                                                        ]) }}">
                                                        <button class='button btn-primary'>
                                                            <i class='bi bi-view-list text-white me-2'></i>View
                                                        </button>
                                                    </a>
                                                    <a
                                                        href="{{ route('org.location.form', ['is_edit' => encode($location->id), 'id' => $id, 'subdomain' => $subdomain]) }}">
                                                        <button class='button btn-primary'>
                                                            <i class='bi bi-pencil-fill text-white me-2'></i>Edit
                                                        </button>
                                                    </a>
                                                    <a
                                                        href="{{ route('org.location.assign.view', ['id' => encode($location->id), 'org_id' => $id, 'subdomain' => $subdomain]) }}">
                                                        <button class='button btn-primary'>
                                                            <i class='bi bi-person-lines-fill text-white me-2'></i>Assign
                                                        </button>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach --}}

                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            @endif
        </div>
    </div>

    {{-- trash popup --}}
    <!-- Modal -->
    <div class="modal fade" id="trashModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center position-relative">
                        <i class="bi bi-trash-fill" style="font-size: 48px;"></i>
                        <i class="bi bi-buildings-fill trash-floting-icon"></i>
                    </div>
                    <div>
                        <p class="fs-5 m-0 text-center">Are you sure to trash <br>"<b class="fs-5"
                                data-set="trash-name">department</b>"?</p>
                        <p class="text-center my-3">This action will also trash sub-department, projects, folders
                            and items
                            inside of <br>"<b class="" data-set="trash-name">department</b>"
                            division.
                        </p>
                    </div>
                    <form action="{{ route('org.location.trash', compact('subdomain')) }}" method="post">
                        @csrf
                        <input type="hidden" name="trash" id="trash-id" value="">
                        <input type="hidden" name="org_id" value="{{ $id }}">
                        <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto"
                            style="max-width: 350px;">
                            <input type="submit" class="button btn-danger flex-grow-1" style="width" id="trash-button"
                                value="Yes, trash">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="remvoeUserModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center position-relative">
                        <i class="bi bi-person-dash" style="font-size: 48px;"></i>
                    </div>
                    <div>
                        <p class="fs-5 m-0 text-center">Are you sure to unassign<br>"<b class="fs-5"
                                data-set="user-name">department</b>" from <b class="fs-5"
                                data-set="section-name">department</b>?</p>
                        <br>
                        {{-- <p class="text-center my-3">This action will also trash sub-department, projects, folders
                            and items
                            inside of <br>"<b class="" data-set="trash-name">department</b>"
                            division.
                        </p> --}}
                    </div>
                    <form action="{{ route('org.location.unassign', compact('subdomain')) }}" method="post">
                        @csrf
                        <input type="hidden" name="user_id" id="unassignUserId" value="">
                        <input type="hidden" name="section_id" id="unassignSectionId" value="">
                        <input type="hidden" name="org_id" value="{{ $id }}">
                        <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap mx-auto"
                            style="max-width: 350px;">
                            <input type="submit" class="button btn-primary flex-grow-1" style="width"
                                id="trash-button" value="Yes, unassign">
                            <button type="button" class="button btn-secondary flex-grow-1"
                                data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    {{-- js --}}
    <script src="{{ asset(JS) }}/datatable.js"></script>
    <script src="{{ asset(JS) }}/datatable.responsive.js"></script>
    <script src="{{ asset(ADMINJS) }}/layout/horizontal_treeview.js"></script>
    <script>
        $(document).ready(function() {
            @if (isset($id) && $isView)
                $('#location').DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('org.location.fetch', ['subdomain' => $subdomain, 'org_id' => encode($data->id)]) }}",
                    language: {
                        emptyTable: `<div>
                                        <i class="bi bi-buildings-fill not-found-icon"></i>
                                        <p>Nothing found, Add new division</p>
                                    </div>`,
                        processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                    },
                    columns: [{
                            data: "DT_RowIndex",
                            name: "id"
                        },
                        {
                            data: "name",
                            name: "name"
                        },
                        {
                            data: "assign_to",
                            name: "assignTo.user.full_name",
                            sortable: false,
                        },
                        {
                            data: "assign_by",
                            name: "assignTo.assignByUser.full_name",
                            sortable: false,
                        },
                        {
                            data: "action",
                            name: "action",
                            sortable: false,
                            searchable: false
                        }
                    ]
                });

                // tree view
                $.ajax({
                    type: "get",
                    url: `{{ route('org.get.tree.view', ['subdomain' => $subdomain, 'section' => 'organisation', 'upto' => 'folder']) }}`,
                    data: {
                        id: "{{ $id }}",
                    },
                    success: function(response) {
                        let layout = `<center>
                                            <button class="button btn-primary" data-is-collapse="false" onclick="collapseTree(this)">
                                                <i class="bi bi-arrows-angle-expand text-white me-2"></i>Expand
                                            </button>
                                      </center>
                        <div class="horizontal-tree-panel mb-2 mx-auto border-0" style="width: min-content; max-width:100%;">
                            ${response}
                        </div>`;
                        $("[data-container='tree-view']").html(layout);
                        initCollapse();
                    }
                });
            @endif
        });

        const trashModal = new bootstrap.Modal($("#trashModal"));
        const remvoeUserModal = new bootstrap.Modal($("#remvoeUserModal"));

        function showTrashPopup(e) {
            $("[data-set='trash-name']").text(e.dataset.trashName);
            $("#trash-id").val(`${e.dataset.trashId}`);
            trashModal.toggle();
        }

        function showUnassignPopup(e, data) {
            $("[data-set='user-name']").text(data.name);
            $("[data-set='section-name']").text(data.section_name);
            $("#unassignUserId").val(data.id);
            $("#unassignSectionId").val(data.section_id);
            remvoeUserModal.toggle();
        }
    </script>
@endsection