@if(session()->has('apply_success'))
    <x-description-alert class="mt-4 mb-12" label="You've applied to application in term {{session()->get('apply_success')}}" type="success"/>
@endif

@isset($volunteer_applications)
    @foreach($volunteer_applications as $application)
        
        @if($application->term->eventOptions()->doesntExist())
            @continue
        @else
            @once
                <h3 class="flex ml-3 text-blue-900 text-2xl font-bold gap-6 items-center">

                    @svg('img/icons/application')
                    <span>Applications</span>
                </h3>
            @endonce
        @endif
        <div class="w-full border rounded-lg shadow mt-8 md:mt-12">
                <a href="{{ route('portal.account.term-volunteer-application.show', ['term_volunteer_application' => $application]) }}" class="flex flex-col p-6 @if(!$application->isSubmitted())cursor-pointer hover:bg-[#fcfcfc] @else pointer-events-none @endif">
                    <div class="flex w-full gap-2 justify-between items-center">
                        <div>
                            <div class="flex flex-col gap-2">
                                <h3 class="text-xl font-bold">{{ $application->term->full_name }} {{($user->campGroupIsAmbiguous() ? '('.$application->term->campGroup->name . ')' : '')}}
                                </h3>
                            </div>

                            @if(!$application->isSubmitted())
                                <div class="flex flex-col gap-2 mt-4">
                                    @php
                                        $event_options = \App\Models\EventOption::query()
                                            ->whereIn('event_id', $application->term->events->pluck('id'))
                                            ->orderBy('start')
                                            ->get()
                                    @endphp
                                    @foreach($event_options as $event_option)
                                        <div class="flex flex-col">
                                            <span class="text-gray-700 leading-tight text-sm font-semibold">{{ $event_option->full_name }} {{ $event_option->start->year }}</span>
                                            <span class="text-gray-500 leading-tight text-xs font-normal">{{ $event_option->getStartEndLabel() }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        @if(!$application->isSubmitted())
                            <div>
                                @svg('img/icons/right-arrow', 'text-blue-500')
                            </div>
                        @endif
                    </div>
                </a>
            <div class="p-6 flex flex-col gap-1.5 border-t border-gray-200">
                <h3 class="leading-tight text-lg font-bold">Application forms</h3>
                @include('term-volunteer-application-forms.partials.due-forms-date-message', ['application', $application])

                @php
                    $percentages = floor(100 / count($application->getTopicsData()) * collect($application->getTopicsData())->filter(fn($app) => $app['is_completed'])->count());
                @endphp

                @if($application->isSubmitted())
                    @if(!$application->assessment == \App\Enums\VolunteerApplicationAssessment::FitForLeadership)
                        <span class="text-yellow-400 text-base font-semibold">
                            Submitted and awaiting review
                        </span>
                    @else
                        <span class="text-green-500 text-base font-semibold">
                            Approved
                        </span>
                    @endif
                @else
                    @if(intval($percentages) === 100)
                        <span class="text-yellow-400 text-base font-semibold">
                            Awaiting submission
                        </span>
                        <div class="mt-4">
                            <a href="{{ route('portal.account.term-volunteer-application.show', ['term_volunteer_application' => $application]) }}"
                                    class="flex gap-2 items-center text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 w-fit">
                                <span>Check and submit</span>
                            </a>
                        </div>
                    @else
                        <span class="text-yellow-400 text-base font-semibold">
                            {{$percentages}}% complete
                        </span>
                    @endif
                @endif
            </div>
        </div>
    @endforeach
@endisset

@php
    $ready_terms = \App\Models\Term::getReadyForApplyingTerms(auth()->user());
    $upcoming_terms = $user->getUpcomingTerms();
    $terms = $ready_terms->merge($upcoming_terms);
@endphp

@if($terms->count())
    <h3 class="mt-8 md:mt-12 ml-2 text-xl font-bold">Current and upcoming terms</h3>

    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 w-full gap-4 justify-between" x-data="{openedTermsEventList: [], toggle(id) {
        this.openedTermsEventList = helper.toggleElement(this.openedTermsEventList, id);
    }}">

        @foreach ($terms as $term)
        <div class="flex flex-col w-full border rounded-lg shadow h-fit" x-data>
            <div class="flex justify-between pt-6 pb-4 px-5" x-data="">
                <div class="flex flex-col">
                    <h3 class="leading-tight text-2xl font-bold text-gray-800">{{ ($user->campGroupIsAmbiguous() ? $term->campGroup->name . ' ' : '') . $term->full_name }}</h3>
                    <span class="mt-1.5 leading-tight text-base font-normal text-gray-500">@if($term->ready_date)Applications open {{ $term->ready_date?->format('F Y') }}@endif</span>
                    @if($term->is_ready)
                        <div class="text-green-500 rounded-lg font-bold text-center w-fit my-1 ">
                            Now open for applications
                        </div>
                    @endif
                </div>
                @if(!$term->is_ready)
                    @svg('img/icons/lock')
                @endif
            </div>

            @if($term->is_ready)
                <form method="post" action="{{ route('portal.account.term-volunteer-application.apply') }}" class="px-4 pb-5">
                    @csrf
                    <input type="hidden" name="apply-for-term-id" value="{{$term->id}}">
                    <button type="submit" class="text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full py-2.5 center">Sign up now</button>
                </form>
            @endif

            @if($term->events()->count())
                <div class="border-t border-gray-200" x-data="{id: $id('items-list')}">
                    <div class="p-5 flex items-center justify-between text-blue-500 leading-tight text-base font-bold cursor-pointer hover:bg-[#f6f6f6]"
                         @click="toggle(id)">
                        <span>Show event list</span>
                        <div :class="{'rotate-180': openedTermsEventList.includes(id)}">
                            @svg('img/icons/down-arrow', 'text-blue-500')
                        </div>
                    </div>
                    <div class="flex flex-col gap-2 pb-5 pt-5 px-6 border-t border-gray-200" x-cloak x-show="openedTermsEventList.includes(id)" x-transition x-data>
                        @php
                            $event_options = \App\Models\EventOption::query()
                                ->whereIn('event_id', $term->events->pluck('id'))
                                ->orderBy('start')
                                ->get()
                        @endphp
                        @foreach($event_options as $event_option)
                            <div class="flex flex-col">
                                <span class="text-gray-700 leading-tight text-sm font-semibold">{{ $event_option->full_name }} {{ $event_option->start->year }}</span>
                                <span class="text-gray-500 leading-tight text-xs font-normal">{{ $event_option->getStartEndLabel() }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
        @endforeach

    </div>
@endif