@extends('layouts.dashboard')

@section('contents')
<section class="bg-white w-7/12 mx-auto rounded-lg mt-5 dark:bg-gray-900">
    <div class="py-4 px-4 mx-auto max-w-2xl 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">
                {{ 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
        <div class="flex justify-between items-center mb-5">
            <h2 class="lora-wt text-lg font-bold text-gray-900 dark:text-white"><span>Add Scrutiny Committee</span></h2>

            <div class="sm:ml-10 flex flex-grow items-center">
                <label for="search" class="sr-only">Search</label>
                <div class="relative w-full">
                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                        <i class="fa-solid fa-envelope-circle-check"></i>
                    </div>
                    <input type="text" id="search" name="search" 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 ps-10 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" placeholder="Search official email" autocomplete="off" required />

                    <div id="members-list" class="hidden absolute z-20 inset-x-0 bg-gray-50 rounded-lg border border-2 border-gray-100">
                        <ul class="lora-wt h-auto max-h-72 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-700">
                        </ul>
                    </div>
                </div>
                <button id="submit" type="button" class="p-2.5 ms-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    <svg class="w-4 h-4 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>
                    </svg>

                    <span class="sr-only">Search</span>
                </button>
            </div>
        </div>

        <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">
            <form id="create-committee" class="mt-2" action="{{ route('save.scrutiny') }}" method="POST">
                @csrf
                <div class="merriweather-wt grid gap-2 sm:grid-cols-2 sm:gap-5">
                    <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 id="post_n_types">
                        <button id="ddownCircularPostButton" data-dropdown-toggle="ddownCircularPost" class="w-full text-dark bg-gray-100 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
                            <span>*Select Post & Type</span>
                            <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="ddownCircularPost" class="z-10 hidden bg-gray-50 divide-y divide-gray-100 rounded-lg shadow-sm w-80 border-2 border-solid border-gray-300 dark:bg-gray-700 dark:divide-gray-600">
                            <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="ddownCircularPostButton">
                                <li class="flex items-center">
                                    <svg class="w-3.5 h-3.5 me-2 text-red-500 dark:text-red-400 shrink-0" 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 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
                                    </svg>
                                    No post(s) enlisted !
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div id="post_4_depts">
                        <button id="ddownCircularDeptsButton" data-dropdown-toggle="ddownCircularDepts" class="w-full text-dark bg-gray-100 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
                            <span>*Select Dept(s)/Offices</span> 
                            <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="ddownCircularDepts" class="z-10 hidden w-80 bg-gray-50 rounded-lg shadow-sm border-2 border-solid border-gray-300 dark:bg-gray-700">
                            <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="ddownCircularDeptsButton">
                                <li class="flex items-center">
                                    <svg class="w-3.5 h-3.5 me-2 text-red-500 dark:text-red-400 shrink-0" 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 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
                                    </svg>
                                    No Dept(s)/Offices enlisted !
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="sm:col-span-2">
                        <div class="inline-flex items-center justify-center w-full">
                            <hr class="w-64 h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
                            <span class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-900">Committee</span>
                        </div>
                    </div>

                </div>

                <div class="relative mx-auto overflow-x-auto shadow-md sm:rounded-lg">
                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                        <thead class="merriweather-wt text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="px-6 py-3">
                                    Name & Identity
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Role of Committee
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody id="tbl-body">
                        </tbody>
                    </table>
                </div>

                <button type="submit" class="inline-flex 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-circle-plus me-1"></i> Create Scrutiny Committee</span>
                </button>
            </form>
            @include('widgets.spinner')
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    let member_sl = 0;
    const min_scr_members = parseInt("{{env('MIN_SCR_MEMBER')}}");

    $(document).ready(function() {
        $("#circular").on('change', function() {
            var circularId = $(this).val();

            $('#ddownCircularPost input[type="radio"]').prop('checked', false);
            $('#ddownCircularPostButton span').text('*Select Post & Type').removeClass('font-extrabold text-red-600 font-bold');

            $.ajax({
                type: "GET",
                url: "{{route('admin.list.posts')}}",
                data: {
                    'circularId': circularId
                },
                success: function(response) {
                    if (response.status === 'Success') {
                        $("#ddownCircularPost ul").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');
                }
            });
        });

        $(document).on('change', '#ddownCircularPost input[type="radio"]', function(event) {
            event.preventDefault();
            const selectedPost = $(this).closest('li').find('label div').text();
            $('#ddownCircularPostButton span').text(selectedPost).addClass('font-extrabold').removeClass('text-red-600 font-bold');
            $('#ddownCircularPostButton').click();

            $('#ddownCircularDepts input[type="checkbox"]').prop('checked', false);
            $('#ddownCircularDeptsButton span').text('*Select Ofc/Department(s)').removeClass('font-extrabold text-red-600 font-bold');

            // fetching-depts
            const postId = $(this).data('postid');
            $.ajax({
                type: "GET",
                url: "{{route('admin.list.depts')}}",
                data: {
                    'postId': postId
                },
                success: function(response) {
                    if (response.status === 'Success') {
                        $("#ddownCircularDepts ul").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');
                }
            });
        });

        $(document).on('change', '#ddownCircularDepts input[type="checkbox"]', function(event) {
            const $button = $('#ddownCircularDeptsButton');
            const checkedCount = $('#ddownCircularDepts input[type="checkbox"]:checked').length;

            if(checkedCount > 0) {
                $button.find('span').text(`Depts./Offices - ${checkedCount} selected.`).addClass('font-extrabold').removeClass('text-red-600 font-bold');
            } else {
                $button.find('span').text('*Select Ofc/Department(s)').removeClass('font-extrabold');
            }
        });

        $("#search").on('input', function() {
            $("#members-list").addClass('hidden');
        });

        $(document).on('click', function(e) {
            const isClickInsideDropdown = $(e.target).closest('#members-list').length > 0;

            if(!isClickInsideDropdown)
                $("#members-list").addClass('hidden');
        });

        $("#submit").on('click', function() {
            var searchEmail = $("#search").val();

            $.ajax({
                type: "GET",
                url: "{{route('search.scrutiny.members')}}",
                data: {
                    'email': searchEmail
                },
                success: function(response) {
                    if (response.status === 'Success') {
                        $("#members-list").removeClass('hidden');
                        $("#members-list ul").html(response.html);
                        $("#members-list ul li").addClass("cursor-pointer");
                    } 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');
                }
            });
        });

        $(document).on('click', '#members-list ul li', function() {
            const apiId = $(this).data('id');
            const name = $(this).data('name');
            const email = $(this).data('email');
            const designation = $(this).data('designation');
            const dept = $(this).data('dept');
            const mobile = $(this).data('mobile');
            const pro_pic = $(this).find('img').attr('src');
            $("#members-list").addClass('hidden');
            makeMemberList(apiId,name,email,designation,dept,mobile,pro_pic);
        });

        function makeMemberList(apiId,name,email,designation,dept,mobile,pro_pic) {
            member_sl += 1;

            $("#tbl-body").append(
                `
                <tr class="lora-wt bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
                    <th scope="row" class="flex items-center px-3 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                        <img class="w-10 h-10 rounded-full" src="${pro_pic}" alt="${name}-img">
                        <div class="ps-3">
                            <div class="text-base font-semibold">${name}</div>
                            <div class="text-sm font-medium text-gray-500">${designation}</div>
                            <div class="text-xs font-medium text-gray-500">${email}</div>
                        </div>
                        <input type="hidden" name="scr_apiId[]" value="${apiId}" />
                        <input type="hidden" name="scr_name[]" value="${name}" />
                        <input type="hidden" name="scr_email[]" value="${email}" />
                        <input type="hidden" name="scr_designation[]" value="${designation}" />
                        <input type="hidden" name="scr_dept[]" value="${dept}" />
                        <input type="hidden" name="scr_mobile[]" value="${mobile}" />
                        <input type="hidden" name="scr_pro_pic[]" value="${pro_pic}" />
                    </th>
                    <td class="px-6 py-4 text-gray-700">
                        <span class="${member_sl === 1 ? 'bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-green-400 border border-green-400' : 'bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-yellow-300 border border-yellow-300'}">${member_sl === 1 ? 'Chairman' : 'Member'}</span>
                    </td>
                    <td class="px-6 py-4">
                        <button type="button" class="row-del-id text-red-600 bg-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:bg-gray-100 dark:hover:bg-gray-200 dark:focus:ring-gray-200">
                            <i class="fa-solid fa-trash-can"></i>
                            <span class="sr-only">Delete</span>
                        </button>
                    </td>
                </tr>
                `
            );
        }

        $(document).on('click', '.row-del-id', function(event) {
            $(this).parents('tr').remove();
            memeber_sl -= 1;
            $("#members-list").addClass('hidden'); //ghost-behave
        });

        $('#create-committee').on('submit', function(event) {
            const isPostSelected = $('#ddownCircularPost input[type="radio"]:checked').length > 0;
            const isDeptSelected = $('#ddownCircularDepts input[type="checkbox"]:checked').length > 0;

            if (!isPostSelected || !isDeptSelected || member_sl < min_scr_members) {
                event.preventDefault();
                if(!isPostSelected) 
                    $('#ddownCircularPostButton').find('span').addClass('text-red-600 font-bold');

                if(!isDeptSelected) 
                    $('#ddownCircularDeptsButton').find('span').addClass('text-red-600 font-bold');

                if(member_sl < min_scr_members)
                    alert(`Wait! You must have to select minimum ${min_scr_members} scrutiny members to proceed.`);
                else
                    alert("Wait! You must select Post AND Ofc/Department to proceed.");
                return false;
            }
        });
    });
</script>
@endsection