@extends('layouts.site')

@section('title', $partner->organization_name . ' - Partner Profile')
@section('meta-description', Str::limit($partner->description ?? 'Learn about our partner organization.', 160))

@section('content')
<!-- Hero Banner -->
@if($partner->banner_image)
    <div class="relative h-64 md:h-80 bg-gray-900">
        <img src="{{ asset('storage/' . $partner->banner_image) }}" 
             alt="{{ $partner->organization_name }}"
             class="w-full h-full object-cover opacity-70">
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-10">
            <div class="max-w-7xl mx-auto">
                <div class="flex items-center gap-4">
                    @if($partner->logo)
                        <img src="{{ asset('storage/' . $partner->logo) }}" 
                             alt="{{ $partner->organization_name }}"
                             class="w-20 h-20 md:w-24 md:h-24 rounded-lg shadow-lg object-contain bg-white p-2">
                    @endif
                    <div>
                        <h1 class="text-3xl md:text-4xl font-serif font-bold text-white">
                            {{ $partner->organization_name }}
                        </h1>
                        <p class="text-gray-200 mt-1">
                            <i class="fas fa-tag mr-2"></i>
                            {{ $partner->type_label }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@else
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="flex items-center gap-6">
                @if($partner->logo)
                    <img src="{{ asset('storage/' . $partner->logo) }}" 
                         alt="{{ $partner->organization_name }}"
                         class="w-24 h-24 md:w-32 md:h-32 rounded-lg shadow-lg object-contain bg-white p-2">
                @else
                    <div class="w-24 h-24 md:w-32 md:h-32 rounded-lg shadow-lg bg-white/20 flex items-center justify-center">
                        <i class="fas fa-building text-white text-4xl"></i>
                    </div>
                @endif
                <div>
                    <h1 class="text-3xl md:text-4xl font-serif font-bold text-white">
                        {{ $partner->organization_name }}
                    </h1>
                    <p class="text-blue-100 mt-2">
                        <i class="fas fa-tag mr-2"></i>
                        {{ $partner->type_label }}
                        @if($partner->is_verified)
                            <span class="ml-3 text-green-300">
                                <i class="fas fa-check-circle"></i> Verified
                            </span>
                        @endif
                        @if($partner->is_featured)
                            <span class="ml-3 text-yellow-300">
                                <i class="fas fa-star"></i> Featured
                            </span>
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- Breadcrumb -->
<div class="bg-gray-50 border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600">
            <a href="{{ route('partners.public.index') }}" class="hover:text-blue-600">
                <i class="fas fa-home mr-1"></i>
                Partners
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900">{{ $partner->organization_name }}</span>
        </nav>
    </div>
</div>

<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Column -->
        <div class="lg:col-span-2 space-y-8">
            <!-- About Section -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-serif font-bold text-gray-900 mb-4">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                    About
                </h2>
                @if($partner->description)
                    <div class="prose prose-gray max-w-none">
                        <p class="text-gray-700 leading-relaxed">
                            {{ $partner->description }}
                        </p>
                    </div>
                @else
                    <p class="text-gray-500 italic">No description available.</p>
                @endif

                @if($partner->mission_statement)
                    <div class="mt-6 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                        <h3 class="font-semibold text-blue-900 mb-2">Our Mission</h3>
                        <p class="text-blue-800 italic">{{ $partner->mission_statement }}</p>
                    </div>
                @endif
            </div>

            <!-- Services Offered -->
            @if($partner->services_offered && is_array($partner->services_offered) && count($partner->services_offered) > 0)
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-serif font-bold text-gray-900 mb-4">
                        <i class="fas fa-concierge-bell text-blue-600 mr-2"></i>
                        Services Offered
                    </h2>
                    <div class="flex flex-wrap gap-2">
                        @foreach($partner->services_offered as $service)
                            <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">
                                {{ $service }}
                            </span>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Active Partnerships -->
            @if($partner->partnerships->count() > 0)
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-serif font-bold text-gray-900 mb-4">
                        <i class="fas fa-file-contract text-blue-600 mr-2"></i>
                        Active Collaborations
                    </h2>
                    <div class="space-y-4">
                        @foreach($partner->partnerships as $partnership)
                            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                                <div>
                                    <h3 class="font-semibold text-gray-900">{{ $partnership->title }}</h3>
                                    <p class="text-sm text-gray-600">
                                        {{ $partnership->type_label }}
                                    </p>
                                </div>
                                <div class="text-right">
                                    @if($partnership->end_date)
                                        <p class="text-sm text-gray-500">
                                            Valid until {{ $partnership->end_date->format('M d, Y') }}
                                        </p>
                                    @endif
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        Active
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Contact Information -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-lg font-serif font-bold text-gray-900 mb-4">
                    <i class="fas fa-address-card text-blue-600 mr-2"></i>
                    Contact Information
                </h2>
                <ul class="space-y-3">
                    @if($partner->email)
                        <li class="flex items-center">
                            <i class="fas fa-envelope text-gray-400 w-5 mr-3"></i>
                            <a href="mailto:{{ $partner->email }}" class="text-blue-600 hover:underline">
                                {{ $partner->email }}
                            </a>
                        </li>
                    @endif
                    @if($partner->phone)
                        <li class="flex items-center">
                            <i class="fas fa-phone text-gray-400 w-5 mr-3"></i>
                            <a href="tel:{{ $partner->phone }}" class="text-gray-700 hover:text-blue-600">
                                {{ $partner->phone }}
                            </a>
                        </li>
                    @endif
                    @if($partner->website)
                        <li class="flex items-center">
                            <i class="fas fa-globe text-gray-400 w-5 mr-3"></i>
                            <a href="{{ $partner->website }}" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline">
                                Visit Website
                                <i class="fas fa-external-link-alt text-xs ml-1"></i>
                            </a>
                        </li>
                    @endif
                    @if($partner->full_address)
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt text-gray-400 w-5 mr-3 mt-1"></i>
                            <span class="text-gray-700">{{ $partner->full_address }}</span>
                        </li>
                    @endif
                </ul>

                <!-- Social Media -->
                @if($partner->social_links && is_array($partner->social_links) && count($partner->social_links) > 0)
                    <div class="mt-6 pt-6 border-t">
                        <h3 class="text-sm font-semibold text-gray-700 mb-3">Follow Us</h3>
                        <div class="flex space-x-3">
                            @foreach($partner->social_links as $platform => $url)
                                <a href="{{ $url }}" 
                                   target="_blank" 
                                   rel="noopener noreferrer"
                                   class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition">
                                    <i class="fab fa-{{ $platform }}"></i>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <!-- Key Contacts -->
            @if($partner->contacts->count() > 0)
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-lg font-serif font-bold text-gray-900 mb-4">
                        <i class="fas fa-users text-blue-600 mr-2"></i>
                        Key Contacts
                    </h2>
                    <ul class="space-y-4">
                        @foreach($partner->contacts as $contact)
                            <li class="flex items-start">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                    <span class="text-blue-600 font-semibold">
                                        {{ Str::substr($contact->name, 0, 1) }}
                                    </span>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900">{{ $contact->name }}</p>
                                    <p class="text-sm text-gray-500">{{ $contact->role_label }}</p>
                                    @if($contact->email)
                                        <a href="mailto:{{ $contact->email }}" class="text-sm text-blue-600 hover:underline">
                                            {{ $contact->email }}
                                        </a>
                                    @endif
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Partnership Level -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-lg font-serif font-bold text-gray-900 mb-4">
                    <i class="fas fa-award text-blue-600 mr-2"></i>
                    Partnership Level
                </h2>
                <div class="text-center py-4">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full 
                        @if($partner->partnership_level === 'platinum') bg-gradient-to-br from-purple-400 to-purple-600
                        @elseif($partner->partnership_level === 'gold') bg-gradient-to-br from-yellow-400 to-yellow-600
                        @elseif($partner->partnership_level === 'silver') bg-gradient-to-br from-gray-300 to-gray-500
                        @else bg-gradient-to-br from-orange-400 to-orange-600
                        @endif text-white mb-3">
                        <i class="fas fa-medal text-2xl"></i>
                    </div>
                    <p class="text-xl font-semibold text-gray-900 capitalize">
                        {{ $partner->partnership_level ?? 'Standard' }} Partner
                    </p>
                    @if($partner->partnership_start_date)
                        <p class="text-sm text-gray-500 mt-1">
                            Partner since {{ $partner->partnership_start_date->format('F Y') }}
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Back to Directory -->
    <div class="mt-10 text-center">
        <a href="{{ route('partners.public.index') }}" 
           class="inline-flex items-center px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Partner Directory
        </a>
    </div>
</div>
@endsection
