@extends('layouts.app')

@section('title', 'Pipeline de Ventas')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-project-diagram me-2 text-primary"></i>Pipeline de Ventas
            </h1>
            <p class="text-muted mb-0 small">Visualización y gestión del pipeline de oportunidades</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('admin.crm.dashboard') }}" class="btn btn-secondary">
                <i class="fas fa-chart-bar me-1"></i>Dashboard
            </a>
            <a href="{{ route('admin.crm.opportunities.index') }}" class="btn btn-info">
                <i class="fas fa-list me-1"></i>Listado
            </a>
            <a href="{{ route('admin.crm.opportunities.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i>Nueva Oportunidad
            </a>
        </div>
    </div>

    <!-- Pipeline -->
    <div class="row g-3" id="pipeline-container">
        @foreach($stages as $stage)
        <div class="col-lg-3 col-md-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-{{ $stage->badge_color ?? 'secondary' }} text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-{{ $stage->is_won ? 'check-circle' : ($stage->is_lost ? 'times-circle' : 'circle') }} me-2"></i>
                            {{ $stage->name }}
                        </h6>
                        <span class="badge bg-light text-dark">{{ $stage->opportunities->count() }}</span>
                    </div>
                    @if($stage->description)
                    <small class="d-block mt-1 opacity-75">{{ $stage->description }}</small>
                    @endif
                </div>
                <div class="card-body p-2" 
                     data-stage-id="{{ $stage->id }}"
                     ondrop="drop(event)" 
                     ondragover="allowDrop(event)"
                     style="min-height: 400px; max-height: 600px; overflow-y: auto;">
                    @forelse($stage->opportunities as $opportunity)
                    <div class="card mb-2 opportunity-card" 
                         draggable="true" 
                         ondragstart="drag(event)"
                         data-opportunity-id="{{ $opportunity->id }}"
                         id="opportunity-{{ $opportunity->id }}">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h6 class="mb-0 fw-bold">{{ Str::limit($opportunity->name, 30) }}</h6>
                                <a href="{{ route('admin.crm.opportunities.show', $opportunity) }}" 
                                   class="btn btn-sm btn-link p-0" title="Ver detalles">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted d-block">
                                    <i class="fas fa-building me-1"></i>{{ Str::limit($opportunity->client->business_name ?? 'N/A', 25) }}
                                </small>
                                <small class="text-muted d-block">
                                    <i class="fas fa-user-tie me-1"></i>{{ $opportunity->salesman->first_name ?? 'N/A' }} {{ $opportunity->salesman->last_name ?? '' }}
                                </small>
                            </div>
                            <div class="mb-2">
                                <strong class="text-success">${{ number_format($opportunity->estimated_value, 2) }}</strong>
                                <br><small class="text-muted">Prob: {{ number_format($opportunity->probability, 1) }}%</small>
                                <br><small class="text-info">Esperado: ${{ number_format($opportunity->expected_value, 2) }}</small>
                            </div>
                            @if($opportunity->expected_close_date)
                            <div class="mb-2">
                                <small class="text-muted">
                                    <i class="fas fa-calendar me-1"></i>{{ $opportunity->expected_close_date->format('d/m/Y') }}
                                    @if($opportunity->is_overdue)
                                    <span class="badge bg-danger ms-1">Vencida</span>
                                    @elseif($opportunity->days_to_close > 0)
                                    <span class="badge bg-info ms-1">{{ $opportunity->days_to_close }} días</span>
                                    @endif
                                </small>
                            </div>
                            @endif
                            <div class="d-flex justify-content-between align-items-center">
                                <a href="{{ route('admin.crm.opportunities.edit', $opportunity) }}" 
                                   class="btn btn-sm btn-warning" title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @if($opportunity->canBeConverted())
                                <form action="{{ route('admin.crm.opportunities.convert-to-quotation', $opportunity) }}" 
                                      method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-success" 
                                            title="Convertir a Presupuesto"
                                            onclick="return confirm('¿Convertir esta oportunidad a presupuesto?');">
                                        <i class="fas fa-arrow-right"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-inbox fa-2x mb-2"></i>
                        <p class="mb-0 small">Sin oportunidades</p>
                    </div>
                    @endforelse
                </div>
                <div class="card-footer bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            <strong>{{ $stage->opportunities->count() }}</strong> oportunidades
                        </small>
                        <small class="text-muted">
                            <strong>${{ number_format($stage->opportunities->sum('estimated_value'), 2) }}</strong>
                        </small>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

@push('styles')
<style>
.opportunity-card {
    cursor: move;
    transition: transform 0.2s, box-shadow 0.2s;
}

.opportunity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.opportunity-card.dragging {
    opacity: 0.5;
}

.card-body[data-stage-id] {
    background: #f8f9fa;
}

.card-body[data-stage-id]:hover {
    background: #e9ecef;
}
</style>
@endpush

@push('scripts')
<script>
let draggedElement = null;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    draggedElement = ev.target.closest('.opportunity-card');
    ev.dataTransfer.setData("text", ev.target.id);
    draggedElement.classList.add('dragging');
}

function drop(ev) {
    ev.preventDefault();
    const data = ev.dataTransfer.getData("text");
    const opportunityCard = document.getElementById(data);
    const targetStage = ev.currentTarget;
    const targetStageId = targetStage.getAttribute('data-stage-id');
    
    if (opportunityCard && targetStageId) {
        // Mover visualmente la tarjeta
        targetStage.appendChild(opportunityCard);
        opportunityCard.classList.remove('dragging');
        
        // Enviar petición AJAX para actualizar la etapa
        const opportunityId = opportunityCard.getAttribute('data-opportunity-id');
        updateOpportunityStage(opportunityId, targetStageId);
    }
}

function updateOpportunityStage(opportunityId, stageId) {
    // Crear formulario temporal para enviar la petición
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/admin/crm/opportunities/${opportunityId}/move-stage`;
    
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = '_token';
    csrfInput.value = csrfToken;
    form.appendChild(csrfInput);
    
    const stageInput = document.createElement('input');
    stageInput.type = 'hidden';
    stageInput.name = 'stage_id';
    stageInput.value = stageId;
    form.appendChild(stageInput);
    
    document.body.appendChild(form);
    form.submit();
}

// Permitir drop en todas las áreas de etapa
document.querySelectorAll('[data-stage-id]').forEach(stage => {
    stage.addEventListener('drop', drop);
    stage.addEventListener('dragover', allowDrop);
});
</script>
@endpush
@endsection