@extends('layouts.main')
@section('content')
    <div id="toast" style="
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 16px;
  border-radius: 4px;
  color: white;
  font-weight: 500;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s ease;
"></div>

    <div class="page-title-box">
        <select class="kanban-select form-control" name="stage-machine"
                data-base-url="{{ route('cases.kanban-board', request()->query()) }}">
            @foreach($groupedStages as $groupedStage)
                <option value="{{ $groupedStage->case_type_id }}"
                        @if($groupedStage->case_type_id == request('case-type-id')) selected @endif>{{ $groupedStage->group }}</option>
            @endforeach
        </select>

        <div class="buttons">
            <a href="{!! route('cases.index') !!}" class="btn">
                <span>Table</span>
                <img src="/theme/assets/images/case-kanban-board/table.svg" alt="icon">
            </a>
        </div>

    </div>

    @php
        $canEditCase = \App\Models\GmpRoles::canSeeLink([\App\Models\GmpRoles::CASES]);
    @endphp

    <div class="kanban-scroll-top-bar">
        <div class="kanban-scroll-top-inner"></div>
    </div>

    <div class="kanban-board__wrap glesec">
        <div id="kanban-board"></div>
    </div>

    <template id="glesec-case-template">
        <div class="kanban-case glesec">
            <div class="kanban-case__head">
                <span class="kanban-case__id">#00000</span>
                <div class="kanban-case__priority">Medium</div>
                <div class="kanban-case__title"><p><a class="show-link" href="#">Event Title</a></p></div>
            </div>
            <div class="kanban-case__list">
                <p>GOC: Security Incidents to GOC Security Incidents to investigate</p>
                <p>GOC: Security Incidents to GOC Security Incidents to investigate</p>
            </div>
            <div class="kanban-case__meta">
                <div class="kanban-case__time-box">
                    <img src="/theme/assets/images/case-kanban-board/time-blue.svg" alt="icon">
                    <span class="kanban-case__time">0h ago</span>
                </div>
                <span class="kanban-case__badge open answered suspended closed"></span>
                @if($canEditCase)
                    <a class="edit-link" href="#"><img src="/theme/assets/images/case-kanban-board/edit-blue.svg"
                                                       alt="icon"></a>
                @endif
            </div>
        </div>
    </template>
@endsection


@section('scripts')

  <link rel="stylesheet" href="/theme/assets/css/jkanban.css"/>
  <link rel=stylesheet href="/theme/assets/css/case-kanban-board.css" type="text/css">
  <style>
    .form-control {
      height: 39px;
      margin-left: 10px;
      width: auto !important;
    }
  </style>

    <script src="/theme/assets/js/jkanban.js"></script>
    <script>
        function getCaseHTML(data) {
            const tpl = document.getElementById('glesec-case-template');
            const clone = tpl.content.cloneNode(true);
            const el = clone.querySelector('.kanban-case');

            el.classList.add('priority-' + data.priority.toLowerCase(), 'status-' + data.status.toLowerCase());
            clone.querySelector('.kanban-case__id').textContent = '#' + data.id;
            clone.querySelector('.kanban-case__priority').textContent = data.priority;
            clone.querySelector('.kanban-case__title p a').textContent = data.title;

            clone.querySelector('.show-link').href = `/cases/${data.id}`;

            const editLink = clone.querySelector('.edit-link');
            if (editLink) {
                editLink.href = `/cases/${data.id}/edit`;
            }

            const badge = clone.querySelector('.kanban-case__badge');
            badge.textContent = data.status;
            badge.className = 'kanban-case__badge ' + data.status.toLowerCase();

            clone.querySelector('.kanban-case__time').textContent = data.time;

            const list = clone.querySelector('.kanban-case__list');
            if (data.details) {
                list.innerHTML = '';
                data.details.forEach(t => {
                    const p = document.createElement('p');
                    p.textContent = t;
                    list.appendChild(p);
                });
            }

            const wrapper = document.createElement('div');
            wrapper.appendChild(clone);
            return wrapper.innerHTML;
        }

        const dynamicBoardsRaw = {!! json_encode($boards, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!};

        const dynamicBoards = dynamicBoardsRaw.map(stage => ({
            ...stage,
            item: stage.item.map(i => {
                if (!i.data) {
                    return {
                        id: i.id,
                        title: i.title,
                    };
                }

                return {
                    id: i.id,
                    title: getCaseHTML(i.data)
                };
            })
        }));

        function applyGlesecBoardColors(boardsConfig) {
            boardsConfig.forEach(cfg => {
                const boardEl = document.querySelector(`.kanban-board[data-id="${cfg.id}"]`);
                if (!boardEl || !cfg.color) return;

                const header = boardEl.querySelector('.kanban-board-header');
                if (header) {
                    header.style.setProperty('--border-color', cfg.color.border);
                    header.style.setProperty('--shadow-color', cfg.color.shadow);
                }
            });
        }

        const kanban = new jKanban({
            element: '#kanban-board',
            gutter: '10px',
            widthBoard: '260px',
            dragBoards: false,

            dragEl(el, source, event) {
                const fromBoard = source.parentElement.dataset.id;
                const boardEl = document.querySelector(`.kanban-board[data-id="${fromBoard}"]`);
                if (boardEl?.dataset.disabled === "true") {
                    console.log("🚫 Drag заблокований: джерело disabled");
                    if (event) {
                        event.preventDefault();
                        event.stopImmediatePropagation();
                    }
                    return false;
                }

                const ghost = el.cloneNode(true);
                ghost.style.position = 'absolute';
                ghost.style.top = '-9999px';
                ghost.style.left = '-9999px';
                ghost.style.transform = 'none';
                ghost.style.boxShadow = getComputedStyle(el).boxShadow;
                ghost.style.background = getComputedStyle(el).background;

                document.body.appendChild(ghost);
                if (event?.dataTransfer) {
                    event.dataTransfer.setDragImage(ghost, el.offsetWidth / 2, el.offsetHeight / 2);
                }
            },

            dropEl(el, target, source, sibling) {
                const ghost = document.querySelector('body > .kanban-ghost');
                if (ghost) ghost.remove();
                const itemId = el.dataset.eid;
                const from = source.parentElement.dataset.id;
                const to = target.parentElement.dataset.id;

                const fromBoard = document.querySelector(`.kanban-board[data-id="${from}"]`);
                if (fromBoard?.dataset.disabled === "true") {
                    console.log("🚫 Drop заблокований: джерело disabled");
                    return false;
                }


                if (from === to) return false;

                target.insertBefore(el, target.firstChild);

                if (to === '_closed') {
                    el.remove();
                    const counterEl = document.querySelector('.kanban-board[data-id="_closed"] .closed-count');
                    if (counterEl) counterEl.textContent = (parseInt(counterEl.textContent, 10) || 0) + 1;
                    const timeEl = document.querySelector('.kanban-board[data-id="_closed"] .last-time');
                    if (timeEl) timeEl.textContent = '1s ago';
                    console.log(`Item ${el.dataset.eid} marked as closed and removed.`);

                    updateCaseStage(itemId, {{$lastStage->id}})
                        .then(() => {
                            showToast('Case closed successfully', 'success');
                        })
                        .catch(() => {
                            showToast('Error closing case', 'error');
                        });
                    return;
                }

                console.log(`Item ${el.dataset.eid} moved from ${from} to ${to}`);

                updateCaseStage(itemId, to)
                    .then(data => {
                        showToast('Case updated successfully', 'success');

                        const el = document.querySelector(`[data-eid="${itemId}"]`);
                        if (el) {
                            el.innerHTML = getCaseHTML(data.case.data);
                        }
                    })
                    .catch(() => {
                        showToast('Error updating case', 'error');
                    });
            },

            boards: dynamicBoards
        });

        setTimeout(() => applyGlesecBoardColors(kanban.options.boards), 0);


        kanban.options.boards.forEach(b => {
            const boardEl = document.querySelector(`.kanban-board[data-id="${b.id}"]`);
            if (boardEl) boardEl.dataset.disabled = b.disabled ? "true" : "false";
        });

        document.addEventListener("dragstart", e => {
            const item = e.target.closest(".kanban-item");
            if (!item) return;
            const board = item.closest(".kanban-board");
            if (board?.dataset.disabled === "true") {
                e.preventDefault();
                e.stopImmediatePropagation();
                console.log("🚫 Dragstart заблокований: дошка disabled");
            }
        }, true);


        document.querySelectorAll('.kanban-item').forEach(item => {
            if (item.dataset.eid === 'static-case') {
                item.setAttribute('draggable', 'false');
                item.onmousedown = e => e.stopPropagation();
                item.ondragstart = e => e.preventDefault();
            }
        });

        document.querySelectorAll('.kanban-title-board').forEach(el => {
            const text = el.textContent.trim();
            el.innerHTML = `<p>${text}</p>`;
        });

        document.querySelectorAll('.kanban-case a').forEach(link => {
            link.addEventListener('mousedown', e => e.stopPropagation());
            link.addEventListener('click', e => e.stopPropagation());
        });

        document.querySelectorAll('.kanban-case--static a').forEach(link => {
          link.addEventListener('click', e => {
            e.stopPropagation();
            window.open(link.href, '_blank');
          });
        });


        document.addEventListener('dragend', () => {
            document.querySelectorAll('.kanban-item.dragging').forEach(item => item.classList.remove('dragging'));
        });

        let isDragging = false;
        const boardWrap = document.querySelector('#kanban-board');
        let hScroll = null;
        let vScroll = null;

        function stopScroll() {
            clearInterval(hScroll);
            clearInterval(vScroll);
            isDragging = false;
        }

        document.addEventListener('mousedown', e => {
            if (e.target.closest('.kanban-item')) isDragging = true;
        });

        ['mouseup', 'drop', 'dragend'].forEach(evt => {
            document.addEventListener(evt, stopScroll);
        });

        document.addEventListener('mousemove', e => {
            if (!isDragging) return;
            const edge = 60;
            const {left, right} = boardWrap.getBoundingClientRect();
            clearInterval(hScroll);
            if (e.clientX > right - edge) hScroll = setInterval(() => boardWrap.scrollLeft += 10, 16);
            else if (e.clientX < left + edge) hScroll = setInterval(() => boardWrap.scrollLeft -= 10, 16);

            const column = e.target.closest('.kanban-drag');
            if (column) {
                const {top: cTop, bottom: cBottom} = column.getBoundingClientRect();
                clearInterval(vScroll);
                if (e.clientY > cBottom - edge) vScroll = setInterval(() => column.scrollTop += 10, 16);
                else if (e.clientY < cTop + edge) vScroll = setInterval(() => column.scrollTop -= 10, 16);
            }
        });


        setTimeout(() => {
            const topScroll = document.querySelector(".kanban-scroll-top-bar");
            const topInner = document.querySelector(".kanban-scroll-top-inner");
            const boardWrap = document.querySelector("#kanban-board");

            if (topScroll && topInner && boardWrap) {
                topInner.style.width = boardWrap.scrollWidth + "px";

                topScroll.addEventListener("scroll", () => {
                    boardWrap.scrollLeft = topScroll.scrollLeft;
                });
                boardWrap.addEventListener("scroll", () => {
                    topScroll.scrollLeft = boardWrap.scrollLeft;
                });
            }
        }, 300);

        function updateCaseStage(itemId, to) {
            return fetch('/cases/update-stage', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: JSON.stringify({
                    case_id: itemId,
                    stage_id: to,
                }),
            })
                .then(response => {
                    if (!response.ok) throw new Error('Stage update failed');
                    return response.json();
                });
        }

        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            toast.textContent = message;

            toast.style.backgroundColor = type === 'success' ? '#086b18' : '#8c151a';
            toast.style.opacity = '1';
            toast.style.pointerEvents = 'auto';

            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.pointerEvents = 'none';
            }, 2000);
        }

    </script>

    <script>
        $(document).ready(function () {
            $('.kanban-select').on('change', function () {
                const selectedValue = $(this).val();

                const params = new URLSearchParams(window.location.search);
                params.set('case-type-id', selectedValue);

                const baseUrl = $(this).data('base-url');
                const fullUrl = baseUrl.split('?')[0] + '?' + params.toString();

                window.location.href = fullUrl;
            });
        });
    </script>
@endsection