@extends('layout.template')
@section('content')

<div class="r_event py-5">
    <div class="card rounded-5 border-0 overflow-hidden">
        <div class="bg-primary p-4 mb-4">
            <div class="hed text-center">
                <img src="/s_image/logo.jpg" alt="" class="img_logo rounded-circle">
                <h6 class="text-warning" style="font-family: 'calibri', sans-serif !important;">SUBUDINDONESIA</h6>
            </div>
            <div class="text-center mt-4">
                <h4 class="fw-bold text-warning">REGISTRATION FORM</h4>
                <p class="text-light mb-0">Please complete the following form</p>
            </div>
        </div>

        @if (session('success'))
        <div class="alert alert-success mx-4">
            {{ session('success') }}
        </div>
        @endif

        <form class="p-4" method="POST" action="{{ route('event.register.store') }}">
            @csrf
            <div class="mb-3">
                <label for="name" class="form-label">Name on passport :</label>
                <input type="text" class="form-control shadow-none rounded-pill" name="name" required>
            </div>
            <div class="mb-3">
                <label for="nametag" class="form-label">Name on nametag :</label>
                <input type="text" class="form-control shadow-none rounded-pill" name="nametag" required>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control shadow-none rounded-pill" name="email" required>
            </div>
            <div class="mb-3">
                <label for="telp" class="form-label">Whatsapp no :</label>
                <input type="number" class="form-control shadow-none rounded-pill" name="telp" required>
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gender" value="Male" id="gender1" checked>
                    <label class="form-check-label" for="gender1">
                        Male
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gender" value="Female" id="gender2">
                    <label class="form-check-label" for="gender2">
                        Female
                    </label>
                </div>
            </div>
            <div class="mb-3">
                <label for="country" class="form-label">Country :</label>
                <input type="text" class="form-control shadow-none rounded-pill" name="country">
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="section" value="Helper" id="section1" checked>
                    <label class="form-check-label" for="section1">
                        Helper
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="section" value="Committee" id="section2">
                    <label class="form-check-label" for="section2">
                        Committee
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="section" value="Member" id="section3">
                    <label class="form-check-label" for="section3">
                        Member
                    </label>
                </div>
            </div>
            
            
            
            
            <div class="mb-3">
                <label class="form-label">Date of arrival</label>
                <input type="date" name="date_arrival" class="form-control shadow-none" autocomplete="off" required>
            </div>
            <div class="mb-3">
                <label class="form-label">Date of departure</label>
                <input type="date" name="date_departure" class="form-control shadow-none" autocomplete="off" required>
            </div>
            
            
            
            <div class="mb-3">
                <label for="diet" class="form-label">Dietary meal :</label>
                <input type="text" class="form-control shadow-none rounded-pill" name="diet">
            </div>
            <div class="mb-2">
                <label for="diet" class="form-label">Choose Program :</label>
            </div>
            <div class="mb-5">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="program" value="A. The whole event (Jan 24th - Feb 5th 2026)" id="program1" checked>
                    <label class="form-check-label" for="program1">
                        A. The whole event (Jan 24th - Feb 5th 2026)
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="program" value="B. Indonesian gathering + Zone 1 and 2 Meeting (Jan 30th - Feb 5th 2026)" id="program2">
                    <label class="form-check-label" for="program2">
                        B. Remembrance Bapak + Indonesian National Meeting (Jan 24th - 1st 2026)
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="program" value="C. Zone 1 and 2 Meeting (Feb 2nd - 5th 2026)" id="program3">
                    <label class="form-check-label" for="program3">
                        C. Zone 1 and 2 Meeting (Feb 2nd - 5th 2026)
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill">Submit</button>
            <a href="/" class="btn btn-warning rounded-pill ms-2">Back</a>
        </form>
        
    </div>
</div>

@endsection