@extends('site.layouts.master')

@section('seoTags')
    @seoTags()
@endsection

@php
    $seo = SEO\Models\Page::where('path', URL::full())->first();

    $developerName = $developer->name ?? '';

    $developerLogo = $developer->logo?->full_url
        ?? asset('assets/site/image_notfound.jpg');

    $developerLogoAlt = $developer->logo?->meta
        ?? $developerName
        ?? 'developer logo';

    $developerCover = $developer->coverImages()
        ->firstOrNew([])
        ->full_url;

    $compounds = $developer->compounds ?? collect();

    $projectsCount = $compounds->count();

    $properties = $compounds
        ->flatMap(function ($compound) {
            return $compound->properties ?? collect();
        });

    $propertiesCount = $properties->count();

    $pricedProperties = $properties
        ->filter(function ($property) {
            return isset($property->price)
                && is_numeric($property->price)
                && $property->price >= 1000;
        });

    $minProperty = $pricedProperties
        ->sortBy('price')
        ->first();

    $lowestPrice = $minProperty?->price;

    if (LaravelLocalization::getCurrentLocale() == 'ar') {
        $seoContent = optional($seo)->content_ar;
    } else {
        $seoContent = optional($seo)->content;
    }
@endphp

@if (empty($seo))
    @section('title')
        <title>{{ $developerName }}</title>
    @endsection
@endif

@section('metatags')
    @if (!empty($seo))
        <meta
            name="title"
            content="{{ $seo->meta_title ?? $seo->title }}"
        >

        <meta
            name="keywords"
            content="{{ $seo->meta_keywords }}"
        >

        <meta
            name="description"
            content="{{ $seo->description ?? '' }}"
        >
    @endif

    <link
        rel="canonical"
        href="{{ str_replace('public/', '', url()->current()) }}"
    >

    <link
        rel="alternate"
        hreflang="{{ app()->getLocale() == 'ar' ? 'en' : 'ar' }}"
        href="@if(app()->getLocale() == 'en' && str_contains(url()->current(), '/en/')){{ 'https://nileestate.com/ar/developers/' . $developer->slug_ar }}@else{{ 'https://nileestate.com/en/developers/' . $developer->slug_en }}@endif"
    >

    <link
        rel="alternate"
        hreflang="{{ app()->getLocale() }}"
        href="{{ str_replace('public/', '', url()->current()) }}"
    >
@endsection

@section('content')
    <div class="d-none">
        {{ Breadcrumbs::render('developer', $developer) }}
    </div>

    {!! $breadcrumbSchema !!}
    {!! $blogPostSchema !!}

    <link
        href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet"
    >

    <style>
        :root {
            --developer-bg: #f7f9fc;
            --developer-surface: #ffffff;
            --developer-navy: #102f4f;
            --developer-blue: #1f5fa8;
            --developer-sky: #eaf3ff;
            --developer-orange: #d9822b;
            --developer-text: #1f2937;
            --developer-muted: #667085;
            --developer-line: #e5eaf0;
            --developer-radius: 24px;
            --developer-shadow: 0 12px 40px rgba(16, 47, 79, .08);
            --developer-max-width: 1220px;
        }

        .developer-details-page,
        .developer-details-page *,
        .developer-details-page *::before,
        .developer-details-page *::after {
            box-sizing: border-box;
        }

        .developer-details-page,
        .developer-details-page button,
        .developer-details-page input,
        .developer-details-page select,
        .developer-details-page textarea {
            font-family: "Cairo", sans-serif !important;
        }

        .developer-details-page {
            background: var(--developer-bg);
            color: var(--developer-text);
            direction: {{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }};
            line-height: 1.8;
            padding-bottom: 70px;
        }

        .developer-container {
            width: min(
                var(--developer-max-width),
                calc(100% - 40px)
            );
            margin-inline: auto;
        }

        .developer-details-page a {
            color: inherit;
            text-decoration: none;
        }

        .developer-details-page img {
            display: block;
            max-width: 100%;
        }

        /* Breadcrumb */

        .developer-breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 20px 0;
            color: var(--developer-muted);
            font-size: 13px;
            font-weight: 700;
        }

        .developer-breadcrumb a {
            transition: .15s;
        }

        .developer-breadcrumb a:hover {
            color: var(--developer-blue);
        }

        .developer-breadcrumb-separator {
            color: #cbd5e1;
        }

        .developer-breadcrumb-current {
            color: var(--developer-navy);
        }

        /* Hero */

        .developer-hero {
            position: relative;
            overflow: hidden;
            background: var(--developer-surface);
            border: 1px solid var(--developer-line);
            border-radius: var(--developer-radius);
            box-shadow: var(--developer-shadow);
        }

        .developer-cover {
            position: relative;
            height: 260px;
            overflow: hidden;
            background:
                linear-gradient(
                    135deg,
                    var(--developer-sky),
                    #dce8f7
                );
        }

        .developer-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .developer-cover::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    to top,
                    rgba(16, 47, 79, .32),
                    transparent 65%
                );
            pointer-events: none;
        }

        .developer-main-info {
            position: relative;
            display: grid;
            grid-template-columns: 160px minmax(0, 1fr);
            gap: 24px;
            align-items: start;
            padding: 0 32px 32px;
        }

        .developer-logo-wrap {
            position: relative;
            z-index: 2;
            width: 160px;
            height: 160px;
            margin-top: -70px;
            padding: 12px;
            background: #fff;
            border: 1px solid var(--developer-line);
            border-radius: 24px;
            box-shadow: 0 12px 30px rgba(16, 47, 79, .15);
        }

        .developer-logo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 16px;
        }

        .developer-heading {
            padding-top: 24px;
            min-width: 0;
        }

        .developer-heading h1 {
            margin: 0 0 12px;
            color: var(--developer-navy);
            font-size: clamp(25px, 3vw, 36px);
            font-weight: 900;
            line-height: 1.35;
            letter-spacing: -.03em;
        }

        .developer-stats {
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        .developer-stat {
            min-width: 140px;
            padding: 11px 16px;
            background: var(--developer-bg);
            border: 1px solid var(--developer-line);
            border-radius: 14px;
        }

        .developer-stat-label {
            display: block;
            margin-bottom: 2px;
            color: var(--developer-muted);
            font-size: 11px;
            font-weight: 700;
        }

        .developer-stat-value {
            display: block;
            color: var(--developer-navy);
            font-size: 14px;
            font-weight: 900;
        }

        .developer-stat-value.price {
            color: var(--developer-orange);
        }

        .developer-about {
            color: #4b5563;
            font-size: 15px;
            line-height: 2;
        }

        .developer-about:empty {
            display: none;
        }

        .developer-about p:last-child {
            margin-bottom: 0;
        }

        .developer-about img {
            height: auto;
            margin-block: 15px;
        }

        /* Projects section */

        .developer-projects-section {
            margin-top: 36px;
        }

        .developer-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

        .developer-section-title {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .developer-section-title h2 {
            margin: 0;
            color: var(--developer-navy);
            font-size: clamp(22px, 2.5vw, 28px);
            font-weight: 900;
            letter-spacing: -.03em;
        }

        .developer-projects-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 12px;
            background: var(--developer-sky);
            border-radius: 999px;
            color: var(--developer-blue);
            font-size: 12px;
            font-weight: 900;
        }

        .developer-projects-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .developer-project-card {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--developer-surface);
            border: 1px solid var(--developer-line);
            border-radius: var(--developer-radius);
            transition: transform .2s, box-shadow .2s;
        }

        .developer-project-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--developer-shadow);
        }

        .developer-project-image {
            position: relative;
            height: 205px;
            overflow: hidden;
            background: var(--developer-sky);
        }

        .developer-project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s;
        }

        .developer-project-card:hover
        .developer-project-image img {
            transform: scale(1.04);
        }

        .developer-project-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 11px;
            padding: 18px;
        }

        .developer-project-body h3 {
            margin: 0;
            color: var(--developer-navy);
            font-size: 16px;
            font-weight: 900;
            line-height: 1.55;
        }

        .developer-property-types {
            min-height: 24px;
            color: var(--developer-muted);
            font-size: 12px;
            font-weight: 700;
        }

        .developer-units {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--developer-muted);
            font-size: 13px;
            font-weight: 700;
        }

        .developer-units img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        .developer-project-price {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
            color: var(--developer-muted);
            font-size: 12px;
            font-weight: 700;
        }

        .developer-project-price strong {
            color: var(--developer-orange);
            font-size: 14px;
            font-weight: 900;
        }

        .developer-project-action {
            margin-top: auto;
            padding-top: 5px;
        }

        .developer-units-link,
        .developer-no-units {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 18px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 900;
            transition: .18s;
        }

        .developer-units-link {
            background: var(--developer-navy);
            border: 1px solid var(--developer-navy);
            color: #fff !important;
        }

        .developer-units-link:hover {
            background: var(--developer-blue);
            border-color: var(--developer-blue);
            transform: translateY(-1px);
        }

        .developer-no-units {
            background: var(--developer-bg);
            border: 1px solid var(--developer-line);
            color: var(--developer-muted);
            cursor: default;
        }

        .developer-empty-projects {
            grid-column: 1 / -1;
            padding: 35px 20px;
            background: #fff;
            border: 1px solid var(--developer-line);
            border-radius: var(--developer-radius);
            color: var(--developer-muted);
            text-align: center;
            font-size: 14px;
            font-weight: 800;
        }

        /* SEO */

        .developer-seo-section {
            margin-top: 48px;
            padding: 32px 36px;
            background: #fff;
            border: 1px solid var(--developer-line);
            border-radius: var(--developer-radius);
        }

        .developer-seo-section h1,
        .developer-seo-section h2 {
            margin: 0 0 16px;
            padding-inline-start: 14px;
            border-inline-start: 4px solid var(--developer-blue);
            color: var(--developer-navy);
            font-size: 22px;
            font-weight: 900;
        }

        .developer-seo-section h3 {
            margin: 24px 0 10px;
            color: var(--developer-navy);
            font-size: 18px;
            font-weight: 900;
        }

        .developer-seo-section p,
        .developer-seo-section li {
            color: #4b5563;
            font-size: 15px;
            line-height: 2;
        }

        .developer-seo-section img {
            height: auto;
        }

        .developer-seo-section ul,
        .developer-seo-section ol {
            padding-inline-start: 24px;
        }

        @media (max-width: 1024px) {
            .developer-projects-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 720px) {
            .developer-container {
                width: calc(100% - 24px);
            }

            .developer-breadcrumb {
                padding: 14px 0;
            }

            .developer-cover {
                height: 180px;
            }

            .developer-main-info {
                grid-template-columns: 1fr;
                gap: 0;
                padding: 0 18px 24px;
                text-align: center;
            }

            .developer-logo-wrap {
                width: 125px;
                height: 125px;
                margin: -55px auto 0;
            }

            .developer-heading {
                padding-top: 16px;
            }

            .developer-heading h1 {
                font-size: 25px;
            }

            .developer-stats {
                justify-content: center;
            }

            .developer-stat {
                flex: 1 1 calc(50% - 10px);
                min-width: 125px;
            }

            .developer-about {
                text-align: start;
            }

            .developer-projects-grid {
                grid-template-columns: 1fr;
            }

            .developer-section-header {
                align-items: flex-start;
            }

            .developer-project-image {
                height: 190px;
            }

            .developer-seo-section {
                padding: 22px 18px;
            }

            .developer-seo-section h1,
            .developer-seo-section h2 {
                font-size: 20px;
            }
        }
    </style>

    <div class="developer-details-page">
        <div class="developer-container">

            {{-- Breadcrumb --}}
            <nav
                class="developer-breadcrumb"
                aria-label="{{ app()->getLocale() == 'ar' ? 'مسار التنقل' : 'Breadcrumb' }}"
            >
                <a href="{{ route('site.main') }}">
                    {{ app()->getLocale() == 'ar' ? 'الرئيسية' : 'Home' }}
                </a>

                <span class="developer-breadcrumb-separator">
                    {{ app()->getLocale() == 'ar' ? '‹' : '›' }}
                </span>

                <a href="{{ route('developers.index') }}">
                    @lang('site.All Developers')
                </a>

                <span class="developer-breadcrumb-separator">
                    {{ app()->getLocale() == 'ar' ? '‹' : '›' }}
                </span>

                <span class="developer-breadcrumb-current">
                    {{ $developerName }}
                </span>
            </nav>

            {{-- Developer hero --}}
            <section class="developer-hero">
                <div class="developer-cover">
                    @if (!empty($developerCover))
                        <img
                            src="{{ $developerCover }}"
                            alt="{{ $developerName }}"
                            width="1220"
                            height="260"
                        >
                    @endif
                </div>

                <div class="developer-main-info">
                    <div class="developer-logo-wrap">
                        <img
                            src="{{ $developerLogo }}"
                            alt="{{ $developerLogoAlt }}"
                            title="{{ $developerLogoAlt }}"
                            width="160"
                            height="160"
                        >
                    </div>

                    <div class="developer-heading">
                        <h1>{{ $developerName }}</h1>

                        <div class="developer-stats">
                            <div class="developer-stat">
                                <span class="developer-stat-label">
                                    @lang('site.projects')
                                </span>

                                <span class="developer-stat-value">
                                    {{ $projectsCount }}
                                </span>
                            </div>

                            <div class="developer-stat">
                                <span class="developer-stat-label">
                                    @lang('site.Property')
                                </span>

                                <span class="developer-stat-value">
                                    {{ $propertiesCount }}
                                </span>
                            </div>

                            @if (!empty($lowestPrice))
                                <div class="developer-stat">
                                    <span class="developer-stat-label">
                                        @lang('site.Prices Start From')
                                    </span>

                                    <span class="developer-stat-value price">
                                        {{ number_format((int) $lowestPrice) }}
                                        @lang('site.EGP')
                                    </span>
                                </div>
                            @endif
                        </div>

                        @if (!empty($developer->about))
                            <div class="developer-about changeLink">
                                {!! $developer->about !!}
                            </div>
                        @endif
                    </div>
                </div>
            </section>

            {{-- Projects --}}
            <section class="developer-projects-section">
                <div class="developer-section-header">
                    <div class="developer-section-title">
                        <h2>
                            {{ $developerName }}
                            @lang('site.projects')
                        </h2>

                        <span class="developer-projects-count">
                            {{ $projectsCount }}
                            @lang('site.projects')
                        </span>
                    </div>
                </div>

                <div class="developer-projects-grid">
                    @forelse ($compounds as $compound)
                        @php
                            $compoundProperties = $compound->properties
                                ?? collect();

                            $filteredProperties = $compoundProperties
                                ->filter(function ($property) {
                                    return isset($property->price)
                                        && is_numeric($property->price)
                                        && $property->price >= 1000;
                                });

                            $compoundMinProperty = $filteredProperties
                                ->sortBy('price')
                                ->first();

                            $compoundImage = $compound->project?->image?->full_url
                                ?? asset('assets/site/image_notfound.jpg');

                            $compoundName = trim(
                                ($compound->name ?? '')
                                . ' '
                                . ($compound->city?->name ?? '')
                            );

                            $propertyTypes = $compoundProperties
                                ->pluck('property_type.label')
                                ->filter()
                                ->unique()
                                ->values()
                                ->implode(' | ');

                            $compoundRouteName = 'site.'
                                . str_replace(' ', '-', $compound->name);

                            $compoundHasRoute = Route::has(
                                $compoundRouteName
                            );
                        @endphp

                        <article class="developer-project-card">
                            <div class="developer-project-image">
                                <img
                                    @if (!$loop->first)
                                        loading="lazy"
                                    @endif
                                    src="{{ $compoundImage }}"
                                    alt="{{ $compoundName ?: $developerLogoAlt }}"
                                    width="390"
                                    height="205"
                                >
                            </div>

                            <div class="developer-project-body">
                                <h3>{{ $compoundName }}</h3>

                                @if (!empty($propertyTypes))
                                    <div class="developer-property-types">
                                        {{ $propertyTypes }}
                                    </div>
                                @endif

                                <div class="developer-units">
                                    <img
                                        loading="lazy"
                                        src="{{ asset('new_theme/icons8-home.svg') }}"
                                        alt=""
                                        aria-hidden="true"
                                    >

                                    <span>
                                        {{ $compoundProperties->count() }}
                                        @lang('site.units')
                                    </span>
                                </div>

                                @if (!empty($compoundMinProperty))
                                    <div class="developer-project-price">
                                        <span>
                                            @lang('site.Prices Start From')
                                        </span>

                                        <strong>
                                            {{ number_format((int) $compoundMinProperty->price) }}

                                            {{ $compoundMinProperty->currency
                                                ?? __('site.EGP') }}
                                        </strong>
                                    </div>
                                @endif

                                <div class="developer-project-action">
                                    @if (
                                        $compoundProperties->count() > 0
                                        && $compoundHasRoute
                                    )
                                        <a
                                            href="{{ route($compoundRouteName) }}"
                                            class="developer-units-link"
                                        >
                                            @lang('site.Units')

                                            <span aria-hidden="true">
                                                {{ app()->getLocale() == 'ar'
                                                    ? '↖'
                                                    : '↗' }}
                                            </span>
                                        </a>
                                    @else
                                        <span class="developer-no-units">
                                            @lang('site.No Properties Found')
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </article>
                    @empty
                        <div class="developer-empty-projects">
                            @lang('site.No Properties Found')
                        </div>
                    @endforelse
                </div>
            </section>

            {{-- SEO content --}}
            @if (!empty($seoContent))
                <section
                    class="developer-seo-section changeLink text-justify font_regular"
                >
                    {!! $seoContent !!}
                </section>
            @endif
        </div>
    </div>
@endsection

@section('script')
@endsection