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

@section('title', 'Declaration')
@section('step-title', 'Declaration & Submission')
@section('step-description', 'Review and submit your application with declaration')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'declaration']) }}">
    @csrf
    @method('PUT')
    
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-file-signature"></i>
            Declaration & Undertaking
        </h3>
        
        <div class="declaration-content">
            <div class="declaration-item">
                <label class="checkbox-container">
                    <input type="checkbox" name="declaration[information_accuracy]" 
                           id="information_accuracy" value="1" required
                           {{ old('declaration.information_accuracy', $formData['information_accuracy'] ?? false) ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span class="declaration-text">
                        <strong>Information Accuracy:</strong> I hereby declare that all the information provided in this application is true, complete, and accurate to the best of my knowledge. I understand that any false or misleading information may result in the rejection of my application or termination of employment if discovered later.
                    </span>
                </label>
                @error('declaration.information_accuracy')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="declaration-item">
                <label class="checkbox-container">
                    <input type="checkbox" name="declaration[document_authenticity]" 
                           id="document_authenticity" value="1" required
                           {{ old('declaration.document_authenticity', $formData['document_authenticity'] ?? false) ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span class="declaration-text">
                        <strong>Document Authenticity:</strong> I certify that all documents, certificates, and supporting materials submitted with this application are genuine and authentic. I understand that submission of forged or fraudulent documents is a serious offense and may lead to legal action.
                    </span>
                </label>
                @error('declaration.document_authenticity')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="declaration-item">
                <label class="checkbox-container">
                    <input type="checkbox" name="declaration[eligibility_criteria]" 
                           id="eligibility_criteria" value="1" required
                           {{ old('declaration.eligibility_criteria', $formData['eligibility_criteria'] ?? false) ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span class="declaration-text">
                        <strong>Eligibility Criteria:</strong> I confirm that I meet all the eligibility criteria specified in the job advertisement and possess the required qualifications, experience, and skills for the position I am applying for.
                    </span>
                </label>
                @error('declaration.eligibility_criteria')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="declaration-item">
                <label class="checkbox-container">
                    <input type="checkbox" name="declaration[terms_conditions]" 
                           id="terms_conditions" value="1" required
                           {{ old('declaration.terms_conditions', $formData['terms_conditions'] ?? false) ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span class="declaration-text">
                        <strong>Terms & Conditions:</strong> I have read and understood all the terms and conditions of employment, recruitment process, and institutional policies. I agree to abide by all rules and regulations of the institution if selected.
                    </span>
                </label>
                @error('declaration.terms_conditions')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="declaration-item">
                <label class="checkbox-container">
                    <input type="checkbox" name="declaration[background_check]" 
                           id="background_check" value="1" required
                           {{ old('declaration.background_check', $formData['background_check'] ?? false) ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span class="declaration-text">
                        <strong>Background Verification:</strong> I consent to background verification and reference checks as deemed necessary by the institution. I authorize the institution to contact my previous employers, educational institutions, and references for verification purposes.
                    </span>
                </label>
                @error('declaration.background_check')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
            
            <div class="declaration-item">
                <label class="checkbox-container">
                    <input type="checkbox" name="declaration[communication_consent]" 
                           id="communication_consent" value="1" required
                           {{ old('declaration.communication_consent', $formData['communication_consent'] ?? false) ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                    <span class="declaration-text">
                        <strong>Communication Consent:</strong> I consent to receive communications regarding my application status, interview schedules, and other recruitment-related information via email, phone, or postal mail at the contact details provided.
                    </span>
                </label>
                @error('declaration.communication_consent')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
        
        <div class="signature-section">
            <h4 class="signature-title">
                <i class="fas fa-signature"></i>
                Digital Signature
            </h4>
            
            <div class="form-row">
                <div class="form-group form-col-md">
                    <label for="place" class="form-label">
                        Place <span class="required">*</span>
                    </label>
                    <input type="text" name="declaration[place]" id="place" class="form-control" 
                           value="{{ old('declaration.place', $formData['place'] ?? '') }}" 
                           placeholder="City where you are signing" required>
                    @error('declaration.place')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group form-col-md">
                    <label for="date" class="form-label">
                        Date <span class="required">*</span>
                    </label>
                    <input type="date" name="declaration[date]" id="date" class="form-control" 
                           value="{{ old('declaration.date', $formData['date'] ?? date('Y-m-d')) }}" required>
                    @error('declaration.date')
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
            
            <div class="form-group">
                <label for="signature_name" class="form-label">
                    Full Name (Digital Signature) <span class="required">*</span>
                </label>
                <input type="text" name="declaration[signature_name]" id="signature_name" class="form-control" 
                       value="{{ old('declaration.signature_name', $formData['signature_name'] ?? auth()->user()->name) }}" 
                       placeholder="Type your full name as digital signature" required>
                @error('declaration.signature_name')
                    <div class="input-error">
                        <i class="fas fa-exclamation-circle"></i>
                        {{ $message }}
                    </div>
                @enderror
            </div>
        </div>
        
        <div class="final-declaration">
            <div class="declaration-box">
                <h4>Final Declaration</h4>
                <p>
                    By typing my name above and submitting this application, I hereby declare that:
                </p>
                <ul>
                    <li>I have carefully reviewed all the information provided in this application</li>
                    <li>All statements made and documents submitted are true and complete</li>
                    <li>I understand that this digital signature has the same legal validity as a handwritten signature</li>
                    <li>I accept full responsibility for the accuracy and authenticity of all information provided</li>
                    <li>I understand that the institution reserves the right to verify all information and reject applications with false information</li>
                </ul>
            </div>
        </div>
        
        <div class="submission-actions">
            <div class="action-buttons">
                <button type="submit" name="action" value="save" class="btn btn-secondary">
                    <i class="fas fa-save"></i>
                    Save as Draft
                </button>
                
                <button type="submit" name="action" value="submit" class="btn btn-primary btn-submit" 
                        onclick="return confirmSubmission()">
                    <i class="fas fa-paper-plane"></i>
                    Submit Application
                </button>
            </div>
            
            <div class="submission-note">
                <i class="fas fa-info-circle"></i>
                <p><strong>Note:</strong> Once submitted, you will not be able to modify your application. Please review all information carefully before final submission.</p>
            </div>
        </div>
    </div>
</form>

@php
    $currentStep = 'declaration';
    $previousStep = 'documents';
    $nextStep = 'review';
@endphp
@endsection

@push('styles')
<style>
.declaration-content {
    margin-bottom: 2rem;
}

.declaration-item {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.declaration-text {
    display: block;
    line-height: 1.6;
    color: #374151;
    margin-left: 0.5rem;
}

.signature-section {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.signature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.signature-title i {
    margin-right: 0.5rem;
}

.final-declaration {
    margin-bottom: 2rem;
}

.declaration-box {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 1.5rem;
}

.declaration-box h4 {
    color: #92400e;
    margin-bottom: 1rem;
    font-weight: 600;
}

.declaration-box p {
    color: #92400e;
    margin-bottom: 1rem;
}

.declaration-box ul {
    color: #92400e;
    margin: 0;
    padding-left: 1.5rem;
}

.declaration-box li {
    margin-bottom: 0.5rem;
}

.submission-actions {
    text-align: center;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.btn-submit {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    font-weight: 600;
    padding: 12px 24px;
    font-size: 1rem;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

.submission-note {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    max-width: 600px;
    margin: 0 auto;
}

.submission-note i {
    color: #3b82f6;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.submission-note p {
    margin: 0;
    color: #1e40af;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .declaration-item {
        padding: 1rem;
    }
    
    .signature-section {
        padding: 1rem;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .action-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}
</style>
@endpush

@push('scripts')
<script>
function confirmSubmission() {
    // Check if all required checkboxes are checked
    const requiredCheckboxes = [
        'information_accuracy',
        'document_authenticity', 
        'eligibility_criteria',
        'terms_conditions',
        'background_check',
        'communication_consent'
    ];
    
    for (let id of requiredCheckboxes) {
        if (!document.getElementById(id).checked) {
            alert('Please accept all declarations before submitting your application.');
            return false;
        }
    }
    
    // Check if required fields are filled
    const place = document.getElementById('place').value.trim();
    const date = document.getElementById('date').value.trim();
    const signatureName = document.getElementById('signature_name').value.trim();
    
    if (!place || !date || !signatureName) {
        alert('Please fill in all required signature fields.');
        return false;
    }
    
    // Final confirmation
    const confirmed = confirm(
        'Are you sure you want to submit your application?\n\n' +
        'Once submitted, you will not be able to make any changes to your application.\n\n' +
        'Please ensure all information is correct before proceeding.'
    );
    
    if (confirmed) {
        // Disable the submit button to prevent double submission
        const submitBtn = document.querySelector('.btn-submit');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...';
    }
    
    return confirmed;
}

// Auto-fill current date
document.addEventListener('DOMContentLoaded', function() {
    const dateField = document.getElementById('date');
    if (!dateField.value) {
        const today = new Date().toISOString().split('T')[0];
        dateField.value = today;
    }
});
</script>
@endpush