@extends('layouts.app')

@section('title', 'Pipeline Kanban')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Pipeline Kanban</h1>
        <p class="page-subtitle">Drag & drop deal antar stage</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('deals.index') }}" class="btn btn-secondary">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
            List View
        </a>
        @can('create deals')
        <a href="{{ route('deals.create') }}" class="btn btn-primary">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Buat Deal
        </a>
        @endcan
    </div>
</div>

<div id="kanbanBoard" style="display:flex;gap:.875rem;overflow-x:auto;padding-bottom:1rem;align-items:flex-start;">
    @foreach($stages as $stage)
    <div class="kanban-col" data-stage-id="{{ $stage->id }}"
         style="min-width:280px;max-width:280px;flex-shrink:0;">

        {{-- Column header --}}
        <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:2px solid {{ $stage->color }};">
            <div style="display:flex;align-items:center;gap:.5rem;">
                <div style="width:10px;height:10px;border-radius:50%;background:{{ $stage->color }};"></div>
                <span style="font-size:.875rem;font-weight:600;color:var(--gray-800);">{{ $stage->name }}</span>
            </div>
            <div style="display:flex;align-items:center;gap:.5rem;">
                <span style="font-size:.75rem;color:var(--gray-500);background:var(--gray-100);padding:1px 8px;border-radius:20px;">{{ $stage->deals->count() }}</span>
            </div>
        </div>

        {{-- Summary nilai --}}
        <div style="padding:.5rem 1rem;background:var(--gray-50);border-left:1px solid var(--gray-200);border-right:1px solid var(--gray-200);">
            <span style="font-size:.75rem;color:var(--gray-500);">Total: </span>
            <span style="font-size:.75rem;font-weight:600;color:var(--gray-700);">Rp {{ number_format($stage->deals->sum('value') / 1000000, 1) }}jt</span>
        </div>

        {{-- Cards drop zone --}}
        <div class="kanban-drop-zone"
             data-stage-id="{{ $stage->id }}"
             ondragover="onDragOver(event)"
             ondragleave="onDragLeave(event)"
             ondrop="onDrop(event, '{{ $stage->id }}')"
             style="min-height:200px;border:1px solid var(--gray-200);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:.5rem;display:flex;flex-direction:column;gap:.5rem;background:var(--gray-50);transition:background .15s;">

            @foreach($stage->deals as $deal)
            <div class="kanban-card"
                 draggable="true"
                 data-deal-id="{{ $deal->id }}"
                 data-stage-id="{{ $stage->id }}"
                 ondragstart="onDragStart(event)"
                 ondragend="onDragEnd(event)"
                 style="background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:.875rem;cursor:grab;transition:box-shadow .15s, opacity .15s;user-select:none;">

                {{-- Deal title --}}
                <a href="{{ route('deals.show', $deal) }}" style="font-size:.875rem;font-weight:600;color:var(--gray-900);text-decoration:none;display:block;margin-bottom:.5rem;" onclick="event.stopPropagation()">
                    {{ $deal->title }}
                    @if($deal->is_overdue)
                    <span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--danger);margin-left:.375rem;vertical-align:middle;"></span>
                    @endif
                </a>

                {{-- Contact --}}
                @if($deal->contact)
                <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;">
                    <div style="width:20px;height:20px;border-radius:5px;background:var(--primary-50);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;flex-shrink:0;">
                        {{ strtoupper(substr($deal->contact->name,0,2)) }}
                    </div>
                    <span style="font-size:.75rem;color:var(--gray-600);">{{ $deal->contact->name }}</span>
                </div>
                @endif

                {{-- Footer --}}
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <span style="font-size:.8125rem;font-weight:600;color:var(--gray-800);">{{ $deal->formatted_value }}</span>
                    <div style="display:flex;align-items:center;gap:.375rem;">
                        <span class="badge badge-{{ $deal->priority_color }}" style="font-size:.6875rem;padding:1px 6px;">{{ $deal->priority_label }}</span>
                        @if($deal->expected_close)
                        <span style="font-size:.6875rem;color:{{ $deal->is_overdue ? 'var(--danger)' : 'var(--gray-400)' }};">
                            {{ $deal->expected_close->locale('id')->isoFormat('D MMM') }}
                        </span>
                        @endif
                    </div>
                </div>

                {{-- Assigned user avatar --}}
                @if($deal->user)
                <div style="display:flex;justify-content:flex-end;margin-top:.5rem;">
                    <div style="width:22px;height:22px;border-radius:6px;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;" title="{{ $deal->user->name }}">
                        {{ $deal->user->initials }}
                    </div>
                </div>
                @endif
            </div>
            @endforeach

            @if($stage->deals->isEmpty())
            <div style="text-align:center;padding:2rem 1rem;color:var(--gray-400);font-size:.8125rem;" class="kanban-empty">
                Tidak ada deal
            </div>
            @endif
        </div>
    </div>
    @endforeach
</div>

{{-- Move indicator toast --}}
<div id="moveToast" style="position:fixed;bottom:1.5rem;right:1.5rem;background:var(--gray-900);color:white;padding:.75rem 1.25rem;border-radius:var(--radius-lg);font-size:.875rem;display:none;align-items:center;gap:.5rem;z-index:500;box-shadow:var(--shadow-lg);">
    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;color:#10b981;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
    <span id="moveToastMsg"></span>
</div>

@endsection

@push('scripts')
<script>
(function() {
    var dragging     = null;
    var originStage  = null;
    var csrf         = document.querySelector('meta[name="csrf-token"]').content;

    window.onDragStart = function(e) {
        dragging    = e.currentTarget;
        originStage = dragging.dataset.stageId;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', dragging.dataset.dealId);
        setTimeout(function() { dragging.style.opacity = '.4'; }, 0);
    };

    window.onDragEnd = function(e) {
        e.currentTarget.style.opacity = '1';
        document.querySelectorAll('.kanban-drop-zone').forEach(function(z) {
            z.style.background = '';
            z.style.borderColor = '';
        });
    };

    window.onDragOver = function(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        e.currentTarget.style.background = 'var(--primary-50)';
        e.currentTarget.style.borderColor = 'var(--primary)';
    };

    window.onDragLeave = function(e) {
        e.currentTarget.style.background = '';
        e.currentTarget.style.borderColor = '';
    };

    window.onDrop = function(e, stageId) {
        e.preventDefault();
        var zone = e.currentTarget;
        zone.style.background = '';
        zone.style.borderColor = '';

        if (!dragging) return;
        var dealId = dragging.dataset.dealId;

        if (originStage === stageId) {
            dragging = null;
            return;
        }

        // Move card in DOM
        var emptyMsg = zone.querySelector('.kanban-empty');
        if (emptyMsg) emptyMsg.remove();
        zone.appendChild(dragging);
        dragging.dataset.stageId = stageId;

        // Update origin column empty state
        var originZone = document.querySelector('.kanban-drop-zone[data-stage-id="' + originStage + '"]');
        if (originZone && originZone.querySelectorAll('.kanban-card').length === 0) {
            var empty = document.createElement('div');
            empty.className = 'kanban-empty';
            empty.style.cssText = 'text-align:center;padding:2rem 1rem;color:var(--gray-400);font-size:.8125rem;';
            empty.textContent = 'Tidak ada deal';
            originZone.appendChild(empty);
        }

        // AJAX move stage
        fetch('/deals/' + dealId + '/move', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify({ stage_id: stageId }),
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                showToast('Deal dipindahkan ke ' + data.stage_name);
            }
        })
        .catch(function() { showToast('Gagal memindahkan deal', true); });

        dragging = null;
    };

    function showToast(msg, isError) {
        var toast = document.getElementById('moveToast');
        document.getElementById('moveToastMsg').textContent = msg;
        toast.style.display = 'flex';
        if (isError) toast.style.background = 'var(--danger)';
        else toast.style.background = 'var(--gray-900)';
        setTimeout(function() { toast.style.display = 'none'; }, 2500);
    }
})();
</script>
@endpush