@extends('layouts.admin')
@section('title', 'Event Registration')
@section('content')
<div class="container py-4">
    <h2 class="mb-4">Taekwondo Event Registration</h2>
    <form id="eventRegistrationForm" enctype="multipart/form-data">
        @csrf
        <div class="row g-3">
            <div class="col-md-6">
                <label for="name" class="form-label">Full Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control required" id="name" name="name" maxlength="100">
                <span class="text-danger" id="error_name"></span>
            </div>
            <div class="col-md-3">
                <label for="dob" class="form-label">Date of Birth <span class="text-danger">*</span></label>
                <input type="date" class="form-control required" id="dob" name="dob">
                <span class="text-danger" id="error_dob"></span>
            </div>
            <div class="col-md-3">
                <label for="gender" class="form-label">Gender <span class="text-danger">*</span></label>
                <select class="form-select required" id="gender" name="gender">
                    <option value="">Select</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
                <span class="text-danger" id="error_gender"></span>
            </div>
            <div class="col-md-6">
                <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                <input type="text" class="form-control required" id="address" name="address" maxlength="200">
                <span class="text-danger" id="error_address"></span>
            </div>
            <div class="col-md-3">
                <label for="contact" class="form-label">Contact Number <span class="text-danger">*</span></label>
                <input type="text" class="form-control required" id="contact" name="contact" maxlength="15">
                <span class="text-danger" id="error_contact"></span>
            </div>
            <div class="col-md-3">
                <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                <input type="email" class="form-control required" id="email" name="email" maxlength="100">
                <span class="text-danger" id="error_email"></span>
            </div>
            <div class="col-md-4">
                <label for="division" class="form-label">Division <span class="text-danger">*</span></label>
                <select class="form-select required" id="division" name="division">
                    <option value="">Select</option>
                    <option value="sub_junior">Sub-Junior</option>
                    <option value="cadet">Cadet</option>
                    <option value="junior">Junior</option>
                    <option value="senior">Senior</option>
                </select>
                <span class="text-danger" id="error_division"></span>
            </div>
            <div class="col-md-4">
                <label for="weight_category" class="form-label">Weight Category <span class="text-danger">*</span></label>
                <select class="form-select required" id="weight_category" name="weight_category">
                    <option value="">Select Division First</option>
                </select>
                <span class="text-danger" id="error_weight_category"></span>
            </div>
            <div class="col-md-4">
                <label for="event_type" class="form-label">Event Type <span class="text-danger">*</span></label>
                <select class="form-select required" id="event_type" name="event_type">
                    <option value="">Select</option>
                    <option value="kyorugi">Kyorugi (Sparring)</option>
                    <option value="poomsae">Poomsae (Forms)</option>
                </select>
                <span class="text-danger" id="error_event_type"></span>
            </div>
            <div class="col-md-6">
                <label for="id_proof" class="form-label">ID Proof (Aadhar/Passport) <span class="text-danger">*</span></label>
                <input type="file" class="form-control required" id="id_proof" name="id_proof" accept=".jpg,.jpeg,.png,.pdf">
                <span class="text-danger" id="error_id_proof"></span>
            </div>
            <div class="col-md-6">
                <label for="birth_certificate" class="form-label">Birth Certificate <span class="text-danger">*</span></label>
                <input type="file" class="form-control required" id="birth_certificate" name="birth_certificate" accept=".jpg,.jpeg,.png,.pdf">
                <span class="text-danger" id="error_birth_certificate"></span>
            </div>
            <div class="col-md-6">
                <label for="photo" class="form-label">Recent Photograph <span class="text-danger">*</span></label>
                <input type="file" class="form-control required" id="photo" name="photo" accept=".jpg,.jpeg,.png">
                <span class="text-danger" id="error_photo"></span>
            </div>
            <div class="col-md-6">
                <label for="belt_certificate" class="form-label">Belt Certificate (if applicable)</label>
                <input type="file" class="form-control" id="belt_certificate" name="belt_certificate" accept=".jpg,.jpeg,.png,.pdf">
                <span class="text-danger" id="error_belt_certificate"></span>
            </div>
            <div class="col-12 mt-3">
                <button type="submit" class="btn btn-phoenix-primary">Submit Registration</button>
            </div>
        </div>
    </form>
    <div id="registrationSuccess" class="alert alert-success mt-4 d-none"></div>
    <div id="registrationError" class="alert alert-danger mt-4 d-none"></div>
</div>
@endsection
@push('scripts')
<script>
const weightCategories = {
    sub_junior: {
        male: ["Under 18kg", "Under 21kg", "Under 23kg", "Under 25kg", "Under 27kg", "Under 29kg", "Under 32kg", "Under 35kg", "Under 38kg", "Under 41kg", "Under 44kg", "Under 50kg"],
        female: ["Under 16kg", "Under 18kg", "Under 20kg", "Under 22kg", "Under 24kg", "Under 26kg", "Under 29kg", "Under 32kg", "Under 35kg", "Under 38kg", "Under 41kg", "Under 47kg"]
    },
    cadet: {
        male: ["Under 33kg", "Under 37kg", "Under 41kg", "Under 45kg", "Under 49kg", "Under 53kg", "Under 57kg", "Under 61kg", "Under 65kg", "Over 65kg"],
        female: ["Under 29kg", "Under 33kg", "Under 37kg", "Under 41kg", "Under 44kg", "Under 47kg", "Under 51kg", "Under 55kg", "Under 59kg", "Over 59kg"]
    },
    senior: {
        male: ["Under 54kg", "Under 58kg", "Under 63kg", "Under 68kg", "Under 74kg", "Under 80kg", "Under 87kg", "Over 87kg"],
        female: ["Under 46kg", "Under 49kg", "Under 53kg", "Under 57kg", "Under 62kg", "Under 67kg", "Under 73kg", "Over 73kg"]
    }
};
$('#division, #gender').on('change', function() {
    let division = $('#division').val();
    let gender = $('#gender').val();
    let $weightCat = $('#weight_category');
    $weightCat.empty();
    $weightCat.append('<option value="">Select</option>');
    if (division && gender && weightCategories[division] && weightCategories[division][gender]) {
        weightCategories[division][gender].forEach(function(cat) {
            $weightCat.append('<option value="'+cat+'">'+cat+'</option>');
        });
    }
});
$('#eventRegistrationForm').on('submit', function(e) {
    e.preventDefault();
    let allow = true;
    $('.required').each(function() {
        let val = $(this).val().trim();
        let id = $(this).attr('id');
        if (val === "" || (this.type === "file" && this.files.length === 0)) {
            $(this).addClass('border-danger');
            $('#error_'+id).text('This field is required');
            allow = false;
        } else {
            $(this).removeClass('border-danger');
            $('#error_'+id).text('');
        }
    });
    if (!allow) return;
    let formData = new FormData(this);
    $.ajax({
        url: '/admin/events/register',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#registrationSuccess').removeClass('d-none').text(response.message);
            $('#registrationError').addClass('d-none');
            $('#eventRegistrationForm')[0].reset();
        },
        error: function(xhr) {
            let errors = xhr.responseJSON?.errors || {};
            $('#registrationError').removeClass('d-none').text(xhr.responseJSON?.message || 'Registration failed.');
            $('#registrationSuccess').addClass('d-none');
            Object.keys(errors).forEach(function(key) {
                $('#error_'+key).text(errors[key][0]);
            });
        }
    });
});
</script>
@endpush