<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Membership Application - Iron Ground Fitness</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: #ffffff;
            min-height: 100vh;
            padding: 40px 20px 60px;
        }

        .main-container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* ── HEADER ── */
        .header {
            text-align: center;
            margin-bottom: 48px;
            animation: fadeInDown 0.6s ease;
        }

        .header h1 {
            color: #0a0a0a;
            font-size: 2.2rem;
            margin-bottom: 8px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .header h1 i {
            color: #FFD700;
        }

        .header p {
            color: #888;
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: 0.3px;
        }

        /* ── PROGRESS BAR ── */
        .progress-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 50px;
            position: relative;
            animation: fadeIn 0.8s ease;
            padding: 0 4px;
        }

        .progress-container::before {
            content: '';
            position: absolute;
            top: 24px;
            left: 0;
            right: 0;
            height: 3px;
            background: #ebebeb;
            z-index: 0;
            border-radius: 2px;
        }

        .progress-bar-custom {
            position: absolute;
            top: 24px;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, #FFD700, #FFA500);
            transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
            border-radius: 2px;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            position: relative;
        }

        .step-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #ffffff;
            border: 2.5px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            color: #bbb;
            font-family: 'Poppins', sans-serif;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
        }

        .step.active .step-circle {
            border-color: #FFD700;
            color: #0a0a0a;
            background: #FFD700;
            transform: scale(1.12);
            box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.15);
        }

        .step.completed .step-circle {
            border-color: #0a0a0a;
            background: #0a0a0a;
            color: #FFD700;
            transform: scale(1);
        }

        .step-label {
            margin-top: 10px;
            font-size: 0.78rem;
            color: #bbb;
            font-weight: 600;
            letter-spacing: 0.3px;
            transition: color 0.3s ease;
        }

        .step.active .step-label {
            color: #0a0a0a;
        }

        .step.completed .step-label {
            color: #555;
        }

        /* ── FORM CONTAINER ── */
        .container {
            background: #ffffff;
            padding: 44px 48px;
            border-radius: 20px;
            box-shadow: 0 12px 50px rgba(0, 0, 0, 0.08);
            border: 1.5px solid #f0f0f0;
        }

        .form-section {
            display: none;
            animation: fadeInRight 0.45s ease;
        }

        .form-section.active {
            display: block;
        }

        .form-title {
            font-size: 1.5rem;
            color: #0a0a0a;
            margin-bottom: 28px;
            padding-bottom: 14px;
            border-bottom: 3px solid #FFD700;
            display: inline-block;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        /* ── LABELS ── */
        .form-label {
            display: block;
            margin-bottom: 7px;
            color: #333;
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        /* ── INPUTS ── */
        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid #e8e8e4;
            border-radius: 10px;
            font-size: 0.95rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            color: #0a0a0a;
            transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
            background: #ffffff;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
        }

        .form-control:focus {
            border-color: #FFD700;
            box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.12);
            transform: translateY(-1px);
        }

        .form-control:hover {
            border-color: #d0c800;
        }

        select.form-control {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
        }

        /* ── PROFILE UPLOAD ── */
        .profile-upload-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 32px;
        }

        .profile-upload {
            position: relative;
            width: 130px;
            height: 130px;
            cursor: pointer;
        }

        .profile-circle {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            border: 3px dashed #FFD700;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 215, 0, 0.04);
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }

        .profile-upload:hover .profile-circle {
            border-style: solid;
            border-color: #FFA500;
            box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.12);
            transform: scale(1.05);
            background: rgba(255, 215, 0, 0.08);
        }

        .profile-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .upload-placeholder {
            text-align: center;
            color: #FFD700;
            pointer-events: none;
        }

        .upload-placeholder i {
            font-size: 2.4rem;
            margin-bottom: 6px;
            display: block;
        }

        .upload-placeholder p {
            font-size: 0.68rem;
            color: #aaa;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .profile-upload input[type="file"] {
            display: none;
        }

        .hidden {
            display: none !important;
        }

        /* ── BUTTONS ── */
        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            gap: 14px;
        }

        .btn {
            padding: 14px 36px;
            border: none;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
        }

        .btn i {
            margin: 0 5px;
        }

        .btn-prev {
            background: #f5f5f3;
            color: #444;
            border: 1.5px solid #e8e8e4;
            flex: 1;
        }

        .btn-prev:hover {
            background: #ebebeb;
            color: #0a0a0a;
            transform: translateX(-3px);
        }

        .btn-next {
            background: #0a0a0a;
            color: #FFD700;
            font-weight: 700;
            box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
            flex: 1;
        }

        .btn-next:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            background: #1a1a1a;
        }

        .btn-submit {
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
            color: #0a0a0a !important;
            font-weight: 700 !important;
            box-shadow: 0 6px 24px rgba(255, 180, 0, 0.3);
            width: 100%;
            letter-spacing: 0.5px;
        }

        .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 32px rgba(255, 180, 0, 0.4);
        }

        /* ── TERMS CHECKBOX ── */
        .form-check {
            padding: 18px 20px;
            background: rgba(255, 215, 0, 0.05);
            border-radius: 12px;
            border: 1.5px solid rgba(255, 215, 0, 0.5);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .form-check:hover {
            background: rgba(255, 215, 0, 0.1);
        }

        .form-check-input {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: #0a0a0a;
            flex-shrink: 0;
            margin-top: 1px;
            margin-right: 0;
        }

        .form-check-label {
            cursor: pointer;
            font-weight: 500;
            font-size: 0.9rem;
            color: #333;
            line-height: 1.6;
        }

        /* ── ALERTS ── */
        .alert {
            padding: 14px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            animation: fadeInDown 0.5s ease;
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
        }

        .alert-success {
            background: rgba(255, 215, 0, 0.12);
            border: 1.5px solid #FFD700;
            color: #0a0a0a;
        }

        .alert-danger {
            background: rgba(220, 53, 69, 0.06);
            border: 1.5px solid rgba(220, 53, 69, 0.4);
            color: #c0392b;
        }

        /* ── ANIMATIONS ── */
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-24px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(24px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            .header h1 { font-size: 1.7rem; }
            .container { padding: 28px 20px; }
            .button-group { flex-direction: column; }
            .step-label { font-size: 0.7rem; }
        }
    </style>
</head>
<body>

    <?php if($errors->any()): ?>
    <div class="alert alert-danger">
        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <p><?php echo e($error); ?></p>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
<?php endif; ?>

<?php if(session('success')): ?>
    <div class="alert alert-success">
        <?php echo e(session('success')); ?>

    </div>
<?php endif; ?>

    <div class="main-container">
        <div class="header">
            <h1><i class=""></i> Membership Application</h1>
            <p>Join Iron Ground Fitness Today</p>
        </div>

        <!-- Progress Bar -->
        <div class="progress-container">
            <div class="progress-bar-custom" id="progressBar"></div>
            <div class="step active" data-step="1">
                <div class="step-circle">1</div>
                <div class="step-label">Personal Info</div>
            </div>
            <div class="step" data-step="2">
                <div class="step-circle">2</div>
                <div class="step-label">Emergency Contact</div>
            </div>
            <div class="step" data-step="3">
                <div class="step-circle">3</div>
                <div class="step-label">Membership</div>
            </div>
        </div>

        <div class="container">
            <div class="form-container">
                <h2 class="form-title" id="sectionTitle">Personal Information</h2>

<form action="<?php echo e(route('form.submit')); ?>" method="POST" enctype="multipart/form-data">                        <?php echo csrf_field(); ?>
                    
                    <!-- Section 1: Personal Information -->
                    <div class="form-section active" data-section="1">
                        <div class="row g-3">
                            <!-- Profile Picture -->
                            <div class="col-md-12 text-center">
                                <div class="profile-upload-wrapper">
                                    <div class="profile-upload" id="profileUpload">
                                        <div class="profile-circle">
                                            <img id="profilePreview" class="profile-preview" 
                                                 src="<?php echo e(old('profile_pic') ? asset('storage/'.old('profile_pic')) : asset('images/default-profile.png')); ?>" 
                                                 alt="Profile">
                                            <div class="upload-placeholder" id="uploadPlaceholder" 
                                                 style="<?php echo e(old('profile_pic') ? 'display:none;' : ''); ?>">
                                                <i class="fas fa-camera"></i>
                                                <p>Click to Upload</p>
                                            </div>
                                        </div>
                                        <input type="file" name="profile_pic" id="profile_pic" class="form-control" accept="image/*">
                                    </div>
                                </div>
                            </div>

                            <!-- Personal Info -->
                            <div class="col-md-6">
                                <label class="form-label"><i class=""></i> Surname</label>
                                <input type="text" name="surname" value="<?php echo e(old('surname')); ?>" class="form-control" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label"><i class=""></i> First Name</label>
                                <input type="text" name="first_name" value="<?php echo e(old('first_name')); ?>" class="form-control" required>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label"><i class=""></i> Date of Birth</label>
                                <input type="date" name="dob" value="<?php echo e(old('dob')); ?>" class="form-control" required>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label"><i class=""></i> Gender</label>
                                <select name="gender" class="form-control" required>
                                    <option value="">Select</option>
                                    <option value="Male" <?php echo e(old('gender') == 'Male' ? 'selected' : ''); ?>>Male</option>
                                    <option value="Female" <?php echo e(old('gender') == 'Female' ? 'selected' : ''); ?>>Female</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label"><i class=""></i> Mobile Number</label>
                                <input type="text" name="mobile" value="<?php echo e(old('mobile')); ?>" class="form-control" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label"><i class=""></i> Email</label>
                                <input type="email" name="email" value="<?php echo e(old('email')); ?>" class="form-control">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label"><i class=""></i> Address</label>
                                <input type="text" name="address" value="<?php echo e(old('address')); ?>" class="form-control">
                            </div>

                            <!-- Disability -->
                            <div class="col-md-6">
                                <label class="form-label"><i class=""></i> Do you have any disabilities?</label>
                                <select name="disability" id="disability" class="form-control">
                                    <option value="0" <?php echo e(old('disability') == '0' ? 'selected' : ''); ?>>No</option>
                                    <option value="1" <?php echo e(old('disability') == '1' ? 'selected' : ''); ?>>Yes</option>
                                </select>
                            </div>

                            <div class="col-md-6 <?php echo e(old('disability') != '1' ? 'hidden' : ''); ?>" id="disability_details_field">
                                <label class="form-label"><i class=""></i> Disability Details</label>
                                <input type="text" name="disability_details" id="disability_details" value="<?php echo e(old('disability_details')); ?>" class="form-control">
                            </div>
                        </div>
                    </div>

                    <!-- Section 2: Emergency Contact -->
                    <div class="form-section" data-section="2">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label"><i class=""></i> Emergency Contact Name</label>
                                <input type="text" name="emergency_name" value="<?php echo e(old('emergency_name')); ?>" class="form-control" required>
                            </div>

                            <div class="col-md-4">
    <label class="form-label"><i class=""></i> Relationship</label>
    <select name="relationship" class="form-control" required>
        <option value="">Select Relationship</option>
        <?php
            $relationships = ['Father','Mother','Brother','Sister','Parent', 'Sibling', 'Spouse', 'Child', 'Friend', 'Other'];
        ?>
        <?php $__currentLoopData = $relationships; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $relation): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <option value="<?php echo e($relation); ?>" <?php echo e(old('relationship') == $relation ? 'selected' : ''); ?>>
                <?php echo e($relation); ?>

            </option>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </select>
</div>


                            <div class="col-md-4">
                                <label class="form-label"><i class=""></i> Emergency Phone</label>
                                <input type="text" name="emergency_phone" value="<?php echo e(old('emergency_phone')); ?>" class="form-control" required>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label"><i class=""></i> How did you hear about us?</label>
                                <select name="referral_source" id="referral_source" class="form-control">
                                    <option value="">Select</option>
                                    <option value="Friend" <?php echo e(old('referral_source') == 'Friend' ? 'selected' : ''); ?>>Friend</option>
                                    <option value="Social Media" <?php echo e(old('referral_source') == 'Social Media' ? 'selected' : ''); ?>>Social Media</option>
                                    <option value="Advertisement" <?php echo e(old('referral_source') == 'Advertisement' ? 'selected' : ''); ?>>Advertisement</option>
                                    <option value="Walk-in" <?php echo e(old('referral_source') == 'Walk-in' ? 'selected' : ''); ?>>Walk-in</option>
                                    <option value="Other" <?php echo e(old('referral_source') == 'Other' ? 'selected' : ''); ?>>Other</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Section 3: Membership Details -->
                    <div class="form-section" data-section="3">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label"><i class=""></i> Membership Type</label>
                                <select name="membership_type" class="form-control" required>
                                    <option value="">Select</option>
                                    <option value="Male" <?php echo e(old('membership_type') == 'Male' ? 'selected' : ''); ?>>Male</option>
                                    <option value="Female" <?php echo e(old('membership_type') == 'Female' ? 'selected' : ''); ?>>Female</option>
                                    <option value="Couple" <?php echo e(old('membership_type') == 'Couple' ? 'selected' : ''); ?>>Couple</option>
                                    <option value="Family" <?php echo e(old('membership_type') == 'Family' ? 'selected' : ''); ?>>Family</option>
                                </select>
                            </div>

                            <div class="col-md-6">
    <label class="form-label">Package</label>
    <select name="package" class="form-control" required>
        <option value="">Select</option>
        <option value="1 Month" <?php echo e(old('package') == '1 Month' ? 'selected' : ''); ?>>1 Month</option>
        <option value="3 Months" <?php echo e(old('package') == '3 Months' ? 'selected' : ''); ?>>3 Months</option>
        <option value="6 Months" <?php echo e(old('package') == '6 Months' ? 'selected' : ''); ?>>6 Months</option>
        <option value="12 Months" <?php echo e(old('package') == '12 Months' ? 'selected' : ''); ?>>12 Months</option>
        <option value="Personal Training" <?php echo e(old('package') == 'Personal Training' ? 'selected' : ''); ?>>Personal Training</option>
    </select>
</div>


                            <!-- Signature -->
                            <input type="hidden" name="signature" id="signature">

                            <!-- Terms -->
                            <div class="col-md-12 mt-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="terms" name="terms" required>
                                    <label class="form-check-label" for="terms">
                                        <i class=""></i> I agree to the Terms and Conditions of Iron Ground Fitness.
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-12 mt-4" id="submitSection">
                                <button type="submit" class="btn btn-submit">
                                    <i class=""></i> Submit Application
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Navigation Buttons -->
                    <div class="button-group" id="navigationButtons">
                        <button type="button" class="btn btn-prev" id="prevBtn" style="display: none;">
                            <i class=""></i> Previous
                        </button>
                        <button type="button" class="btn btn-next" id="nextBtn">
                            Next <i class=""></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        let currentStep = 1;
        const totalSteps = 3;
        const sectionTitles = {
            1: 'Personal Information',
            2: 'Emergency Contact Information',
            3: 'Membership Details'
        };

        // Profile Picture Upload
        const profileUpload = document.getElementById('profileUpload');
        const profileInput = document.getElementById('profile_pic');
        const profilePreview = document.getElementById('profilePreview');
        const uploadPlaceholder = document.getElementById('uploadPlaceholder');

        profileUpload.addEventListener('click', () => profileInput.click());

        profileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    profilePreview.src = e.target.result;
                    profilePreview.style.display = 'block';
                    uploadPlaceholder.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }
        });

        // Show disability details only if "Yes"
        document.getElementById('disability').addEventListener('change', function() {
            const field = document.getElementById('disability_details_field');
            field.classList.toggle('hidden', this.value !== '1');
        });

        // Generate signature text on Terms tick
        document.getElementById('terms').addEventListener('change', function() {
            const sig = document.getElementById('signature');
            if (this.checked) {
                const now = new Date();
                sig.value = "Digitally signed on " + now.toLocaleString();
            } else {
                sig.value = "";
            }
        });

        // Navigation
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const navigationButtons = document.getElementById('navigationButtons');
        const submitSection = document.getElementById('submitSection');

        function updateProgress() {
            const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;
            document.getElementById('progressBar').style.width = progress + '%';

            // Update section title
            document.getElementById('sectionTitle').textContent = sectionTitles[currentStep];

            // Update step indicators
            document.querySelectorAll('.step').forEach((step, index) => {
                const stepNum = index + 1;
                if (stepNum < currentStep) {
                    step.classList.add('completed');
                    step.classList.remove('active');
                } else if (stepNum === currentStep) {
                    step.classList.add('active');
                    step.classList.remove('completed');
                } else {
                    step.classList.remove('active', 'completed');
                }
            });

            // Show/hide sections
            document.querySelectorAll('.form-section').forEach(section => {
                section.classList.remove('active');
            });
            document.querySelector(`[data-section="${currentStep}"]`).classList.add('active');

            // Button visibility
            prevBtn.style.display = currentStep === 1 ? 'none' : 'block';
            nextBtn.style.display = currentStep === totalSteps ? 'none' : 'block';
            navigationButtons.style.display = currentStep === totalSteps ? 'none' : 'flex';
            submitSection.style.display = currentStep === totalSteps ? 'block' : 'none';
        }

        nextBtn.addEventListener('click', () => {
            if (validateSection(currentStep)) {
                currentStep++;
                updateProgress();
            }
        });

        prevBtn.addEventListener('click', () => {
            currentStep--;
            updateProgress();
        });

        // Click on step circles to navigate
        document.querySelectorAll('.step').forEach(step => {
            step.addEventListener('click', () => {
                const stepNum = parseInt(step.dataset.step);
                if (stepNum < currentStep || validateSection(currentStep)) {
                    currentStep = stepNum;
                    updateProgress();
                }
            });
        });

        function validateSection(section) {
            const currentSection = document.querySelector(`[data-section="${section}"]`);
            const inputs = currentSection.querySelectorAll('input[required], select[required]');
            
            for (let input of inputs) {
                if (!input.value) {
                    input.focus();
                    input.style.borderColor = 'red';
                    setTimeout(() => {
                        input.style.borderColor = '';
                    }, 2000);
                    return false;
                }
            }
            return true;
        }

        // Initialize
        updateProgress();
    </script>
</body>
</html><?php /**PATH D:\Iron Ground Fitness Docs\Digital Gym Management System\gymerpsystem\resources\views/open.blade.php ENDPATH**/ ?>