@extends('layouts.applicant.applicant')

@section('title', 'Undertaking & Declaration')

@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">Undertaking</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">Undertaking & Declaration</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.application-verification.show', $application) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Summary
            </a>
        </div>
    </div>

    <!-- Progress Indicator -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="progress-steps">
                        <div class="step completed">
                            <div class="step-number">1</div>
                            <div class="step-title">Personal Information</div>
                        </div>
                        <div class="step completed">
                            <div class="step-number">2</div>
                            <div class="step-title">Education Qualification</div>
                        </div>
                        <div class="step completed">
                            <div class="step-number">3</div>
                            <div class="step-title">Fee Payment</div>
                        </div>
                        <div class="step completed">
                            <div class="step-number">4</div>
                            <div class="step-title">Document Upload</div>
                        </div>
                        <div class="step completed">
                            <div class="step-number">5</div>
                            <div class="step-title">Verification</div>
                        </div>
                        <div class="step active">
                            <div class="step-number">6</div>
                            <div class="step-title">Final Submission</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Undertaking Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>Undertaking & Declaration
            </h6>
        </div>
        <div class="card-body">
            <div class="alert alert-warning">
                <h6><i class="fas fa-exclamation-triangle me-2"></i>Important Notice</h6>
                <p class="mb-0">
                    <strong>Once you submit this undertaking, your application will be finalized and cannot be edited.</strong>
                    Please read the undertaking carefully before proceeding.
                </p>
            </div>

            <!-- Application Summary Link -->
            <div class="alert alert-info">
                <h6><i class="fas fa-file-pdf me-2"></i>Application Summary PDF</h6>
                <p>Your application summary has been generated successfully.</p>
                <a href="{{ route('applicant.application-verification.download-pdf', $application) }}" 
                   class="btn btn-sm btn-primary" target="_blank">
                    <i class="fas fa-download me-1"></i>Download Application Summary PDF
                </a>
            </div>

            <form action="{{ route('applicant.application-verification.submit-undertaking', $application) }}" method="POST">
                @csrf
                
                <!-- Undertaking Text -->
                <div class="card border-danger mb-4">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0">UNDERTAKING</h6>
                    </div>
                    <div class="card-body">
                        <div class="undertaking-text">
                            <p>I, <strong>{{ $application->personalInformation->first_name }} {{ $application->personalInformation->last_name }}</strong>, hereby undertake and declare that:</p>
                            
                            <ol>
                                <li><strong>Accuracy of Information:</strong> All the information provided in this application is true, complete, and accurate to the best of my knowledge and belief.</li>
                                
                                <li><strong>Supporting Documents:</strong> All documents uploaded and submitted are genuine, authentic, and have not been tampered with in any manner.</li>
                                
                                <li><strong>Educational Qualifications:</strong> The educational qualifications mentioned are correct and I possess the original certificates/documents as proof.</li>
                                
                                <li><strong>Fee Payment:</strong> The fee payment information provided is accurate and I have made the payment as per the prescribed rules.</li>
                                
                                <li><strong>Eligibility Criteria:</strong> I meet all the eligibility criteria as specified in the advertisement for the position applied.</li>
                                
                                <li><strong>Legal Consequences:</strong> I understand that any false information or suppression of facts may lead to rejection of my application or cancellation of my candidature at any stage of the recruitment process.</li>
                                
                                <li><strong>Verification Rights:</strong> I authorize the recruiting authority to verify any information provided in this application from the concerned authorities.</li>
                                
                                <li><strong>Final Submission:</strong> I understand that once this undertaking is submitted, my application will be finalized and no further changes will be allowed.</li>
                                
                                <li><strong>Terms and Conditions:</strong> I agree to abide by all the terms and conditions mentioned in the recruitment advertisement and the rules of the recruiting organization.</li>
                                
                                <li><strong>Communication:</strong> I will be responsible for regularly checking the official website and my registered email for any communication regarding this application.</li>
                            </ol>
                            
                            <p class="mt-3"><strong>I hereby confirm that I have read and understood all the above points and agree to be bound by them.</strong></p>
                        </div>
                    </div>
                </div>

                <!-- Declaration -->
                <div class="card border-primary mb-4">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">DECLARATION</h6>
                    </div>
                    <div class="card-body">
                        <p>I hereby declare that:</p>
                        <ul>
                            <li>I have carefully read and understood the advertisement and instructions.</li>
                            <li>I fulfill all the eligibility conditions as prescribed in the advertisement.</li>
                            <li>The information furnished by me is correct and complete in all respects.</li>
                            <li>I understand that in case any information is found to be incorrect or false, my candidature is liable to be rejected/cancelled.</li>
                            <li>I agree to appear for any test/interview as may be conducted by the recruiting authority.</li>
                        </ul>
                    </div>
                </div>

                <!-- Acceptance Checkboxes -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="form-check mb-3">
                            <input class="form-check-input @error('undertaking_accepted') is-invalid @enderror" 
                                   type="checkbox" name="undertaking_accepted" id="undertaking_accepted" value="1" required>
                            <label class="form-check-label fw-bold" for="undertaking_accepted">
                                I have read and accept the above undertaking
                            </label>
                            @error('undertaking_accepted')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input @error('declaration_accepted') is-invalid @enderror" 
                                   type="checkbox" name="declaration_accepted" id="declaration_accepted" value="1" required>
                            <label class="form-check-label fw-bold" for="declaration_accepted">
                                I have read and accept the above declaration
                            </label>
                            @error('declaration_accepted')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Application Details Summary -->
                <div class="card border-info mb-4">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0">APPLICATION SUMMARY</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Application Number:</strong> {{ $application->application_number }}</p>
                                <p><strong>Applicant Name:</strong> {{ $application->personalInformation->first_name }} {{ $application->personalInformation->last_name }}</p>
                                <p><strong>Position Applied:</strong> {{ $application->advertisement->title }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Department:</strong> {{ $application->advertisement->department->name ?? 'N/A' }}</p>
                                <p><strong>Application Date:</strong> {{ $application->created_at->format('F d, Y') }}</p>
                                <p><strong>Summary Generated:</strong> {{ $application->summary_generated_at->format('F d, Y h:i A') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Final Warning -->
                <div class="alert alert-danger">
                    <h6><i class="fas fa-exclamation-triangle me-2"></i>Final Warning</h6>
                    <p class="mb-0">
                        <strong>By clicking "Submit Final Application" below, you confirm that:</strong>
                    </p>
                    <ul class="mb-0 mt-2">
                        <li>All information provided is accurate and complete</li>
                        <li>You have reviewed the application summary PDF</li>
                        <li>You understand that the application cannot be edited after submission</li>
                        <li>You accept full responsibility for the information provided</li>
                    </ul>
                </div>

                <!-- Submit Button -->
                <div class="text-center">
                    <button type="submit" class="btn btn-danger btn-lg" id="submit-btn"
                            onclick="return confirm('Are you absolutely sure you want to submit your final application? This action cannot be undone.')">
                        <i class="fas fa-paper-plane me-2"></i>Submit Final Application
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #1cc88a;
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    background: white;
    padding: 0 15px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e3e6f0;
    color: #5a5c69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
}

.step.active .step-number {
    background: #dc3545;
    color: white;
}

.step.completed .step-number {
    background: #1cc88a;
    color: white;
}

.step-title {
    font-size: 0.875rem;
    color: #5a5c69;
    text-align: center;
    font-weight: 500;
}

.step.active .step-title {
    color: #dc3545;
    font-weight: 600;
}

.step.completed .step-title {
    color: #1cc88a;
    font-weight: 600;
}

.undertaking-text {
    font-size: 14px;
    line-height: 1.6;
}

.undertaking-text ol {
    padding-left: 20px;
}

.undertaking-text li {
    margin-bottom: 10px;
}

.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

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

.card-header {
    border-bottom: 1px solid #e3e6f0;
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const submitBtn = document.getElementById('submit-btn');
    const undertakingCheck = document.getElementById('undertaking_accepted');
    const declarationCheck = document.getElementById('declaration_accepted');
    
    function updateSubmitButton() {
        if (undertakingCheck.checked && declarationCheck.checked) {
            submitBtn.disabled = false;
            submitBtn.classList.remove('btn-secondary');
            submitBtn.classList.add('btn-danger');
        } else {
            submitBtn.disabled = true;
            submitBtn.classList.remove('btn-danger');
            submitBtn.classList.add('btn-secondary');
        }
    }
    
    undertakingCheck.addEventListener('change', updateSubmitButton);
    declarationCheck.addEventListener('change', updateSubmitButton);
    
    // Initial state
    updateSubmitButton();
    
    // Form submission handler
    form.addEventListener('submit', function() {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting...';
    });
});
</script>
@endpush