@extends('layouts.app')

@section('nav-links')
@include('imports.nav-links',['navItem'=> 'landing'])
@endsection

@section('contents')
<div class="mt-3 flex flex-col items-center">
    <h1 class="mb-5 text-lg font-semibold leading-none tracking-tight text-gray-900 md:text-2xl lg:text-3xl dark:text-white underline">
        Jobs Automation System</h1>

    <p class="text-justify text-gray-900 font-semibold leading-relaxed text-md px-5 xl:px-48 dark:text-gray-400">Welcome to <span class="font-extrabold">Jobs Automation System</span> : A streamlined admission and management platform for RUET postgraduate students. From online circulars to application submission and administrative processing — everything is managed in one place, which is saving time and effort.</p>

    <!-- circular -->
    @if($circulars->count())
    <div class="mt-10 mb-5 mx-auto px-2">
        <p class="mb-2 text-sm sm:text-center font-semibold text-gray-700 dark:text-gray-400">For better performance we recommended to use Google Chrome <i class="fa-brands fa-chrome text-red-500"></i>.</p>
        <div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md sm:rounded-lg">
            <table class="w-full text-md text-left text-gray-500 dark:text-gray-400">
                <thead class="text-sm text-gray-700 uppercase bg-gray-300 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-3 py-3">Circular-Title</th>
                        <th scope="col" class="px-3 py-3 whitespace-nowrap">Application-Start</th>
                        <th scope="col" class="px-3 py-3 whitespace-nowrap">Application-End</th>
                        <th scope="col" class="px-3 py-3">Fees</th>
                        <th scope="col" class="px-3 py-3">Details</th>
                        <th scope="col" class="px-3 py-3">Action</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    @foreach($circulars as $circular)
                    <tr class="border-b dark:border-gray-700">
                        <th scope="row" class="px-3 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">{{$circular->title}}</th>
                        <td class="px-3 py-3">{{\Carbon\Carbon::parse($circular->app_start)->format('d/m/Y')}}</td>
                        <td class="px-3 py-3">{{\Carbon\Carbon::parse($circular->app_end)->format('d/m/Y')}}</td>
                        <td class="px-3 py-3">{{$circular->fees}}</td>
                        <td class="px-3 py-3 text-center">
                            <a href="{{route('vw.notice', ['filename' => $circular->notice])}}" download class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
                            View
                            <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 flex items-center justify-center whitespace-nowrap">
                            @if(!intval($circular->expired))
                            <a href="{{route('apply.circulars')}}" class="bg-indigo-100 text-indigo-800 text-sm font-medium px-2 py-0.5 rounded dark:bg-indigo-700 dark:text-indigo-400 border border-indigo-500"><i class="fa-solid fa-arrow-pointer fa-beat-fade pe-.5"></i> Apply Now!</a>
                            @else
                            <span class="bg-pink-100 text-pink-800 text-sm font-medium px-2.5 py-1 rounded-sm dark:bg-gray-700 dark:text-pink-400 border border-pink-400"><i class="fa-solid fa-calendar-xmark"></i> Expired</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @else
    <div id="alert-4" class="mt-10 flex items-center p-4 text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300" role="alert">
        <svg class="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">
            <!-- A simple info alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Give it a click if you like. -->
            There is no circular currently running. Please keep your eyes open.
        </div>
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-yellow-50 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700" data-dismiss-target="#alert-4" 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
</div>
@endsection

@section('scripts')
<script>
    function updateClock() {
        let serverTime = new Date("{{ $serverTime }}"); // Server time from Laravel
        setInterval(function() {
            serverTime.setSeconds(serverTime.getSeconds() + 1); // Increment seconds

            // Extract date components
            let day = serverTime.getDate().toString().padStart(2, '0'); // Ensures two digits
            let month = (serverTime.getMonth() + 1).toString().padStart(2, '0'); // Months are 0-based
            let year = serverTime.getFullYear();

            let dateStr = `${day}/${month}/${year}`; // Format as DD/MM/YYYY
            let timeStr = serverTime.toLocaleTimeString(); // Get time

            document.getElementById('serverClock').innerText = dateStr + " " + timeStr;
        }, 1000);
    }

    // updateClock();
</script>
@endsection