@extends('layouts.site')

@section('title', $project->title . ' | XRD LAB')

@section('content')
<main id="main" dir="rtl">
    @include('partials.breadcrumbs', [
        'items' => [
            ['label' => 'الرئيسية', 'url' => route('home')],
            ['label' => 'المنصة البحثية', 'url' => route('portfolio')],
            ['label' => 'تفاصيل المشروع'],
        ],
    ])

    <section class="blog">
        <div class="container">
            @php
                $feedbackTitle = null;
                $feedbackType = null;
                $feedbackBodyHtml = '';

                if (session('status')) {
                    $feedbackTitle = 'تم بنجاح';
                    $feedbackType = 'success';
                    $feedbackBodyHtml = e(session('status'));
                } elseif ($errors->any()) {
                    $feedbackTitle = 'يرجى التحقق من البيانات';
                    $feedbackType = 'error';
                    $feedbackBodyHtml = '<ul class="mb-0 text-start">';
                    foreach ($errors->all() as $error) {
                        $feedbackBodyHtml .= '<li>' . e($error) . '</li>';
                    }
                    $feedbackBodyHtml .= '</ul>';
                }
            @endphp

            <article class="entry entry-single">
                @if($project->cover_image)
                    <div class="entry-img">
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($project->cover_image) }}" alt="{{ $project->title }}" class="img-fluid">
                    </div>
                @endif

                <h2 class="entry-title">{{ $project->title }}</h2>

                <div class="entry-content">
                    @if($project->excerpt)
                        <p><strong>{{ $project->excerpt }}</strong></p>
                    @endif

                    @if($project->content)
                        {!! $project->content !!}
                    @endif
                </div>
            </article>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="icon-box compact-meta-box">
                        <div class="compact-meta-list">
                            @if($project->project_type)<span><strong>النوع:</strong> {{ $project->project_type }}</span>@endif
                            @if($project->location)<span><strong>الموقع:</strong> {{ $project->location }}</span>@endif
                            @if($project->budget_range)<span><strong>الميزانية:</strong> {{ $project->budget_range }}</span>@endif
                            @if($project->start_date)<span><strong>تاريخ البداية:</strong> {{ $project->start_date->format('Y-m-d') }}</span>@endif
                            @if($project->end_date)<span><strong>تاريخ النهاية:</strong> {{ $project->end_date->format('Y-m-d') }}</span>@endif
                            @if($project->projectSupervisors->isNotEmpty())
                                <span class="supervisor-inline-group">
                                    <strong>المشرفون:</strong>
                                    @foreach($project->projectSupervisors as $projectSupervisor)
                                        @php $supervisor = $projectSupervisor->supervisor; @endphp
                                        @if($supervisor)
                                            <button type="button" class="btn btn-link btn-sm p-0 supervisor-link" data-bs-toggle="modal" data-bs-target="#supervisorModal{{ $supervisor->id }}">
                                                {{ $supervisor->name }}
                                            </button>
                                        @endif
                                    @endforeach
                                </span>
                            @endif
                            @if($project->contributors->isNotEmpty())
                                <span class="supervisor-inline-group">
                                    <strong>فريق العمل:</strong>
                                    <button type="button" class="btn btn-link btn-sm p-0 supervisor-link" data-bs-toggle="modal" data-bs-target="#projectTeamModal">
                                        استعرض فريق العمل
                                    </button>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            @foreach($project->projectSupervisors as $projectSupervisor)
                @php $supervisor = $projectSupervisor->supervisor; @endphp
                @if($supervisor)
                            <div class="modal fade" id="supervisorModal{{ $supervisor->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content border-0 shadow supervisor-modal-content">
                                        <div class="modal-header supervisor-modal-header">
                                            <h5 class="modal-title">{{ $supervisor->name }}</h5>
                                            <button type="button" class="btn-close btn-close-white modal-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                <div class="modal-body small">
                                    @if($projectSupervisor->role_title)<p class="mb-1"><strong>الدور:</strong> {{ $projectSupervisor->role_title }}</p>@endif
                                    @if($supervisor->title)<p class="mb-1"><strong>الصفة:</strong> {{ $supervisor->title }}</p>@endif
                                    @if($supervisor->affiliation)<p class="mb-1"><strong>الجهة:</strong> {{ $supervisor->affiliation }}</p>@endif
                                    @if($supervisor->bio)<p class="mb-1">{{ $supervisor->bio }}</p>@endif
                                    @if($supervisor->show_email_public && $supervisor->email)<p class="mb-1"><strong>Email:</strong> {{ $supervisor->email }}</p>@endif
                                    @if($supervisor->show_phone_public && $supervisor->phone)<p class="mb-1"><strong>Phone:</strong> {{ $supervisor->phone }}</p>@endif
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-sm sponsor-cta-btn" data-bs-dismiss="modal">تمام</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach

            @if($project->contributors->isNotEmpty())
                <div class="modal fade" id="projectTeamModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content border-0 shadow supervisor-modal-content">
                            <div class="modal-header supervisor-modal-header">
                                <h5 class="modal-title">فريق العمل</h5>
                                <button type="button" class="btn-close btn-close-white modal-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body small">
                                @foreach($project->contributors as $contributor)
                                    <div class="team-member-item {{ !$loop->last ? 'mb-3 pb-3 border-bottom' : '' }}">
                                        <p class="mb-1"><strong>{{ $contributor->name }}</strong></p>
                                        @if($contributor->title)<p class="mb-1"><strong>الصفة:</strong> {{ $contributor->title }}</p>@endif
                                        @if($contributor->affiliation)<p class="mb-1"><strong>الجهة:</strong> {{ $contributor->affiliation }}</p>@endif
                                        @if($contributor->contribution_type)<p class="mb-1"><strong>المساهمة:</strong> {{ $contributor->contribution_type }}</p>@endif
                                        @if($contributor->show_email_public && $contributor->email)<p class="mb-1"><strong>Email:</strong> {{ $contributor->email }}</p>@endif
                                        @if($contributor->show_phone_public && $contributor->phone)<p class="mb-1"><strong>Phone:</strong> {{ $contributor->phone }}</p>@endif
                                        @if($contributor->bio)<p class="mb-0">{{ $contributor->bio }}</p>@endif
                                    </div>
                                @endforeach
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-sm sponsor-cta-btn" data-bs-dismiss="modal">تمام</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            @if($project->images->isNotEmpty())
                <section class="mt-4">
                    <h4>صور المشروع</h4>
                    <div class="row">
                        @foreach($project->images as $image)
                            <div class="col-md-4 mb-3">
                                <img src="{{ \Illuminate\Support\Facades\Storage::url($image->image_path) }}" class="img-fluid" alt="{{ $image->caption ?? $project->title }}">
                                @if($image->caption)
                                    <p class="small mt-1">{{ $image->caption }}</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif

            @if($project->projectSponsors->isNotEmpty())
                <section class="mt-4">
                    <h4>برعاية</h4>
                    <div class="row align-items-center">
                        @foreach($project->projectSponsors as $projectSponsor)
                            @php $sponsor = $projectSponsor->sponsor; @endphp
                            @if($sponsor)
                                <div class="col-md-4 mb-3">
                                    <div class="icon-box text-center h-100">
                                        @if($sponsor->logo)
                                            <img src="{{ \Illuminate\Support\Facades\Storage::url($sponsor->logo) }}" alt="{{ $sponsor->name }}" class="img-fluid mb-2" style="max-height: 80px; object-fit: contain;">
                                        @endif
                                        <strong>{{ $sponsor->name }}</strong>
                                        @if($sponsor->type)
                                            <p class="mb-1">{{ $sponsor->type }}</p>
                                        @endif
                                        @if($sponsor->website)
                                            <a href="{{ $sponsor->website }}" target="_blank" rel="noopener">{{ $sponsor->website }}</a>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </section>
            @endif

            @if($project->status !== 'completed')
                <section class="mt-5">
                    <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                        <button type="button" id="toggleSponsorForm" class="btn sponsor-cta-btn">تقدم بطلب رعاية لهذا المشروع</button>
                    </div>

                    <div id="sponsorFormWrapper" class="sponsor-form-collapsed">
                        <form method="POST" action="{{ route('portfolio.sponsor-interest', $project) }}" id="sponsorInterestForm" class="sponsor-form-box">
                            @csrf

                            <div style="position:absolute;left:-9999px;opacity:0;pointer-events:none;">
                                <label for="website">Website</label>
                                <input type="text" id="website" name="website" value="{{ old('website') }}" tabindex="-1" autocomplete="off">
                            </div>

                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <input type="text" name="name" class="form-control" placeholder="الاسم" value="{{ old('name') }}" required>
                                </div>
                                <div class="col-md-6 form-group mt-3 mt-md-0">
                                    <input type="email" name="email" class="form-control" placeholder="البريد الإلكتروني (اختياري)" value="{{ old('email') }}">
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-6 form-group">
                                    <input type="text" name="phone" class="form-control" placeholder="رقم الهاتف (اختياري)" value="{{ old('phone') }}">
                                </div>
                                <div class="col-md-6 form-group mt-3 mt-md-0">
                                    <small class="text-muted d-block pt-2">مطلوب بريد إلكتروني أو رقم هاتف واحد على الأقل.</small>
                                </div>
                            </div>

                            <div class="text-center mt-3">
                                <button type="submit" class="btn sponsor-cta-btn">إرسال الاهتمام بالرعاية</button>
                            </div>
                        </form>
                    </div>
                </section>
            @endif
        </div>
    </section>

    <div id="pageLoader" class="page-loader">
        <div class="loader-orb-wrap" aria-hidden="true">
            <span class="loader-orb loader-orb-1"></span>
            <span class="loader-orb loader-orb-2"></span>
            <span class="loader-orb loader-orb-3"></span>
        </div>
        <p class="mb-0 mt-3 loader-text">جاري التحميل...</p>
    </div>

    @if($feedbackTitle)
        <div class="modal fade" id="feedbackModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow feedback-modal-content">
                    <div class="modal-header {{ $feedbackType === 'success' ? 'feedback-modal-header-success' : 'feedback-modal-header-error' }}">
                        <h5 class="modal-title">{{ $feedbackTitle }}</h5>
                        <button type="button" class="btn-close btn-close-white modal-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">{!! $feedbackBodyHtml !!}</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm sponsor-cta-btn" data-bs-dismiss="modal">تمام</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</main>
@endsection

@push('styles')
<style>
    .blog .entry.entry-single {
        overflow: hidden;
    }

    .blog .entry.entry-single .entry-img {
        margin: -30px -30px 20px -30px;
        height: clamp(220px, 36vw, 420px);
        max-height: none;
        overflow: hidden;
    }

    .blog .entry.entry-single .entry-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .sponsor-form-box {
        background: var(--theme-surface);
        border-radius: 10px;
        padding: 20px;
        box-shadow: var(--theme-shadow);
    }

    .compact-meta-box h4 {
        margin-bottom: 12px;
    }

    .compact-meta-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        align-items: center;
    }

    .compact-meta-list span {
        font-size: 0.88rem;
        color: var(--theme-text-muted);
        white-space: nowrap;
    }

    .supervisor-inline-group {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .supervisor-link {
        color: var(--theme-primary);
        text-decoration: underline;
        font-size: 0.88rem;
    }

    .supervisor-link:hover {
        color: var(--theme-primary-dark);
    }

    .sponsor-cta-btn {
        background-color: var(--theme-primary);
        border-color: var(--theme-primary);
        color: #fff;
        font-weight: 600;
        padding: 10px 16px;
        border-radius: 999px;
        transition: all 0.2s ease-in-out;
    }

    .sponsor-cta-btn:hover {
        background-color: var(--theme-primary-dark);
        border-color: var(--theme-primary-dark);
        color: #fff;
        transform: translateY(-1px);
    }

    .supervisor-modal-content,
    .feedback-modal-content {
        border-radius: 14px;
        overflow: hidden;
    }

    .supervisor-modal-header,
    .feedback-modal-header-success,
    .feedback-modal-header-error {
        color: #fff;
    }

    .supervisor-modal-header,
    .feedback-modal-header-success {
        background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    }

    .feedback-modal-header-error {
        background: linear-gradient(135deg, #dc3545, #b02a37);
    }

    .modal-close-btn {
        position: absolute;
        top: 14px;
        left: 14px;
        margin: 0;
        z-index: 3;
    }

    .sponsor-form-collapsed {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-8px);
        transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
        pointer-events: none;
    }

    .sponsor-form-collapsed.is-open {
        max-height: 520px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .page-loader {
        position: fixed;
        inset: 0;
        background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--theme-primary) 28%, transparent), rgba(10, 10, 10, 0.9));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 2000;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .page-loader.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .loader-orb-wrap {
        position: relative;
        width: 84px;
        height: 84px;
    }

    .loader-orb {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
        animation: loaderPulse 1.35s infinite ease-in-out;
    }

    .loader-orb-1 { top: 0; left: 31px; animation-delay: 0s; }
    .loader-orb-2 { bottom: 8px; left: 0; animation-delay: 0.18s; background: var(--theme-primary); }
    .loader-orb-3 { bottom: 8px; right: 0; animation-delay: 0.36s; background: var(--theme-primary-dark); }

    .loader-text {
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    @keyframes loaderPulse {
        0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
        40% { transform: scale(1); opacity: 1; }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var toggleBtn = document.getElementById('toggleSponsorForm');
    var sponsorForm = document.getElementById('sponsorInterestForm');
    var sponsorFormWrapper = document.getElementById('sponsorFormWrapper');
    var pageLoader = document.getElementById('pageLoader');

    if (pageLoader) {
        setTimeout(function () {
            pageLoader.classList.add('hidden');
        }, 250);
    }

    if (toggleBtn && sponsorForm && sponsorFormWrapper) {
        @if($errors->any())
        sponsorFormWrapper.classList.add('is-open');
        @endif

        toggleBtn.addEventListener('click', function () {
            sponsorFormWrapper.classList.toggle('is-open');
        });

        sponsorForm.addEventListener('submit', function () {
            if (pageLoader) {
                pageLoader.classList.remove('hidden');
            }
        });
    }

    @if($feedbackTitle)
    var feedbackModalElement = document.getElementById('feedbackModal');
    if (feedbackModalElement) {
        var feedbackModal = new bootstrap.Modal(feedbackModalElement);
        feedbackModal.show();

        var feedbackDialog = feedbackModalElement.querySelector('.modal-dialog');
        if (feedbackDialog) {
            feedbackDialog.classList.add('animate__animated', 'animate__zoomIn');
        }
    }
    @endif
});
</script>
@endpush