@extends('apple')
@section('title', 'Registration Runing 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 Running 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.show')}}"
           class="bg-yellow-400 text-black px-8 ml-4 py-4 rounded-full font-semibold hover:bg-yellow-300 transition">

            Register(Ex-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 (Runing-student)
            </h2>
            <p class="text-gray-600 mt-2">
                Please enter your correct information in English.
            </p>
        </div>

        <!-- Form -->
<form method="POST" action="{{route('Registration_Reunion.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"
                value="{{ old('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">
                @error('name')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
        </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"
                value="{{ old('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">
                @error('father_name')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
        </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"
                value="{{ old('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">
                @error('email')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
        </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">{{ old('address') }}</textarea>
            @error('address')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

    </div>

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

        <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"
                value="{{ old('mobile') }}"
                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('mobile')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

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

            <select
                id="class"
                name="class"
                onchange="calculateFee()"
                value="{{ old('class') }}"
                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 class</option>
                <option value="Play">Play</option>
                <option value="Nursery">Nursery</option>
                <option value="One">One</option>
                <option value="Two">Two</option>
                <option value="Three">Three</option>
                <option value="Four">Four</option>
                <option value="Five">Five</option>
                <option value="Six">Six</option>
                <option value="Seven">Seven</option>
                <option value="Eight">Eight</option>
                <option value="Nine">Nine</option>
                <option value="Ten">Ten</option>
                <option value="Eleven">Eleven</option>
                <option value="Twelve">Twelve</option>

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

    </div>

    <!-- Row 4 -->
    <div class="">
         <div>
            <label for="roll" class="block font-medium text-gray-700">
                Class Roll Number (Write in English)
            </label>

            <input
                type="number"
                id="roll"
                name="roll"
                value="{{ old('roll') }}"
                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('class')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </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="tshirt_size" class="block font-medium text-gray-700">
                T-Shirt Size
            </label>

            <select
                id="tshirt_size"
                name="tshirt_size"
                required
                value="{{ old('tshirt_size') }}"
                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>
            @error('tshirt_size')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </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="calculateFee()"
                onkeyup="calculateFee()"
                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('guests')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </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"
        value="{{ old('paid_amount') }}"
        readonly
        required
        class="w-full mt-2 border border-gray-300 bg-gray-100 rounded-xl p-4 cursor-not-allowed">
            @error('paid_amount')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror

    </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"
            value="{{ old('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">
             @error('payment_method')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror

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

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

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

    </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"
            value="{{ old('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">
        @error('transaction_number')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror

    </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">
        @error('image')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror

        </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">{{ old('message') }}</textarea>
        @error('message')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror

    </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