@extends('client.layouts.dashboard')

@section('title', 'Lead Details: ' . ($lead->contact_name ?: $lead->phone_number))

@section('styles')
<style>
    .info-label { font-size: .75rem; text-transform: uppercase; font-weight: 700; color: #9ca3af; letter-spacing: .5px; }
    .info-value { font-size: .95rem; font-weight: 600; color: #1f2937; margin-bottom: .85rem; }
    .timeline { position: relative; padding-left: 30px; margin-top: 15px; }
    .timeline::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
    .timeline-item { position: relative; margin-bottom: 20px; }
    .timeline-badge { position: absolute; left: -30px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--primary); z-index: 2; }
    .timeline-badge.status_change { border-color: #3b82f6; color: #3b82f6; }
    .timeline-badge.reminder_set { border-color: #f59e0b; color: #f59e0b; }
    .timeline-badge.reminder_completed { border-color: #10b981; color: #10b981; }
    .timeline-content { background: #f9fafb; border-radius: 12px; padding: .85rem; border: 1px solid #f3f4f6; }
    .timeline-time { font-size: .7rem; color: #9ca3af; font-weight: 500; }
    
    .status-badge {
        padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700;
        display: inline-flex; align-items: center; gap: 4px;
    }
    .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; }
</style>
@endsection

@section('content')
<div class="mb-3">
    <a href="{{ route('client.leads') }}" class="btn btn-sm btn-outline-secondary" style="border-radius: 20px;">
        <i class="bi bi-arrow-left me-1"></i>Back to Leads
    </a>
</div>

<div class="row g-4">
    {{-- Left Column: Lead Info and Status Updates --}}
    <div class="col-lg-5">
        {{-- Profile Card --}}
        <div class="card table-card border-0 mb-4">
            <div class="card-header border-0 d-flex justify-content-between align-items-center pb-0">
                <h5 class="mb-0"><i class="bi bi-person-circle me-2 text-primary"></i>Lead Profile</h5>
                <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>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="info-label">Contact Name</div>
                        <div class="info-value">{{ $lead->contact_name ?: 'Unknown' }}</div>
                    </div>
                    <div class="col-6">
                        <div class="info-label">Phone Number</div>
                        <div class="info-value">
                            <a href="tel:{{ $lead->phone_number }}" class="text-decoration-none fw-bold">{{ $lead->phone_number }}</a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-label">Assigned Agent</div>
                        <div class="info-value">
                            @if($lead->user)
                                <i class="bi bi-person-check text-indigo me-1"></i>{{ $lead->user->name }}
                            @else
                                <span class="text-muted font-italic">Unassigned</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-label">Priority</div>
                        <div class="info-value">
                            @if($lead->priority)
                                <span class="priority-badge prio-{{ $lead->priority }}">{{ $lead->priority }}</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-label">Lead Source</div>
                        <div class="info-value">
                            <span class="badge bg-light text-secondary border">{{ ucfirst($lead->source ?: 'Organic') }}</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="info-label">Created At</div>
                        <div class="info-value text-secondary small">{{ $lead->created_at->format('M d, Y h:i A') }}</div>
                    </div>
                </div>

                @if($lead->status_note)
                    <div class="mt-2 p-3 bg-light rounded-3" style="border: 1px solid #e5e7eb;">
                        <div class="info-label mb-1">Latest Status Note</div>
                        <p class="mb-0 small text-secondary-emphasis" style="line-height: 1.45;">{{ $lead->status_note }}</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Status Update Form --}}
        <div class="card table-card border-0 mb-4">
            <div class="card-header border-0 pb-0">
                <h5 class="mb-0"><i class="bi bi-pencil-square me-2 text-primary"></i>Update Lead Status</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('client.leads.update-status', $lead->id) }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold small text-secondary">Status Key</label>
                            <select name="status_key" class="form-select form-select-sm bg-light border-0" onchange="toggleDetailsFollowUpFields(this.value)" required>
                                @foreach($statusOptions as $key => $label)
                                    <option value="{{ $key }}" {{ $lead->status_key == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold small text-secondary">Priority</label>
                            <select name="priority" class="form-select form-select-sm bg-light border-0">
                                @foreach($priorities as $prio)
                                    <option value="{{ $prio }}" {{ $lead->priority == $prio ? 'selected' : '' }}>{{ 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" class="form-control bg-light border-0" rows="3" placeholder="Describe the outcome of your latest talk..."></textarea>
                    </div>

                    <div id="detailFollowUpFields" style="display: {{ in_array($lead->status_key, ['callback', 'follow_up']) ? 'block' : '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>
                                @php
                                    $followUpVal = '';
                                    if ($lead->next_follow_up_at) {
                                        $followUpVal = $lead->next_follow_up_at->format('Y-m-d\TH:i');
                                    }
                                @endphp
                                <input type="datetime-local" name="follow_up_at" id="detailFollowUpAt" class="form-control border-0" value="{{ $followUpVal }}">
                            </div>

                            <div class="mb-0">
                                <label class="form-label small fw-semibold text-secondary">Task Note</label>
                                <input type="text" name="follow_up_note" class="form-control border-0" placeholder="e.g. Discuss custom pricing options..." value="{{ $lead->follow_up_note }}">
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-sm btn-primary w-100 py-2 fw-semibold" style="border-radius: 20px;">
                        <i class="bi bi-check-circle me-1"></i>Save Changes
                    </button>
                </form>
            </div>
        </div>

        {{-- Activity Timeline --}}
        <div class="card table-card border-0">
            <div class="card-header border-0 pb-0">
                <h5 class="mb-0"><i class="bi bi-activity me-2 text-primary"></i>Activity Log</h5>
            </div>
            <div class="card-body">
                @if($lead->activities->isEmpty())
                    <p class="text-muted small text-center my-3">No activity logs recorded yet.</p>
                @else
                    <div class="timeline">
                        @foreach($lead->activities as $activity)
                            <div class="timeline-item">
                                <div class="timeline-badge {{ $activity->activity_type }}">
                                    @if($activity->activity_type === 'status_change')
                                        <i class="bi bi-tag"></i>
                                    @elseif($activity->activity_type === 'reminder_set')
                                        <i class="bi bi-calendar-plus"></i>
                                    @elseif($activity->activity_type === 'reminder_completed')
                                        <i class="bi bi-check"></i>
                                    @else
                                        <i class="bi bi-info"></i>
                                    @endif
                                </div>
                                <div class="timeline-content">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <strong class="small text-dark">{{ ucfirst(str_replace('_', ' ', $activity->activity_type)) }}</strong>
                                        <span class="timeline-time">{{ $activity->created_at->diffForHumans() }}</span>
                                    </div>
                                    <p class="mb-0 small text-secondary">{{ $activity->description }}</p>
                                    @if($activity->user)
                                        <small class="text-muted d-block mt-1" style="font-size: .65rem;"><i class="bi bi-person me-1"></i>Logged by: {{ $activity->user->name }}</small>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Right Column: Call logs, messages, and reminders --}}
    <div class="col-lg-7">
        {{-- Reminders Widget --}}
        <div class="card table-card border-0 mb-4">
            <div class="card-header border-0 d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-alarm-fill text-warning me-2"></i>Scheduled Reminders</h5>
            </div>
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Reminder Title</th>
                            <th>Schedule Date</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($lead->reminders as $reminder)
                            <tr>
                                <td>
                                    <div class="fw-semibold text-dark">{{ $reminder->title }}</div>
                                    @if($reminder->note)
                                        <small class="text-muted d-block">{{ $reminder->note }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="small text-secondary fw-semibold">{{ $reminder->remind_at->format('M d, Y h:i A') }}</span>
                                </td>
                                <td>
                                    @if($reminder->is_completed)
                                        <span class="badge bg-success-subtle text-success py-1 px-2"><i class="bi bi-check-circle-fill me-1"></i>Done</span>
                                    @elseif($reminder->isOverdue())
                                        <span class="badge bg-danger-subtle text-danger py-1 px-2"><i class="bi bi-exclamation-triangle-fill me-1"></i>Overdue</span>
                                    @else
                                        <span class="badge bg-warning-subtle text-warning py-1 px-2"><i class="bi bi-clock-fill me-1"></i>Pending</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    @if(!$reminder->is_completed)
                                        <form method="POST" action="{{ route('client.reminders.complete', $reminder->id) }}" class="d-inline">
                                            @csrf
                                            @method('PUT')
                                            <button type="submit" class="btn btn-xs btn-success" style="border-radius: 20px; font-size: .75rem; padding: 2px 10px;">
                                                <i class="bi bi-check-lg"></i> Complete
                                            </button>
                                        </form>
                                    @else
                                        <small class="text-muted">Completed {{ $reminder->completed_at ? $reminder->completed_at->format('M d') : '' }}</small>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted small py-4">No reminders scheduled for this lead.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Call Logs Timeline --}}
        <div class="card table-card border-0 mb-4">
            <div class="card-header border-0">
                <h5 class="mb-0"><i class="bi bi-telephone-fill text-primary me-2"></i>Call History Logs</h5>
            </div>
            <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Call Type</th>
                            <th>Agent / Device</th>
                            <th>Call Time</th>
                            <th>Duration</th>
                            <th>Annotation</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($callLogs as $call)
                            <tr>
                                <td>
                                    <span class="badge bg-{{ $call->call_type_badge }} text-white">
                                        {{ $call->call_type_formatted }}
                                    </span>
                                </td>
                                <td>
                                    <div class="small fw-semibold text-dark">{{ $call->user->name ?? 'Unknown Agent' }}</div>
                                    <small class="text-muted text-xs" style="font-size: .65rem;"><i class="bi bi-phone me-1"></i>{{ $call->device_name ?: 'Device' }}</small>
                                </td>
                                <td>
                                    <span class="small text-secondary">{{ $call->call_time->format('M d, Y h:i A') }}</span>
                                </td>
                                <td>
                                    <span class="small text-dark">{{ gmdate('H:i:s', $call->call_duration) }}</span>
                                </td>
                                <td>
                                    @if($call->status_key)
                                        <div class="d-flex align-items-center gap-1">
                                            <span class="badge bg-{{ $call->status_badge_class }} py-1" style="font-size: .68rem;">{{ $call->status_label }}</span>
                                            @if($call->status_note)
                                                <i class="bi bi-info-circle text-muted" data-bs-toggle="popover" data-bs-content="{{ $call->status_note }}"></i>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-muted text-xs">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted small py-4">No call history logs found for this number.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- SMS / Messaging Logs --}}
        <div class="card table-card border-0">
            <div class="card-header border-0">
                <h5 class="mb-0"><i class="bi bi-chat-dots-fill text-success me-2"></i>Messaging Activity</h5>
            </div>
            <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Channel</th>
                            <th>Message Preview</th>
                            <th>Agent</th>
                            <th>Delivery Status</th>
                            <th>Sent Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($smsLogs as $sms)
                            <tr>
                                <td>
                                    @if($sms->channel === 'whatsapp')
                                        <span class="badge bg-success text-white"><i class="bi bi-whatsapp me-1"></i>WhatsApp</span>
                                    @else
                                        <span class="badge bg-primary text-white"><i class="bi bi-chat-dots me-1"></i>SMS</span>
                                    @endif
                                </td>
                                <td style="max-width: 200px;">
                                    <div class="text-truncate small text-dark" title="{{ $sms->message_body }}">{{ $sms->message_body }}</div>
                                    @if($sms->template_name)
                                        <small class="text-muted d-block" style="font-size: .65rem;"><i class="bi bi-file-text me-1"></i>Template: {{ $sms->template_name }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="small fw-semibold text-secondary">{{ $sms->user->name ?? 'System' }}</span>
                                </td>
                                <td>
                                    @if($sms->status === 'delivered')
                                        <span class="badge bg-success-subtle text-success"><i class="bi bi-check2-all me-1"></i>Delivered</span>
                                    @elseif($sms->status === 'sent')
                                        <span class="badge bg-primary-subtle text-primary"><i class="bi bi-check2 me-1"></i>Sent</span>
                                    @elseif($sms->status === 'failed')
                                        <span class="badge bg-danger-subtle text-danger"><i class="bi bi-x-circle me-1"></i>Failed</span>
                                    @else
                                        <span class="badge bg-light text-secondary">{{ $sms->status ?: 'Pending' }}</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="small text-secondary">{{ $sms->sent_at ? $sms->sent_at->format('M d, g:i A') : $sms->created_at->format('M d, g:i A') }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted small py-4">No messaging activity found for this number.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function toggleDetailsFollowUpFields(statusKey) {
        const fields = document.getElementById('detailFollowUpFields');
        const input = document.getElementById('detailFollowUpAt');
        
        if (statusKey === 'callback' || statusKey === 'follow_up') {
            fields.style.display = 'block';
            input.required = true;
        } else {
            fields.style.display = 'none';
            input.required = false;
        }
    }
</script>
@endsection