{{-- New-Unity ERP | app/Modules/Sales/Resources/Views/activities/index.blade.php | v1.2 | 31/07/2026 --}}
{{-- v1.2 — Botón "Nueva actividad" + modal standalone (sin oportunidad requerida). --}}
{{-- v1.1 — Migrado a tabla nativa SmartAdmin (st-table); eliminado DataTables CDN (causaba dt warning tn/18). --}}
{{-- v1.0 — Lista de actividades / tareas del vendedor. --}}

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

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-calendar-check"></i> {{ __('activities.activities') }}
        <small>{{ __('activities.tasks_followups') }}</small>
    </h1>
    <div class="subheader-block d-flex gap-2">
        <a href="{{ route('sales.activities.calendar') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fal fa-calendar me-1"></i> {{ __('activities.calendar_view') }}
        </a>
        @can('activities.create')
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalNuevaActividad">
            <i class="fal fa-plus me-1"></i> {{ __('activities.new_activity') }}
        </button>
        @endcan
    </div>
</div>
@endsection

@section('content')

{{-- Filtros --}}
<div class="row mb-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body py-2 px-3">
                <form method="GET" class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.status') }}</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="">{{ __('activities.all') }}</option>
                            <option value="pending"     {{ request('status') == 'pending'     ? 'selected' : '' }}>{{ __('activities.pending') }}</option>
                            <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>{{ __('activities.in_progress') }}</option>
                            <option value="completed"   {{ request('status') == 'completed'   ? 'selected' : '' }}>{{ __('activities.completed') }}</option>
                            <option value="overdue"     {{ request('status') == 'overdue'     ? 'selected' : '' }}>{{ __('activities.overdue') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.type') }}</label>
                        <select name="type" class="form-select form-select-sm">
                            <option value="">{{ __('activities.all_types') }}</option>
                            @foreach($types as $key => $type)
                            <option value="{{ $key }}" {{ request('type') == $key ? 'selected' : '' }}>{{ $type['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.seller') }}</label>
                        <select name="assigned_to" class="form-select form-select-sm">
                            <option value="">{{ __('activities.my_activities') }}</option>
                            @foreach($sellers as $s)
                            <option value="{{ $s->id }}" {{ request('assigned_to') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary btn-sm w-100">
                            <i class="fal fa-search me-1"></i> {{ __('activities.filter') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="panel">
    <div class="panel-hdr">
        <h2><i class="fal fa-tasks me-2"></i> {{ __('activities.activities') }} <span class="badge bg-secondary ms-2">{{ $activities->count() }}</span></h2>
    </div>
    <div class="panel-container show">
        <div class="panel-content">
            <div class="table-responsive">
                <table class="st-table st-responsive">
                    <thead class="bg-primary-600">
                        <tr>
                            <th>{{ __('activities.col_type') }}</th>
                            <th>{{ __('activities.col_title') }}</th>
                            <th>{{ __('activities.col_opportunity') }}</th>
                            <th>{{ __('activities.col_assigned_to') }}</th>
                            <th>{{ __('activities.col_scheduled') }}</th>
                            <th class="text-center">{{ __('activities.col_status') }}</th>
                            <th class="text-center">{{ __('activities.col_actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($activities as $act)
                        <tr class="{{ $act->status == 'overdue' ? 'table-danger' : '' }}">
                            <td>
                                <span class="badge bg-{{ $act->type_color }}">
                                    <i class="fal {{ $act->type_icon }} me-1"></i>{{ $act->type_label }}
                                </span>
                            </td>
                            <td>{{ $act->title }}</td>
                            <td>
                                @if($act->opportunity)
                                <a href="{{ route('sales.opportunities.show', $act->opportunity) }}" class="small">
                                    {{ $act->opportunity->opportunity_number }}
                                </a>
                                @else
                                <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td>{{ $act->assignedTo->name ?? '—' }}</td>
                            <td>{{ $act->scheduled_at->format('d/m/Y H:i') }}</td>
                            <td class="text-center">
                                @php $sc = match($act->status) { 'completed'=>'success','overdue'=>'danger','cancelled'=>'secondary',default=>'warning' }; @endphp
                                <span class="badge bg-{{ $sc }}">{{ ucfirst($act->status) }}</span>
                            </td>
                            <td class="text-center">
                                @if(in_array($act->status, ['pending','in_progress']))
                                <button class="btn btn-sm btn-icon btn-outline-success btn-complete-act me-1"
                                        data-id="{{ $act->id }}" title="{{ __('activities.complete') }}">
                                    <i class="fal fa-check"></i>
                                </button>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                <i class="fal fa-calendar-times fa-2x d-block mb-2 opacity-50"></i>
                                {{ __('activities.no_activities') }}
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{-- Modal: Nueva actividad standalone --}}
@can('activities.create')
<div class="modal fade" id="modalNuevaActividad" tabindex="-1" aria-labelledby="modalNuevaActividadLabel">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalNuevaActividadLabel">
                    <i class="fal fa-calendar-plus me-2"></i> {{ __('activities.new_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 mb-1">{{ __('activities.type') }} *</label>
                        <select id="saType" class="form-select form-select-sm">
                            @foreach($types as $key => $t)
                            <option value="{{ $key }}">{{ $t['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.assigned_to') }} *</label>
                        <select id="saAssigned" 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 mb-1">{{ __('activities.title') }} *</label>
                        <input type="text" id="saTitle" class="form-control form-control-sm uppercase-input" maxlength="200"
                               placeholder="{{ __('activities.title') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.scheduled_at') }} *</label>
                        <input type="datetime-local" id="saScheduled" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.customer') }}</label>
                        <div class="position-relative">
                            <input type="text" id="saCustomerSearch" class="form-control form-control-sm"
                                   placeholder="{{ __('activities.no_customer') }}" autocomplete="off">
                            <input type="hidden" id="saCustomer">
                            <div id="saCustomerResults" class="list-group shadow-sm position-absolute w-100"
                                 style="z-index:1070;display:none;max-height:180px;overflow-y:auto;font-size:.82rem;"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.reminder') }}</label>
                        <select id="saReminder" class="form-select form-select-sm">
                            <option value="0">{{ __('activities.reminder_none') }}</option>
                            <option value="15">{{ __('activities.reminder_15min') }}</option>
                            <option value="30">{{ __('activities.reminder_30min') }}</option>
                            <option value="60" selected>{{ __('activities.reminder_1h') }}</option>
                            <option value="1440">{{ __('activities.reminder_1d') }}</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small mb-1">{{ __('activities.notes') }}</label>
                        <textarea id="saNotes" class="form-control form-control-sm" rows="2"
                                  placeholder="{{ __('activities.notes') }}"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">
                    {{ __('activities.cancel') }}
                </button>
                <button type="button" class="btn btn-primary btn-sm" id="btnGuardarActividad">
                    <i class="fal fa-check me-1"></i> {{ __('activities.schedule') }}
                </button>
            </div>
        </div>
    </div>
</div>
@endcan
@endsection

@section('scripts')
<script>
(function () {
    var CSRF = document.querySelector('meta[name=csrf-token]').content;

    // ── Completar actividad desde la tabla ─────────────────────────────────
    document.querySelectorAll('.btn-complete-act').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('{{ __('activities.activity_completed') }}', 'success');
                    setTimeout(() => location.reload(), 800);
                }
            });
        });
    });

    // ── AJAX autocomplete de clientes ─────────────────────────────────────
    (function () {
        var SEARCH_URL  = '{{ route('sales.customers.ajax-search') }}';
        var searchInput = document.getElementById('saCustomerSearch');
        var hiddenInput = document.getElementById('saCustomer');
        var resultsDiv  = document.getElementById('saCustomerResults');
        if (!searchInput) return;
        var timer;

        searchInput.addEventListener('input', function () {
            var term = this.value.trim();
            hiddenInput.value = '';
            clearTimeout(timer);
            if (term.length < 2) { resultsDiv.style.display = 'none'; return; }
            timer = setTimeout(function () {
                fetch(SEARCH_URL + '?term=' + encodeURIComponent(term), {
                    headers: {'X-Requested-With': 'XMLHttpRequest'}
                }).then(r => r.json()).then(function (data) {
                    if (!data.length) {
                        resultsDiv.innerHTML = '<div class="list-group-item text-muted small py-2">Sin resultados</div>';
                    } else {
                        resultsDiv.innerHTML = data.map(function (c) {
                            var label = (c.commercial_name || c.name) + (c.rfc ? ' — ' + c.rfc : '');
                            return '<button type="button" class="list-group-item list-group-item-action py-1 px-2 small"'
                                + ' data-id="' + c.id + '" data-name="' + (c.commercial_name || c.name) + '">'
                                + label + '</button>';
                        }).join('');
                    }
                    resultsDiv.style.display = '';
                }).catch(function () {});
            }, 300);
        });

        resultsDiv.addEventListener('click', function (e) {
            var btn = e.target.closest('[data-id]');
            if (!btn) return;
            hiddenInput.value = btn.dataset.id;
            searchInput.value = btn.dataset.name;
            resultsDiv.style.display = 'none';
        });

        document.addEventListener('click', function (e) {
            if (!searchInput.contains(e.target) && !resultsDiv.contains(e.target)) {
                resultsDiv.style.display = 'none';
            }
        });
    })();

    // ── Guardar nueva actividad standalone ────────────────────────────────
    var btnGuardar = document.getElementById('btnGuardarActividad');
    if (btnGuardar) {
        btnGuardar.addEventListener('click', function () {
            var title = document.getElementById('saTitle').value.trim();
            var scheduled = document.getElementById('saScheduled').value;
            if (!title)     { showNotification('{{ __('activities.err_title_required') }}', 'warning'); return; }
            if (!scheduled) { showNotification('{{ __('activities.err_date_required') }}', 'warning'); return; }

            var reminderVal = parseInt(document.getElementById('saReminder').value);
            var data = {
                type:             document.getElementById('saType').value,
                title:            title,
                scheduled_at:     scheduled,
                assigned_to:      document.getElementById('saAssigned').value,
                customer_id:      document.getElementById('saCustomer').value || null,
                notes:            document.getElementById('saNotes').value.trim() || null,
                send_reminder:    reminderVal > 0,
                reminder_minutes: reminderVal > 0 ? reminderVal : 60,
            };

            btnGuardar.disabled = true;
            fetch('{{ route('sales.activities.store') }}', {
                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('modalNuevaActividad'))?.hide();
                    showNotification('{{ __('activities.activity_scheduled') }}', 'success');
                    setTimeout(() => location.reload(), 800);
                } else {
                    showNotification('{{ __('activities.err_save') }}', 'error');
                    btnGuardar.disabled = false;
                }
            }).catch(() => {
                showNotification('{{ __('activities.err_save') }}', 'error');
                btnGuardar.disabled = false;
            });
        });

        // Reset modal al cerrar
        document.getElementById('modalNuevaActividad')?.addEventListener('hidden.bs.modal', function () {
            document.getElementById('saTitle').value = '';
            document.getElementById('saScheduled').value = '';
            document.getElementById('saCustomerSearch').value = '';
            document.getElementById('saCustomer').value = '';
            document.getElementById('saCustomerResults').style.display = 'none';
            document.getElementById('saNotes').value = '';
            document.getElementById('saReminder').value = '60';
            btnGuardar.disabled = false;
        });
    }
})();
</script>
@endsection