@extends('organizations.layouts.default')
@section('title')
    / Apply
@endsection
@section('content')
    <main class="overflow-scroll no-scrollbar mb-10">
        <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10 ">
            {!! htmlScriptTagJsApi() !!}
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <nav>
                    <ol class="flex gap-2 text-title-sm">
                        <li><a href="{{ route('organization.dashboard') }}">{{ __('menu.Dashboard') }} /</a></li>
                        <li class="text-brandBlue">
                            <a href="{{ route('organization.rosters.applied.index') }}">{{ __('menu.' . $title) }}</a>
                        </li>
                        @if ('title')
                            <li class="text-blue-900">
                                @yield('title')
                            </li>
                        @endif
                    </ol>
                </nav>
            </div>
            <hr class="my-3">
            <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6">
                @php
                    $staus = config('dropdown.roster_application_status');
                @endphp
                <div class="flex justify-between gap-2 mb-2">
                    <div>
                        Application Status:
                        <span class="bg-brandBlue rounded text-white p-1">{{ $staus[$appDetails->app_status] }}</span>
                    </div>
                    @if ($model->end_date > now())
                        @if ($appDetails->app_status == 2)
                            <x-modal :heading="'Are you sure you want to edit?'" :class="'bg-primary rounded text-white text-center px-2 py-1'" :message="'Note: The application status will change to Draft.'" :type="'anchor'"
                                :route="route('organization.rosters.applied.edit', $appDetails->id)" :icon="'pencil'">
                                Edit
                            </x-modal>
                        @elseif($appDetails->app_status == 1)
                            <div>
                                <a href="{{ route('organization.rosters.applied.edit', $appDetails->id) }}"
                                    class="bg-primary rounded text-white py-1 px-4">
                                    <i class="bi bi-info-circle-fill text-warning me-2"></i>Please complete your application
                                </a>
                            </div>
                        @endif
                    @endif
                </div>
                <hr>
                <div class="mt-4 mb-4 md:text-center">
                    <div class="text-xl font-semibold">{{ $model->roster_title }} </div>
                </div>
                <div class="grid md:grid-cols-3 md:text-center">
                    <div class="flex gap-2">
                        <img src="{{ asset($model->organization->org_logo) }}" class="inline-flex items-center h-10"
                            alt="">
                        <span class="inline-flex items-center">
                            {{ $model->organization->name ?? '-' }}
                        </span>
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">Publish Date:</span> {{ $model->start_date->format('Y-m-d') }}
                    </div>
                    <div class="py-3">
                        <span class="font-semibold">Expiry Date:</span> {{ $model->end_date->format('Y-m-d') }}
                    </div>
                </div>
                @if ($model->form_type == 2)
                    <div x-data="{ accordionOpen: false }" @click.outside="accordionOpen = false"
                        class="rounded-md border mt-3 border-stroke p-4 shadow-9 dark:border-strokedark dark:shadow-none sm:p-6">
                        <button @click="accordionOpen = !accordionOpen"
                            class="flex w-full items-center gap-1.5 sm:gap-3 xl:gap-6">
                            <div
                                class="flex h-10.5 w-full max-w-10.5 items-center justify-center rounded-md bg-[#F3F5FC] dark:bg-meta-4">
                                <svg :class="accordionOpen & amp; & amp;
                                'rotate-180'"
                                    class="fill-primary stroke-primary duration-200 ease-in-out dark:fill-white dark:stroke-white"
                                    width="18" height="10" viewBox="0 0 18 10" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8.28882 8.43257L8.28874 8.43265L8.29692 8.43985C8.62771 8.73124 9.02659 8.86001 9.41667 8.86001C9.83287 8.86001 10.2257 8.69083 10.5364 8.41713L10.5365 8.41721L10.5438 8.41052L16.765 2.70784L16.771 2.70231L16.7769 2.69659C17.1001 2.38028 17.2005 1.80579 16.8001 1.41393C16.4822 1.1028 15.9186 1.00854 15.5268 1.38489L9.41667 7.00806L3.3019 1.38063L3.29346 1.37286L3.28467 1.36548C2.93287 1.07036 2.38665 1.06804 2.03324 1.41393L2.0195 1.42738L2.00683 1.44184C1.69882 1.79355 1.69773 2.34549 2.05646 2.69659L2.06195 2.70196L2.0676 2.70717L8.28882 8.43257Z"
                                        fill="" stroke=""></path>
                                </svg>
                            </div>

                            <div>
                                <h4 class="text-left text-title-xsm font-medium text-black dark:text-white">
                                    Click to view notice details.
                                </h4>
                            </div>
                        </button>

                        <div x-show="accordionOpen" class="ml-16.5 mt-5 duration-200 ease-in-out  p-2 shadow-lg"
                            style="display: none;">
                            <p class="font-medium">
                                {!! $model->roster_details !!}
                            </p>
                        </div>
                    </div>
                @endif
            </div>
            @if ($model->form_type == 1)
                <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6 mt-2" id="apply">
                    <div class="font-semibold text-2xl underline mb-1">Selected Services:</div>
                    <div class="mt-4">
                        @foreach (config('dropdown.roster_service_category') as $key => $category)
                            <div
                                class="bg-white dark:bg-boxdark overflow-hidden rounded-lg shadow-black shadow-1 hover:shadow-xl transition duration-300 my-4">
                                <div class="p-4">
                                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 ">
                                        {{ $category }}
                                    </h3>
                                    <ul class="mt-2">
                                        @foreach ($model->rosterOpens->where('category_id', $key) as $ro)
                                            @foreach ($appDetails->applicationServices->where('roster_open_id', $ro->id) as $as)
                                                <li class="grid md:grid-cols-3 border-b py-2">
                                                    <div class="col-span-2">
                                                        <i class="bi bi-dash"></i>
                                                        <label class="font-medium text-black dark:text-white">
                                                            {{ $ro->roster_service?->service_title ?? $ro->other_service }}
                                                        </label>
                                                    </div>
                                                    <div class="md:text-end m-2 md:m-0">
                                                        @if ($as->roster_status == 0)
                                                            @if ($appDetails->app_status == 2)
                                                                <span class="bg-warning rounded text-white p-1">Under
                                                                    Verification</span>
                                                            @else
                                                                <span class="bg-danger rounded text-white p-1">Not
                                                                    Qualified</span>
                                                            @endif
                                                        @elseif($as->roster_status == 1)
                                                            <span class="bg-success rounded text-white p-1">Qualified</span>
                                                        @endif
                                                    </div>
                                                </li>
                                            @endforeach
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6 mt-2">
                    <div class="font-semibold text-2xl underline mb-1">Uploaded Documents:</div>
                    <div class="grid md:grid-cols-2 gap-4">
                        @foreach ($appDetails->applicationDocuments as $doc)
                            <div
                                class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2 mb-1 border p-4 border-stroke rounded-md">
                                <div>{{ $doc->document_title }}</div>
                                @if ($doc->document_file)
                                    <div class="md:flex md:justify-center md:items-center">
                                        @if (is_image(asset($doc->document_file)))
                                            <a href="{{ asset($doc->document_file) }}" target="_blank"
                                                class="hover:scale-110">
                                                <img src="{{ asset($doc->document_file) }}" class="h-12 w-12 rounded-full"
                                                    alt="">
                                            </a>
                                        @else
                                            <a href="{{ asset($doc->document_file) }}" target="_blank"
                                                class="text-blue-700 hover:text-blue-600">Click to
                                                view
                                            </a>
                                        @endif
                                    </div>
                                @elseif($doc->document_external_link)
                                    <div class="md:flex md:justify-center md:items-center">
                                        <a href="{{ asset($doc->document_external_link) }}" target="_blank"
                                            class="text-blue-700 hover:text-blue-600">Link
                                        </a>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6 mt-2">
                <div class="font-semibold text-2xl underline mb-1">Application Cover Letter:</div>
                <div">
                    {!! $appDetails->cover_letter ?? 'Not Applied!!' !!}
            </div>
        </div>
        </div>
    </main>
@endsection