{{-- New-Unity ERP | app/Modules/Sales/Resources/Views/opportunities/create.blade.php | v2.0 | 20/07/2026 --}}
{{-- v2.0 — Formulario enriquecido: products of interest, client profile, competitors, scheduled activities, checklist. --}}
{{-- v1.0 — Formulario básico de nueva oportunidad. --}}

@extends('layouts.vertical', ['pageTitle' => __('opportunities.new_opportunity')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-funnel-dollar"></i> {{ __('opportunities.new_opportunity') }}
        <small>{{ __('opportunities.create_sales_opportunity') }}</small>
    </h1>
    <div class="subheader-block">
        <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')
<form action="{{ route('sales.opportunities.store') }}" method="POST" id="opportunityForm">
@csrf

@if($errors->any())
<div class="alert alert-danger mb-3">
    <ul class="mb-0 small">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

<div class="row">

    {{-- LEFT COLUMN --}}
    <div class="col-xl-8">

        {{-- ── Header data ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr bg-primary-600">
                <h2 class="text-white"><i class="fal fa-funnel-dollar me-2"></i> {{ __('opportunities.opportunity_details') }}</h2>
                <div class="panel-toolbar">
                    <select name="stage" class="form-select form-select-sm" style="width:auto;">
                        @foreach($stages as $key => $stage)
                        <option value="{{ $key }}" {{ old('stage','prospecting') == $key ? 'selected':'' }}>{{ $stage['label'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-bold small">{{ __('opportunities.title') }} <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required placeholder="{{ __('opportunities.title_ph') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('opportunities.customer') }} <span class="text-danger">*</span></label>
                            <select name="customer_id" id="customerSelect" class="form-select" required>
                                <option value="">{{ __('opportunities.select_customer') }}</option>
                                @foreach($customers as $c)
                                <option value="{{ $c->id }}" data-profile="{{ $c->profile ? json_encode($c->profile) : 'null' }}" {{ old('customer_id') == $c->id ? 'selected':'' }}>
                                    {{ $c->commercial_name }} ({{ $c->rfc }})
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('opportunities.key_contact') }}</label>
                            <select name="contact_id" id="contactSelect" class="form-select">
                                <option value="">{{ __('opportunities.select_customer_first') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('opportunities.assigned_to') }} <span class="text-danger">*</span></label>
                            <select name="assigned_to" class="form-select" required>
                                @foreach($sellers as $s)
                                <option value="{{ $s->id }}" {{ old('assigned_to', auth()->id()) == $s->id ? 'selected':'' }}>{{ $s->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small">{{ __('opportunities.probability') }}</label>
                            <input type="number" name="probability" class="form-control" value="{{ old('probability', 10) }}" min="0" max="100">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small">{{ __('opportunities.close_date') }}</label>
                            <input type="date" name="estimated_close_date" class="form-control" value="{{ old('estimated_close_date') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold small">{{ __('opportunities.description_notes') }}</label>
                            <textarea name="description" class="form-control" rows="2" placeholder="{{ __('opportunities.description_ph') }}">{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Products of interest ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-box me-2"></i> {{ __('opportunities.products_of_interest') }}</h2>
                <div class="panel-toolbar">
                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addProductModal">
                        <i class="fal fa-plus me-1"></i> {{ __('opportunities.add_product') }}
                    </button>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content p-0">
                    <div id="productsList">
                        <div class="text-center py-4 text-muted" id="noProductsMsg">
                            <i class="fal fa-box-open fa-2x d-block mb-2 opacity-50"></i>
                            <small>{{ __('opportunities.no_products') }}</small>
                        </div>
                    </div>
                    <div id="productsTotal" class="d-none border-top px-3 py-2 d-flex justify-content-end align-items-center">
                        <span class="text-muted small me-2">{{ __('opportunities.total_estimated') }}</span>
                        <span class="fw-bold" id="totalEstimated">$0.00</span>
                        <input type="hidden" name="estimated_value" id="estimatedValueInput" value="0">
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Competitive intelligence ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-shield-alt me-2"></i> {{ __('opportunities.competitive_intelligence') }}</h2>
                <div class="panel-toolbar">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btnAddCompetitor">
                        <i class="fal fa-plus me-1"></i> {{ __('opportunities.add_competitor') }}
                    </button>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div id="competitorsList">
                        <div class="text-center py-3 text-muted" id="noCompetitorsMsg">
                            <small>{{ __('opportunities.no_competitors') }}</small>
                        </div>
                    </div>
                    {{-- Add competitor form --}}
                    <div id="competitorForm" class="d-none border rounded p-3 bg-light mt-2">
                        <div class="row g-2">
                            <div class="col-md-4">
                                <label class="form-label fw-bold small">{{ __('opportunities.competitor_name') }}</label>
                                <input type="text" id="compName" class="form-control form-control-sm" placeholder="{{ __('opportunities.competitor_name_ph') }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold small">{{ __('opportunities.threat_level') }}</label>
                                <select id="compThreat" class="form-select form-select-sm">
                                    <option value="low">{{ __('opportunities.low') }}</option>
                                    <option value="medium" selected>{{ __('opportunities.medium') }}</option>
                                    <option value="high">{{ __('opportunities.high') }}</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold small">{{ __('opportunities.their_advantage') }}</label>
                                <input type="text" id="compTheirAdv" class="form-control form-control-sm" placeholder="{{ __('opportunities.their_advantage_ph') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold small">{{ __('opportunities.our_advantage') }}</label>
                                <input type="text" id="compOurAdv" class="form-control form-control-sm" placeholder="{{ __('opportunities.our_advantage_ph') }}">
                            </div>
                        </div>
                        <div class="d-flex gap-2 mt-2">
                            <button type="button" class="btn btn-sm btn-primary" id="btnSaveCompetitor">{{ __('opportunities.save_competitor') }}</button>
                            <button type="button" class="btn btn-sm btn-secondary" id="btnCancelCompetitor">{{ __('opportunities.cancel') }}</button>
                        </div>
                    </div>
                    <div id="competitorsHidden"></div>
                </div>
            </div>
        </div>

        {{-- ── Follow-up notes ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-sticky-note me-2"></i> {{ __('opportunities.follow_up_notes') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <textarea name="follow_up_notes" class="form-control" rows="3" placeholder="{{ __('opportunities.follow_up_notes_ph') }}">{{ old('follow_up_notes') }}</textarea>
                </div>
            </div>
        </div>

    </div>

    {{-- RIGHT COLUMN --}}
    <div class="col-xl-4">

        {{-- ── Client Profile ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-id-badge me-2"></i> {{ __('opportunities.client_profile') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content" id="clientProfileSection">
                    <div class="text-center py-3 text-muted small" id="noClientMsg">
                        {{ __('opportunities.select_customer_profile') }}
                    </div>
                    <div id="clientProfileForm" class="d-none">
                        <div class="row g-2">
                            <div class="col-12">
                                <label class="form-label fw-bold small">{{ __('opportunities.business_group') }}</label>
                                <input type="text" name="profile_business_group" id="profileGroup" class="form-control form-control-sm" placeholder="{{ __('opportunities.business_group_ph') }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold small">{{ __('opportunities.industry') }}</label>
                                <input type="text" name="profile_industry" id="profileIndustry" class="form-control form-control-sm" placeholder="{{ __('opportunities.industry_ph') }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold small">{{ __('opportunities.company_size') }}</label>
                                <select name="profile_company_size" id="profileSize" class="form-select form-select-sm">
                                    <option value="">{{ __('opportunities.select') }}</option>
                                    @foreach(\App\Modules\Sales\Models\CustomerProfile::$companySizes as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold small">{{ __('opportunities.annual_revenue') }}</label>
                                <select name="profile_annual_revenue" id="profileRevenue" class="form-select form-select-sm">
                                    <option value="">{{ __('opportunities.select') }}</option>
                                    @foreach(\App\Modules\Sales\Models\CustomerProfile::$revenueRanges as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold small">{{ __('opportunities.hq_location') }}</label>
                                <input type="text" name="profile_hq_location" id="profileHQ" class="form-control form-control-sm" placeholder="{{ __('opportunities.hq_location_ph') }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold small">{{ __('opportunities.group_companies') }} <small class="text-muted">{{ __('opportunities.comma_separated') }}</small></label>
                                <input type="text" name="profile_group_companies" id="profileGroupCo" class="form-control form-control-sm" placeholder="{{ __('opportunities.group_companies_ph') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Risk Indicator ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-exclamation-triangle me-2"></i> {{ __('opportunities.risk_indicator') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="alert alert-success py-2 mb-2 small d-flex align-items-center gap-2">
                        <i class="fal fa-check-circle"></i>
                        <strong>{{ __('opportunities.low_risk') }}</strong> — {{ __('opportunities.new_opportunity_risk') }}
                    </div>
                    <div class="small text-muted">
                        <div class="d-flex justify-content-between mb-1">
                            <span>{{ __('opportunities.days_without_activity') }}</span><span class="text-success fw-bold">0 / {{ $rules['prospecting']->max_days_without_activity ?? 5 }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span>{{ __('opportunities.days_in_stage') }}</span><span class="text-success fw-bold">0 / {{ $rules['prospecting']->max_days_in_stage ?? 14 }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span>{{ __('opportunities.close_date_overdue') }}</span><span class="text-success fw-bold">{{ __('opportunities.no') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Scheduled Activities ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-calendar-event me-2"></i> {{ __('opportunities.scheduled_activities') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div id="activitiesList" class="mb-2">
                        <div class="text-center py-2 text-muted small" id="noActivitiesMsg">{{ __('opportunities.no_activities_scheduled') }}</div>
                    </div>
                    {{-- Mini form --}}
                    <div class="border rounded p-2 bg-light">
                        <div class="row g-1 mb-1">
                            <div class="col-6">
                                <select id="actType" class="form-select form-select-sm">
                                    @foreach(\App\Modules\Sales\Models\Activity::$types as $key => $type)
                                    <option value="{{ $key }}">{{ $type['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6">
                                <input type="datetime-local" id="actScheduled" class="form-control form-control-sm">
                            </div>
                        </div>
                        <input type="text" id="actTitle" class="form-control form-control-sm mb-1" placeholder="{{ __('opportunities.activity_title_ph') }}">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center gap-2">
                                <input type="checkbox" id="actRemind" class="form-check-input mt-0">
                                <label for="actRemind" class="small text-muted mb-0">{{ __('opportunities.remind_me') }}</label>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" id="btnSaveActivity">
                                <i class="fal fa-check me-1"></i> {{ __('opportunities.add') }}
                            </button>
                        </div>
                    </div>
                    <div id="activitiesHidden"></div>
                </div>
            </div>
        </div>

        {{-- ── Stage Checklist ── --}}
        <div class="panel mb-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-tasks me-2"></i> {{ __('opportunities.stage_checklist') }}</h2>
                <div class="panel-toolbar">
                    <span class="badge bg-secondary" id="checklistProgress">0 / 3</span>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content" id="checklistContent">
                    <div class="form-check mb-2">
                        <input class="form-check-input checklist-item" type="checkbox" id="chk1" name="checklist[]" value="initial_contact">
                        <label class="form-check-label small" for="chk1">{{ __('opportunities.initial_contact_made') }}</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input checklist-item" type="checkbox" id="chk2" name="checklist[]" value="pain_points">
                        <label class="form-check-label small" for="chk2">{{ __('opportunities.pain_points_identified') }}</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input checklist-item" type="checkbox" id="chk3" name="checklist[]" value="budget_confirmed">
                        <label class="form-check-label small" for="chk3">{{ __('opportunities.budget_confirmed') }}</label>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Actions ── --}}
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary fw-bold flex-grow-1">
                <i class="fal fa-check me-1"></i> {{ __('opportunities.create_opportunity') }}
            </button>
            <a href="{{ route('sales.opportunities.index') }}" class="btn btn-secondary">{{ __('opportunities.cancel') }}</a>
        </div>

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

{{-- Modal: Add Product --}}
<div class="modal fade" id="addProductModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fal fa-box me-2"></i> {{ __('opportunities.add_product_of_interest') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" id="productSearch" class="form-control" placeholder="{{ __('opportunities.search_product_ph') }}">
                </div>
                <div id="productSearchResults" style="max-height:280px;overflow-y:auto;">
                    <div class="text-center text-muted py-3 small">{{ __('opportunities.type_to_search') }}</div>
                </div>
                <div id="selectedProductForm" class="d-none border-top pt-3 mt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label fw-bold small">{{ __('opportunities.product') }}</label>
                            <div id="selectedProductName" class="form-control-plaintext fw-bold small"></div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-bold small">{{ __('opportunities.quantity') }}</label>
                            <input type="number" id="prodQty" class="form-control form-control-sm" value="1" min="0.01" step="0.01">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small">{{ __('opportunities.est_unit_price') }}</label>
                            <input type="number" id="prodPrice" class="form-control form-control-sm" value="0" min="0" step="0.01">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-bold small">{{ __('opportunities.total') }}</label>
                            <div id="prodTotal" class="form-control-plaintext fw-bold small text-primary">$0.00</div>
                        </div>
                    </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="btnAddProduct" disabled>
                    <i class="fal fa-plus me-1"></i> {{ __('opportunities.add_to_opportunity') }}
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
var CSRF          = '{{ csrf_token() }}';
var SEARCH_URL    = '{{ route("sales.opportunities.search-products") }}';
var CONTACTS_URL  = '/sales/customers/{id}/contacts';

var selectedProductId   = null;
var competitorCount     = 0;
var activityCount       = 0;
var grandTotal          = 0;

// ── Customer change — load contacts + profile ─────────────────────────────
document.getElementById('customerSelect').addEventListener('change', function() {
    var customerId = this.value;
    var opt = this.options[this.selectedIndex];

    // Load contacts
    var contactSel = document.getElementById('contactSelect');
    contactSel.innerHTML = '<option value="">{{ __('opportunities.loading') }}</option>';

    if (!customerId) {
        contactSel.innerHTML = '<option value="">{{ __('opportunities.select_customer_first') }}</option>';
        document.getElementById('noClientMsg').classList.remove('d-none');
        document.getElementById('clientProfileForm').classList.add('d-none');
        return;
    }

    fetch('/sales/customers/' + customerId + '/contacts-json')
        .then(r => r.json())
        .then(data => {
            contactSel.innerHTML = '<option value="">{{ __('opportunities.no_specific_contact') }}</option>';
            data.forEach(function(c) {
                contactSel.innerHTML += '<option value="' + c.id + '">' + c.name + ' (' + c.type + ')</option>';
            });
        })
        .catch(() => { contactSel.innerHTML = '<option value="">{{ __('opportunities.no_contacts') }}</option>'; });

    // Load/show profile form
    document.getElementById('noClientMsg').classList.add('d-none');
    document.getElementById('clientProfileForm').classList.remove('d-none');

    var profileData = opt.getAttribute('data-profile');
    if (profileData && profileData !== 'null') {
        try {
            var profile = JSON.parse(profileData);
            document.getElementById('profileGroup').value   = profile.business_group || '';
            document.getElementById('profileIndustry').value = profile.industry || '';
            document.getElementById('profileSize').value   = profile.company_size || '';
            document.getElementById('profileRevenue').value = profile.annual_revenue || '';
            document.getElementById('profileHQ').value     = profile.hq_location || '';
            document.getElementById('profileGroupCo').value = profile.group_companies || '';
        } catch(e) {}
    } else {
        document.getElementById('profileGroup').value    = '';
        document.getElementById('profileIndustry').value = '';
        document.getElementById('profileSize').value     = '';
        document.getElementById('profileRevenue').value  = '';
        document.getElementById('profileHQ').value       = '';
        document.getElementById('profileGroupCo').value  = '';
    }
});

// ── Product search ────────────────────────────────────────────────────────
var searchTimeout;
document.getElementById('productSearch').addEventListener('input', function() {
    clearTimeout(searchTimeout);
    var q = this.value.trim();
    if (q.length < 2) return;
    searchTimeout = setTimeout(function() {
        fetch(SEARCH_URL + '?q=' + encodeURIComponent(q))
            .then(r => r.json())
            .then(function(data) {
                var html = '';
                if (data.length === 0) {
                    html = '<div class="text-center text-muted py-3 small">{{ __('opportunities.no_products_found') }}</div>';
                } else {
                    data.forEach(function(p) {
                        html += '<div class="d-flex align-items-center p-2 border-bottom product-result" style="cursor:pointer;" ' +
                            'data-id="' + p.id + '" data-name="' + p.product_name + '" data-sku="' + (p.sku||'') + '" ' +
                            'onmouseover="this.style.background=\'var(--bs-light)\'" onmouseout="this.style.background=\'\'">' +
                            '<div><div class="fw-bold small">' + p.product_name + '</div>' +
                            '<div class="text-muted" style="font-size:11px;">' + (p.sku||'') + ' · ' + (p.material_type||'') + '</div></div>' +
                            '</div>';
                    });
                }
                document.getElementById('productSearchResults').innerHTML = html;
                document.querySelectorAll('.product-result').forEach(function(el) {
                    el.addEventListener('click', function() {
                        selectedProductId = this.dataset.id;
                        document.getElementById('selectedProductName').textContent = this.dataset.name + ' (' + this.dataset.sku + ')';
                        document.getElementById('selectedProductForm').classList.remove('d-none');
                        document.getElementById('btnAddProduct').disabled = false;
                        updateProdTotal();
                    });
                });
            });
    }, 300);
});

function updateProdTotal() {
    var qty   = parseFloat(document.getElementById('prodQty').value) || 0;
    var price = parseFloat(document.getElementById('prodPrice').value) || 0;
    var total = qty * price;
    document.getElementById('prodTotal').textContent = '$' + total.toLocaleString('es-MX', {minimumFractionDigits:2});
}
document.getElementById('prodQty').addEventListener('input', updateProdTotal);
document.getElementById('prodPrice').addEventListener('input', updateProdTotal);

// ── Add product to list ───────────────────────────────────────────────────
document.getElementById('btnAddProduct').addEventListener('click', function() {
    var name  = document.getElementById('selectedProductName').textContent;
    var qty   = parseFloat(document.getElementById('prodQty').value) || 1;
    var price = parseFloat(document.getElementById('prodPrice').value) || 0;
    var total = qty * price;
    var idx   = Date.now();

    var noMsg = document.getElementById('noProductsMsg');
    if (noMsg) noMsg.remove();

    var row = document.createElement('div');
    row.className = 'border-bottom px-3 py-2 d-flex align-items-center gap-3 product-row';
    row.innerHTML =
        '<div class="flex-grow-1">' +
            '<div class="fw-bold small">' + name + '</div>' +
            '<div class="text-muted" style="font-size:11px;">{{ __('opportunities.qty') }} ' + qty + ' · {{ __('opportunities.unit') }} $' + price.toLocaleString('es-MX',{minimumFractionDigits:2}) + '</div>' +
        '</div>' +
        '<div class="fw-bold small text-primary">$' + total.toLocaleString('es-MX',{minimumFractionDigits:2}) + '</div>' +
        '<button type="button" class="btn btn-sm btn-icon btn-outline-danger remove-product"><i class="fal fa-times"></i></button>' +
        '<input type="hidden" name="products[' + idx + '][product_id]" value="' + selectedProductId + '">' +
        '<input type="hidden" name="products[' + idx + '][quantity]" value="' + qty + '">' +
        '<input type="hidden" name="products[' + idx + '][estimated_price]" value="' + price + '">' +
        '<input type="hidden" name="products[' + idx + '][estimated_total]" value="' + total + '">';

    document.getElementById('productsList').appendChild(row);

    row.querySelector('.remove-product').addEventListener('click', function() {
        grandTotal -= total;
        updateGrandTotal();
        row.remove();
        if (document.querySelectorAll('.product-row').length === 0) {
            document.getElementById('productsTotal').classList.add('d-none');
        }
    });

    grandTotal += total;
    updateGrandTotal();
    document.getElementById('productsTotal').classList.remove('d-none');

    // Reset modal
    selectedProductId = null;
    document.getElementById('productSearch').value = '';
    document.getElementById('productSearchResults').innerHTML = '<div class="text-center text-muted py-3 small">{{ __('opportunities.type_to_search') }}</div>';
    document.getElementById('selectedProductForm').classList.add('d-none');
    document.getElementById('btnAddProduct').disabled = true;
    bootstrap.Modal.getInstance(document.getElementById('addProductModal')).hide();
});

function updateGrandTotal() {
    document.getElementById('totalEstimated').textContent = '$' + grandTotal.toLocaleString('es-MX',{minimumFractionDigits:2});
    document.getElementById('estimatedValueInput').value = grandTotal;
}

// ── Competitors ───────────────────────────────────────────────────────────
document.getElementById('btnAddCompetitor').addEventListener('click', function() {
    document.getElementById('competitorForm').classList.remove('d-none');
});
document.getElementById('btnCancelCompetitor').addEventListener('click', function() {
    document.getElementById('competitorForm').classList.add('d-none');
});
document.getElementById('btnSaveCompetitor').addEventListener('click', function() {
    var name      = document.getElementById('compName').value.trim();
    var threat    = document.getElementById('compThreat').value;
    var theirAdv  = document.getElementById('compTheirAdv').value.trim();
    var ourAdv    = document.getElementById('compOurAdv').value.trim();
    if (!name) return;

    var colors = {low:'success', medium:'warning', high:'danger'};
    var noMsg = document.getElementById('noCompetitorsMsg');
    if (noMsg) noMsg.remove();

    var row = document.createElement('div');
    row.className = 'border rounded p-2 mb-2 d-flex align-items-center gap-2 competitor-row';
    row.innerHTML =
        '<div style="width:8px;height:8px;border-radius:50%;background:var(--bs-' + colors[threat] + ');flex-shrink:0;"></div>' +
        '<div class="flex-grow-1">' +
            '<span class="fw-bold small">' + name + '</span>' +
            (theirAdv ? '<span class="text-muted small ms-2">' + theirAdv + '</span>' : '') +
        '</div>' +
        '<span class="badge bg-' + colors[threat] + ' me-1" style="font-size:10px;">' + threat.charAt(0).toUpperCase() + threat.slice(1) + '</span>' +
        '<button type="button" class="btn btn-sm btn-icon btn-outline-danger remove-competitor"><i class="fal fa-times"></i></button>' +
        '<input type="hidden" name="competitors[' + competitorCount + '][name]" value="' + name + '">' +
        '<input type="hidden" name="competitors[' + competitorCount + '][threat_level]" value="' + threat + '">' +
        '<input type="hidden" name="competitors[' + competitorCount + '][their_advantage]" value="' + theirAdv + '">' +
        '<input type="hidden" name="competitors[' + competitorCount + '][our_advantage]" value="' + ourAdv + '">';

    row.querySelector('.remove-competitor').addEventListener('click', function() { row.remove(); });
    document.getElementById('competitorsList').appendChild(row);
    competitorCount++;

    document.getElementById('compName').value = '';
    document.getElementById('compTheirAdv').value = '';
    document.getElementById('compOurAdv').value = '';
    document.getElementById('competitorForm').classList.add('d-none');
});

// ── Activities ────────────────────────────────────────────────────────────
document.getElementById('btnSaveActivity').addEventListener('click', function() {
    var type      = document.getElementById('actType').value;
    var scheduled = document.getElementById('actScheduled').value;
    var title     = document.getElementById('actTitle').value.trim();
    var remind    = document.getElementById('actRemind').checked ? 1 : 0;
    if (!title || !scheduled) {
        showNotification('{{ __('opportunities.fill_activity') }}', 'warning');
        return;
    }

    var icons = {call:'fa-phone', email:'fa-envelope', visit:'fa-map-marker', demo:'fa-desktop', meeting:'fa-users', follow_up:'fa-sync', task:'fa-check-square'};
    var noMsg = document.getElementById('noActivitiesMsg');
    if (noMsg) noMsg.remove();

    var dt = new Date(scheduled);
    var dtStr = dt.toLocaleDateString('en-GB') + ' ' + dt.toLocaleTimeString('en-GB', {hour:'2-digit', minute:'2-digit'});

    var row = document.createElement('div');
    row.className = 'border rounded p-2 mb-2 activity-row';
    row.innerHTML =
        '<div class="d-flex align-items-center gap-2">' +
            '<i class="fal ' + (icons[type]||'fa-check-square') + ' text-primary"></i>' +
            '<span class="fw-bold small">' + title + '</span>' +
            '<span class="ms-auto text-muted" style="font-size:11px;">' + dtStr + '</span>' +
            '<button type="button" class="btn btn-sm btn-icon btn-outline-danger remove-activity"><i class="fal fa-times"></i></button>' +
        '</div>' +
        (remind ? '<div class="text-muted" style="font-size:10px;"><i class="fal fa-bell me-1"></i>{{ __('opportunities.reminder_set') }}</div>' : '') +
        '<input type="hidden" name="activities[' + activityCount + '][type]" value="' + type + '">' +
        '<input type="hidden" name="activities[' + activityCount + '][title]" value="' + title + '">' +
        '<input type="hidden" name="activities[' + activityCount + '][scheduled_at]" value="' + scheduled + '">' +
        '<input type="hidden" name="activities[' + activityCount + '][send_reminder]" value="' + remind + '">';

    row.querySelector('.remove-activity').addEventListener('click', function() { row.remove(); });
    document.getElementById('activitiesList').appendChild(row);
    activityCount++;

    document.getElementById('actTitle').value = '';
    document.getElementById('actScheduled').value = '';
    document.getElementById('actRemind').checked = false;
});

// ── Checklist progress ────────────────────────────────────────────────────
document.querySelectorAll('.checklist-item').forEach(function(chk) {
    chk.addEventListener('change', function() {
        var total   = document.querySelectorAll('.checklist-item').length;
        var checked = document.querySelectorAll('.checklist-item:checked').length;
        document.getElementById('checklistProgress').textContent = checked + ' / ' + total;
    });
});
</script>
@endsection