@extends('user.layouts.app')
@section('title','Register — '.$conference->name)
@section('page-title','Conference Registration')
@section('page-subtitle',$conference->name)
@section('content')

@if($errors->any())<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif
@if(session('error'))<div class="alert alert-danger">{{ session('error') }}</div>@endif

<div class="content-card p-4 mb-4">
    <p><strong>Mode:</strong> {{ ucfirst($conference->attendance_mode) }} · <strong>Venue:</strong> {{ $conference->venue }}</p>
    <p class="mb-0"><a href="{{ route('conferences.public.show', $conference) }}" target="_blank">View important dates & fee table</a></p>
</div>

<form method="POST" action="{{ route('user.conferences.register', $conference) }}" enctype="multipart/form-data" id="registrationForm">
    @csrf
    <div class="content-card p-4 mb-4">
        <h5>Registration Details</h5>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Participant Category *</label>
                <select name="registration_category" id="registration_category" class="form-select" required>
                    @foreach(['regular_participant','paper_presenter','student_participant','invited_guest'] as $cat)
                        <option value="{{ $cat }}" @selected(old('registration_category') === $cat)>{{ str_replace('_', ' ', ucfirst($cat)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Attendance Type *</label>
                <select name="attendance_type" id="attendance_type" class="form-select" required>
                    @if($conference->allowsPhysicalRegistration())
                        <option value="physical" @selected(old('attendance_type', 'physical') === 'physical')>Physical / On-site</option>
                    @endif
                    @if($conference->allowsVirtualRegistration())
                        <option value="virtual" @selected(old('attendance_type') === 'virtual')>Virtual</option>
                    @endif
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Meal Preference</label>
                <input name="meal_preference" class="form-control" value="{{ old('meal_preference') }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Passport Photo</label>
                <input type="file" name="passport_photo" class="form-control" accept="image/*">
            </div>
            <div class="col-md-12">
                <label class="form-label">Special Needs</label>
                <textarea name="special_needs" class="form-control" rows="2">{{ old('special_needs') }}</textarea>
            </div>
        </div>
    </div>

    @if($conference->allow_spouse_registration && $conference->allowsPhysicalRegistration())
    <div class="content-card p-4 mb-4" id="spouseSection">
        <div class="form-check mb-3">
            <input type="checkbox" name="attending_with_spouse" value="1" id="attending_with_spouse" class="form-check-input" @checked(old('attending_with_spouse'))>
            <label class="form-check-label" for="attending_with_spouse">I am registering with my spouse</label>
        </div>
        <div id="spouseFields" style="display:none">
            <div class="row g-3">
                <div class="col-md-6"><label class="form-label">Spouse Name *</label><input name="spouse_name" class="form-control" value="{{ old('spouse_name') }}"></div>
                <div class="col-md-6">
                    <label class="form-label">Spouse Gender *</label>
                    <select name="spouse_gender" class="form-select">
                        <option value="">Select</option>
                        <option value="male" @selected(old('spouse_gender') === 'male')>Male</option>
                        <option value="female" @selected(old('spouse_gender') === 'female')>Female</option>
                    </select>
                </div>
                <div class="col-md-6"><label class="form-label">Spouse Phone</label><input name="spouse_phone" class="form-control" value="{{ old('spouse_phone') }}"></div>
                <div class="col-md-6"><label class="form-label">Spouse Email</label><input type="email" name="spouse_email" class="form-control" value="{{ old('spouse_email') }}"></div>
            </div>
        </div>
    </div>
    @endif

    <div class="content-card p-4 mb-4">
        <h5>Fee Summary</h5>
        <div id="feeSummary">
            @if($previewFee['available'] ?? false)
                <p>Estimated fee: <strong id="totalAmount">{{ $previewFee['currency'] }} {{ number_format($previewFee['total_amount_due'], 2) }}</strong></p>
                <p class="text-muted small mb-0">Period: {{ $previewFee['fee_period_label'] ?? '—' }}</p>
            @else
                <p class="text-muted mb-0" id="feeMessage">{{ $previewFee['message'] ?? 'Select options to calculate fee.' }}</p>
            @endif
        </div>
    </div>

    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-success">Complete Registration</button>
        <a href="{{ route('user.my-conferences') }}" class="btn btn-light">Cancel</a>
    </div>
</form>

@push('scripts')
<script>
const spouseCheck = document.getElementById('attending_with_spouse');
const spouseFields = document.getElementById('spouseFields');
const attendanceType = document.getElementById('attendance_type');
const spouseSection = document.getElementById('spouseSection');

function toggleSpouse() {
    if (!spouseCheck || !spouseFields) return;
    spouseFields.style.display = spouseCheck.checked ? 'block' : 'none';
    if (spouseSection && attendanceType?.value === 'virtual') {
        spouseSection.style.display = 'none';
        spouseCheck.checked = false;
        spouseFields.style.display = 'none';
    } else if (spouseSection) {
        spouseSection.style.display = 'block';
    }
}

async function refreshFee() {
    const form = document.getElementById('registrationForm');
    const data = new FormData(form);
    data.append('_token', '{{ csrf_token() }}');
    const res = await fetch('{{ route('user.conferences.calculate-fee', $conference) }}', { method: 'POST', body: data });
    const fee = await res.json();
    const summary = document.getElementById('feeSummary');
    if (fee.available) {
        summary.innerHTML = `<p>Estimated fee: <strong>${fee.currency} ${Number(fee.total_amount_due).toLocaleString(undefined,{minimumFractionDigits:2})}</strong></p><p class="text-muted small mb-0">Period: ${fee.fee_period_label || fee.fee_period}</p>`;
    } else {
        summary.innerHTML = `<p class="text-danger mb-0">${fee.message}</p>`;
    }
}

['registration_category','attendance_type','attending_with_spouse'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('change', () => { toggleSpouse(); refreshFee(); });
});
if (spouseCheck) spouseCheck.addEventListener('change', toggleSpouse);
toggleSpouse();
</script>
@endpush
@endsection