<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>@yield('title', 'Sign Up')</title>




  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  @vite('resources/css/app.css')
</head>

<body>
  <div class="flex h-[100%]">
    <div class="2xl:w-[47%] lg:w-1/2 w-full flex flex-col  justify-center  bg-[#FFFFFF] bg-no-repeat" style="background-image: url('{{ asset('Sites/images/map.png') }}');">
      <div class="flex 2xl:ml-40  sm:ml-20 ml-8 mt-10  gap-2 mb-8 cursor-pointer" onclick="window.location.href='{{ url('/') }}'">
        <img src="{{ asset('Sites/images/logo-login.png') }}" />
      </div>
      <div class="2xl:w-[648px]  xl:w-[550px] desk:w-[600px] lg:w-[500px] sm:w-[90%] w-[95%] 2xl:ml-40 sm:ml-10 mb-20 h-full flex flex-col justify-center sm:mx-0 mx-auto">

        <h2 class="md:text-[44px] text-[30px] font-medium mb-10 text-[#111827] syne-medium leading-none">Sign Up to Get Started</h2>
        <label class="text-[19px] fo-m text-[#111827]">Select Role:</label>
        <div class="flex gap-6 mb-4 px-3 py-4  border-l ">
          <label class="flex items-center gap-2 text-[16px] syne-medium text-[#111827]">
            
   	<input type="radio" name="2" class="strong-dis-aggree "  checked/>
            Student
          </label>
          <label class="flex items-center gap-2 text-[16px] syne-medium text-[#111827]">
   
  
		
	  <input type="radio" name="1" class="strong-aggree "  checked/>
 
            Tutor
          </label>
        </div>
        <label class="text-[19px] fo-m text-[#111827]">First Name*</label>
        <input type="text" placeholder="Enter your First Name"
          value="Richard"
          class="w-full mt-1 mb-4 px-3 py-4 syne border-l font-medium text-[17px]  outline-none  text-[#111827]" />

        <label class="text-[19px] fo-m text-[#111827]">Last Name*</label>
        <input type="text" placeholder="Enter your Last Name"
          value="March"
          class="w-full mt-1 mb-4 px-3 py-4 syne border-l font-medium text-[17px]  outline-none  text-[#111827]" />

        <label class="text-[19px] fo-m text-[#111827]">Email*</label>
        <input type="text" placeholder="Enter your Email"
          value="test@gmail.com"
          class="w-full mt-1 mb-4 px-3 py-4 syne border-l font-medium text-[17px]  outline-none  text-[#111827]" />



        <label class="text-[19px] fo-m text-[#111827]">Password*</label>
        <input type="pasword" placeholder="Enter your Password"
          value="******"
          class="w-full mt-1 mb-4 px-3 py-4 border-l syne font-medium text-[17px]  outline-none  text-[#111827]" />



        <button command="show-modal" commandfor="signuppop" class="w-full cursor-pointer text-[19px] bg-[#F4C701] text-[#000000] syne py-4 mt-10 rounded font-medium">
          Sign up →
        </button>
        <div class="flex justify-between">

          <p class="text-[17px] text-center font-medium syne text-[#9CA3AF] mt-4">
            Already have an account?
            <a href="{{url('login')}}"  class="text-[#111827] font-medium underline ">Login</a>
          </p>
        </div>

      </div>
    </div>

    <div class="w-[53%]  lg:flex hidden items-center justify-center relative m-5 rounded-md bg-cover" style="background-image: url('{{ asset('Sites/images/auth-bg.png') }}');">


      <div class="relative text-center">
        <div class="flex justify-center mb-3">
          <img src="{{ asset('Sites/images/login-logo.png') }}" class="desk:w-full w-60" />
        </div>

      </div>
      

      <a href="{{url('login')}}" class="absolute syne font-normal top-10 right-[15%] text-white text-[18px]">
        Login >
      </a>

    </div>

  </div>



  <el-dialog>
    <dialog id="signuppop" aria-labelledby="dialog-title" class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
        <el-dialog-backdrop class="fixed inset-0 bg-gray-900/80 opacity-50 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

        <div tabindex="0" class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
            <el-dialog-panel class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[585px]   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                    <div class="flex justify-between sm:items-start">
                        <div>

                            <h1 class="text-[#181D27] fo-m sm:text-[23px] text-lg">Subscription</h1>
                        </div>
                        <button command="close" commandfor="signuppop" class="cursor-pointer">

                                 <img src="{{ asset('Sites/images/cros-icon.png') }}" />
                        </button>
                    </div>
                    <div class="mt-3">
                        <p class="fo-m text-[18px] text-[#414651] font-medium">Select Billing Cycle</p>
                        <div class="relative w-full mt-3">
                            <select
                                class="w-full appearance-none text-[#2D2D2D] fo-m text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 pr-10 rounded-[10px] bg-white">
                                <option value="Science">Yearly (15% Discount)</option>
                            </select>


                            <img
                                src="{{ asset('Sites/images/arrow-down.png') }}"
                                alt="arrow"
                                class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 " />
                        </div>
                    </div>

                    <div class="mt-3">
                        <div class="relative flex flex-col gap-5 w-full mt-3">
                            <div class="field w-full">
                              <label class="fo-m font-medium text-[#414651] text-lg">Name on Card</label>
                              <input class="w-full text-[#717680] mt-3 fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white" type="text" placeholder="John Doe">
                            </div>
                            <div class="field w-full">
                              <label class="fo-m font-medium text-[#414651] text-lg">Card Number</label>
                                <input class="w-full text-[#717680] mt-3 fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white" type="number" placeholder="-------------">
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <div class="relative flex gap-5 w-full mt-3">
                            <div class="field w-full">
                              <label class="fo-m font-medium text-[#414651] text-lg">Expiry Date</label>
                              <input class="w-full text-[#717680] mt-3 fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white" type="date" placeholder="John Doe">
                            </div>
                            <div class="field w-full">
                              <label class="fo-m font-medium text-[#414651] text-lg">Security Card</label>
                                <input class="w-full text-[#717680] mt-3 fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white" type="number" placeholder="eg: 321">
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                       <h2 class="text-[16px] font-medium mb-2 text-[#414651] fo-m  mt-5">Total Price</h2>
                        <button class="bg-[#1CD8C4] px-3 cursor-pointer border-[#D5D7DA] border rounded-[10px] w-full py-2 text-start fo-n font-semibold text-[#FFFFFF] sm:text-[22px] text-[15px]">
                            $50
                        </button>

                        <button class="bg-[#143453] px-3 cursor-pointer border-[#143453] border rounded-[10px] w-full  py-3 text-[#FFFFFF] fm-xb mt-3  text-lg">
                            Subscribe Now
                        </button>
                    </div>


                </div>

            </el-dialog-panel>
        </div>
    </dialog>
</el-dialog>


</body>

</html>