@extends('layouts.dashboard')

@section('contents')
<p class="lora-wt text-3xl font-bold text-center text-gray-700 dark:text-gray-900 mt-5 mb-5">
    <i class="fa-solid fa-folder-closed"></i> Submit Reports to <span class="bg-white text-blue-800 px-2.5 py-0.5 rounded dark:bg-white dark:text-blue-800">
        @if(!is_null($scrutinyInfo) && intval($scrutinyInfo->s_role) > 1)
            Chairman
        @elseif(!is_null($scrutinyInfo) && intval($scrutinyInfo->s_role) === 1)
            Head, {{strtoupper($scrutinyInfo->dept)}}
        @else
            XXX
        @endif
    </span>
</p>
<!-- <p class="oswald-wt mb-5 text-md text-center font-bold text-gray-500 lg:text-md sm:px-16 xl:px-48 dark:text-gray-400">Department of CSE</p> -->

<section class="p-2">
    <div class="mx-auto max-w-screen-lg px-2">
        @if(Session::has('success'))
        <div id="alert-3" class="flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-200 dark:bg-gray-800 dark:text-green-400" role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Info</span>
            <div class="ms-3 text-sm font-medium">
                {{ Session::get('success') }}
                @php
                Session::forget('success');
                @endphp
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-3" aria-label="Close">
                <span class="sr-only">Close</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                </svg>
            </button>
        </div>
        @elseif(Session::has('failed'))
        <div id="alert-0" class="flex items-center p-4 mb-4 text-red-800 rounded-lg bg-red-200 dark:bg-gray-800 dark:text-red-400" role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
            </svg>
            <span class="sr-only">Info</span>
            <div class="ms-3 text-sm font-medium">
                <p>{{ Session::get('failed') }}</p>
                @php
                Session::forget('failed');
                @endphp
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-0" aria-label="Close">
                <span class="sr-only">Close</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                </svg>
            </button>
        </div>
        @endif
        <!-- Start coding here -->
        <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
            <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-xs text-gray-900 uppercase 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-2 py-3">Dept</th>
                            <th scope="col" class="px-3 py-3">Degree</th>
                            <th scope="col" class="px-3 py-3">Program-Type</th>
                            <th scope="col" class="px-2 py-3">Status</th>
                            <th scope="col" class="px-2 py-3">Remarks</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->name }}</th>
                            <td class="px-3 py-3">{{ $l->father }}</td>
                            <td class="px-3 py-2">{{ strtoupper($l->dept) }}</td>
                            <td class="px-3 py-3">{{ $l->degree }}</td>
                            <td class="px-3 py-3">
                                {{$l->time}}
                            </td>
                            <td class="px-2 py-3 text-center">
                                <!-- marked-status -->
                                @if($l->acceptance == 1)
                                <span id="{{ $l->id }}-flag-1" 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-0" 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>
                                @endif
                            </td>
                            <td class="px-2 py-3">{{ $l->remarks }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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

        <form class="w-full text-center" action="{{route('submit.reports')}}" method="POST">
            @csrf
            <input type="hidden" name="reporter" value="{{$appusr->id}}" />
            <input type="hidden" name="circular" value="{{$circular->id}}" />

            <button type="submit" class="mt-5 mb-5 mx-auto focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"><i class="fa-solid fa-share me-2"></i>Send Reports</button>
        </form>
    </div>
</section>
@endsection

@section('scripts')
<script>
</script>
@endsection