@extends('layouts.dashboard')

@section('contents')
<p class="lora-wt text-2xl font-bold text-center text-gray-700 underline underline-offset-2 dark:text-gray-900 mt-3">
    <i class="fa-solid fa-hashtag"></i> List of Applications
</p>
@if($appusr->role < 3)
<p class="merriweather-wt mt-1.5 mb-5 text-md text-center font-bold text-gray-500 lg:text-md sm:px-16 xl:px-48 dark:text-gray-400">- All Posts & Depts/Offices -</p>
@else
    @if($scrutinyDepts && $scrutinyId)
    <p class="merriweather-wt mt-1.5 text-sm text-center font-bold text-gray-500 lg:text-sm sm:px-16 xl:px-48 dark:text-gray-400"><i class="fa-solid fa-briefcase"></i> {{ $scrutinyDepts->firstWhere('id', $scrutinyId)?->details }} ({{$scrutinyDepts->firstWhere('id', $scrutinyId)?->post_type}})</p>

    <p class="mt-1 merriweather-wt text-xs text-center font-bold text-gray-500 lg:text-xs sm:px-16 xl:px-48 dark:text-gray-400"><i class="fa-solid fa-building-user"></i> {{ $scrutinyDepts->firstWhere('id', $scrutinyId)?->dept_desc }}</p>
    @else
        <p class="merriweather-wt mt-1.5 mb-5 text-md text-center font-bold text-gray-500 lg:text-md sm:px-16 xl:px-48 dark:text-gray-400">Dept./Office => Undefined</p>
    @endif
@endif

<section class="p-2">
    <div class="mx-auto max-w-screen-xl px-2">
        <!-- Start coding here -->
        <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
            <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
                <div class="w-full md:w-auto flex items-center justify-between md:justify-center gap-2 md:gap-3">
                    <button id="ddownScrDeptListButton" data-dropdown-toggle="ddownScrPostList" class="w-1/2 md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
                        @if($scrutinyId)
                            <span>{{ $scrutinyDepts->firstWhere('id', $scrutinyId)?->details }}</span>
                        @else
                            <span>Select Post</span>
                        @endif 
                        <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                        </svg>
                    </button>

                    <!-- Dropdown menu -->
                    <div id="ddownScrPostList" class="z-10 hidden bg-gray-50 border border-2 border-gray-100 divide-y divide-gray-100 rounded-lg shadow-sm w-72 dark:bg-gray-700 dark:divide-gray-600">
                        <ul class="merriweather-wt p-3 space-y-1 text-sm text-gray-700 h-auto max-h-72 overflow-y-auto dark:text-gray-200" aria-labelledby="ddownScrDeptListButton">
                            @foreach($scrutinyDepts as $item)
                            <li class="list-none">
                                <a href="{{route('apps.list', ['circularID' => $circularID,'scrutinyId' => $item->id])}}" class="flex p-2 items-center w-full rounded-sm hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer transition-colors duration-150 ease-in-out group">
                                    <div class="flex items-center h-5 flex-shrink-0">
                                        @if($item->s_role === 1)
                                            <i class="fa-solid fa-crown text-amber-500"></i>
                                        @else
                                            <i class="fa-regular fa-user"></i>
                                        @endif
                                    </div>

                                    <div class="ms-2 text-sm text-left">
                                        <div class="font-medium text-gray-900 dark:text-gray-300">
                                            {{$item->details}}
                                        </div>
                                        <p class="text-xs font-normal text-gray-500 dark:text-gray-400">
                                            {{$item->dept_desc}}
                                        </p>
                                    </div>
                                </a>
                            </li>
                            @endforeach

                            @if(!$scrutinyDepts->count())
                            <li class="list-none">
                                <a href="#" class="flex p-2 items-center w-full rounded-sm hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer transition-colors duration-150 ease-in-out group">
                                    <div class="flex items-center h-5 flex-shrink-0">
                                        <i class="fa-solid fa-border-none"></i>
                                    </div>

                                    <div class="ms-2 text-sm text-left">
                                        <div class="font-medium text-gray-900 dark:text-gray-300">
                                            No post is available !
                                        </div>
                                        <p class="text-xs font-normal text-gray-500 dark:text-gray-400">
                                            Not Applicable
                                        </p>
                                    </div>
                                </a>
                            </li>
                            @endif
                        </ul>
                    </div>

                    <button type="button" class="w-1/2 md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                        <span>Send Report</span>
                        <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                        </svg>
                    </button>
                </div>

                <div class="w-full md:w-1/3">
                    <form class="max-w-md" action="#" method="GET">
                        <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                                </svg>
                            </div>
                            <input type="search" id="search" name="search" class="block w-full p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search..." value="" required />
                            <button type="submit" class="text-white absolute end-1 bottom-1 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><i class="fa-solid fa-hand-pointer"></i> Search</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="min-h-80 overflow-x-auto">
                <table class="w-full lora-wt text-sm text-left text-gray-700 dark:text-gray-400">
                    <thead class="text-sm text-gray-900 bg-gray-300 dark:bg-gray-700 dark:text-gray-400">
                        <tr>
                            <th scope="col" class="px-3 py-3">Sl.</th>
                            <th scope="col" class="px-3 py-3">Name</th>
                            <th scope="col" class="px-3 py-3">Father's Name</th>
                            <th scope="col" class="px-3 py-3 whitespace-nowrap">Post</th>
                            <th scope="col" class="px-2 py-3 whitespace-nowrap">Dept./Office</th>
                            <th scope="col" class="px-3 py-3 whitespace-nowrap">Post-Type</th>
                            <th scope="col" class="px-2 py-3">Certificates</th>
                            <th scope="col" class="px-2 py-3">Application</th>
                            @if(!is_null($scrutinyMember))
                            <th scope="col" class="px-3 py-3">
                                <!-- <span class="sr-only">Actions</span> -->
                                Actions
                            </th>
                            @endif
                            <th scope="col" class="px-2 py-3">Status</th>
                            <th scope="col" class="px-2 py-3 whitespace-nowrap">Scrutinize-By</th>
                            <th scope="col" class="px-2 py-3">Remarks</th>
                            <th scope="col" class="px-2 py-3 whitespace-nowrap">Missing-Docs.</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        @foreach($lists as $l)
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-3 py-3">{{ $loop->iteration + $lists->firstItem() - 1 }}.</td>
                            <th scope="row" class="px-3 py-3 whitespace-nowrap dark:text-white">{{ $l->snapshot['applicant']['name'] }}</th>
                            <td class="px-3 py-3 whitespace-nowrap">{{ $l->snapshot['applicant']['father'] }}</td>
                            <td class="px-3 py-2 whitespace-nowrap">{{ $l->details }}</td>
                            <td class="px-3 py-3 whitespace-nowrap">{{ $l->dept_desc }}</td>
                            <td class="px-3 py-3 whitespace-nowrap">
                                {{$l->post_type}}
                            </td>
                            <td class="px-3 py-3 whitespace-nowrap">
                                <a href="{{route('show.cert', ['filename' => $l->snapshot['applicant']['req_doc']])}}" target="_blank" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
                                    View Doc
                                    <svg class="w-4 h-4 ms-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                    </svg>
                                </a>
                            </td>
                            <td class="px-3 py-3">
                                <a href="{{ route('download.form', ['appId' => $l->id]) }}" target="_blank" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
                                    App.Form
                                    <svg class="w-4 h-4 ms-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                    </svg>
                                </a>
                            </td>

                            @if(!is_null($scrutinyMember))
                            <td class="px-3 py-3 flex justify-center">
                                @if(is_null($l->scrutiny_by) || (!is_null($scrutinyMember) && $scrutinyMember->s_role === 1))
                                <button id="scr-{{ $l->id }}-btn" data-id="{{ $l->id }}" data-modal-target="crud-modal-{{ $l->id }}" data-modal-toggle="crud-modal-{{ $l->id }}" onclick="scrutiny(this)" type="button" class="text-green-700 border border-green-700 hover:bg-green-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:focus:ring-green-800 dark:hover:bg-green-500">
                                    <i class="fa-solid fa-ellipsis-vertical w-4 h-4"></i>
                                    <span class="sr-only">Icon description</span>
                                </button>

                                @include('widgets.scrutiny',['id' => $l->id, 'name' => $l->name, 'proPic' => $l->pro_pic, 'dept' => strtoupper($l->dept), 'degree' => $l->degree, 'time' => $l->time])
                                @else
                                --
                                @endif
                            </td>
                            @endif

                            <td class="px-2 py-3 text-center">
                                <!-- marked-status -->
                                 @if($l->acceptance === 1)
                                 <span id="{{ $l->id }}-flag-11" class="inline-flex items-center justify-center w-6 h-6 text-sm font-semibold text-gray-800 bg-green-300 rounded-full dark:bg-gray-700 dark:text-gray-300">
                                    <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
                                    </svg>
                                </span>
                                 @elseif($l->acceptance === 0)
                                 <span id="{{ $l->id }}-flag-00" class="inline-flex items-center justify-center w-6 h-6 text-sm font-semibold text-gray-800 bg-red-300 rounded-full dark:bg-gray-700 dark:text-gray-300">
                                    <svg class="w-3.5 h-3.5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" />
                                    </svg>
                                    <span class="sr-only">Icon description</span>
                                </span>
                                @elseif($l->acceptance === 2)
                                <span id="{{ $l->id }}-flag-22" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-sm dark:bg-gray-700 dark:text-blue-400 border border-blue-400">EQC</span>
                                @endif
                                <!-- hidden -->
                                <span id="{{ $l->id }}-flag-1" class="hidden inline-flex items-center justify-center w-6 h-6 text-sm font-semibold text-gray-800 bg-green-300 rounded-full dark:bg-gray-700 dark:text-gray-300">
                                    <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
                                    </svg>
                                </span>

                                <span id="{{ $l->id }}-flag-0" class="hidden inline-flex items-center justify-center w-6 h-6 text-sm font-semibold text-gray-800 bg-red-300 rounded-full dark:bg-gray-700 dark:text-gray-300">
                                    <svg class="w-3.5 h-3.5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" />
                                    </svg>
                                    <span class="sr-only">Icon description</span>
                                </span>

                                <span id="{{ $l->id }}-flag-2" class="hidden bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-sm dark:bg-gray-700 dark:text-blue-400 border border-blue-400">EQC</span>
                            </td>
                            <td class="px-2 py-3 flex justify-center whitespace-nowrap">
                                @if(!is_null($l->scrutiny_by))
                                    {{ $l->scr_name }}
                                @endif
                            </td>
                            <td class="px-2 py-3 whitespace-nowrap">
                                {{ $l->remarks }}
                            </td>
                            <td class="px-2 py-3 text-center">
                                @if($l->missing_docs === 1)
                                 *Yes
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination by *Laravel -->
             {{--
            <div class="mt-3 p-2">
                @if (method_exists($lists, 'links'))
                {{ $lists->links() }}
                @endif
            </div>
            --}}

            <div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 p-4 bg-white border-t border-gray-200 dark:bg-gray-800 dark:border-gray-700">
                <div class="flex items-center">
                    <label for="per_page" class="mr-2 text-sm font-medium text-gray-900 dark:text-white">Show</label>
                    <select id="per_page" 
                            onchange="window.location.href = this.value"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                            @foreach([10, 15, 25, 50, 100] as $size)
                                <option value="{{ request()->fullUrlWithQuery(['per_page' => $size]) }}" 
                                    {{ request('per_page') == $size ? 'selected' : '' }}>
                                    {{ $size }}
                                </option>
                            @endforeach
                    </select>
                    <span class="ml-2 text-sm font-medium text-gray-900 dark:text-white">entries</span>
                </div>

                <div class="w-full md:w-auto">
                    @if (method_exists($lists, 'links'))
                        {{ $lists->links() }}
                    @endif
                    {{--
                    <p>Total: {{ $lists->total() }}</p>
                    <p>Per Page: {{ $lists->perPage() }}</p>
                    <p>Has Pages: {{ $lists->hasPages() ? 'Yes' : 'No' }}</p>
                    --}}
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    const delay=5000;
    const fades=300;
    var appid = null;

    function scrutiny(btn) {
        appid = btn.getAttribute("data-id");

        var s_role = parseInt("{{$scrutinyMember->s_role ?? 0}}");

        $(document).off("click", `#submit-scrutiny-${appid}`);

        // Bind click event dynamically
        $(document).on("click", `#submit-scrutiny-${appid}`, function() {
            var scrutiny_status = $(`#crud-modal-${appid} input[name='scrutiny_status']:checked`).val();

            var remarks = $(`#crud-modal-${appid} #remarks`).val();

            var missing_docs = [];
            $(`#crud-modal-${appid} input[name='missing_doc[]']:checked`).each(function() {
                missing_docs.push($(this).val());
            });

            if(parseInt(scrutiny_status) == 0 || parseInt(scrutiny_status) == 1 || parseInt(scrutiny_status) == 2){
                $.ajax({
                    type: "POST",
                    url: "{{route('submit.scrutiny')}}",
                    data: {
                        _token: "{{csrf_token()}}",
                        appid: appid,
                        scrutiny_status: scrutiny_status,
                        remarks: remarks,
                        missing_docs: missing_docs
                    },
                    beforeSend: function() {
                        $(`#crud-modal-${appid} #spinner`).show();
                    },
                    success: function(response) {
                        if (response.success) {
                            $(`#crud-modal-${appid} #alert #alert-${scrutiny_status}`)
                                    .hide()
                                    .removeClass("hidden")
                                    .find(`#alert-${scrutiny_status}-msg`).text(response.msg).end()
                                    .fadeIn(fades)
                                    .delay(delay)
                                    .fadeOut(fades);

                            $(`[id^='${appid}-flag-']`).addClass("hidden"); //hide existing flag
                            $(`#${appid}-flag-${scrutiny_status}`).removeClass("hidden");
                            
                            if(s_role > 1)
                                $(`[id^='scr-${appid}-btn']`).addClass("hidden");
                        } else {
                            alert(response.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        console.error("*Error occurred:", error);
                        alert("Something went wrong! Please try again.");
                    },
                    complete: function() {
                        setTimeout(() => {
                            $(`#crud-modal-${appid} #spinner`).hide();
                        }, 500);
                        // $(`#crud-modal-${appid} #spinner`).hide();
                    },
                });
            } else {
                alert('Please check the required *Acceptance options first.');
            }
        });
    }
</script>
@endsection