@extends('organizations.layouts.default')
@section('content')
    <main>
        <div class="max-w-screen-2xl mx-auto p-2 md:p-2 2xl:p-4">
            <div class="text-title-xsm">
                <div class="flex justify-between m-0 p-0">
                    <!-- Breadcrumb Start -->
                    @include('organizations.layouts.partials.breadcrumb')
                </div>
                <hr class="text-white my-3">
                <div class="my-3">
                </div>
                @include('organizations.rosters.partials.nav')
                <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">

                    <div class="grid grid-cols-1 gap-7.5 sm:grid-cols-2 xl:grid-cols-2 p-4">
                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke p-2 px-7.5 dark:border-strokedark">
                                <h4 class="text-xl font-semibold text-black dark:text-white">
                                    Simple Form
                                </h4>
                            </div>
                            <div class="px-4 pb-4 pt-4">
                                <ul class="list-inside list-none mb-4">
                                    <li><i class="bi bi-check-lg"></i> Single form</li>
                                    <li><i class="bi bi-check-lg"></i> Easy to publish your notice</li>
                                    <li><i class="bi bi-check-lg"></i> English Notice Template</li>
                                    <li><i class="bi bi-check-lg"></i> Nepali Notice Template</li>
                                    <li><i class="bi bi-check-lg"></i> Simple Report</li>
                                </ul>
                            </div>
                            <div class="px-7.5 py-6">
                                <a type="button"
                                    class="text-white bg-brandBlue hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-brandBlue dark:focus:ring-blue-900"
                                    href="{{ route('organization.rosters.wizard2') }}">Start
                                    <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>

                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke p-2 px-7.5 dark:border-strokedark">
                                <h4 class="text-xl font-semibold text-black dark:text-white">
                                    Advance Form
                                </h4>
                            </div>
                            <div class="px-4 pb-4 pt-4">
                                <ul class="list-inside mb-2 list-none">
                                    <li><i class="bi bi-check-lg"></i> Step by Step Assistance</li>
                                    <li><i class="bi bi-check-lg"></i> Online evaluation by system</li>
                                    <li><i class="bi bi-check-lg"></i> English Notice Template</li>
                                    <li><i class="bi bi-check-lg"></i> Nepali Notice Template</li>
                                    <li><i class="bi bi-check-lg"></i> Comprehensive Report</li>
                                </ul>
                            </div>
                            <div class="px-7.5 py-6">
                                <a type="button"
                                    class="text-white bg-brandBlue hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-brandBlue dark:focus:ring-blue-900"
                                    href="{{ route('organization.rosters.wizard1') }}">Start <i
                                        class="bi bi-arrow-right"></i>

                                </a>
                            </div>
                        </div>

                    </div>





                    <div class="grid grid-cols-1 gap-7.5 sm:grid-cols-1 xl:grid-cols-1 p-4">
                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke p-2 px-7.5 dark:border-strokedark">
                                <div class="text-xl font-semibold text-black dark:text-white flex justify-center">
                                    Having trouble to publish your notice?
                                </div>
                            </div>
                            <div class="px-7.5 pb-4 pt-4 grid  grid-cols-8 gap-1">
                                <div>
                                    <img class="w-16" src="/images/icon/phone.png" class="" />
                                </div>
                                <div class="font-medium col-span-7 align-middle">
                                    If you are having trouble to publish notices please send your details to us. Our experts
                                    will contact you and publish the notice as per your requirement. </div>
                            </div>
                            <div class="px-7.5 py-6 ">

                                <!--  modal -->
                                <div x-data="{ modalOpen: false }">
                                    <a type="button" @click="modalOpen = true"
                                        class="text-white bg-brandBlue hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-brandBlue dark:focus:ring-blue-900"
                                        href="#">Send Your Details <i class="bi bi-arrow-right"></i>
                                    </a>
                                    <div x-show="modalOpen" x-transition
                                        class="fixed left-0 top-0 z-999999 flex h-[calc(100vh-4px)] min-h-screen w-full  overflow-y-scroll items-center justify-center bg-black/10 px-4 mb-10">
                                        <div @click.outside="modalOpen = false"
                                            class="rounded-lg bg-white px-1 py-1 text-center dark:bg-boxdark md:px-1.5 md:py-2">
                                            <!-- Main modal -->
                                            <div id="authentication-modal" tabindex="-1" aria-hidden="true" class="">
                                                <div class="relative p-4 w-full ">
                                                    <!-- Modal content -->
                                                    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                                                        <!-- Modal header -->
                                                        <div
                                                            class="flex items-center justify-between p-2 md:p-4 border-b rounded-t dark:border-gray-600">
                                                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                                                                Please provide us your notice details.
                                                            </h3>

                                                            <button @click="modalOpen = false" type="button"
                                                                class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                                                                data-modal-hide="authentication-modal">
                                                                <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>
                                                                <span class="sr-only">Close modal</span>
                                                            </button>
                                                        </div>
                                                        <!-- Modal body -->
                                                        <div class="p-1 md:p-3">
                                                            <form class="space-y-1" action="#" id="myForm">
                                                                @csrf
                                                                <div class="flext text-left  text-base">One of our
                                                                    representative will contact you for more details.</div>
                                                                <div id="failed-alert"
                                                                    class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative hidden"
                                                                    role="alert">
                                                                </div>
                                                                <div id="success-alert"
                                                                    class="items-center p-4 mb-4 text-green-900 rounded-lg bg-green-100 dark:bg-gray-800 dark:text-green-400 hidden"
                                                                    role="alert">
                                                                </div>
                                                                <div
                                                                    class="grid grid-cols-1 md:grid-cols-3 gap-2 text-left">
                                                                    <input type="hidden" name="form_type" value="F001" />
                                                                    {{ ym_input([
                                                                        'label' => 'Name',
                                                                        'type' => 'text',
                                                                        'name' => 'contact_name',
                                                                        'required' => true,
                                                                        'value' => $userInfo['name'],
                                                                    ]) }}
                                                                    {{ ym_input([
                                                                        'label' => 'Email',
                                                                        'id' => 'contact-email',
                                                                        'type' => 'text',
                                                                        'name' => 'contact_email',
                                                                        'required' => true,
                                                                        'value' => $userInfo['email'],
                                                                    ]) }}
                                                                    {{ ym_input([
                                                                        'label' => 'Mobile',
                                                                        'type' => 'text',
                                                                        'name' => 'contact_phone',
                                                                        'required' => true,
                                                                        'value' => $userInfo['phone'],
                                                                    ]) }}

                                                                </div>
                                                                <div class="flex flex-col justify-start text-left">
                                                                    <div class="mb-4.5 w-full">
                                                                        <label
                                                                            class="font-semibold text-black dark:text-white">Your
                                                                            Details</label>
                                                                        <span class="text-danger">*</span>
                                                                        <textarea
                                                                            class="w-full rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none mt-2.5
                         transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter
                         dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary border-stroke"
                                                                            rows="5" name="contact_message" id="contact_message" placeholder="Your Details" required></textarea>
                                                                    </div>
                                                                </div>



                                                                <input id="btn-frm-submit" type="button"
                                                                    onclick="submitForm()"
                                                                    class="w-full text-white bg-brandBlue 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 dark:bg-blue-600 dark:hover:bg-brandBlue dark:focus:ring-blue-800"
                                                                    value="Submit your details" />

                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <!-- modal end -->
                                </div>
                            </div>



                        </div>

                    </div>
                </div>
            </div>
    </main>
    <script>
        function submitForm() {
            const formId = 'myForm'
            const form = document.getElementById(formId);
            const formData = new FormData(form);
            if (!validateEmail(formData.get('contact_email'))) {
                displayErrMessage('Invalid Email adress')
                return false;
            }
            if (isEmpty(formData.get('contact_message'))) {
                displayErrMessage('Please provide your message')
                return false;
            }
            const response = ymPostFormData('{{ url('organization/contactus') }}', formId);
        }
    </script>
@endsection