@extends('layouts.frontend')

@section('title', 'আমার সম্পর্কে - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Hero Section -->
    <section class="bg-bd-green-500 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">আমার সম্পর্কে</h1>
                <p class="text-bd-green-100 text-lg">মাননীয় সংসদ সদস্যের পরিচিতি ও কার্যক্রম</p>
            </div>
        </div>
    </section>

    <!-- Profile Section -->
    <section class="py-12 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                <!-- Profile Card -->
                <div class="lg:col-span-1">
                    <div class="bg-gray-50 rounded-2xl p-8 text-center sticky top-24">
                        @if (!empty($settings['mp_photo']))
                            <div class="w-48 h-48 mx-auto mb-6 rounded-full border-4 border-bd-green-500 p-1">
                                <img src="{{ Storage::url($settings['mp_photo']) }}"
                                    alt="{{ $settings['mp_name'] ?? 'MP Photo' }}"
                                    class="w-full h-full rounded-full object-cover">
                            </div>
                        @else
                            <div class="w-48 h-48 mx-auto mb-6 rounded-full border-4 border-bd-green-500 p-1">
                                <div class="w-full h-full rounded-full bg-gray-200 flex items-center justify-center">
                                    <i class="fas fa-user text-5xl text-gray-400"></i>
                                </div>
                            </div>
                        @endif

                        <h2 class="text-2xl font-bold text-gray-900 mb-2">{{ $settings['mp_name'] ?? 'মাননীয় সংসদ সদস্য' }}
                        </h2>
                        <p class="text-bd-green-500 font-medium mb-4">{{ $settings['mp_title'] ?? 'মাননীয় সংসদ সদস্য' }}
                        </p>

                        @if (!empty($settings['constituency_name']))
                            <div class="bg-bd-green-50 rounded-lg p-3 mb-4">
                                <p class="text-gray-700"><i
                                        class="fas fa-map-marker-alt text-bd-green-500 mr-2"></i>{{ $settings['constituency_name'] }}
                                </p>
                            </div>
                        @endif

                        <!-- Social Links -->
                        <div class="flex justify-center space-x-4 mt-6">
                            @if (!empty($settings['facebook_url']))
                                <a href="{{ $settings['facebook_url'] }}" target="_blank"
                                    class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 transition">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                            @endif
                            @if (!empty($settings['twitter_url']))
                                <a href="{{ $settings['twitter_url'] }}" target="_blank"
                                    class="w-10 h-10 rounded-full bg-sky-500 text-white flex items-center justify-center hover:bg-sky-600 transition">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            @endif
                            @if (!empty($settings['youtube_url']))
                                <a href="{{ $settings['youtube_url'] }}" target="_blank"
                                    class="w-10 h-10 rounded-full bg-red-600 text-white flex items-center justify-center hover:bg-red-700 transition">
                                    <i class="fab fa-youtube"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Details Section -->
                <div class="lg:col-span-2">
                    <!-- About -->
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                            <i class="fas fa-user-circle text-bd-green-500 mr-3"></i>
                            পরিচিতি
                        </h3>
                        <div class="prose prose-lg max-w-none text-gray-700">
                            @if (!empty($settings['about_mp']))
                                {!! nl2br(e($settings['about_mp'])) !!}
                            @else
                                <p>মাননীয় সংসদ সদস্য জনগণের সেবায় নিয়োজিত একজন নিবেদিতপ্রাণ জনপ্রতিনিধি। তিনি এলাকার
                                    উন্নয়ন ও জনগণের কল্যাণে নিরলস কাজ করে যাচ্ছেন।</p>
                            @endif
                        </div>
                    </div>

                    <!-- Education -->
                    @if (!empty($settings['mp_education']))
                        <div class="mb-10">
                            <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                                <i class="fas fa-graduation-cap text-bd-green-500 mr-3"></i>
                                শিক্ষাগত যোগ্যতা
                            </h3>
                            <div class="bg-gray-50 rounded-xl p-6">
                                <ul class="space-y-3">
                                    @foreach (explode("\n", $settings['mp_education']) as $education)
                                        @if (trim($education))
                                            <li class="flex items-start">
                                                <i class="fas fa-check-circle text-bd-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-700">{{ trim($education) }}</span>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    @endif

                    <!-- Political Career -->
                    @if (!empty($settings['mp_political_career']))
                        <div class="mb-10">
                            <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                                <i class="fas fa-landmark text-bd-green-500 mr-3"></i>
                                রাজনৈতিক জীবনী
                            </h3>
                            <div class="prose max-w-none text-gray-700 bg-gray-50 rounded-xl p-6">
                                {!! $settings['mp_political_career'] !!}
                            </div>
                        </div>
                    @endif

                    <!-- Family Info -->
                    @if (!empty($settings['mp_family_info']))
                        <div class="mb-10">
                            <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                                <i class="fas fa-users text-bd-green-500 mr-3"></i>
                                পারিবারিক তথ্য
                            </h3>
                            <div class="bg-gray-50 rounded-xl p-6">
                                <p class="text-gray-700">{!! nl2br(e($settings['mp_family_info'])) !!}</p>
                            </div>
                        </div>
                    @endif

                    <!-- Achievements -->
                    @if (!empty($settings['mp_achievements']))
                        <div class="mb-10">
                            <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                                <i class="fas fa-trophy text-bd-green-500 mr-3"></i>
                                অর্জন ও পুরস্কার
                            </h3>
                            <div
                                class="prose max-w-none text-gray-700 bg-gradient-to-br from-yellow-50 to-white rounded-xl p-6 border border-yellow-100">
                                {!! $settings['mp_achievements'] !!}
                            </div>
                        </div>
                    @endif

                    <!-- Speeches -->
                    @if (!empty($settings['mp_speeches']) && count($settings['mp_speeches']) > 0)
                        <div class="mb-10">
                            <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                                <i class="fas fa-microphone text-bd-green-500 mr-3"></i>
                                সংসদে বক্তব্য
                            </h3>
                            <div class="space-y-4">
                                @foreach ($settings['mp_speeches'] as $speech)
                                    <div class="bg-gray-50 rounded-xl p-6 hover:shadow-md transition">
                                        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                                            <div class="flex-1">
                                                <h4 class="text-lg font-bold text-gray-900 mb-2">
                                                    {{ $speech['title'] ?? '' }}</h4>
                                                @if (!empty($speech['date']))
                                                    <p class="text-sm text-gray-500 mb-2">
                                                        <i
                                                            class="fas fa-calendar mr-1"></i>{{ \Carbon\Carbon::parse($speech['date'])->format('d F, Y') }}
                                                    </p>
                                                @endif
                                                @if (!empty($speech['description']))
                                                    <p class="text-gray-600">{{ $speech['description'] }}</p>
                                                @endif
                                            </div>
                                            @if (!empty($speech['youtube_url']))
                                                <a href="{{ $speech['youtube_url'] }}" target="_blank"
                                                    class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                                                    <i class="fab fa-youtube mr-2"></i>ভিডিও দেখুন
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Contact Information -->
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                            <i class="fas fa-address-card text-bd-green-500 mr-3"></i>
                            যোগাযোগের ঠিকানা
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @if (!empty($settings['office_address']))
                                <div class="bg-gray-50 rounded-xl p-6">
                                    <div class="flex items-start">
                                        <div
                                            class="flex-shrink-0 w-12 h-12 rounded-full bg-bd-green-100 flex items-center justify-center">
                                            <i class="fas fa-building text-bd-green-500"></i>
                                        </div>
                                        <div class="ml-4">
                                            <h4 class="font-semibold text-gray-900 mb-1">ঠিকানা</h4>
                                            <p class="text-gray-600">{{ $settings['office_address'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if (!empty($settings['contact_phone']))
                                <div class="bg-gray-50 rounded-xl p-6">
                                    <div class="flex items-start">
                                        <div
                                            class="flex-shrink-0 w-12 h-12 rounded-full bg-bd-green-100 flex items-center justify-center">
                                            <i class="fas fa-phone text-bd-green-500"></i>
                                        </div>
                                        <div class="ml-4">
                                            <h4 class="font-semibold text-gray-900 mb-1">ফোন</h4>
                                            <p class="text-gray-600">{{ $settings['contact_phone'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if (!empty($settings['contact_email']))
                                <div class="bg-gray-50 rounded-xl p-6">
                                    <div class="flex items-start">
                                        <div
                                            class="flex-shrink-0 w-12 h-12 rounded-full bg-bd-green-100 flex items-center justify-center">
                                            <i class="fas fa-envelope text-bd-green-500"></i>
                                        </div>
                                        <div class="ml-4">
                                            <h4 class="font-semibold text-gray-900 mb-1">ইমেইল</h4>
                                            <p class="text-gray-600">{{ $settings['contact_email'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Stats -->
                    <div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                            <i class="fas fa-chart-line text-bd-green-500 mr-3"></i>
                            কার্যক্রমের সারসংক্ষেপ
                        </h3>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div class="bg-bd-green-50 rounded-xl p-6 text-center">
                                <div class="text-3xl font-bold text-bd-green-500 mb-2">{{ $stats['total_projects'] ?? 0 }}
                                </div>
                                <div class="text-gray-600 text-sm">মোট প্রকল্প</div>
                            </div>
                            <div class="bg-blue-50 rounded-xl p-6 text-center">
                                <div class="text-3xl font-bold text-blue-600 mb-2">{{ $stats['completed_projects'] ?? 0 }}
                                </div>
                                <div class="text-gray-600 text-sm">সম্পন্ন প্রকল্প</div>
                            </div>
                            <div class="bg-green-50 rounded-xl p-6 text-center">
                                <div class="text-3xl font-bold text-green-600 mb-2">{{ $stats['ongoing_projects'] ?? 0 }}
                                </div>
                                <div class="text-gray-600 text-sm">চলমান প্রকল্প</div>
                            </div>
                            <div class="bg-bd-red-50 rounded-xl p-6 text-center">
                                <div class="text-3xl font-bold text-bd-red-500 mb-2">
                                    {{ $stats['grievances_resolved'] ?? 0 }}</div>
                                <div class="text-gray-600 text-sm">সমাধানকৃত অভিযোগ</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">কোনো সমস্যা বা পরামর্শ আছে?</h2>
            <p class="text-gray-600 mb-8">আমাদের সাথে যোগাযোগ করুন অথবা অভিযোগ দাখিল করুন</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="{{ route('grievance.form') }}"
                    class="px-8 py-4 bg-bd-red-500 text-white rounded-lg font-semibold hover:bg-bd-red-600 transition">
                    <i class="fas fa-paper-plane mr-2"></i>অভিযোগ দাখিল করুন
                </a>
                <a href="{{ route('projects') }}"
                    class="px-8 py-4 bg-bd-green-500 text-white rounded-lg font-semibold hover:bg-bd-green-600 transition">
                    <i class="fas fa-project-diagram mr-2"></i>প্রকল্প দেখুন
                </a>
            </div>
        </div>
    </section>
@endsection