@extends('org.layout.adminPanel')
@section('title', 'Department')
@section('section')
    @php
        $locationInfo = Helper::getlocationInfo($org_location_id);
        $orgInfo = $locationInfo->parent;
        $activeDep = array_reverse($activeDep);
        $lastId = end($activeDep) ?? 0;
        $dep_id = encode($lastId);
    @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, 'view' => 'organisation', 'id' => encode($orgInfo->id)]) }}"
        style="text-decoration: none; color:var(--primary);" class="link">{{ $orgInfo->name }}</a>
    /
    @if (count($activeDep) > 0)
        <a href="{{ route('org.dep.view', ['subdomain' => $subdomain, 'org_location_id' => $org_location_id]) }}"
            style="text-decoration: none; color:var(--primary);" class="link">{{ $locationInfo->name }}</a>
    @else
        {{ $locationInfo->name }}
    @endif

    @foreach ($activeDep as $dep)
        /
        @php
            $depInfo = Helper::getDepartmentInfo(encode($dep));
        @endphp
        @if ($dep != $lastId)
            <a href="{{ route('org.dep.view', ['id' => encode($depInfo->id), 'subdomain' => $subdomain, 'org_location_id' => $org_location_id]) }}"
                style="text-decoration: none; color:var(--primary);" class="link">{{ $depInfo->name }}</a>
        @else
            {{ $depInfo->name }}
        @endif
    @endforeach

@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/treeview.css" /> --}}
    <link rel="stylesheet" href="{{ asset(ADMINCSS) }}/layout/horizontal_treeview.css">
    <style>
        .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;
        }
        /* move menu */
        .folder-selected,
        .item-selected {
            background: var(--primary2) !important;
        }

        .folder-list {
            list-style: none;
            padding: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            overflow-y: auto;
        }

        .folder-list li {
            display: flex;
            align-items: center;
            gap: .4em;
            padding: .4em .6em;
            border-radius: .6em;
            cursor: default;
        }

        .folder-list li:hover {
            background-color: var(--primaryHover);
        }

        .folder-list-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 260px;
        }
        /* end */
    </style>
@endsection
@section('content')
    {{-- content --}}

    <div class="container-fluid pb-5 content-wrapper-7">
        {{-- <div class="tree-panel">
            {!! $tree !!}
        </div> --}}
        <center>
            <h3 class="mb-4">{{ $locationInfo->name }}</h3>
        </center>
        <div data-container="tree-view">
            <center><x-pre-loader :uibLoader="['class' => 'pre-loader mx-auto']" /></center>
        </div>
        <div class="container">
            <center>
                {{-- <h3 class="mb-4">{{ $depName }}</h3> --}}
                <h3 class="mb-4">Departments</h3>

            </center>
            {{-- project --}}
            @if (count($activeDep) < 1)
                <a href="{{ route('org.dep.form.sub', compact('subdomain', 'org_location_id')) }}">
                    <div class="d-flex create-area text-center primary-area">
                        + Add Department
                    </div>
                </a>
                <script>
                    const notfoundText = "Add new department";
                </script>
            @endif
            @if (count($activeDep) > 0)
                <a
                    href="{{ route('org.dep.form.sub', ['subdomain' => $subdomain, 'org_location_id' => $org_location_id, 'main_id' => $dep_id]) }}">
                    <div class="d-flex create-area text-center primary-area">
                        + Add Sub-Department
                    </div>
                </a>
                <script>
                    const notfoundText = "Add new sub-department";
                </script>
            @endif
            {{-- department --}}
            <br>
            <div class="table-wrapper">
                <table id="department" class="display responsive nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Manager</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            @if (count($activeDep) > 0)
                <br>
                <a href="{{ route('org.project.form', compact('subdomain', 'dep_id', 'org_location_id')) }}">
                    <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>Manager</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <br>
            @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-people-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>"
                            department.
                        </p>
                    </div>
                    <form action="{{ route('org.dep.trash', compact('subdomain', 'org_location_id')) }}" method="post">
                        @csrf
                        <input type="hidden" name="trash" id="trash-id" value="">
                        <input type="hidden" name="org_location_id" value="{{ $org_location_id }}">
                        <input type="hidden" name="main_id" value="{{ $dep_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="trashProjectModal" 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-stack 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 folders and items inside of <br>"<b
                                class="" data-set="trash-name">department</b>"
                            project.
                        </p>
                    </div>
                    <form action="{{ route('org.project.trash', compact('subdomain', 'org_location_id')) }}"
                        method="post">
                        @csrf
                        <input type="hidden" name="trash" id="trash-project-id" value="">
                        <input type="hidden" name="org_location_id" value="{{ $org_location_id }}">
                        <input type="hidden" name="main_id" value="{{ $dep_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>

    <!-- item move -->
    <div class="modal fade p-0" id="itemMoveModal" tabindex="-1" aria-labelledby="newFolderModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:480px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div>
                        <div class="d-flex justify-content-between align-items-center" style="padding: .4em .6em;">
                            <h3 class="m-0" id="move-title">Move Item name</h3>
                            <i class="bi bi-x-lg" style="cursor: pointer;" data-bs-dismiss="modal"></i>
                        </div>
                        <div class="mb-2 d-flex align-items-center" style="gap: .6em; padding: .4em .6em;height:46px;">
                            <i class="bi bi-arrow-left d-none" id="back-arrow" data-folder=""
                                style="font-size: 1.5rem; cursor: pointer;"></i>
                            <h4 class="m-0" id="folder-title">-</h4>
                        </div>
                        <hr>
                        <div class="folder-list-container">
                        </div>
                        <div class="my-3" style="overflow-x: auto; white-space: nowrap;" id="folder-path"></div>
                        <div class="d-flex justify-content-end d-none" id="move-footer">
                            <form action="{{ route('org.item.move', compact('subdomain')) }}" id="move-form" method="post">
                                @csrf
                                <input type="hidden" name="move_item" id="move_item" value="">
                                <input type="hidden" name="move_folder" id="move_folder" value="">
                                <button type="submit" class="button btn-primary" id="move_here">Move here</button>
                            </form>
                        </div>
                    </div>
                </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/treeview.js"></script> --}}
    <script src="{{ asset(ADMINJS) }}/layout/horizontal_treeview.js"></script>

    <script>
        
        $(document).ready(function() {
            // department
            $('#department').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('org.dep.fetch', compact('subdomain', 'dep_id', 'org_location_id')) }}",
                language: {
                    emptyTable: `<div>
                                        <i class="bi bi-people-fill not-found-icon"></i>
                                        <p>Nothing found, ${notfoundText}</p>
                                    </div>`,
                    processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                },
                columns: [{
                        data: "DT_RowIndex",
                        name: "id"
                    },
                    {
                        data: "name",
                        name: "name"
                    },
                    {
                        data: "manager",
                        name: "assign.user.full_name",
                        sortable: false,
                        render: function(data) {
                            let columnWrapper = `<div class="columnWrapper">${data}</div>`;
                            return columnWrapper;
                        }
                    },
                    {
                        data: "action",
                        name: "action",
                        sortable: false,
                        searchable: false
                    }
                ],
            });
            // project
            @if (count($activeDep) > 0)
                $('#project').DataTable({
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('org.project.fetch', compact('subdomain', 'dep_id', 'org_location_id')) }}",
                    language: {
                        emptyTable: `<div>
                                        <i class="bi bi-stack not-found-icon"></i>
                                        <p>Nothing found, Add new project</p>
                                    </div>`,
                        processing: `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`
                    },
                    columns: [{
                            data: "DT_RowIndex",
                            name: "id"
                        },
                        {
                            data: "name",
                            name: "name"
                        },
                        {
                            data: "manager",
                            name: "assign.user.full_name",
                            sortable: false,
                            render: function(data) {
                                let columnWrapper = `<div class="columnWrapper">${data}</div>`;
                                return columnWrapper;
                            }
                        },
                        {
                            data: "action",
                            name: "action",
                            sortable: false,
                            searchable: false
                        }
                    ],
                });
            @endif
            // tree view
            $.ajax({
                type: "get",
                url: `{{ route('org.get.tree.view', ['subdomain' => $subdomain, 'section' => 'division', 'upto' => 'folder']) }}`,
                data: {
                    id: "{{ $org_location_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();
                }
            });
        });
        const trashModal = new bootstrap.Modal($("#trashModal"));

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

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

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

        const itemMoveModal = new bootstrap.Modal($("#itemMoveModal"));
        const moveURLs = {
            project: "{{route('org.project.move.to',compact('subdomain'))}}",
            dep: "{{route('org.dep.move.to',compact('subdomain'))}}"
        };
        $(document).on('click',`[data-button='move']`,function(){
            movePopup({id:this.dataset.id,name:this.dataset.name,type:this.dataset.moveType});
        });
        function movePopup(data){
            let parentName = data.type == 'project' ? "{{ $locationInfo->name }}" : "{{ $orgInfo->name }}";
            let dataType = data.type;
            $(`#move-form`).attr('action', moveURLs[data.type]);
            $(`#move-title`).text(`Move "${data.name}"`);
            $(`#move_item`).val(data.id);
            $(`#back-arrow`).addClass("d-none");
            $(`#folder-title`).html(parentName);
            $(`#move_folder`).val("");
            $(`#move-footer`).addClass("d-none");
            $.ajax({
                type: "get",
                url: data.type == 'project' ? "{{ route('org.dep.move.list', compact('subdomain')) }}" : "{{ route('org.location.move.list', compact('subdomain')) }}",
                beforeSend: function() {
                    $(`.folder-list-container`).html(
                        `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`);
                },
                success: function(response) {
                    let li = ``;
                    
                    if (response.length > 0) {
                        response.forEach(data => {
                            li +=
                                `<li onclick="selectDep('${data.encoded_id}','${data.name}','${parentName}','${dataType}')"><i class="bi ${dataType == 'dep' ? 'bi-buildings-fill' : 'bi bi-people-fill'}" style="font-size: 1.3rem"></i>
                                    <div>
                                        <p class='m-0'>${data.name}</p>
                                        <small class='opacity-50'>${data.parent?.name || data.main_parent?.name || ''}</small>
                                    </div>
                                </li>`;
                        });
                        $(`.folder-list-container`).html(
                            `<ul class="folder-list">${li}</ul>`);
                    }
                }
            }).always(function() {
                itemMoveModal.toggle();
            });
            itemMoveModal.toggle();
        }
        function selectDep(id,name,parentName,type){
            $(`.folder-list-container`).html(`
                        <div class="d-flex flex-column align-items-center">
                            <i class="bi bi-box-arrow-in-down" style="font-size: 3rem;color:var(--border-color);"></i>
                            <h3 class="m-0" style="color:var(--border-color);">Move here</h3>
                        </div>`);
            $(`#back-arrow`).attr('data-parent',type).attr('data-parent-name',parentName);
            $(`#back-arrow`).removeClass("d-none");
            $(`#folder-title`).text(name);
            $(`#move_folder`).val(id);
            $(`#move-footer`).removeClass("d-none");
            
        }
        $(`#back-arrow`).on("click", function() {
            if(this.dataset.parent == 'project'){
                getDepList(this.dataset.parentName);
                return;
            }else{
                getDivList(this.dataset.parentName);
            }
        });

        function getDepList(parentName){
            $.ajax({
                type: "get",
                url: "{{ route('org.dep.move.list', compact('subdomain')) }}",
                beforeSend: function() {
                    $(`.folder-list-container`).html(
                        `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`);
                },
                success: function(response) {
                    let li = ``;
                    if (response.length > 0) {
                        response.forEach(data => {
                            li +=
                                `<li onclick="selectDep('${data.encoded_id}','${data.name}')"><i class="bi bi-people-fill" style="font-size: 1.3rem"></i>
                                    <div>
                                        <p class='m-0'>${data.name}</p>
                                        <small class='opacity-50'>${data.parent?.name || data.main_parent?.name || ''}</small>
                                    </div>
                                </li>`;
                        });
                        $(`.folder-list-container`).html(
                            `<ul class="folder-list">${li}</ul>`);
                    }
                }
            });
            $(`#back-arrow`).addClass("d-none");
            $(`#folder-title`).html(parentName);
            $(`#move_folder`).val("");
            $(`#move-footer`).addClass("d-none");
        }

        function getDivList(parentName){
            $.ajax({
                type: "get",
                url: "{{ route('org.location.move.list', compact('subdomain')) }}",
                beforeSend: function() {
                    $(`.folder-list-container`).html(
                        `<x-pre-loader :uibLoader="['class'=>'pre-loader']" />`);
                },
                success: function(response) {
                    let li = ``;
                    if (response.length > 0) {
                        response.forEach(data => {
                            li +=
                                `<li onclick="selectDep('${data.encoded_id}','${data.name}')"><i class="bi bi-buildings-fill" style="font-size: 1.3rem"></i>
                                    <div>
                                        <p class='m-0'>${data.name}</p>
                                        <small class='opacity-50'>${data.parent?.name || ''}</small>
                                    </div>
                                </li>`;
                        });
                        $(`.folder-list-container`).html(
                            `<ul class="folder-list">${li}</ul>`);
                    }
                }
            });
            $(`#back-arrow`).addClass("d-none");
            $(`#folder-title`).html(parentName);
            $(`#move_folder`).val("");
            $(`#move-footer`).addClass("d-none");
        }

    </script>
@endsection