@extends('layouts.app')

@section('title', 'Lead Details')

@section('page-specific-style')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/leads.css') }}">
    <style>
        :root {
            --lead-bg: #ffffff;
            --lead-ink: #1f1b16;
            --lead-muted: #6c5f54;
            --lead-accent: #a35a00;
            --lead-card: #ffffff;
            --lead-border: #e5e5e5;
            --lead-input: #ffffff;
        }

        .lead-show {
            background: var(--lead-bg);
            border-radius: 18px;
            padding: 24px;
            border: 1px solid var(--lead-border);
        }

        .lead-hero {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            background: #ffffff;
            border-radius: 14px;
            border: 1px solid var(--lead-border);
            box-shadow: 0 10px 25px rgba(25, 18, 10, 0.08);
        }

        .lead-title {
            font-family: "Fraunces", serif;
            font-weight: 700;
            color: var(--lead-ink);
            margin: 0;
        }

        .lead-subtitle {
            font-family: "Space Grotesk", sans-serif;
            color: var(--lead-muted);
            margin: 4px 0 0;
            font-size: 0.95rem;
        }

        .lead-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid var(--lead-border);
            font-family: "Space Grotesk", sans-serif;
            font-size: 0.8rem;
            color: var(--lead-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .lead-meta {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin-top: 18px;
        }

        .lead-meta-card {
            background: var(--lead-card);
            border: 1px solid var(--lead-border);
            border-radius: 12px;
            padding: 12px 14px;
            font-family: "Space Grotesk", sans-serif;
        }

        .lead-meta-card span {
            display: block;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--lead-muted);
            margin-bottom: 6px;
        }

        .lead-meta-card strong {
            font-size: 1rem;
            color: var(--lead-ink);
            word-break: break-word;
        }

        .lead-form {
            margin-top: 22px;
            background: #fff;
            border-radius: 16px;
            border: 1px solid var(--lead-border);
            padding: 18px;
            box-shadow: 0 12px 30px rgba(31, 27, 22, 0.08);
        }

        .lead-form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 14px;
        }

        .lead-form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .lead-form-group label {
            font-family: "Space Grotesk", sans-serif;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--lead-muted);
        }

        .lead-form-group input,
        .lead-form-group textarea {
            font-family: "Space Grotesk", sans-serif;
            border-radius: 10px;
            border: 1px solid var(--lead-border);
            background: var(--lead-input);
            padding: 10px 12px;
            color: var(--lead-ink);
            font-size: 0.92rem;
            box-shadow: inset 0 1px 2px rgba(31, 27, 22, 0.06);
        }

        .lead-form-group input[readonly],
        .lead-form-group textarea[readonly] {
            background: var(--lead-input);
            cursor: default;
        }

        .lead-form-group textarea {
            min-height: 90px;
            resize: vertical;
        }

        .lead-back {
            border-radius: 999px;
            font-family: "Space Grotesk", sans-serif;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .lead-show .lead-form,
        .lead-show .lead-meta,
        .lead-show .lead-hero {
            animation: fadeUp 0.5s ease forwards;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        @php
            $fullName = trim(
                ($lead->first_name ?? '') . ' ' . ($lead->middle_name ?? '') . ' ' . ($lead->last_name ?? ''),
            );
        @endphp

        <div class="lead-show">
            <div class="lead-hero">
                <div>
                    <h3 class="lead-title">{{ $fullName ?: 'Lead Details' }}</h3>
                    <div class="lead-subtitle">Lead ID: {{ $lead->lead_id ?? ($lead->lead_code ?? $lead->id) }}</div>
                </div>
                <div class="d-flex flex-wrap gap-2 align-items-center">
                    <span class="lead-pill">Status: {{ $lead->post_response ?? ($lead->status ?? 'N/A') }}</span>
                    {{-- <span class="lead-pill">Source {{ $lead->source ?? 'N/A' }}</span> --}}
                    <a href="{{ route('leads.index') }}" class="btn btn-outline-secondary btn-sm lead-back">Back to
                        Leads</a>
                </div>
            </div>

            @php
                $attributes = $lead->getAttributes();
                $priorityOrder = [
                    'lead_id',
                    'lead_code',
                    'first_name',
                    'middle_name',
                    'last_name',
                    'primary_phone_number',
                    'primary_email',
                    'phone_home',
                    'phone_work',
                    'phone_ext',
                    'address',
                    'address2',
                    'city',
                    'state',
                    'zip_code',
                    'county',
                    'country',
                    'country_code',
                    'email_address',
                    'dob',
                    'ip_address',
                    'type_of_coverage',
                    'household_size',
                    'household_income',
                    'gender',
                    'under_65',
                    'preexisting',
                    'status',
                    'advertiser_name',
                    'affiliate_name',
                    'campaign_name',
                    'offer_name',
                    'vertical_name',
                    'contract_name',
                    'source',
                    'assigned_to_user',
                    'company_id',
                    'company_name',
                    'vertical',
                    'dist_name',
                    'dist_id',
                    'payout',
                    'cost',
                    'click_id',
                    'lp_s1',
                    'lp_s2',
                    'lp_s3',
                    'lp_s4',
                    'lp_s5',
                    'lp_campaign_id',
                    'lp_campaign_key',
                    'lp_test',
                    'lp_response',
                    'trusted_form_cert_id',
                    'jornaya_lead_id',
                    'campaign_id',
                    'vertical_id',
                    'offer_id',
                    'affiliate_id',
                    'sellable',
                    'sold',
                    'paid',
                    'trash',
                    'post_response',
                    'contract_id',
                    'date_sold',
                    'tags',
                    'reason',
                    'timeline',
                    'tld_lead_created_at',
                    'tld_lead_modified_at',
                    'created_at',
                    'updated_at',
                ];

                $excludedFields = [
                    'id',
                    'lead_id',
                    'lead_code',
                    'middle_name',
                    'fbclid',
                    'gclid',
                    'phone_home',
                    'phone_work',
                    'phone_ext',
                    'address2',
                    'county',
                    'preexisting',
                    'tags',
                    'trash',
                    'tld_lead_created_at',
                    'tld_lead_modified_at',
                    'source',
                    'assigned_to_user',
                    'impersonated_by',
                    'is_customer',
                    'company_name',
                    'vertical',
                    'lp_response',
                    'post_response',
                    'lp_test',
                    'lp_s1',
                    'lp_s2',
                    'lp_s3',
                    'lp_s4',
                    'lp_s5',
                    'lp_campaign_key',
                    'email_address',
                    'type',
                    'created_at',
                    'updated_at',
                ];

                $excludeSuffixes = ['_id'];

                $orderedAttributes = [];
                foreach ($priorityOrder as $field) {
                    $hasExcludedSuffix = false;
                    foreach ($excludeSuffixes as $suffix) {
                        if (str_ends_with($field, $suffix)) {
                            $hasExcludedSuffix = true;
                            break;
                        }
                    }

                    if (
                        array_key_exists($field, $attributes) &&
                        !in_array($field, $excludedFields, true) &&
                        !$hasExcludedSuffix
                    ) {
                        $orderedAttributes[$field] = $attributes[$field];
                    }
                }

                foreach ($attributes as $field => $value) {
                    $hasExcludedSuffix = false;
                    foreach ($excludeSuffixes as $suffix) {
                        if (str_ends_with($field, $suffix)) {
                            $hasExcludedSuffix = true;
                            break;
                        }
                    }

                    if (
                        !array_key_exists($field, $orderedAttributes) &&
                        !in_array($field, $excludedFields, true) &&
                        !$hasExcludedSuffix
                    ) {
                        $orderedAttributes[$field] = $value;
                    }
                }
            @endphp

            <div class="lead-form">
                <div class="lead-form-grid">
                    @foreach ($orderedAttributes as $key => $value)
                        @php
                            $labelMap = [
                                'primary_phone_number' => 'Phone Number',
                                'primary_email' => 'Email',
                                'status' => 'Status',
                                'vertical_name' => 'Vertical',
                            ];

                            $displayKey = $labelMap[$key] ?? \Illuminate\Support\Str::title(str_replace('_', ' ', $key));

                            if ($key === 'primary_phone_number') {
                                $value = $lead->phone_home ?? $lead->primary_phone_number;
                            }

                            if ($key === 'primary_email') {
                                $value = $lead->primary_email ?? $lead->email_address;
                            }

                            if ($key === 'status') {
                                $value = $lead->post_response ?? $lead->status;
                            }
                        @endphp
                        <div class="lead-form-group">
                            <label for="lead-field-{{ $key }}">{{ $displayKey }}</label>
                            @php
                                $displayValue = $value;
                                if ($displayValue instanceof \Carbon\Carbon) {
                                    $displayValue = $displayValue->format('Y-m-d H:i:s');
                                } elseif (is_bool($displayValue)) {
                                    $displayValue = $displayValue ? 'Yes' : 'No';
                                } elseif (is_array($displayValue)) {
                                    $displayValue = json_encode($displayValue);
                                }
                                if (is_null($displayValue)) {
                                    $displayValue = '';
                                }
                            @endphp
                            @if (is_string($displayValue) && strlen($displayValue) > 120)
                                <textarea id="lead-field-{{ $key }}" readonly>{{ $displayValue }}</textarea>
                            @else
                                <input id="lead-field-{{ $key }}" type="text" readonly
                                    value="{{ $displayValue }}" />
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection