@extends('layouts.applicant.applicant')

@section('title', 'Edit Personal Information')

@php
    // Ensure personalInfo is available (either from controller or session)
    $personalInfo = $personalInfo ?? session('personalInfo') ?? $application->personalInformation;
@endphp

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.show', $application) }}">{{ $application->application_number }}</a></li>
    <li class="breadcrumb-item active">Edit Personal Information</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Edit Personal Information</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.step', [$application, 'personal-information']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>

    <!-- Personal Information Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-user me-2"></i>Edit Personal Information Details
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('applicant.personal-information.update', $application) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <!-- Basic Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Basic Information</h5>
                    </div>
                    
                    <div class="col-md-2 mb-3">
                        <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                        <select name="title" id="title" class="form-control @error('title') is-invalid @enderror" required>
                            <option value="">Select Title</option>
                            <option value="Mr" {{ old('title', $personalInfo->title) == 'Mr' ? 'selected' : '' }}>Mr</option>
                            <option value="Ms" {{ old('title', $personalInfo->title) == 'Ms' ? 'selected' : '' }}>Ms</option>
                            <option value="Mrs" {{ old('title', $personalInfo->title) == 'Mrs' ? 'selected' : '' }}>Mrs</option>
                            <option value="Dr" {{ old('title', $personalInfo->title) == 'Dr' ? 'selected' : '' }}>Dr</option>
                            <option value="Prof" {{ old('title', $personalInfo->title) == 'Prof' ? 'selected' : '' }}>Prof</option>
                        </select>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
                        <input type="text" name="first_name" id="first_name" 
                               class="form-control @error('first_name') is-invalid @enderror" 
                               value="{{ old('first_name', $personalInfo->first_name) }}" required>
                        @error('first_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="middle_name" class="form-label">Middle Name</label>
                        <input type="text" name="middle_name" id="middle_name" 
                               class="form-control @error('middle_name') is-invalid @enderror" 
                               value="{{ old('middle_name', $personalInfo->middle_name) }}">
                        @error('middle_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
                        <input type="text" name="last_name" id="last_name" 
                               class="form-control @error('last_name') is-invalid @enderror" 
                               value="{{ old('last_name', $personalInfo->last_name) }}" required>
                        @error('last_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="date_of_birth" class="form-label">Date of Birth <span class="text-danger">*</span></label>
                        <input type="date" name="date_of_birth" id="date_of_birth" 
                               class="form-control @error('date_of_birth') is-invalid @enderror" 
                               value="{{ old('date_of_birth', $personalInfo->date_of_birth ? $personalInfo->date_of_birth->format('Y-m-d') : '') }}" required>
                        @error('date_of_birth')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="gender" class="form-label">Gender <span class="text-danger">*</span></label>
                        <select name="gender" id="gender" class="form-control @error('gender') is-invalid @enderror" required>
                            <option value="">Select Gender</option>
                            @php
                                $selectedGender = old('gender', $personalInfo ? $personalInfo->gender : '');
                            @endphp
                            <option value="Male" {{ $selectedGender == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ $selectedGender == 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ $selectedGender == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="category" class="form-label">Category <span class="text-danger">*</span></label>
                        <select name="category" id="category" class="form-control @error('category') is-invalid @enderror" required>
                            <option value="">Select Category</option>
                            <option value="General" {{ old('category', $personalInfo->category) == 'General' ? 'selected' : '' }}>General</option>
                            <option value="SC" {{ old('category', $personalInfo->category) == 'SC' ? 'selected' : '' }}>SC</option>
                            <option value="ST" {{ old('category', $personalInfo->category) == 'ST' ? 'selected' : '' }}>ST</option>
                            <option value="OBC" {{ old('category', $personalInfo->category) == 'OBC' ? 'selected' : '' }}>OBC</option>
                            <option value="EWS" {{ old('category', $personalInfo->category) == 'EWS' ? 'selected' : '' }}>EWS</option>
                            <option value="PwD" {{ old('category', $personalInfo->category) == 'PwD' ? 'selected' : '' }}>PwD</option>
                        </select>
                        @error('category')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="marital_status" class="form-label">Marital Status <span class="text-danger">*</span></label>
                        <select name="marital_status" id="marital_status" class="form-control @error('marital_status') is-invalid @enderror" required>
                            <option value="">Select Status</option>
                            @php
                                $selectedMaritalStatus = old('marital_status', $personalInfo ? $personalInfo->marital_status : '');
                            @endphp
                            <option value="Single" {{ $selectedMaritalStatus == 'Single' ? 'selected' : '' }}>Single</option>
                            <option value="Married" {{ $selectedMaritalStatus == 'Married' ? 'selected' : '' }}>Married</option>
                            <option value="Divorced" {{ $selectedMaritalStatus == 'Divorced' ? 'selected' : '' }}>Divorced</option>
                            <option value="Widowed" {{ $selectedMaritalStatus == 'Widowed' ? 'selected' : '' }}>Widowed</option>
                        </select>
                        @error('marital_status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Contact Information</h5>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                        <input type="email" name="email" id="email" 
                               class="form-control @error('email') is-invalid @enderror" 
                               value="{{ old('email', $personalInfo->email) }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                        <input type="tel" name="phone" id="phone" 
                               class="form-control @error('phone') is-invalid @enderror" 
                               value="{{ old('phone', $personalInfo->phone) }}" required>
                        @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="alternate_phone" class="form-label">Alternate Phone</label>
                        <input type="tel" name="alternate_phone" id="alternate_phone" 
                               class="form-control @error('alternate_phone') is-invalid @enderror" 
                               value="{{ old('alternate_phone', $personalInfo->alternate_phone) }}">
                        @error('alternate_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Address Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Address Information</h5>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="permanent_address" class="form-label">Permanent Address <span class="text-danger">*</span></label>
                        <textarea name="permanent_address" id="permanent_address" rows="3"
                                  class="form-control @error('permanent_address') is-invalid @enderror" required>{{ old('permanent_address', $personalInfo->permanent_address) }}</textarea>
                        @error('permanent_address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="current_address" class="form-label">Current Address <span class="text-danger">*</span></label>
                        <textarea name="current_address" id="current_address" rows="3"
                                  class="form-control @error('current_address') is-invalid @enderror" required>{{ old('current_address', $personalInfo->current_address) }}</textarea>
                        @error('current_address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" id="same_as_permanent">
                            <label class="form-check-label" for="same_as_permanent">
                                Same as permanent address
                            </label>
                        </div>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="city" class="form-label">City <span class="text-danger">*</span></label>
                        <input type="text" name="city" id="city" 
                               class="form-control @error('city') is-invalid @enderror" 
                               value="{{ old('city', $personalInfo->city) }}" required>
                        @error('city')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="state" class="form-label">State <span class="text-danger">*</span></label>
                        <input type="text" name="state" id="state" 
                               class="form-control @error('state') is-invalid @enderror" 
                               value="{{ old('state', $personalInfo->state) }}" required>
                        @error('state')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="pincode" class="form-label">Pincode <span class="text-danger">*</span></label>
                        <input type="text" name="pincode" id="pincode" 
                               class="form-control @error('pincode') is-invalid @enderror" 
                               value="{{ old('pincode', $personalInfo->pincode) }}" required>
                        @error('pincode')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="country" class="form-label">Country <span class="text-danger">*</span></label>
                        <input type="text" name="country" id="country" 
                               class="form-control @error('country') is-invalid @enderror" 
                               value="{{ old('country', $personalInfo->country) }}" required>
                        @error('country')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="nationality" class="form-label">Nationality <span class="text-danger">*</span></label>
                        <input type="text" name="nationality" id="nationality" 
                               class="form-control @error('nationality') is-invalid @enderror" 
                               value="{{ old('nationality', $personalInfo->nationality) }}" required>
                        @error('nationality')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Identity Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Identity Information</h5>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="aadhar_number" class="form-label">Aadhar Number</label>
                        <input type="text" name="aadhar_number" id="aadhar_number" 
                               class="form-control @error('aadhar_number') is-invalid @enderror" 
                               value="{{ old('aadhar_number', $personalInfo->aadhar_number) }}" maxlength="12">
                        @error('aadhar_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="pan_number" class="form-label">PAN Number</label>
                        <input type="text" name="pan_number" id="pan_number" 
                               class="form-control @error('pan_number') is-invalid @enderror" 
                               value="{{ old('pan_number', $personalInfo->pan_number) }}" maxlength="10" style="text-transform: uppercase;">
                        @error('pan_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- File Uploads -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Upload Documents</h5>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="photo" class="form-label">Photograph</label>
                        @if($personalInfo->photo)
                            <div class="mb-2">
                                <img src="{{ Storage::url($personalInfo->photo) }}" alt="Current Photo" class="img-thumbnail" style="max-width: 150px;">
                                <div class="small text-muted">Current photograph</div>
                            </div>
                        @endif
                        <input type="file" name="photo" id="photo" 
                               class="form-control @error('photo') is-invalid @enderror" 
                               accept="image/jpeg,image/png,image/jpg">
                        @error('photo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Upload new photograph to replace current one (JPEG, PNG, JPG). Max size: 2MB</div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="signature" class="form-label">Signature</label>
                        @if($personalInfo->signature)
                            <div class="mb-2">
                                <img src="{{ Storage::url($personalInfo->signature) }}" alt="Current Signature" class="img-thumbnail" style="max-width: 200px;">
                                <div class="small text-muted">Current signature</div>
                            </div>
                        @endif
                        <input type="file" name="signature" id="signature" 
                               class="form-control @error('signature') is-invalid @enderror" 
                               accept="image/jpeg,image/png,image/jpg">
                        @error('signature')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Upload new signature to replace current one (JPEG, PNG, JPG). Max size: 1MB</div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="d-flex justify-content-end">
                    <a href="{{ route('applicant.applications.step', [$application, 'personal-information']) }}" class="btn btn-secondary me-2">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Update Personal Information
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.form-label {
    font-weight: 600;
    color: #5a5c69;
}

.border-bottom {
    border-bottom: 2px solid #e3e6f0 !important;
}

.img-thumbnail {
    border: 2px solid #dee2e6;
    border-radius: 8px;
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Debug: Log current values
    const genderSelect = document.getElementById('gender');
    const maritalStatusSelect = document.getElementById('marital_status');
    
    console.log('Gender value on load:', genderSelect.value);
    console.log('Marital Status value on load:', maritalStatusSelect.value);
    
    // Ensure the correct options are selected (fallback)
    @if($personalInfo)
        @if($personalInfo->gender)
            genderSelect.value = '{{ $personalInfo->gender }}';
        @endif
        @if($personalInfo->marital_status)
            maritalStatusSelect.value = '{{ $personalInfo->marital_status }}';
        @endif
    @endif
    
    // Same as permanent address checkbox
    const sameAsPermanent = document.getElementById('same_as_permanent');
    const permanentAddress = document.getElementById('permanent_address');
    const currentAddress = document.getElementById('current_address');
    
    sameAsPermanent.addEventListener('change', function() {
        if (this.checked) {
            currentAddress.value = permanentAddress.value;
        }
    });
    
    // Update current address when permanent address changes and checkbox is checked
    permanentAddress.addEventListener('input', function() {
        if (sameAsPermanent.checked) {
            currentAddress.value = this.value;
        }
    });
    
    // PAN number uppercase
    const panInput = document.getElementById('pan_number');
    panInput.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });
});
</script>
@endpush