@extends('applicant.applications.step-layout')

@section('title', 'Personal Details')
@section('step-title', 'Personal Information')
@section('step-description', 'Please provide your personal details accurately')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'personal_details']) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <!-- Basic Information ---->
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-user"></i>
            Basic Information
        </h3>
        
        <!-- Name Row -->
        <div class="form-row">
            <div class="form-group form-col-sm">
                <label for="title" class="form-label">
                    Title <span class="required">*</span>
                </label>
                <select name="title" id="title" class="form-control" required>
                    <option value="">Select</option>
                    <option value="Dr." {{ old('title', $formData['title'] ?? '') == 'Dr.' ? 'selected' : '' }}>Dr.</option>
                    <option value="Prof." {{ old('title', $formData['title'] ?? '') == 'Prof.' ? 'selected' : '' }}>Prof.</option>
                    <option value="Mr." {{ old('title', $formData['title'] ?? '') == 'Mr.' ? 'selected' : '' }}>Mr.</option>
                    <option value="Ms." {{ old('title', $formData['title'] ?? '') == 'Ms.' ? 'selected' : '' }}>Ms.</option>
                    <option value="Mrs." {{ old('title', $formData['title'] ?? '') == 'Mrs.' ? 'selected' : '' }}>Mrs.</option>
                </select>
                @error('title')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="first_name" class="form-label">
                    First Name <span class="required">*</span>
                </label>
                <input type="text" name="first_name" id="first_name" class="form-control" 
                       value="{{ old('first_name', $formData['first_name'] ?? '') }}" 
                       placeholder="First name" required>
                @error('first_name')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="middle_name" class="form-label">Middle Name</label>
                <input type="text" name="middle_name" id="middle_name" class="form-control" 
                       value="{{ old('middle_name', $formData['middle_name'] ?? '') }}" 
                       placeholder="Middle name">
                @error('middle_name')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="last_name" class="form-label">
                    Last Name <span class="required">*</span>
                </label>
                <input type="text" name="last_name" id="last_name" class="form-control" 
                       value="{{ old('last_name', $formData['last_name'] ?? '') }}" 
                       placeholder="Last name" required>
                @error('last_name')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
        
        <!-- Personal Details Row -->
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="date_of_birth" class="form-label">
                    Date of Birth <span class="required">*</span>
                </label>
                <input type="date" name="date_of_birth" id="date_of_birth" class="form-control" 
                       value="{{ old('date_of_birth', $formData['date_of_birth'] ?? '') }}" required>
                @error('date_of_birth')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="gender" class="form-label">
                    Gender <span class="required">*</span>
                </label>
                <select name="gender" id="gender" class="form-control" required>
                    <option value="">Select</option>
                    <option value="Male" {{ old('gender', $formData['gender'] ?? '') == 'Male' ? 'selected' : '' }}>Male</option>
                    <option value="Female" {{ old('gender', $formData['gender'] ?? '') == 'Female' ? 'selected' : '' }}>Female</option>
                    <option value="Other" {{ old('gender', $formData['gender'] ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                </select>
                @error('gender')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="category" class="form-label">
                    Category <span class="required">*</span>
                </label>
                <select name="category" id="category" class="form-control" required>
                    <option value="">Select</option>
                    <option value="General" {{ old('category', $formData['category'] ?? '') == 'General' ? 'selected' : '' }}>General</option>
                    <option value="OBC" {{ old('category', $formData['category'] ?? '') == 'OBC' ? 'selected' : '' }}>OBC</option>
                    <option value="SC" {{ old('category', $formData['category'] ?? '') == 'SC' ? 'selected' : '' }}>SC</option>
                    <option value="ST" {{ old('category', $formData['category'] ?? '') == 'ST' ? 'selected' : '' }}>ST</option>
                    <option value="EWS" {{ old('category', $formData['category'] ?? '') == 'EWS' ? 'selected' : '' }}>EWS</option>
                </select>
                @error('category')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="nationality" class="form-label">
                    Nationality <span class="required">*</span>
                </label>
                <input type="text" name="nationality" id="nationality" class="form-control" 
                       value="{{ old('nationality', $formData['nationality'] ?? 'Indian') }}" 
                       placeholder="Nationality" required>
                @error('nationality')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
    </div>
    
    <!-- Contact Information -->
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-phone"></i>
            Contact Information
        </h3>
        
        <div class="form-row">
            <div class="form-group form-col-lg">
                <label for="email" class="form-label">
                    Email Address <span class="required">*</span>
                </label>
                <input type="email" name="email" id="email" class="form-control" 
                       value="{{ old('email', $formData['email'] ?? auth()->user()->email) }}" 
                       placeholder="Email address" required>
                @error('email')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="phone" class="form-label">
                    Phone Number <span class="required">*</span>
                </label>
                <input type="tel" name="phone" id="phone" class="form-control" 
                       value="{{ old('phone', $formData['phone'] ?? '') }}" 
                       placeholder="Phone number" required>
                @error('phone')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="alternate_phone" class="form-label">Alternate Phone</label>
                <input type="tel" name="alternate_phone" id="alternate_phone" class="form-control" 
                       value="{{ old('alternate_phone', $formData['alternate_phone'] ?? '') }}" 
                       placeholder="Alternate phone">
                @error('alternate_phone')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="marital_status" class="form-label">Marital Status</label>
                <select name="marital_status" id="marital_status" class="form-control">
                    <option value="">Select</option>
                    <option value="Single" {{ old('marital_status', $formData['marital_status'] ?? '') == 'Single' ? 'selected' : '' }}>Single</option>
                    <option value="Married" {{ old('marital_status', $formData['marital_status'] ?? '') == 'Married' ? 'selected' : '' }}>Married</option>
                    <option value="Divorced" {{ old('marital_status', $formData['marital_status'] ?? '') == 'Divorced' ? 'selected' : '' }}>Divorced</option>
                    <option value="Widowed" {{ old('marital_status', $formData['marital_status'] ?? '') == 'Widowed' ? 'selected' : '' }}>Widowed</option>
                </select>
                @error('marital_status')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
    </div>
    
    <!-- Address Information -->
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-map-marker-alt"></i>
            Address Information
        </h3>
        
        <div class="form-group">
            <label for="current_address" class="form-label">
                Current Address <span class="required">*</span>
            </label>
            <textarea name="current_address" id="current_address" class="form-control" rows="3" 
                      placeholder="Enter your current address" required>{{ old('current_address', $formData['current_address'] ?? '') }}</textarea>
            @error('current_address')
                <div class="input-error">
                    <i class="fas fa-exclamation-circle"></i>
                    {{ $message }}
                </div>
            @enderror
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="current_city" class="form-label">
                    City <span class="required">*</span>
                </label>
                <input type="text" name="current_city" id="current_city" class="form-control" 
                       value="{{ old('current_city', $formData['current_city'] ?? '') }}" 
                       placeholder="City" required>
                @error('current_city')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="current_state" class="form-label">
                    State <span class="required">*</span>
                </label>
                <input type="text" name="current_state" id="current_state" class="form-control" 
                       value="{{ old('current_state', $formData['current_state'] ?? '') }}" 
                       placeholder="State" required>
                @error('current_state')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-sm">
                <label for="current_pincode" class="form-label">
                    Pincode <span class="required">*</span>
                </label>
                <input type="text" name="current_pincode" id="current_pincode" class="form-control" 
                       value="{{ old('current_pincode', $formData['current_pincode'] ?? '') }}" 
                       placeholder="Pincode" required>
                @error('current_pincode')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
        
        <div class="form-group">
            <label class="checkbox-container">
                <input type="checkbox" name="same_as_current" id="same_as_current" 
                       {{ old('same_as_current', $formData['same_as_current'] ?? false) ? 'checked' : '' }}>
                <span class="checkmark"></span>
                Permanent address same as current address
            </label>
        </div>
        
        <div id="permanent_address_section" style="{{ old('same_as_current', $formData['same_as_current'] ?? false) ? 'display:none' : '' }}">
            <div class="form-group">
                <label for="permanent_address" class="form-label">Permanent Address</label>
                <textarea name="permanent_address" id="permanent_address" class="form-control" rows="3" 
                          placeholder="Enter your permanent address">{{ old('permanent_address', $formData['permanent_address'] ?? '') }}</textarea>
                @error('permanent_address')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="permanent_city" class="form-label">City</label>
                    <input type="text" name="permanent_city" id="permanent_city" class="form-control" 
                           value="{{ old('permanent_city', $formData['permanent_city'] ?? '') }}" 
                           placeholder="City">
                    @error('permanent_city')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="permanent_state" class="form-label">State</label>
                    <input type="text" name="permanent_state" id="permanent_state" class="form-control" 
                           value="{{ old('permanent_state', $formData['permanent_state'] ?? '') }}" 
                           placeholder="State">
                    @error('permanent_state')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-sm">
                    <label for="permanent_pincode" class="form-label">Pincode</label>
                    <input type="text" name="permanent_pincode" id="permanent_pincode" class="form-control" 
                           value="{{ old('permanent_pincode', $formData['permanent_pincode'] ?? '') }}" 
                           placeholder="Pincode">
                    @error('permanent_pincode')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
        </div>
    </div>
    
    <!-- Document Upload -->
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-upload"></i>
            Upload Documents
        </h3>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="photograph" class="form-label">
                    Photograph @if(!isset($formData['photograph']))<span class="required">*</span>@endif
                </label>
                <div class="file-upload compact">
                    <div class="file-upload-content">
                        <i class="fas fa-camera"></i>
                        <span>Upload Photo</span>
                        <small>JPG, PNG (Max: 2MB)</small>
                    </div>
                    <input type="file" name="photograph" id="photograph" accept="image/*" @if(!isset($formData['photograph'])) required @endif>
                </div>
                @if(isset($formData['photograph']))
                    <div class="uploaded-file">
                        <div class="uploaded-file-info">
                            <i class="fas fa-check-circle"></i>
                            <span>Photograph uploaded</span>
                        </div>
                    </div>
                @endif
                @error('photograph')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="form-group form-col-md">
                <label for="signature" class="form-label">
                    Signature @if(!isset($formData['signature']))<span class="required">*</span>@endif
                </label>
                <div class="file-upload compact">
                    <div class="file-upload-content">
                        <i class="fas fa-signature"></i>
                        <span>Upload Signature</span>
                        <small>JPG, PNG (Max: 1MB)</small>
                    </div>
                    <input type="file" name="signature" id="signature" accept="image/*" @if(!isset($formData['signature'])) required @endif>
                </div>
                @if(isset($formData['signature']))
                    <div class="uploaded-file">
                        <div class="uploaded-file-info">
                            <i class="fas fa-check-circle"></i>
                            <span>Signature uploaded</span>
                        </div>
                    </div>
                @endif
                @error('signature')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
    </div>
</form>

@php
    $currentStep = 'personal_details';
    $nextStep = 'education';
@endphp
@endsection

@push('scripts')
<script>
document.getElementById('same_as_current').addEventListener('change', function() {
    const permanentSection = document.getElementById('permanent_address_section');
    if (this.checked) {
        permanentSection.style.display = 'none';
        // Copy current address to permanent address
        document.getElementById('permanent_address').value = document.getElementById('current_address').value;
        document.getElementById('permanent_city').value = document.getElementById('current_city').value;
        document.getElementById('permanent_state').value = document.getElementById('current_state').value;
        document.getElementById('permanent_pincode').value = document.getElementById('current_pincode').value;
    } else {
        permanentSection.style.display = 'block';
    }
});
</script>
@endpush