@extends('client.layouts.dashboard')

@section('title', 'Leads & Pipeline')

@section('styles')
<style>
    .kpi-card {
        background: #fff; border-radius: 12px; padding: 1.25rem;
        border: 1px solid rgba(0,0,0,.04); box-shadow: 0 2px 8px rgba(0,0,0,.04);
        transition: transform .2s, box-shadow .2s;
    }
    .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
    .kpi-icon {
        width: 42px; height: 42px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.15rem; color: #fff;
    }
    .priority-badge {
        padding: 3px 8px; border-radius: 12px; font-size: .7rem; font-weight: 700;
        text-transform: uppercase;
    }
    .prio-low { background: #e2e8f0; color: #475569; }
    .prio-medium { background: #dbeafe; color: #1d4ed8; }
    .prio-high { background: #fef3c7; color: #d97706; }
    .prio-urgent { background: #fee2e2; color: #dc2626; }

    .status-badge {
        padding: 4px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600;
        display: inline-flex; align-items: center; gap: 4px;
    }
</style>
@endsection

@section('content')
{{-- KPI Summary Cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="kpi-card d-flex align-items-center gap-3">
            <div class="kpi-icon bg-primary"><i class="bi bi-funnel-fill"></i></div>
            <div>
                <h5 class="fw-bold mb-0" style="font-size: 1.3rem;">{{ $leads->total() }}</h5>
                <small class="text-muted">Total Leads Matching</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card d-flex align-items-center gap-3">
            <div class="kpi-icon bg-warning"><i class="bi bi-calendar-event-fill"></i></div>
            <div>
                <h5 class="fw-bold mb-0" style="font-size: 1.3rem;">{{ $pipelineData['callback']['count'] + $pipelineData['follow_up']['count'] }}</h5>
                <small class="text-muted">Actionable Statuses</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card d-flex align-items-center gap-3">
            <div class="kpi-icon bg-success"><i class="bi bi-trophy-fill"></i></div>
            <div>
                <h5 class="fw-bold mb-0" style="font-size: 1.3rem;">{{ $pipelineData['converted']['count'] }}</h5>
                <small class="text-muted">Converted Leads</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card d-flex align-items-center gap-3">
            <div class="kpi-icon bg-danger"><i class="bi bi-exclamation-triangle-fill"></i></div>
            <div>
                <h5 class="fw-bold mb-0" style="font-size: 1.3rem;">
                    {{ \App\Models\Reminder::where('client_id', $client->id)->overdue()->count() }}
                </h5>
                <small class="text-muted">Overdue Reminders</small>
            </div>
        </div>
    </div>
</div>

{{-- Filters Card --}}
<div class="card table-card border-0 mb-4">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('client.leads') }}" class="row g-2 align-items-end">
            <div class="col-md-3 col-6">
                <label class="form-label small fw-semibold text-muted mb-1">Search Lead</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" class="form-control bg-light border-start-0" placeholder="Name or number..." value="{{ request('search') }}">
                </div>
            </div>

            <div class="col-md-2 col-6">
                <label class="form-label small fw-semibold text-muted mb-1">Assigned Agent</label>
                <select name="user_id" class="form-select form-select-sm bg-light">
                    <option value="">All Agents</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2 col-6">
                <label class="form-label small fw-semibold text-muted mb-1">Lead Status</label>
                <select name="status_key" class="form-select form-select-sm bg-light">
                    <option value="">All Statuses</option>
                    @foreach($statusOptions as $key => $label)
                        <option value="{{ $key }}" {{ request('status_key') == $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2 col-6">
                <label class="form-label small fw-semibold text-muted mb-1">Priority</label>
                <select name="priority" class="form-select form-select-sm bg-light">
                    <option value="">All Priorities</option>
                    @foreach($priorities as $prio)
                        <option value="{{ $prio }}" {{ request('priority') == $prio ? 'selected' : '' }}>{{ ucfirst($prio) }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2 col-6">
                <label class="form-label small fw-semibold text-muted mb-1">Date Filter</label>
                <div class="input-group input-group-sm">
                    <input type="date" name="date_from" class="form-control bg-light px-1" value="{{ request('date_from') }}">
                    <input type="date" name="date_to" class="form-control bg-light px-1" value="{{ request('date_to') }}">
                </div>
            </div>

            <div class="col-md-1 col-6 d-flex gap-1 justify-content-end">
                <button type="submit" class="btn btn-sm btn-primary w-100"><i class="bi bi-funnel"></i> Filter</button>
                <a href="{{ route('client.leads') }}" class="btn btn-sm btn-outline-secondary" title="Clear Filters"><i class="bi bi-arrow-counterclockwise"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Leads Table --}}
<div class="card table-card border-0">
    <div class="card-header border-0 d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-people me-2"></i>Leads & Contact Pipeline</h5>
    </div>
    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th>Lead Contact</th>
                    <th>Assigned User (Agent)</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Priority</th>
                    <th class="text-center">Activity Metrics</th>
                    <th class="text-center">Next Follow-up</th>
                    <th>Last Interaction</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($leads as $lead)
                    <tr>
                        <td>
                            <div class="fw-bold text-dark">{{ $lead->contact_name ?: 'Unknown Contact' }}</div>
                            <small class="text-muted d-block"><i class="bi bi-telephone me-1"></i>{{ $lead->phone_number }}</small>
                        </td>
                        <td>
                            @if($lead->user)
                                <div class="d-flex align-items-center gap-2">
                                    <div class="user-avatar-sm" style="width: 24px; height: 24px; font-size: .65rem; background-color: #6366f1;">
                                        {{ strtoupper(substr($lead->user->name, 0, 1)) }}
                                    </div>
                                    <div class="fw-semibold text-secondary" style="font-size: .8rem;">{{ $lead->user->name }}</div>
                                </div>
                            @else
                                <span class="text-muted font-italic" style="font-size: .75rem;">Unassigned</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="status-badge" style="background-color: {{ \App\Models\Lead::statusColor($lead->status_key) }}20; color: {{ \App\Models\Lead::statusColor($lead->status_key) }};">
                                <i class="bi {{ \App\Models\Lead::statusIcon($lead->status_key) }}"></i>
                                {{ \App\Models\Lead::statusLabel($lead->status_key) }}
                            </span>
                        </td>
                        <td class="text-center">
                            @if($lead->priority)
                                <span class="priority-badge prio-{{ $lead->priority }}">{{ $lead->priority }}</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-2" style="font-size: .75rem;">
                                <span class="badge bg-light text-dark" title="Calls count"><i class="bi bi-telephone text-primary me-1"></i>{{ $lead->total_calls }}</span>
                                <span class="badge bg-light text-dark" title="SMS count"><i class="bi bi-chat-dots text-success me-1"></i>{{ $lead->total_sms }}</span>
                                <span class="badge bg-light text-dark" title="WhatsApp count"><i class="bi bi-whatsapp text-success me-1"></i>{{ $lead->total_whatsapp }}</span>
                            </div>
                        </td>
                        <td class="text-center">
                            @if($lead->next_follow_up_at)
                                @php $isOverdue = $lead->hasOverdueFollowUp(); @endphp
                                <span class="badge {{ $isOverdue ? 'bg-danger-subtle text-danger' : 'bg-primary-subtle text-primary' }} p-2" style="font-size: .75rem;">
                                    <i class="bi {{ $isOverdue ? 'bi-exclamation-triangle' : 'bi-calendar-check' }} me-1"></i>
                                    {{ $lead->next_follow_up_at->format('M d, g:i A') }}
                                    @if($isOverdue) (Overdue) @endif
                                </span>
                            @else
                                <span class="text-muted" style="font-size: .75rem;">None Scheduled</span>
                            @endif
                        </td>
                        <td>
                            @if($lead->last_interaction_at)
                                <span class="text-secondary" style="font-size: .8rem;">{{ $lead->last_interaction_at->diffForHumans() }}</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-1">
                                <button type="button" class="btn btn-sm btn-outline-primary" style="border-radius: 20px; font-size: .75rem;" 
                                        onclick="openUpdateStatusModal({{ json_encode($lead) }})">
                                    <i class="bi bi-pencil-square me-1"></i>Status
                                </button>
                                <a href="{{ route('client.leads.details', $lead->id) }}" class="btn btn-sm btn-primary" style="border-radius: 20px; font-size: .75rem;">
                                    <i class="bi bi-eye-fill"></i> View
                                </a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <div class="mb-2" style="font-size: 2rem;"><i class="bi bi-inboxes-fill text-secondary"></i></div>
                            <h6>No Leads Found</h6>
                            <p class="small mb-0">Try adjusting your filters or wait for employees to log caller annotations.</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($leads->hasPages())
        <div class="card-footer bg-white border-0 py-3">
            {{ $leads->withQueryString()->links() }}
        </div>
    @endif
</div>

{{-- Update Status Modal --}}
<div class="modal fade" id="updateStatusModal" tabindex="-1" aria-labelledby="updateStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,.15);">
            <div class="modal-header text-white" style="background: linear-gradient(135deg, #11998e, #38ef7d);">
                <h5 class="modal-title fw-bold" id="updateStatusModalLabel"><i class="bi bi-tag-fill me-2"></i>Update Lead Status</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="updateStatusForm" method="POST" action="">
                @csrf
                @method('PUT')
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-secondary">Lead Contact</label>
                        <input type="text" id="modalLeadContactName" class="form-control bg-light border-0" readonly>
                    </div>

                    <div class="row mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold small text-secondary">Status Key</label>
                            <select name="status_key" id="modalStatusKey" class="form-select bg-light border-0" onchange="toggleFollowUpFields(this.value)" required>
                                @foreach($statusOptions as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold small text-secondary">Priority</label>
                            <select name="priority" id="modalPriority" class="form-select bg-light border-0">
                                @foreach($priorities as $prio)
                                    <option value="{{ $prio }}">{{ ucfirst($prio) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-secondary">Status / Interaction Note</label>
                        <textarea name="status_note" id="modalStatusNote" class="form-control bg-light border-0" rows="3" placeholder="Describe the outcome of the interaction..."></textarea>
                    </div>

                    <div id="followUpFields" style="display: none;">
                        <div class="card p-3 bg-light border-0 mb-3" style="border-radius: 12px;">
                            <h6 class="fw-bold mb-2 small text-primary"><i class="bi bi-calendar-event me-1"></i>Schedule Follow-up Task</h6>
                            
                            <div class="mb-2">
                                <label class="form-label small fw-semibold text-secondary">Date & Time</label>
                                <input type="datetime-local" name="follow_up_at" id="modalFollowUpAt" class="form-control border-0">
                            </div>

                            <div class="mb-0">
                                <label class="form-label small fw-semibold text-secondary">Task Note</label>
                                <input type="text" name="follow_up_note" id="modalFollowUpNote" class="form-control border-0" placeholder="e.g. Call back to discuss pricing...">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 p-3">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal" style="border-radius: 20px;">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4" style="border-radius: 20px;">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let updateModalInstance = null;

    function openUpdateStatusModal(lead) {
        document.getElementById('modalLeadContactName').value = (lead.contact_name || lead.phone_number);
        document.getElementById('modalStatusKey').value = lead.status_key;
        document.getElementById('modalPriority').value = lead.priority || 'medium';
        document.getElementById('modalStatusNote').value = lead.status_note || '';

        // Form action url
        const form = document.getElementById('updateStatusForm');
        form.action = `/client/leads/${lead.id}/status`;

        // Load follow-up values if exists
        if (lead.next_follow_up_at) {
            // format datetime-local input expects: YYYY-MM-DDThh:mm
            const date = new Date(lead.next_follow_up_at);
            const yyyy = date.getFullYear();
            const mm = String(date.getMonth() + 1).padStart(2, '0');
            const dd = String(date.getDate()).padStart(2, '0');
            const hh = String(date.getHours()).padStart(2, '0');
            const min = String(date.getMinutes()).padStart(2, '0');
            document.getElementById('modalFollowUpAt').value = `${yyyy}-${mm}-${dd}T${hh}:${min}`;
            document.getElementById('modalFollowUpNote').value = lead.follow_up_note || '';
        } else {
            document.getElementById('modalFollowUpAt').value = '';
            document.getElementById('modalFollowUpNote').value = '';
        }

        toggleFollowUpFields(lead.status_key);

        if (!updateModalInstance) {
            updateModalInstance = new bootstrap.Modal(document.getElementById('updateStatusModal'));
        }
        updateModalInstance.show();
    }

    function toggleFollowUpFields(statusKey) {
        const fields = document.getElementById('followUpFields');
        // actionable statuses requiring date/time picker: 'callback', 'follow_up'
        if (statusKey === 'callback' || statusKey === 'follow_up') {
            fields.style.display = 'block';
            document.getElementById('modalFollowUpAt').required = true;
        } else {
            fields.style.display = 'none';
            document.getElementById('modalFollowUpAt').required = false;
        }
    }
</script>
@endsection