@extends('organizations.layouts.default')
@section('content')
    {!! htmlScriptTagJsApi() !!}
    <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>

                <div class="grid grid-cols-1 gap-7.5 sm:grid-cols-2 xl:grid-cols-2">
                    <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">
                                <a href="#">Simple Form</a>
                            </h4>
                        </div>
                        <div class="px-4 pb-4 pt-6">
                            <p class="font-medium">
                                <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> Download Report</li>
                                </ul>
                            </p>
                        </div>
                        <div class="px-4 py-6">
                            <a type="button"
                                class="text-white bg-blue-700 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-blue-700 dark:focus:ring-blue-900"
                                href="{{ route('organization.tenders.simple.form') }}">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">
                                <a href="#">Advance Form</a>
                            </h4>
                        </div>
                        <div class="px-7.5 pb-4 pt-6">
                            <p class="font-medium">
                                <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> Use Templates</li>
                                    <li><i class="bi bi-check-lg"></i> Set Evaulation Criterias</li>
                                    <li><i class="bi bi-check-lg"></i> Download Report</li>
                                </ul>
                            </p>
                        </div>
                        <div class="px-7.5 py-6">
                            <a type="button"
                                class="text-white bg-blue-700 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-blue-700 dark:focus:ring-blue-900"
                                href="{{ route('organization.tenders.wizard.form') }}">Start <i
                                    class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-1 pt-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 tender 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 ">
                            {{-- <a type="button" id="openModal"
                                class="text-white bg-blue-700 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-blue-700 dark:focus:ring-blue-900"
                                href="#">Send Your Details <i class="bi bi-arrow-right"></i>
                            </a> --}}
                            <!--  modal -->
<div x-data="{modalOpen: false}">
    <a type="button"  @click="modalOpen = true"
    class="text-white bg-blue-700 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-blue-700 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="F002" />
                        {{ 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-blue-700 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-blue-700 dark:focus:ring-blue-800" value="Submit your details" />

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

</div>
</div>
<!-- modal end -->
                        </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