@push('scripts')
<script src="/js/kanban.js"></script>
@endpush

@extends('layouts.dashboard')
@section('content')
<div class="container mt-4">
    <h2>Sales Pipeline (Kanban Board)</h2>
    <div class="row">
        @foreach($stages as $stage)
            <div class="col-md-2">
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white">
                        {{ $stage->name }}
                    </div>
                    <div class="card-body kanban-stage" data-stage-id="{{ $stage->id }}">
                        @foreach($leadsByStage[$stage->id] as $lead)
                            <div class="card mb-2 kanban-lead" draggable="true" data-lead-id="{{ $lead->id }}">
                                <div class="card-body">
                                    <strong>{{ $lead->name }}</strong><br>
                                    <span>Deal: ${{ $lead->deal_value ?? 'N/A' }}</span><br>
                                    <span>Expected Close: {{ $lead->expected_closing_date ?? 'N/A' }}</span><br>
                                    <span>Status: {{ ucfirst($lead->status) }}</span><br>
                                    <a href="{{ route('leads.show', $lead) }}" class="btn btn-sm btn-info mt-1">View</a>
                                    <div class="mt-2">
                                        <small>Stage History:</small>
                                        <ul class="list-unstyled">
                                            @foreach($lead->stageHistories as $history)
                                                <li>{{ $history->pipelineStage->name }} ({{ $history->changed_at }})</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="alert alert-info mt-3">
        <strong>Drag-and-drop functionality placeholder:</strong> To implement drag-and-drop, use JavaScript (e.g., SortableJS or Laravel Livewire). When a lead is moved, update its pipeline_stage_id and log the change in stage history.
    </div>
</div>
@endsection