@extends('layouts.app')

@section('content')
    <div class="min-vh-100 bg-light py-5">
        <div class="container" style="max-width: 56rem;">
            
            <!-- Step Indicator -->
                <div class="mb-5">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center fw-bold shadow" style="width: 3rem; height: 3rem; font-size: 1.25rem;">
                                2
                            </div>
                        <div>
                            <p class="small text-secondary fw-medium mb-0">STEP 2 OF 4</p>
                            <h1 class="fs-4 fw-bold text-dark mb-0">Personal Information</h1>
                        </div>
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    <div class="progress" style="height: 0.5rem;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 33.33%" aria-valuenow="33.33" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>

            <!-- Main Content -->
            <div class="card border rounded-4 shadow-sm">
                <div class="card-body p-5">
                    
                    <div class="mb-5">
                        <h2 class="fs-1 fw-bold text-dark mb-2">Your Personal Information</h2>
                        <p class="fs-5 text-secondary">Please provide your personal details to continue</p>
                    </div>

                    <form action="{{ route('intake.step2.store') }}" method="POST" class="vstack gap-4">
                        @csrf

                        <!-- Name Fields -->
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="first_name" class="form-label fw-semibold text-dark">First Name</label>
                                <input type="text" class="form-control form-control-lg py-3 border-2 rounded-3" id="first_name" name="first_name" placeholder="John">
                            </div>
                            <div class="col-md-6">
                                <label for="last_name" class="form-label fw-semibold text-dark">Last Name</label>
                                <input type="text" class="form-control form-control-lg py-3 border-2 rounded-3" id="last_name" name="last_name" placeholder="Doe">
                            </div>
                        </div>

                        <!-- Date of Birth and Gender -->
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="date_of_birth" class="form-label fw-semibold text-dark">Date of Birth</label>
                                <input type="date" class="form-control form-control-lg py-3 border-2 rounded-3" id="date_of_birth" name="date_of_birth">
                            </div>
                            <div class="col-md-6">
                                <label for="gender" class="form-label fw-semibold text-dark">Gender</label>
                                <select class="form-select form-select-lg py-3 border-2 rounded-3" id="gender" name="gender">
                                    <option value="">Select gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                    <option value="other">Other</option>
                                    <option value="prefer_not_to_say">Prefer not to say</option>
                                </select>
                            </div>
                        </div>

                        <!-- Contact Number and Email -->
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="contact_number" class="form-label fw-semibold text-dark">Contact Number</label>
                                <input type="tel" class="form-control form-control-lg py-3 border-2 rounded-3" id="contact_number" name="contact_number" placeholder="(555) 123-4567">
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label fw-semibold text-dark">Email Address</label>
                                <input type="email" class="form-control form-control-lg py-3 border-2 rounded-3" id="email" name="email" placeholder="john.doe@example.com">
                            </div>
                        </div>

                        <!-- Address -->
                        <div class="vstack gap-3">
                            <label for="street_address" class="form-label fw-semibold text-dark">Street Address</label>
                            <input type="text" class="form-control form-control-lg py-3 border-2 rounded-3" id="street_address" name="street_address" placeholder="123 Main Street">
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="city" class="form-label fw-semibold text-dark">City</label>
                                <input type="text" class="form-control form-control-lg py-3 border-2 rounded-3" id="city" name="city" placeholder="New York">
                            </div>
                            <div class="col-md-3">
                                <label for="state" class="form-label fw-semibold text-dark">State</label>
                                <input type="text" class="form-control form-control-lg py-3 border-2 rounded-3" id="state" name="state" placeholder="NY">
                            </div>
                            <div class="col-md-3">
                                <label for="zip_code" class="form-label fw-semibold text-dark">ZIP Code</label>
                                <input type="text" class="form-control form-control-lg py-3 border-2 rounded-3" id="zip_code" name="zip_code" placeholder="10001">
                            </div>
                        </div>

                        <!-- Privacy Notice -->
                        <div class="mt-3 p-4 bg-light rounded-3 border">
                            <div class="d-flex gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="text-success flex-shrink-0 mt-1" width="20" height="20">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
                                </svg>
                                <div>
                                    <h4 class="fw-semibold text-dark mb-2">Your privacy is protected</h4>
                                    <p class="small text-secondary mb-0">Your personal information is encrypted and secure. We never share your data with third parties.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="pt-4">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <a href="{{ route('intake.step1') }}" class="btn btn-outline-secondary btn-lg w-100 py-3 fs-5 fw-semibold rounded-3">
                                        ← Back
                                    </a>
                                </div>
                                <div class="col-md-8">
                                    <button type="submit" class="btn btn-success btn-lg w-100 py-3 fs-5 fw-semibold rounded-3 shadow">
                                        Continue to Next Step →
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Help Link -->
            <div class="mt-4 text-center">
                <p class="text-secondary mb-0">
                    Need help? <a href="#" class="text-success fw-medium text-decoration-underline">Contact Support</a>
                </p>
            </div>
        </div>
    </div>
@endsection