@extends('layouts.app')
@section('title', 'Lead Details — ' . $lead->name)
@section('header', 'Lead Details')

@section('content')
<div class="row" style="margin-bottom: 20px;">
    <div>
        <div style="font-size: 13px; color: #8e9ab4; margin-bottom: 4px;">
            <a href="{{ route('leads.index') }}" style="color: #6d59ff; text-decoration: none;">← Back to Leads List</a>
        </div>
        <h1 style="margin: 0; display: flex; align-items: center; gap: 12px;">
            {{ $lead->name }}
            @php
                $statusClass = match(strtolower($lead->status)) {
                    'new' => 'badge-active',
                    'contacted' => 'badge-manager',
                    'qualified' => 'badge-admin',
                    'won' => 'badge-sales',
                    'lost' => 'badge-inactive',
                    default => 'badge-secondary'
                };
            @endphp
            <span class="badge {{ $statusClass }}" style="font-size: 13px;">{{ ucfirst($lead->status) }}</span>
        </h1>
    </div>

    <div style="display: flex; gap: 8px;">
        @if(auth()->user()?->hasPermission('leads.edit'))
            <a href="{{ route('leads.edit', $lead) }}" class="btn btn-secondary">Edit Lead</a>
            
            <form method="POST" action="/leads/{{ $lead->id }}/convert" style="display: inline;">
                @csrf
                <button type="submit" class="btn">Convert to Customer & Quote</button>
            </form>
        @endif

        @if(auth()->user()?->hasPermission('leads.delete'))
            <form method="POST" action="{{ route('leads.destroy', $lead) }}" onsubmit="return confirm('Delete lead {{ $lead->name }}?');" style="display: inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Delete Lead</button>
            </form>
        @endif
    </div>
</div>

<div class="grid2">
    <!-- LEFT COLUMN: LEAD OVERVIEW DETAILS -->
    <div>
        <div class="panel" style="margin-top: 0;">
            <h2 style="margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid #202b47; color: #fff;">
                Lead Information
            </h2>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Lead Code</label>
                    <div style="color: #fff; font-weight: 600; margin-top: 2px;">{{ $lead->lead_code ?? 'LD-#'.$lead->id }}</div>
                </div>

                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Assigned Executive</label>
                    <div style="color: #fff; font-weight: 600; margin-top: 2px;">{{ $lead->assignee->name ?? 'Unassigned' }}</div>
                </div>

                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Phone Number</label>
                    <div style="color: #fff; font-weight: 600; margin-top: 2px;">
                        @if($lead->phone)
                            <a href="tel:{{ $lead->phone }}" style="color: #aeb7ff;">{{ $lead->phone }}</a>
                        @else
                            <span style="color: #64748b;">Not provided</span>
                        @endif
                    </div>
                </div>

                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Email Address</label>
                    <div style="color: #fff; font-weight: 600; margin-top: 2px;">
                        @if($lead->email)
                            <a href="mailto:{{ $lead->email }}" style="color: #aeb7ff;">{{ $lead->email }}</a>
                        @else
                            <span style="color: #64748b;">Not provided</span>
                        @endif
                    </div>
                </div>

                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Source</label>
                    <div style="color: #fff; font-weight: 600; margin-top: 2px; text-transform: capitalize;">{{ $lead->source }}</div>
                </div>

                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Expected Value</label>
                    <div style="color: #6ee7b7; font-weight: 700; margin-top: 2px;">
                        {{ $lead->expected_value ? format_inr($lead->expected_value) : '—' }}
                    </div>
                </div>

                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Campaign</label>
                    <div style="color: #fff; font-weight: 600; margin-top: 2px;">{{ $lead->campaign ?: '—' }}</div>
                </div>

                <div>
                    <label style="margin: 0; font-size: 12px; text-transform: uppercase;">Meta Lead ID</label>
                    <div style="color: #fff; font-weight: 600; margin-top: 2px;">{{ $lead->meta_lead_id ?: '—' }}</div>
                </div>
            </div>

            @if($lead->notes)
            <div style="margin-top: 16px; padding-top: 14px; border-top: 1px solid #1e2a47;">
                <label style="margin: 0 0 4px; font-size: 12px; text-transform: uppercase;">Notes</label>
                <div style="color: #cbd5e1; background: #080f20; padding: 12px; border-radius: 8px; font-size: 14px; white-space: pre-wrap;">{{ $lead->notes }}</div>
            </div>
            @endif

            <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #202b47; display: flex; gap: 10px; flex-wrap: wrap;">
                @if($lead->phone)
                    <a href="/whatsapp" class="btn btn-secondary btn-sm" style="display: inline-flex; align-items: center; gap: 6px;">
                        💬 Open WhatsApp Chat
                    </a>
                @endif
                @if(Route::has('leads.activity'))
                    <a href="{{ route('leads.activity', $lead) }}" class="btn btn-secondary btn-sm">
                        📜 View Activity Timeline
                    </a>
                @endif
                @if(Route::has('exports.leads'))
                    <a href="{{ route('exports.leads') }}" class="btn btn-secondary btn-sm">
                        📥 Export Leads CSV
                    </a>
                @endif
            </div>
        </div>
    </div>

    <!-- RIGHT COLUMN: FOLLOW-UPS & ACTIONS -->
    <div>
        <!-- SCHEDULE FOLLOW-UP FORM -->
        @include('followups._form', ['lead' => $lead])

        <!-- EXISTING FOLLOW-UPS LIST -->
        @if(isset($lead->followUps) && count($lead->followUps) > 0)
        <div class="panel">
            <h3 style="margin-top: 0; color: #fff;">Follow-up History</h3>
            <div style="display: flex; flex-direction: column; gap: 12px;">
                @foreach($lead->followUps as $followup)
                <div style="background: #080f20; border: 1px solid #1e2c4d; border-radius: 8px; padding: 12px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <strong style="color: #6d59ff; text-transform: capitalize;">{{ $followup->type }} — {{ $followup->subject }}</strong>
                        <span style="font-size: 12px; color: #8e9ab4;">{{ $followup->due_at ? \Carbon\Carbon::parse($followup->due_at)->format('M d, Y h:i A') : '' }}</span>
                    </div>
                    @if($followup->notes)
                        <p style="margin: 6px 0 0; color: #cbd5e1; font-size: 13px;">{{ $followup->notes }}</p>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection