@extends('layouts.applicant.applicant')

@section('title', 'Final Submission')

@push('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@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">Final Submission</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">Final Submission</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            @php
                $previousStep = $currentStep->getPreviousStep();
            @endphp
            @if($previousStep)
                <a href="{{ route('applicant.applications.step', [$application, $previousStep->slug]) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Previous Step
                </a>
            @endif
        </div>
    </div>

    <!-- Reset Notification -->
    @include('applicant.applications.partials.reset-notification')
    
    <!-- Dynamic Progress Indicator -->
    @include('applicant.applications.partials.progress-indicator')

    @if($application->status === 'submitted')
        <!-- Application Already Submitted -->
        <div class="card shadow">
            <div class="card-header py-3 bg-success text-white">
                <h6 class="m-0 font-weight-bold">
                    <i class="fas fa-check-circle me-2"></i>Application Successfully Submitted
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    Your application has been successfully submitted on {{ $application->submitted_at->format('F d, Y \a\t h:i A') }}.
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold" style="width: 40%;">Application Number:</td>
                                <td>{{ $application->application_number }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Submission Date:</td>
                                <td>{{ $application->submitted_at->format('F d, Y h:i A') }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Status:</td>
                                <td><span class="badge badge-success">Submitted</span></td>
                            </tr>
                            @if($application->undertaking_accepted_at)
                            <tr>
                                <td class="fw-bold">Undertaking Accepted:</td>
                                <td>{{ $application->undertaking_accepted_at->format('F d, Y h:i A') }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                </div>
                
                <div class="mt-4">
                    <h6 class="text-primary">
                        <i class="fas fa-file-pdf me-2"></i>Download Complete Application PDF
                    </h6>
                    <p class="text-muted">
                        Your complete application has been compiled into a comprehensive PDF document containing all data from Steps 1-31, including personal information, education, experience, publications, and undertaking. This PDF includes your photograph on the first page and signature on the last page.
                    </p>
                    <div class="d-flex gap-2 flex-wrap">
                        <!-- Comprehensive PDF Download -->
                        <a href="{{ route('applicant.applications.download', $application) }}" class="btn btn-success">
                            <i class="fas fa-download me-2"></i>Download Complete Application PDF
                        </a>
                        
                        @if($application->final_pdf_path)
                            <!-- Legacy PDF Download (if exists) -->
                            <a href="{{ route('applicant.applications.download-final-pdf', $application) }}" class="btn btn-outline-primary">
                                <i class="fas fa-file-pdf me-2"></i>Download Legacy PDF
                            </a>
                        @endif
                    </div>
                    
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Note:</strong> The "Complete Application PDF" contains all your filled data from all 31 steps with proper formatting, page numbers, logo, and includes your photo and signature. Please use this PDF for official purposes.
                    </div>
                </div>
                
                <div class="mt-4">
                    <a href="{{ route('applicant.applications.index') }}" class="btn btn-primary">
                        <i class="fas fa-list me-2"></i>Back to Applications
                    </a>
                </div>
            </div>
        </div>
    @else
        <!-- Final Submission Form -->
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-file-signature me-2"></i>Final Submission & Undertaking
                </h6>
            </div>
            <div class="card-body">
                <!-- Prerequisites Check -->
                @php
                    // Note: Document upload step is disabled, so we skip document validation
                    $hasPersonalInfo = $application->personalInformation !== null;
                    $hasEducation = $application->educationQualifications->count() > 0;
                    $hasFeePayment = ($application->feePayment !== null || $application->isFeeExempted());
                    $isComplete = $hasPersonalInfo && $hasEducation && $hasFeePayment;
                @endphp
                
                <!-- Application Preview PDF Section -->
                <div class="card border-info mb-4">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-file-pdf me-2"></i>Application Preview
                        </h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-3">
                            Before final submission, you can generate and review a PDF of your complete application data (Steps 1-30). 
                            This preview will help you verify all information before submitting.
                        </p>
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="button" class="btn btn-info" onclick="generatePreviewPDF()" id="previewPdfBtn">
                                <i class="fas fa-file-pdf me-2"></i>Generate PDF To View Application Data
                            </button>
                            <button type="button" class="btn btn-outline-info" onclick="viewUploadedFiles()" id="viewFilesBtn">
                                <i class="fas fa-file-archive me-2"></i>View Uploaded Files
                            </button>
                        </div>
                        <div id="previewPdfStatus" class="mt-2"></div>
                        <div id="viewFilesStatus" class="mt-2"></div>
                    </div>
                </div>
                
                @if(!$isComplete)
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Incomplete Application:</strong> Please complete all required sections before final submission.
                        <ul class="mt-2 mb-0">
                            @if(!$hasPersonalInfo)
                                <li>Personal Information is incomplete</li>
                            @endif
                            @if(!$hasEducation)
                                <li>Education Qualifications are missing</li>
                            @endif
                            @if(!$hasFeePayment)
                                <li>Fee Payment is incomplete</li>
                            @endif
                        </ul>
                        <div class="mt-3">
                            <p class="mb-0"><strong>Note:</strong> You can still generate a preview PDF to review your current application data.</p>
                        </div>
                    </div>
                @else
                    <!-- Application Summary -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Ready for Submission:</strong> All required sections have been completed. Please review the undertaking below and submit your application.
                    </div>
                    
                    <!-- Undertaking Text -->
                    <div class="card border-primary mb-4">
                        <div class="card-header bg-primary text-white">
                            <h6 class="mb-0">
                                <i class="fas fa-scroll me-2"></i>Undertaking Declaration
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="undertaking-text" style="max-height: 400px; overflow-y: auto; padding: 15px; border: 1px solid #dee2e6; background-color: #f8f9fa;">
                                <h6 class="text-primary">UNDERTAKING</h6>
                                
                                <p>I, <strong>{{ $application->personalInformation->first_name }} {{ $application->personalInformation->last_name }}</strong>, hereby declare and undertake that:</p>
                                
                                <ol>
                                    <li><strong>Accuracy of Information:</strong> All the information provided in this application form is true, complete, and accurate to the best of my knowledge and belief. I understand that any false or misleading information may result in the rejection of my application or cancellation of my appointment.</li>
                                    
                                    <li><strong>Document Authenticity:</strong> All documents submitted along with this application are genuine and authentic. I understand that submission of fake, forged, or tampered documents will lead to immediate disqualification and may result in legal action.</li>
                                    
                                    <li><strong>Eligibility Criteria:</strong> I meet all the eligibility criteria as specified in the advertisement for the post of <strong>{{ $application->advertisement->title }}</strong> in the Department of <strong>{{ $application->advertisement->department->name ?? 'N/A' }}</strong>.</li>
                                    
                                    <li><strong>Terms and Conditions:</strong> I agree to abide by all the terms and conditions mentioned in the advertisement and the rules and regulations of the National Institute of Technology Hamirpur (NITH).</li>
                                    
                                    <li><strong>Background Verification:</strong> I consent to background verification of my credentials, experience, and character by NITH or any agency authorized by NITH.</li>
                                    
                                    <li><strong>Communication:</strong> I agree to receive all communications related to this application through the email address and contact details provided in this application.</li>
                                    
                                    <li><strong>Final Decision:</strong> I understand that the decision of NITH regarding my application will be final and binding, and I will not challenge it in any court of law.</li>
                                    
                                    <li><strong>Service Conditions:</strong> If selected, I agree to serve NITH for the minimum period as specified in the service rules and will not seek premature release without proper justification.</li>
                                    
                                    <li><strong>Medical Fitness:</strong> I declare that I am medically fit for the position applied for and will undergo medical examination if required by NITH.</li>
                                    
                                    <li><strong>Legal Compliance:</strong> I have not been convicted of any criminal offense and there are no pending criminal cases against me. If any such case arises during the selection process, I will immediately inform NITH.</li>
                                </ol>
                                
                                <p class="mt-3"><strong>I understand that this undertaking is legally binding and any violation of the above declarations may result in appropriate legal action against me.</strong></p>
                                
                                <div class="mt-4">
                                    <p><strong>Applicant Details:</strong></p>
                                    <ul class="list-unstyled">
                                        <li><strong>Name:</strong> {{ $application->personalInformation->first_name }} {{ $application->personalInformation->last_name }}</li>
                                        <li><strong>Application Number:</strong> {{ $application->application_number }}</li>
                                        <li><strong>Post Applied:</strong> {{ $application->advertisement->title }}</li>
                                        <li><strong>Department:</strong> {{ $application->advertisement->department->name ?? 'N/A' }}</li>
                                        <li><strong>Date:</strong> {{ now()->format('F d, Y') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Acceptance Form -->
                    <form action="{{ route('applicant.applications.final-submission', $application) }}" method="POST" id="finalSubmissionForm">
                        @csrf
                        
                        <div class="form-check mb-4">
                            <input class="form-check-input" type="checkbox" id="accept_undertaking" name="accept_undertaking" value="1" required>
                            <label class="form-check-label fw-bold" for="accept_undertaking">
                                I have read and understood the above undertaking and hereby accept all the terms and conditions mentioned therein.
                            </label>
                            @error('accept_undertaking')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Important:</strong> Once you submit your application, you will not be able to make any changes. Please ensure all information is correct before proceeding.
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            @php
                                $previousStep = $currentStep->getPreviousStep();
                            @endphp
                            @if($previousStep)
                                <a href="{{ route('applicant.applications.step', [$application, $previousStep->slug]) }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-1"></i>Previous Step
                                </a>
                            @endif
                            
                            <button type="submit" class="btn btn-success btn-lg" id="submitBtn" disabled>
                                <i class="fas fa-paper-plane me-2"></i>Submit Final Application
                            </button>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    @endif
</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: #e3e6f0;
    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: #667eea;
    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: #667eea;
    font-weight: 600;
}

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

.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;
}

.undertaking-text {
    font-size: 0.9rem;
    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;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}
</style>

<script>
function viewUploadedFiles() {
    const btn = document.getElementById('viewFilesBtn');
    const status = document.getElementById('viewFilesStatus');
    
    // Show loading state
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Collecting Files...';
    status.innerHTML = '<div class="text-info"><i class="fas fa-spinner fa-spin me-1"></i>Collecting and merging uploaded files...</div>';
    
    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        status.innerHTML = '<div class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>Security token not found. Please refresh the page.</div>';
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-file-archive me-2"></i>View Uploaded Files';
        return;
    }
    
    fetch(`{{ route('applicant.applications.download-uploaded-files', $application) }}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken.getAttribute('content'),
            'Accept': 'application/pdf,application/json',
        }
    })
    .then(response => {
        if (response.ok) {
            const contentType = response.headers.get('content-type');
            if (contentType && (contentType.includes('application/pdf') || contentType.includes('application/zip'))) {
                return response.blob();
            } else {
                // Handle JSON error response
                return response.json().then(data => {
                    throw new Error(data.message || 'Failed to collect files');
                });
            }
        } else {
            // Try to get error message from response
            return response.json().then(data => {
                throw new Error(data.message || `HTTP ${response.status}: ${response.statusText}`);
            }).catch(() => {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            });
        }
    })
    .then(blob => {
        // Create download link
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `{{ $application->application_number }}_uploaded_files.pdf`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        // Show success message
        status.innerHTML = '<div class="text-success"><i class="fas fa-check-circle me-1"></i>Files merged successfully! Check your downloads.</div>';
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-file-archive me-2"></i>View Uploaded Files';
    })
    .catch(error => {
        console.error('File Collection Error:', error);
        let errorMessage = 'Error collecting files. Please try again.';
        if (error.message) {
            errorMessage = error.message;
        }
        status.innerHTML = `<div class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>${errorMessage}</div>`;
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-file-archive me-2"></i>View Uploaded Files';
    });
}

function generatePreviewPDF() {
    const btn = document.getElementById('previewPdfBtn');
    const status = document.getElementById('previewPdfStatus');
    
    // Show loading state
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Generating PDF...';
    status.innerHTML = '<div class="text-info"><i class="fas fa-spinner fa-spin me-1"></i>Generating application preview PDF...</div>';
    
    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        status.innerHTML = '<div class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>Security token not found. Please refresh the page.</div>';
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-file-pdf me-2"></i>Generate PDF To View Application Data';
        return;
    }
    
    fetch(`{{ route('applicant.applications.generate-preview-pdf', $application) }}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken.getAttribute('content'),
            'Accept': 'application/pdf,application/json',
        }
    })
    .then(response => {
        if (response.ok) {
            const contentType = response.headers.get('content-type');
            if (contentType && contentType.includes('application/pdf')) {
                return response.blob();
            } else {
                // Handle JSON error response
                return response.json().then(data => {
                    throw new Error(data.message || 'Failed to generate PDF');
                });
            }
        } else {
            // Try to get error message from response
            return response.json().then(data => {
                throw new Error(data.message || `HTTP ${response.status}: ${response.statusText}`);
            }).catch(() => {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            });
        }
    })
    .then(blob => {
        // Create download link
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `{{ $application->application_number }}_preview.pdf`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        // Show success message
        status.innerHTML = '<div class="text-success"><i class="fas fa-check-circle me-1"></i>PDF generated successfully! Check your downloads.</div>';
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-file-pdf me-2"></i>Generate PDF To View Application Data';
    })
    .catch(error => {
        console.error('PDF Generation Error:', error);
        let errorMessage = 'Error generating PDF. Please try again.';
        if (error.message) {
            errorMessage = error.message;
        }
        status.innerHTML = `<div class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>${errorMessage}</div>`;
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-file-pdf me-2"></i>Generate PDF To View Application Data';
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.getElementById('accept_undertaking');
    const submitBtn = document.getElementById('submitBtn');
    
    if (checkbox && submitBtn) {
        checkbox.addEventListener('change', function() {
            submitBtn.disabled = !this.checked;
            if (this.checked) {
                submitBtn.classList.remove('btn-secondary');
                submitBtn.classList.add('btn-success');
            } else {
                submitBtn.classList.remove('btn-success');
                submitBtn.classList.add('btn-secondary');
            }
        });
        
        // Confirmation before submission
        document.getElementById('finalSubmissionForm').addEventListener('submit', function(e) {
            if (!confirm('Are you sure you want to submit your final application? This action cannot be undone.')) {
                e.preventDefault();
            } else {
                // Show loading state
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting Application...';
            }
        });
    }
});
</script>
@endsection