@extends('apple')
@section('title', 'Registration Ex-student')
@section('content')
<!-- =========================
 HERO SECTION
========================= -->

<section class="relative bg-indigo-800 text-white">

    <div class="absolute inset-0">

        <img src="{{ asset('images/ac3.jpg') }}"
             class="w-full h-full object-cover opacity-30">

    </div>

    <div class="relative max-w-7xl mx-auto px-6 py-28 text-center">

        <h2 class="text-3xl md:text-5xl font-bold mb-6">
            Registration Ex-student
        </h2>

        <p class="text-lg md:text-xl max-w-3xl mx-auto mb-8">
           Silver Jubilee Reunion & Cultural Festival 2027
        </p>
       <a href="{{route('Registration_Reunion_regular.show')}}"
           class="bg-yellow-400 text-black px-8 py-4 rounded-full font-semibold hover:bg-yellow-300 transition">

            Register(Running stu.)
        </a>
         <!-- Scroll -->
        <div class="mt-16 animate-bounce">

            <svg xmlns="http://www.w3.org/2000/svg"
                 class="w-8 h-8 mx-auto text-white"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor">

                <path stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M19 9l-7 7-7-7"/>

            </svg>

        </div>
    </div>

</section>

<!-- =========================
 REGISTRATION
========================= -->

<section class="py-20 bg-gradient-to-b from-indigo-200 to-indigo-300">
        @if ($errors->any())
            <div class="bg-red-100 text-red-700 p-4 mb-4 rounded">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    <div class="max-w-5xl mx-auto px-6">

        <!-- Header -->
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold text-indigo-700">
                Reunion Registration Form (Alumni Ex-student)
            </h2>
            <p class="text-gray-600 mt-2">
                Please enter your correct information in English.
            </p>
            <p class="text-red-600 mt-2">
                Registration will remain open until October 13, 2026.
            </p>
        </div>

        <!-- Form -->
<form method="POST" action="{{route('Registration_Reunion_Exstudent.store')}}" enctype="multipart/form-data"
    class="bg-teal-100 p-10 rounded-3xl shadow-2xl space-y-6">

     @csrf

    <!-- Row 1 -->
    <div class="grid md:grid-cols-2 gap-6">

        <div>
            <label for="name" class="block font-medium text-gray-700">
                Full Name (Write in English)
            </label>

            <input
                type="text"
                id="name"
                name="name"
                placeholder="Write your full name"
                required
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
        </div>

        <div>
            <label for="father_name" class="block font-medium text-gray-700">
                Father's Name (Write in English)
            </label>

            <input
                type="text"
                id="father_name"
                name="father_name"
                placeholder="Write your father's name"
                required
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
        </div>

    </div>

    <!-- Row 2 -->
    <div class="grid md:grid-cols-2 gap-6">

        <div>
            <label for="email" class="block font-medium text-gray-700">
                Email Address (Write in English)
            </label>

            <input
                type="email"
                id="email"
                name="email"
                placeholder="example@gmail.com (Optional)"
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
        </div>

        <div>
            <label for="address" class="block font-medium text-gray-700">
                Address (Write in English)
            </label>

            <textarea
                id="address"
                name="address"
                rows="3"
                placeholder="Write your address"
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"></textarea>
        </div>

    </div>

    <!-- Row 3 -->
    <div class="">

        <div>
            <label for="mobile" class="block font-medium text-gray-700">
                Mobile Number (Write in English)
            </label>

            <input
                type="tel"
                id="mobile"
                name="mobile"
                placeholder="01XXXXXXXXX"
                maxlength="11"
                pattern="^01[3-9]\d{8}$"
                autocomplete="off"
                required
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
        </div>

            <!-- Gender -->
    <div>

        <label for="Gender" class="block font-medium text-gray-700">
            Gender
        </label>

        <select
            id="gender"
            name="gender"
            value="{{ old('gender') }}"
            required
            class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
             @error('gender')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror

            <option value="" selected disabled>
                Select Gender
            </option>

            <option value="Male">
                Male
            </option>
             <option value="Male">
                Female
            </option>

        </select>
        @error('Gender')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror

    </div>

        <div>
            <label for="class" class="block font-medium text-gray-700">
                Passing Year (Batch)
            </label>

            <select
                id="batch"
                name="batch"
                onchange="calculateFeeAlumni()"
                required
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">

                <option value="" selected disabled>Select your passing year</option>
                <option value="SSC_2009">SSC-2009</option>
                <option value="SSC_2010">SSC-2010</option>
                <option value="SSC_2011">SSC-2011</option>
                <option value="SSC_2012">SSC-2012</option>
                <option value="SSC_2013">SSC-2013</option>
                <option value="SSC_2014">SSC-2014</option>
                <option value="SSC_2015">SSC-2015</option>
                <option value="SSC_2016">SSC-2016</option>
                <option value="SSC_2017">SSC-2017</option>
                <option value="HSC_2017">HSC-2017</option>
                <option value="SSC_2018">SSC-2018</option>
                <option value="HSC_2018">HSC-2018</option>
                <option value="SSC_2019">SSC-2019</option>
                <option value="HSC_2019">HSC-2019</option>
                <option value="SSC_2020">SSC-2020</option>
                <option value="HSC_2020">HSC-2020</option>
                <option value="SSC_2021">SSC-2021</option>
                <option value="HSC_2021">HSC-2021</option>
                <option value="SSC_2022">SSC-2022</option>
                <option value="HSC_2022">HSC-2022</option>
                <option value="SSC_2023">SSC-2023</option>
                <option value="HSC_2023">HSC-2023</option>
                <option value="SSC_2024">SSC-2024</option>
                <option value="HSC_2024">HSC-2024</option>
                <option value="SSC_2025">SSC-2025</option>
                <option value="HSC_2025">HSC-2025</option>
                <option value="SSC_2026">SSC-2026</option>
                <option value="HSC_2026">HSC-2026</option>

            </select>
        </div>

    </div>

    <!-- Row 4 -->
    <div class="grid md:grid-cols-2 gap-6">
         <div>
            <label for="occupation" class="block font-medium text-gray-700">
                Current Occupation (Write in English)
            </label>

            <input
                type="text"
                id="occupation"
                name="occupation"
                placeholder="Write your current occupation."
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
        </div>
        <div>
            <label for="tshirt_size" class="block font-medium text-gray-700">
                T-Shirt Size
            </label>

            <select
                id="tshirt_size"
                name="tshirt_size"
                required
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">

                <option value="" selected disabled>Select Size</option>
                <option value="S">S</option>
                <option value="M">M</option>
                <option value="L">L</option>
                <option value="XL">XL</option>
                <option value="XXL">XXL</option>

            </select>
        </div>

        <div>
            <label for="guests" class="block font-medium text-gray-700">
                Number of Guests (Per head TK 800)-(Write in English)
            </label>

            <input
            type="number"
            id="guests"
            name="guests"
            min="0"
            max="20"
            value="0"
            onchange="calculateFeeAlumni()"
            onkeyup="calculateFeeAlumni()"
            class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
        </div>
         <div>

        <label for="paid_amount" class="block font-medium text-gray-700">
            Paid Amount
        </label>

        <input
            type="number"
            id="paid_amount"
            name="paid_amount"
            readonly
            required
            class="w-full mt-2 border border-gray-300 bg-gray-100 rounded-xl p-4 cursor-not-allowed">

    </div>

    </div>

    <!-- Paid Amount -->
   

    <!-- Payment Method -->
    <div>

        <label for="payment_method" class="block font-medium text-gray-700">
            Payment Method (অনুগ্রহ করে send money করুন।)
        </label>

        <select
            id="payment_method"
            name="payment_method"
            required
            class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">

            <option value="" selected disabled>
                Select Payment Method
            </option>

            <option value="Bkash (01796-457330)">
                Bkash (01796-457330)
            </option>

        </select>

    </div>

    <!-- Transaction Number -->
    <div>

        <label for="transaction_number" class="block font-medium text-gray-700">
            Transaction ID (Write in English)-send money তে প্রাপ্ত transaction ID লিখুন।
        </label>

        <input
            type="text"
            id="transaction_number"
            name="transaction_number"
            autocomplete="off"
            placeholder="Enter transaction number"
            required
            class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">

    </div>

    <!-- Image Upload -->
    <div class="grid md:grid-cols-2 gap-6">

        <div>

            <label for="image" class="block font-medium text-gray-700">
                Upload Image (Max Size:8mb, Support:jpg,jpeg,png)
            </label>

            <input
                type="file"
                id="image"
                name="image"
                accept="image/*"
                required
                onchange="document.getElementById('output').src=window.URL.createObjectURL(this.files[0])"
                class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">

        </div>

        <div>

            <label class="block font-medium text-gray-700">
                Image Preview
            </label>

            <img
                id="output"
                src="https://placehold.co/200x200?text=Preview"
                alt="Preview"
                class="mt-2 w-40 h-40 object-cover rounded-xl border border-gray-300">

        </div>

    </div>

    <!-- Message-->
    <div>

        <label for="message" class="block font-medium text-gray-700">
            Message / Note (Write in English)
        </label>

        <textarea
            id="message"
            name="message"
            rows="4"
            placeholder="Write your message (Optional)"
            class="w-full mt-2 border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"></textarea>

    </div>
 
    <!-- Submit Button -->
    <button
        type="submit"
        class="w-full bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 text-white font-semibold py-4 rounded-xl transition duration-300 active:scale-95">

        Submit Registration

    </button>

</form>

    </div>

</section>
@endsection