@extends('layouts.app') <!-- Or your main layout -->

@section('content')
<div class="form-content">

    <!-- Success Screen -->
    <div class="success-screen" id="successScreen" style="display: {{ session('success') ? 'block' : 'none' }};">
        <div class="success-icon">✓</div>
        <h2>Application Submitted!</h2>
        <p>Your gym membership application has been successfully submitted.</p>
        <div class="application-number" id="applicationNumber">
            {{ session('success') ?? 'APP-2025-0000' }}
        </div>
        <p style="margin-top: 20px; color: #999;">We will contact you shortly to complete your registration.</p>
    </div>

    <!-- Multi-step Form -->
    <form id="membershipForm" action="{{ route('form.submit') }}" method="POST" style="display: {{ session('success') ? 'none' : 'block' }};">
        @csrf

        <!-- Section 1: Personal Information -->
        <div class="form-section active" data-section="1">
            <h2 class="section-title">Personal Information</h2>

            <div class="form-row">
                <div class="form-group">
                    <label for="surname">Surname *</label>
                    <input type="text" name="surname" id="surname" value="{{ old('surname') }}" required maxlength="50">
                    @error('surname') <span class="error-message">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label for="first_name">First Name *</label>
                    <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}" required maxlength="50">
                    @error('first_name') <span class="error-message">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="dob">Date of Birth *</label>
                    <input type="date" name="dob" id="dob" value="{{ old('dob') }}" required>
                    @error('dob') <span class="error-message">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label for="gender">Gender *</label>
                    <select name="gender" id="gender" required>
                        <option value="" disabled {{ old('gender') ? '' : 'selected' }}>Select Gender</option>
                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                    </select>
                    @error('gender') <span class="error-message">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="form-group">
                <label for="mobile">Mobile Number *</label>
                <input type="tel" name="mobile" id="mobile" value="{{ old('mobile') }}" required pattern="[0-9]{10}" maxlength="10" placeholder="07XXXXXXXX">
                @error('mobile') <span class="error-message">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="email">Email (optional)</label>
                <input type="email" name="email" id="email" value="{{ old('email') }}">
                @error('email') <span class="error-message">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="address">Address</label>
                <textarea name="address" id="address" rows="3">{{ old('address') }}</textarea>
            </div>

            <div class="button-group">
                <button type="button" class="btn-back" disabled>Back</button>
                <button type="button" class="btn-next" id="btnNext1">Next</button>
            </div>
        </div>

        <!-- Section 2: Emergency Contact -->
        <div class="form-section" data-section="2">
            <h2 class="section-title">Emergency Contact</h2>

            <div class="form-group">
                <label for="emergency_name">Contact Name *</label>
                <input type="text" name="emergency_name" id="emergency_name" value="{{ old('emergency_name') }}" required>
                @error('emergency_name') <span class="error-message">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="relationship">Relationship *</label>
                <input type="text" name="relationship" id="relationship" value="{{ old('relationship') }}" required>
                @error('relationship') <span class="error-message">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="emergency_phone">Contact Phone *</label>
                <input type="tel" name="emergency_phone" id="emergency_phone" value="{{ old('emergency_phone') }}" required pattern="[0-9]{10}" maxlength="10" placeholder="07XXXXXXXX">
                @error('emergency_phone') <span class="error-message">{{ $message }}</span> @enderror
            </div>

            <div class="button-group">
                <button type="button" class="btn-back" id="btnBack2">Back</button>
                <button type="button" class="btn-next" id="btnNext2">Next</button>
            </div>
        </div>

        <!-- Section 3: Membership Details -->
        <div class="form-section" data-section="3">
            <h2 class="section-title">Membership Details</h2>

            <div class="form-group">
                <label for="membership_type">Membership Type *</label>
                <select name="membership_type" id="membership_type" required>
                    <option value="" disabled {{ old('membership_type') ? '' : 'selected' }}>Select Type</option>
                    <option value="male" {{ old('membership_type') == 'male' ? 'selected' : '' }}>Male</option>
                    <option value="female" {{ old('membership_type') == 'female' ? 'selected' : '' }}>Female</option>
                    <option value="couple" {{ old('membership_type') == 'couple' ? 'selected' : '' }}>Couple</option>
                    <option value="family" {{ old('membership_type') == 'family' ? 'selected' : '' }}>Family</option>
                </select>
                @error('membership_type') <span class="error-message">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="package">Package *</label>
                <select name="package" id="package" required>
                    <option value="" disabled {{ old('package') ? '' : 'selected' }}>Select Package</option>
                    <option value="1_month" {{ old('package') == '1_month' ? 'selected' : '' }}>1 Month</option>
                    <option value="3_months" {{ old('package') == '3_months' ? 'selected' : '' }}>3 Months</option>
                    <option value="6_months" {{ old('package') == '6_months' ? 'selected' : '' }}>6 Months</option>
                    <option value="12_months" {{ old('package') == '12_months' ? 'selected' : '' }}>12 Months</option>
                    <option value="personal_training" {{ old('package') == 'personal_training' ? 'selected' : '' }}>Personal Training</option>
                </select>
                @error('package') <span class="error-message">{{ $message }}</span> @enderror
            </div>

            <div class="checkbox-group form-group">
                <input type="checkbox" name="terms" id="terms" {{ old('terms') ? 'checked' : '' }} required>
                <label for="terms">I confirm all information is correct and accept the gym's Terms & Conditions. *</label>
            </div>
            @error('terms') <span class="error-message">{{ $message }}</span> @enderror

            <div class="button-group">
                <button type="button" class="btn-back" id="btnBack3">Back</button>
                <button type="submit" id="btnSubmit">Submit Application</button>
            </div>
        </div>
    </form>

</div>

@endsection