@extends('layouts.applicant')

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

@section('contents')
<section class="bg-white w-8/12 mx-auto rounded-lg mt-5 dark:bg-gray-900">
    <div class="py-4 px-4 mx-auto max-w-3xl lg:py-8">

        @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">
                Application is done successfully. <a href="{{route('ssl.payment', ['appId' => Session::get('success')])}}" class="font-semibold underline hover:no-underline">Pay Now!</a>
                @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

        <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white"><span><i class="fa-solid fa-computer-mouse me-1"></i> Apply Circular</span></h2>
        <hr class="h-px my-0 bg-gray-400 border-0 dark:bg-gray-700">

        <div class="relative border rounded-lg p-5 mt-5">
            @if($circulars->count())
                <form action="{{route('save.circulars')}}" method="POST">
                    @csrf
                    <div class="grid gap-2 sm:grid-cols-2 sm:gap-4">
                        <div class="sm:col-span-2">
                            <label for="circular" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Circular*</label>
                            <select id="circular" name="circular" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.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" required>
                                <option value="" disabled selected>Choose Your Circular</option>
                                @foreach($circulars as $circular)
                                <option value="{{$circular->id}}">{{$circular->title}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="posts" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Post*</label>
                            <select id="posts" name="posts" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.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" required>
                                <option value="" disabled selected>*Choose Your Post</option>
                            </select>
                        </div>
                        <div>
                            <label for="depts" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Department/Office*</label>
                            <select id="depts" name="depts" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.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" required>
                                <option value="" disabled selected>*Choose a Department/Office</option>
                            </select>
                        </div>
                    </div>
                    <p id="helper-text" class="mt-5 text-sm font-semibold text-indigo-500 dark:text-indigo-400">N.B. Please check your profile carefully before apply as profile will be locked after successful payment.</p>
                    @if(intval($profile->profile_id))
                        <button type="submit" class="inline-flex w-full sm:w-1/2 justify-center items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
                            <span><i class="fa-solid fa-hand-pointer me-1"></i> Apply Now</span>
                        </button>
                    @else
                        @include('widgets.i-alerts',['msg'=> 'Please complete your profile first'])
                    @endif
                </form>
            @else
                @include('widgets.d-alerts',['msg'=> 'There is no circular running right now.'])
            @endif
            @include('widgets.spinner')
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $("#circular").on('change', function() {
            var circularId = $(this).val();

            $("#posts").empty();
            $("#posts").append('<option value="" disabled selected>*Choose Post</option>');
            $("#depts").empty();
            $("#depts").append('<option value="" disabled selected>*Choose Dept./Office</option>');

            $.ajax({
                type: "GET",
                url: "{{route('list.posts')}}",
                data: {
                    'circularId': circularId
                },
                success: function(response) {
                    if (response.status === 'Success') {
                        $("#posts").html(response.html);
                    } else if (response.status === 'Failed') {
                        alert(`${response.msg}/Context: ${response.context}`);
                    }
                },
                beforeSend: function() {
                    $('#spinner').removeClass('hidden');
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", error);
                    alert("An error occurred while fetching posts. Please try again.");
                },
                complete: function() {
                    $('#spinner').addClass('hidden');
                }
            });
        });

        $("#posts").on('change', function() {
            var postId = $(this).find(':selected').data('postid');

            $.ajax({
                type: "GET",
                url: "{{route('list.depts')}}",
                data: {
                    'postId': postId
                },
                success: function(response) {
                    if (response.status === 'Success') {
                        $("#depts").html(response.html);
                    } else if (response.status === 'Failed') {
                        alert(`${response.msg}/Context: ${response.context}`);
                    }
                },
                beforeSend: function() {
                    $('#spinner').removeClass('hidden');
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", error);
                    alert("An error occurred while fetching depts. Please try again.");
                },
                complete: function() {
                    $('#spinner').addClass('hidden');
                }
            });
        });
    });
</script>
@endsection