@php
    $listingCollection = collect($listings ?? []);
    $providerName = $provider->business_name ?: ($provider->name ?: 'Provider');
    $providerPhoto = $provider->profile_photo ? asset('storage/'.$provider->profile_photo) : null;
    $location = collect([$provider->city, $provider->state])->filter()->implode(', ');
    $ratingCount = $provider->reviews->count();
    $ratingAverage = $ratingCount > 0 ? round((float) $provider->reviews->avg('rating'), 1) : null;
    $typeLabels = ['job' => 'Job', 'rent' => 'Rental', 'hostel' => 'Hostel', 'service' => 'Service'];
    $fallbackImages = [
        'job' => 'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=80',
        'rent' => 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=80',
        'hostel' => 'https://images.unsplash.com/photo-1555854877-bab0e564b8d5?auto=format&fit=crop&w=800&q=80',
        'service' => 'https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=800&q=80',
    ];
    $listingPrice = function ($listing): string {
        if ($listing->listing_type === 'job') {
            return $listing->price ? 'Rs. '.number_format((float) $listing->price).'/mo' : 'Hiring';
        }

        if ($listing->listing_type === 'service') {
            return $listing->price ? 'Starts Rs. '.number_format((float) $listing->price) : 'On request';
        }

        return $listing->price ? 'Rs. '.number_format((float) $listing->price).'/mo' : 'On request';
    };
    $listingImage = fn ($listing): string => $listing->media_path ? asset('storage/'.$listing->media_path) : ($fallbackImages[$listing->listing_type] ?? $fallbackImages['rent']);
    $listingMeta = fn ($listing): string => collect([$listing->location, $listing->city, $listing->meta_one])->filter()->take(3)->implode(' · ') ?: 'Details available on request';
@endphp

@include('frontend.partials.head', ['title' => 'Fily | '.$providerName])

<style>
    :root {
        --color-primary: #004b89;
        --color-primary-deep: #00345f;
        --color-secondary: #006c50;
        --color-accent: #f5a623;
        --color-mint: #39b88f;
        --color-surface: #f8f9ff;
        --color-surface-container-low: #eef4ff;
        --color-on-surface: #021d33;
        --color-on-surface-variant: #424750;
        --color-outline-variant: #c2c6d2;
    }

    body { background: var(--color-surface); color: var(--color-on-surface); font-family: Inter, sans-serif; }
    .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
    .page-shell { padding: 38px 0 68px; }
    .provider-card { background: #fff; border: 1px solid rgba(194, 198, 210, .75); border-radius: 14px; box-shadow: 0 18px 48px rgba(36, 59, 83, .1); overflow: hidden; }
    .provider-hero-band { background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary) 58%, var(--color-secondary)); color: #fff; padding: clamp(24px, 4vw, 38px); }
    .provider-detail-band { padding: clamp(22px, 3vw, 30px); }
    .provider-avatar { align-items: center; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.48); border-radius: 20px; color: #fff; display: flex; flex-shrink: 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 38px; font-weight: 800; height: 104px; justify-content: center; overflow: hidden; width: 104px; }
    .provider-avatar img { height: 100%; object-fit: cover; width: 100%; }
    .provider-title { color: #fff; font-family: 'Hanken Grotesk', sans-serif; font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1; margin: 0; }
    .provider-meta { color: rgba(255,255,255,.86); display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
    .provider-meta span { align-items: center; display: inline-flex; gap: 6px; }
    .provider-bio { color: #dcecff; font-size: 15px; line-height: 1.75; margin: 18px 0 0; max-width: 860px; }
    .stat-strip { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
    .stat-tile { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 14px; }
    .stat-value { color: #fff; font-family: 'Hanken Grotesk', sans-serif; font-size: 28px; font-weight: 800; line-height: 1; }
    .stat-label { color: rgba(255,255,255,.72); font-family: 'JetBrains Mono', monospace; font-size: 11px; margin: 5px 0 0; text-transform: uppercase; }
    .info-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .info-item { background: linear-gradient(180deg, #f8fbff, #eef5ff); border: 1px solid rgba(194, 198, 210, .56); border-radius: 12px; padding: 16px; }
    .info-label { color: var(--color-on-surface-variant); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .info-value { font-weight: 800; margin: 4px 0 0; overflow-wrap: anywhere; }
    .section-kicker { color: var(--color-secondary); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .section-title { font-family: 'Hanken Grotesk', sans-serif; font-size: 34px; font-weight: 800; }
    .listing-card { background: #fff; border: 1px solid rgba(194, 198, 210, .82); border-radius: 10px; box-shadow: 0 10px 30px rgba(36, 59, 83, .07); height: 100%; overflow: hidden; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .listing-card:hover { border-color: rgba(0,75,137,.45); box-shadow: 0 18px 46px rgba(36, 59, 83, .14); transform: translateY(-3px); }
    .listing-image-wrap { overflow: hidden; }
    .listing-card img { aspect-ratio: 16 / 10; object-fit: cover; transition: transform .35s ease; width: 100%; }
    .listing-card:hover img { transform: scale(1.035); }
    .listing-body { padding: 18px; }
    .listing-title { color: var(--color-on-surface); font-family: 'Hanken Grotesk', sans-serif; font-size: 22px; font-weight: 800; margin: 0; }
    .listing-price { color: var(--color-primary); font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800; white-space: nowrap; }
    .listing-meta { color: var(--color-on-surface-variant); font-size: 14px; line-height: 1.6; }
    .type-chip { background: #e8f1ff; border-radius: 999px; color: var(--color-primary); display: inline-flex; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; padding: 6px 10px; }
    .type-chip.light { background: rgba(255,255,255,.16); color: #fff; }
    @media (max-width: 991.98px) { .info-grid, .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 575.98px) { .info-grid, .stat-strip { grid-template-columns: 1fr; } }
</style>
</head>

<body>
    @include('frontend.partials.header')

    <main class="page-shell">
        <div class="container-xl">
            {{-- <a class="btn-outline-action mb-3" href="javascript:history.back()"><span class="material-symbols-outlined">arrow_back</span>Back</a> --}}

            <section class="provider-card mb-5">
                <div class="provider-hero-band">
                    <div class="d-flex flex-column flex-lg-row justify-content-between gap-4">
                        <div class="d-flex flex-column flex-sm-row gap-3">
                            <div class="provider-avatar">
                                @if ($providerPhoto)
                                    <img src="{{ $providerPhoto }}" alt="{{ $providerName }}">
                                @else
                                    {{ strtoupper(substr($providerName, 0, 1)) }}
                                @endif
                            </div>
                            <div>
                                <p class="type-chip light mb-3">{{ $provider->category?->name ?: 'Verified provider' }}</p>
                                <h1 class="provider-title">{{ $providerName }}</h1>
                                <div class="provider-meta">
                                    @if ($location)<span><span class="material-symbols-outlined">location_on</span>{{ $location }}</span>@endif
                                    <span><span class="material-symbols-outlined">verified</span>{{ ucfirst($provider->status) }}</span>
                                    <span><span class="material-symbols-outlined">star</span>{{ $ratingAverage ? $ratingAverage.' rating' : 'No reviews yet' }}</span>
                                </div>
                                @if ($provider->bio)
                                    <p class="provider-bio">{{ $provider->bio }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-sm-row align-items-start gap-2">
                            @if ($provider->whatsapp_number)
                                <a class="btn-primary-action" href="https://wa.me/{{ preg_replace('/\D+/', '', $provider->whatsapp_number) }}" target="_blank" rel="noopener"><span class="material-symbols-outlined">forum</span>WhatsApp</a>
                            @endif
                            @if ($provider->contact_number)
                                <a class="btn-outline-action" href="tel:{{ preg_replace('/\D+/', '', $provider->contact_number) }}"><span class="material-symbols-outlined">call</span>Call</a>
                            @endif
                        </div>
                    </div>

                    <div class="stat-strip">
                        <div class="stat-tile"><div class="stat-value">{{ $listingCollection->count() }}</div><p class="stat-label">Approved ads</p></div>
                        <div class="stat-tile"><div class="stat-value">{{ $ratingAverage ?: '0' }}</div><p class="stat-label">Average rating</p></div>
                        <div class="stat-tile"><div class="stat-value">{{ $ratingCount }}</div><p class="stat-label">Reviews</p></div>
                    </div>
                </div>

                <div class="provider-detail-band">
                    <div class="info-grid">
                        <div class="info-item"><div class="info-label">Contact</div><p class="info-value">{{ $provider->contact_number ?: $provider->mobile ?: 'On request' }}</p></div>
                        <div class="info-item"><div class="info-label">WhatsApp</div><p class="info-value">{{ $provider->whatsapp_number ?: 'On request' }}</p></div>
                        <div class="info-item"><div class="info-label">Email</div><p class="info-value">{{ $provider->email ?: 'On request' }}</p></div>
                        <div class="info-item"><div class="info-label">GST</div><p class="info-value">{{ $provider->gst_number ?: 'Not provided' }}</p></div>
                        <div class="info-item"><div class="info-label">Website</div><p class="info-value">{{ $provider->website ?: 'Not provided' }}</p></div>
                        <div class="info-item"><div class="info-label">Address</div><p class="info-value">{{ $provider->address ?: 'Not provided' }}</p></div>
                    </div>
                </div>
            </section>

            <section>
                <div class="d-flex flex-column flex-md-row justify-content-between gap-3 mb-4">
                    <div>
                        <p class="section-kicker mb-2">Provider listings</p>
                        <h2 class="section-title mb-0">All approved ads by {{ $providerName }}</h2>
                    </div>
                </div>

                <div class="row g-4">
                    @forelse ($listingCollection as $listing)
                        <div class="col-12 col-md-6 col-xl-3">
                            <a class="listing-card d-block" href="{{ route('frontend.details', ['type' => $listing->listing_type, 'id' => $listing->id]) }}">
                                <div class="listing-image-wrap"><img src="{{ $listingImage($listing) }}" alt="{{ $listing->title }}"></div>
                                <div class="listing-body">
                                    <div class="d-flex justify-content-between gap-3 mb-2">
                                        <h3 class="listing-title">{{ $listing->title }}</h3>
                                        <span class="listing-price">{{ $listingPrice($listing) }}</span>
                                    </div>
                                    <p class="listing-meta mb-3">{{ $listingMeta($listing) }}</p>
                                    <span class="type-chip">{{ $typeLabels[$listing->listing_type] ?? ucfirst((string) $listing->listing_type) }}</span>
                                </div>
                            </a>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="provider-card text-center p-5">
                                <span class="material-symbols-outlined text-primary mb-3" style="font-size:42px;">inventory_2</span>
                                <h3 class="section-title mb-2" style="font-size:28px;">No approved listings</h3>
                                <p class="mb-0" style="color:var(--color-on-surface-variant);">This provider does not have public approved ads right now.</p>
                            </div>
                        </div>
                    @endforelse
                </div>
            </section>
        </div>
    </main>

    @include('frontend.partials.footer')
</body>

</html>