@extends('layouts.user')
@section('title','Register For Event')
@section('content')
<script>
window.eventRegistrationData = {
  categories: @json($categories),
  sub_categories: @json($sub_categories),
  sub_cat_options: @json($sub_cat_options),
  weight_categories: @json($weight_categories),
  event_details: @json($event_details),
  event_id: {{ $event_details->id }}
};
// Preload registered participants for validation
window.registeredEventUsersData = { users: @json($registered_participants) };
// Prefill current user meta
window.authUser = @json($auth_user);
</script>
<div class="row g-2 align-items-center mb-3">
 <div class="col">
  <h5 class="mb-0">Register for Event: {{ $event_details->title }}</h5>
 </div>
 <div class="col-auto">
  <a href="javascript:history.back();" class="btn btn-outline-secondary btn-sm"><i class="uil uil-arrow-left"></i> Back</a>
 </div>
</div>
<div class="card shadow-sm border-0">
 <div class="card-body">
  <button class="btn btn-phoenix-primary" data-bs-toggle="offcanvas" data-bs-target="#registerUserOffcanvas"> <i class="uil uil-user-plus me-1"></i>Register Now</button>
 </div>
</div>
<!-- Offcanvas copied from state version but UID search removed and user info fixed -->
<div class="offcanvas offcanvas-end phoenix-offcanvas" tabindex="-1" id="registerUserOffcanvas" style="width:40vw;max-width:40vw;">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title text-white fw-bold"><i class="uil uil-user-plus me-1"></i>Event Registration</h5>
    <button class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <form id="registerUserForm" novalidate>
      @csrf
      <input type="hidden" name="event_id" value="{{ $event_details->id }}" />
      <input type="hidden" id="user_id" value="{{ $auth_user->id }}" />
      <input type="hidden" id="state_id" value="{{ $auth_user->state_id }}" />
      <input type="hidden" id="district_id" value="{{ $auth_user->district_id }}" />
      <input type="hidden" id="country_id" value="{{ $auth_user->country_id }}" />
      <input type="hidden" id="gender" value="{{ $auth_user->gender }}" />
      <input type="hidden" id="dob" value="{{ $auth_user->dob }}" />
      <div class="row mb-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">Category</label>
          <select id="category_id" class="form-select" required><option value="">Select Category</option></select>
          <div class="invalid-feedback">Select category</div>
        </div>
        <div class="col-md-6" id="subCategoryWrapper" style="display:none;">
          <label class="form-label fw-semibold">Sub Category</label>
          <select id="sub_category_id" class="form-select"><option value="">Select Sub Category</option></select>
          <div class="invalid-feedback">Select sub category</div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-md-6" id="subCatOptionWrapper" style="display:none;">
          <label class="form-label fw-semibold">Sub Category Option</label>
          <select id="sub_category_option_id" class="form-select"><option value="">Select Sub Category Option</option></select>
          <div class="invalid-feedback">Select sub category option</div>
        </div>
        <div class="col-md-6" id="weightCategoryWrapper" style="display:none;">
          <label class="form-label fw-semibold">Weight Category</label>
          <select id="weight_category_id" class="form-select"><option value="">Select Weight Category</option></select>
          <div class="invalid-feedback">Select weight category</div>
        </div>
        <div class="col-md-6" id="genderWrapper" style="display:none;">
          <label class="form-label fw-semibold">Gender</label>
          <select id="select_gender" class="form-select">
            <option value="">Select Gender</option>
            <option value="1" {{ $auth_user->gender==1?'selected':'' }}>Male</option>
            <option value="2" {{ $auth_user->gender==2?'selected':'' }}>Female</option>
          </select>
          <div class="invalid-feedback">Select gender</div>
        </div>
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">Athlete</label>
        <input type="text" readonly class="form-control" value="{{ $auth_user->fname.' '.$auth_user->lname }}" />
      </div>
    </form>
    <div id="infoSectionDiv" class="mb-4" style="display:none;">
      <div class="phoenix-card card shadow-sm" style="min-height:120px;color:#fff;display:flex;align-items:center;justify-content:center;">
        <div class="px-3 py-2 w-100 text-center">
          <label id="infoText" class="text-danger"></label>
        </div>
      </div>
    </div>
  </div>
  <div class="offcanvas-footer px-4 py-3 border-top bg-light d-flex justify-content-end gap-2">
    <button id="registerUserButton" disabled type="button" class="btn btn-sm btn-outline-primary"><i class="uil uil-check me-1"></i>Register</button>
    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="offcanvas">Close</button>
  </div>
</div>
@endsection
@push('styles')
<style>.phoenix-offcanvas .offcanvas-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}</style>
@endpush
@push('scripts')
<script src="/vendors/sweetalert2/sweetalert2.all.min.js"></script>
<script src="/js/pages/user/register_for_event.js?v={{ time() }}"></script>
@endpush