@extends('layouts.app')

@section('title', 'Call 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">
<style>
    :root {
        --call-bg: #ffffff;
        --call-ink: #1f1b16;
        --call-muted: #6c5f54;
        --call-accent: #a35a00;
        --call-card: #ffffff;
        --call-border: #e5e5e5;
        --call-input: #ffffff;
    }

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

    .call-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(--call-border);
        box-shadow: 0 10px 25px rgba(25, 18, 10, 0.08);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

@section('content')
<div class="container-fluid">
    <div class="call-show">
        @php
            $fullName = trim(($call->first_name ?? '') . ' ' . ($call->last_name ?? ''));
        @endphp
        <div class="call-hero">
            <div>
                <h3 class="call-title">{{ $fullName ?: 'Call Details' }}</h3>
            </div>
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <span class="call-pill">Source {{ $call->source_type ?? 'N/A' }}</span>
                <a href="{{ route('calls.index') }}" class="btn btn-outline-secondary btn-sm call-back">Back to Calls</a>
            </div>
        </div>

        @php
            $address = trim(($call->address1 ?? '') . ' ' . ($call->address2 ?? ''));
            $address = preg_replace('/\s+/', ' ', $address);
            $displayFields = [
                'First Name' => $call->first_name,
                'Last Name' => $call->last_name,
                'Phone Number' => $call->primary_phone,
                'Email' => $call->email,
                'Address' => $address,
                'City' => $call->city,
                'State' => $call->state,
                'Zip Code' => $call->postal_code,
                'Country' => $call->country,
                'Country Code' => $call->country_code,
                'Dob' => $call->date_of_birth,
                'Type Of Coverage' => $call->coverage_type,
                'Household Size' => $call->household_size,
                'Household Income' => $call->household_income,
                'Gender' => $call->gender,
                'Under 65' => $call->under_65,
                'Status' => $statusDisplay ?? $call->status_name,
                'Campaign Name' => $call->campaign_name,
                'Payout' => $call->payout,
                'Cost' => $call->cost,
                'Revenue' => $call->revenue,
            ];
        @endphp

        <div class="call-form">
            <div class="call-form-grid">
                @foreach ($displayFields as $label => $value)
                    @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
                    <div class="call-form-group">
                        <label for="call-field-{{ \Illuminate\Support\Str::slug($label, '-') }}">{{ $label }}</label>
                        @if (is_string($displayValue) && strlen($displayValue) > 120)
                            <textarea id="call-field-{{ \Illuminate\Support\Str::slug($label, '-') }}" readonly>{{ $displayValue }}</textarea>
                        @else
                            <input id="call-field-{{ \Illuminate\Support\Str::slug($label, '-') }}" type="text" readonly value="{{ $displayValue }}" />
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection