{{-- New-Unity ERP | app/Modules/Sales/Resources/Views/opportunities/show.blade.php | v1.0 | 20/07/2026 --}}
{{-- v1.0 — Vista detalle de oportunidad con timeline de actividades. --}}

@extends('layouts.vertical', ['pageTitle' => $opportunity->opportunity_number])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-funnel-dollar"></i> {{ $opportunity->opportunity_number }}
        <small>{{ $opportunity->title }}</small>
    </h1>
    <div class="subheader-block d-flex gap-2">
        <a href="{{ route('sales.opportunities.edit', $opportunity) }}" class="btn btn-warning btn-sm">
            <i class="fal fa-edit me-1"></i> {{ __('opportunities.edit') }}
        </a>
        <a href="{{ route('sales.opportunities.index') }}" class="btn btn-secondary btn-sm">
            <i class="fal fa-arrow-left me-1"></i> {{ __('opportunities.back') }}
        </a>
    </div>
</div>
@endsection

@section('content')

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show">
    {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row">
    {{-- Left: Opportunity Info --}}
    <div class="col-xl-4 mb-4">

        {{-- Stage Card --}}
        <div class="card border-0 shadow-sm mb-3" style="border-left: 4px solid {{ $opportunity->stage_color }} !important;">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <span class="badge fs-6 fw-bold" style="background:{{ $opportunity->stage_color }}">
                            {{ $opportunity->stage_label }}
                        </span>
                        <div class="mt-1 small text-muted">{{ $opportunity->probability }}% {{ __('opportunities.probability_suffix') }}</div>
                    </div>
                    <div class="text-end">
                        <div class="h4 fw-bold mb-0">${{ number_format($opportunity->estimated_value, 2) }}</div>
                        <div class="small text-muted">{{ __('opportunities.estimated_value') }}</div>
                    </div>
                </div>

                {{-- Progress bar --}}
                <div class="progress mb-3" style="height:6px;">
                    <div class="progress-bar" style="width:{{ $opportunity->probability }}%;background:{{ $opportunity->stage_color }}"></div>
                </div>

                {{-- Stage selector --}}
                <div class="mb-0">
                    <label class="form-label fw-bold small">{{ __('opportunities.change_stage') }}</label>
                    <select id="stageSelect" class="form-select form-select-sm">
                        @foreach($stages as $key => $stage)
                        <option value="{{ $key }}" {{ $opportunity->stage == $key ? 'selected' : '' }}>
                            {{ $stage['label'] }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- Details --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light fw-bold small py-2">
                <i class="fal fa-info-circle me-1"></i> {{ __('opportunities.details') }}
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0 small">
                    <tr>
                        <td class="text-muted fw-bold ps-3" width="40%">{{ __('opportunities.customer') }}</td>
                        <td>{{ $opportunity->customer->commercial_name ?? '—' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted fw-bold ps-3">{{ __('opportunities.assigned_to') }}</td>
                        <td>{{ $opportunity->assignedTo->name ?? '—' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted fw-bold ps-3">{{ __('opportunities.product_interest') }}</td>
                        <td>{{ $opportunity->product_interest ?? '—' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted fw-bold ps-3">{{ __('opportunities.close_date') }}</td>
                        <td>
                            @if($opportunity->estimated_close_date)
                                <span class="{{ $opportunity->estimated_close_date->isPast() && !in_array($opportunity->stage, ['won','lost']) ? 'text-danger fw-bold' : '' }}">
                                    {{ $opportunity->estimated_close_date->format('d/m/Y') }}
                                </span>
                            @else —
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td class="text-muted fw-bold ps-3">{{ __('opportunities.last_activity') }}</td>
                        <td>{{ $opportunity->last_activity_at ? $opportunity->last_activity_at->diffForHumans() : __('opportunities.none') }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted fw-bold ps-3">{{ __('opportunities.created_by') }}</td>
                        <td>{{ $opportunity->createdBy->name ?? '—' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted fw-bold ps-3">{{ __('opportunities.created') }}</td>
                        <td>{{ $opportunity->created_at->format('d/m/Y') }}</td>
                    </tr>
                </table>
            </div>
        </div>

        {{-- Alerts --}}
        @if($rule)
        @if($daysSinceActivity !== null && $daysSinceActivity >= $rule->max_days_without_activity)
        <div class="alert alert-warning py-2 small">
            <i class="fal fa-exclamation-triangle me-1"></i>
            <strong>{{ $daysSinceActivity }} {{ __('opportunities.days_label') }}</strong> {{ __('opportunities.days_no_activity_1') }} {{ $rule->max_days_without_activity }} {{ __('opportunities.days_label') }}.
        </div>
        @endif
        @if($daysInStage >= $rule->max_days_in_stage)
        <div class="alert alert-danger py-2 small">
            <i class="fal fa-clock me-1"></i>
            <strong>{{ $daysInStage }} {{ __('opportunities.days_label') }}</strong> {{ __('opportunities.days_in_stage_1') }} {{ $rule->max_days_in_stage }} {{ __('opportunities.days_label') }}.
        </div>
        @endif
        @endif

        {{-- Description --}}
        @if($opportunity->description)
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light fw-bold small py-2">
                <i class="fal fa-align-left me-1"></i> {{ __('opportunities.notes') }}
            </div>
            <div class="card-body small">{{ $opportunity->description }}</div>
        </div>
        @endif
    </div>

    {{-- Right: Activities --}}
    <div class="col-xl-8">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-calendar-check me-2"></i> {{ __('opportunities.activities_followup') }}</h2>
                <div class="panel-toolbar">
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addActivityModal">
                        <i class="fal fa-plus me-1"></i> {{ __('opportunities.add_activity') }}
                    </button>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

                    @if($opportunity->activities->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="fal fa-calendar-times fa-3x d-block mb-3 opacity-50"></i>
                        <p class="mb-1 fw-bold">{{ __('opportunities.no_activities_yet') }}</p>
                        <p class="small">{{ __('opportunities.schedule_hint') }}</p>
                        <button class="btn btn-primary btn-sm mt-2" data-bs-toggle="modal" data-bs-target="#addActivityModal">
                            <i class="fal fa-plus me-1"></i> {{ __('opportunities.schedule_first_activity') }}
                        </button>
                    </div>
                    @else
                    <div class="timeline">
                        @foreach($opportunity->activities as $act)
                        <div class="d-flex mb-3">
                            <div class="me-3 text-center" style="min-width:40px;">
                                <div class="rounded-circle d-flex align-items-center justify-content-center mx-auto mb-1"
                                     style="width:36px;height:36px;background:var(--bs-{{ $act->type_color }}-bg-subtle, #e9ecef);">
                                    <i class="fal {{ $act->type_icon }} text-{{ $act->type_color }}"></i>
                                </div>
                                @if(!$loop->last)
                                <div style="width:2px;height:100%;background:#dee2e6;margin:0 auto;"></div>
                                @endif
                            </div>
                            <div class="card border-0 shadow-sm flex-grow-1 mb-0"
                                 style="border-left: 3px solid var(--bs-{{ $act->type_color }}, #6c757d) !important;">
                                <div class="card-body py-2 px-3">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <div class="fw-bold small">{{ $act->title }}</div>
                                            <div class="text-muted" style="font-size:11px;">
                                                <span class="badge bg-{{ $act->type_color }} me-1" style="font-size:10px;">{{ $act->type_label }}</span>
                                                {{ $act->scheduled_at->format('d/m/Y H:i') }}
                                                · {{ $act->assignedTo->name ?? '—' }}
                                            </div>
                                        </div>
                                        <div class="d-flex gap-1 align-items-center">
                                            @php
                                            $statusColor = match($act->status) {
                                                'completed' => 'success',
                                                'overdue'   => 'danger',
                                                'cancelled' => 'secondary',
                                                default     => 'warning'
                                            };
                                            @endphp
                                            <span class="badge bg-{{ $statusColor }}" style="font-size:10px;">{{ ucfirst($act->status) }}</span>
                                            @if(in_array($act->status, ['pending', 'in_progress']))
                                            <button class="btn btn-xs btn-outline-success btn-complete-activity"
                                                    data-id="{{ $act->id }}" title="{{ __('opportunities.mark_complete') }}" style="font-size:11px;padding:2px 6px;">
                                                <i class="fal fa-check"></i>
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                    @if($act->notes)
                                    <div class="text-muted mt-1" style="font-size:12px;">{{ $act->notes }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Add Activity --}}
<div class="modal fade" id="addActivityModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fal fa-calendar-plus me-2"></i> {{ __('opportunities.schedule_activity') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">{{ __('opportunities.type') }} <span class="text-danger">*</span></label>
                        <select id="actType" class="form-select form-select-sm">
                            @foreach($actTypes as $key => $type)
                            <option value="{{ $key }}">{{ $type['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">{{ __('opportunities.assigned_to') }} <span class="text-danger">*</span></label>
                        <select id="actAssigned" class="form-select form-select-sm">
                            @foreach($sellers as $s)
                            <option value="{{ $s->id }}" {{ $s->id == auth()->id() ? 'selected' : '' }}>{{ $s->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">{{ __('opportunities.title') }} <span class="text-danger">*</span></label>
                        <input type="text" id="actTitle" class="form-control form-control-sm" placeholder="{{ __('opportunities.title_call_ph') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">{{ __('opportunities.date_time') }} <span class="text-danger">*</span></label>
                        <input type="datetime-local" id="actScheduled" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">{{ __('opportunities.reminder') }}</label>
                        <select id="actReminder" class="form-select form-select-sm">
                            <option value="0">{{ __('opportunities.no_reminder') }}</option>
                            <option value="30">{{ __('opportunities.reminder_30') }}</option>
                            <option value="60" selected>{{ __('opportunities.reminder_60') }}</option>
                            <option value="1440">{{ __('opportunities.reminder_1440') }}</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">{{ __('opportunities.notes') }}</label>
                        <textarea id="actNotes" class="form-control form-control-sm" rows="2" placeholder="{{ __('opportunities.additional_notes_ph') }}"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('opportunities.cancel') }}</button>
                <button type="button" class="btn btn-primary btn-sm fw-bold" id="btnSaveActivity">
                    <i class="fal fa-check me-1"></i> {{ __('opportunities.schedule') }}
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
var CSRF      = '{{ csrf_token() }}';
var ACT_URL   = '{{ route("sales.activities.store") }}';
var STAGE_URL = '{{ route("sales.opportunities.stage", $opportunity) }}';
var OPP_ID    = {{ $opportunity->id }};

// Cambiar etapa
document.getElementById('stageSelect').addEventListener('change', function() {
    fetch(STAGE_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body: JSON.stringify({ stage: this.value })
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) showNotification('{{ __('opportunities.stage_updated_to') }} ' + res.label, 'success');
    });
});

// Guardar actividad
document.getElementById('btnSaveActivity').addEventListener('click', function() {
    var data = {
        opportunity_id:   OPP_ID,
        type:             document.getElementById('actType').value,
        title:            document.getElementById('actTitle').value,
        scheduled_at:     document.getElementById('actScheduled').value,
        assigned_to:      document.getElementById('actAssigned').value,
        notes:            document.getElementById('actNotes').value,
        send_reminder:    document.getElementById('actReminder').value > 0 ? 1 : 0,
        reminder_minutes: document.getElementById('actReminder').value,
    };

    if (!data.title || !data.scheduled_at) {
        showNotification('{{ __('opportunities.fill_title_date') }}', 'warning');
        return;
    }

    fetch(ACT_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) {
            bootstrap.Modal.getInstance(document.getElementById('addActivityModal')).hide();
            showNotification('{{ __('opportunities.activity_scheduled') }}', 'success');
            setTimeout(() => location.reload(), 1000);
        }
    });
});

// Completar actividad
document.querySelectorAll('.btn-complete-activity').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var id = this.dataset.id;
        fetch('/sales/activities/' + id + '/complete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: JSON.stringify({})
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                showNotification('{{ __('opportunities.activity_completed') }}', 'success');
                setTimeout(() => location.reload(), 800);
            }
        });
    });
});
</script>
@endsection