@extends('layouts.app')

@section('title', 'پایپ‌لاین (کانبان)')

@section('content')
<div class="flex justify-between items-center mb-4">
    <h1 class="text-xl font-bold">نمای کانبان پرونده‌ها</h1>
    <a href="{{ route('cases.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded text-sm">پرونده جدید</a>
</div>

<div id="kanban-board" class="flex gap-3 overflow-x-auto pb-4" style="min-height: 75vh;">
    @foreach($columns as $status => $cases)
    <div class="flex-shrink-0 w-72 bg-gray-100 rounded-lg p-3 flex flex-col" data-status="{{ $status }}">
        <div class="font-semibold text-sm mb-3 flex justify-between items-center">
            <span>{{ $statusLabels[$status] ?? $status }}</span>
            <span class="bg-white text-xs px-2 py-0.5 rounded-full count">{{ $cases->count() }}</span>
        </div>
        <div class="space-y-2 flex-1 min-h-[120px] column-dropzone" data-status="{{ $status }}">
            @foreach($cases as $case)
            <div class="bg-white rounded shadow-sm p-3 text-sm cursor-grab case-card"
                 draggable="true"
                 data-case-id="{{ $case->id }}"
                 data-current-status="{{ $status }}">
                <a href="{{ route('cases.show', $case) }}" class="font-medium text-blue-700 hover:underline block" onclick="event.stopPropagation()">
                    {{ $case->case_number }}
                </a>
                <div class="text-gray-700 mt-1 truncate">{{ $case->title }}</div>
                <div class="text-xs text-gray-500 mt-2 flex justify-between">
                    <span>{{ \Illuminate\Support\Str::limit($case->customer?->name ?? '—', 15) }}</span>
                    <span>{{ \Illuminate\Support\Str::limit($case->expert?->name ?? '—', 12) }}</span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endforeach
</div>

<div id="reason-modal" class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
        <h3 class="font-bold mb-3">ثبت دلیل تغییر وضعیت</h3>
        <textarea id="move-reason" rows="3" class="w-full border rounded px-3 py-2 text-sm mb-3" placeholder="دلیل را وارد کنید..."></textarea>
        <label class="flex items-center gap-2 text-sm mb-4">
            <input type="checkbox" id="move-override"> Override مدیریتی
        </label>
        <div class="flex gap-2 justify-end">
            <button type="button" id="cancel-move" class="px-4 py-2 bg-gray-200 rounded text-sm">انصراف</button>
            <button type="button" id="confirm-move" class="px-4 py-2 bg-blue-600 text-white rounded text-sm">تأیید</button>
        </div>
    </div>
</div>

<script>
(function() {
    let draggedCard = null;
    let targetStatus = null;
    let targetColumn = null;

    document.querySelectorAll('.case-card').forEach(card => {
        card.addEventListener('dragstart', e => {
            draggedCard = card;
            card.classList.add('opacity-50');
            e.dataTransfer.effectAllowed = 'move';
        });
        card.addEventListener('dragend', () => card.classList.remove('opacity-50'));
    });

    document.querySelectorAll('.column-dropzone').forEach(zone => {
        zone.addEventListener('dragover', e => {
            e.preventDefault();
            zone.classList.add('ring-2', 'ring-blue-400');
        });
        zone.addEventListener('dragleave', () => zone.classList.remove('ring-2', 'ring-blue-400'));
        zone.addEventListener('drop', e => {
            e.preventDefault();
            zone.classList.remove('ring-2', 'ring-blue-400');
            if (!draggedCard) return;
            targetStatus = zone.dataset.status;
            if (targetStatus === draggedCard.dataset.currentStatus) return;
            targetColumn = zone;
            const needsReason = ['won', 'lost', 'stopped'].includes(targetStatus);
            if (needsReason) {
                document.getElementById('reason-modal').classList.remove('hidden');
                document.getElementById('reason-modal').classList.add('flex');
            } else {
                performMove('');
            }
        });
    });

    document.getElementById('cancel-move').addEventListener('click', () => {
        document.getElementById('reason-modal').classList.add('hidden');
        document.getElementById('reason-modal').classList.remove('flex');
        draggedCard = null;
    });

    document.getElementById('confirm-move').addEventListener('click', () => {
        const reason = document.getElementById('move-reason').value.trim();
        const isOverride = document.getElementById('move-override').checked;
        if (['won', 'lost', 'stopped'].includes(targetStatus) && !reason && !isOverride) {
            alert('ثبت دلیل الزامی است.');
            return;
        }
        document.getElementById('reason-modal').classList.add('hidden');
        document.getElementById('reason-modal').classList.remove('flex');
        performMove(reason, isOverride);
    });

    function performMove(reason, isOverride = false) {
        if (!draggedCard || !targetStatus) return;
        const caseId = draggedCard.dataset.caseId;
        const token = document.querySelector('meta[name="csrf-token"]').content;

        fetch('/kanban/' + caseId + '/move', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ status: targetStatus, reason: reason, is_override: isOverride })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                targetColumn.appendChild(draggedCard);
                draggedCard.dataset.currentStatus = targetStatus;
                document.querySelectorAll('.column-dropzone').forEach(z => {
                    const el = z.closest('[data-status]').querySelector('.count');
                    if (el) el.textContent = z.querySelectorAll('.case-card').length;
                });
            } else {
                alert(data.message || 'خطا در تغییر وضعیت');
            }
        })
        .catch(() => alert('خطا در ارتباط با سرور'))
        .finally(() => { draggedCard = null; targetStatus = null; targetColumn = null; });
    }
})();
</script>
@endsection