{{-- resources/views/ats/upload.blade.php --}}
@extends('layouts.app')

@section('title', 'Upload Resume - ATS Score Checker')

@push('styles')

<!-- Bootstrap 5 CSS -->
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<!-- Custom CSS -->

<link rel="stylesheet" href="{{ asset('css/upload.css') }}">

@endpush

@section('content')
<!-- Main Content -->
<div class="main-container">
    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h1 class="page-title">Upload & Analyze CV</h1>
            <p class="page-subtitle">
                Quantum-enhanced CV analysis with ATS scoring and job
                matching
            </p>
        </div>
        <div class="header-actions">
            <a
                href="{{ route('dashboard') }}"
                class="btn btn-secondary"
            >
                <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path d="M19 12H5" />
                    <path d="M12 19l-7-7 7-7" />
                </svg>
                View Dashboard
            </a>

            <form id="reset-system-form" action="{{ route('reset') }}" method="POST" style="display: inline;">
                @csrf
                <button onclick="confirmResetSystem()" class="btn btn-danger">
                    <svg
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M3 6h18" />
                        <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                        <path
                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
                        />
                    </svg>
                    Reset System
                </button>
            </form>

        </div>
    </div>

    <div class="upload-section">
        <div class="section-header">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="32" height="32"
                fill="currentColor"
                class="bi bi-upload mb-1"
                viewBox="0 0 16 16"
            >
                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
                <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/>
            </svg>
            <h3>CV Upload & Analysis</h3>
            <span class="subtitle">Powered by quantum-enhanced AI technology</span>
        </div>
        <div class="upload-content">
            <form id="resumeUploadForm" enctype="multipart/form-data">
                @csrf

                <div class="upload-area" id="uploadArea">
                    <div class="upload-content">
                        <i class="fas fa-cloud-upload-alt upload-icon mb-3"></i>
                        <div class="upload-text">Drag & Drop your CV here</div>
                        <div class="upload-subtext">or click to browse files</div>
                        <div class="file-size-limit">Maximum file size: 5MB</div>
                        <div class="file-formats">
                            <span class="format-badge format-pdf">PDF</span>
                            <span class="format-badge format-doc">DOC</span>
                            <span class="format-badge format-docx">DOCX</span>
                            <span class="format-badge format-txt">TXT</span>
                        </div>
                        <input type="file" id="resumeFile" name="resume" accept=".pdf,.doc,.docx,.txt" style="display: none;">
                    </div>
                </div>
                <div id="fileInfo" class="mt-3" style="display: none;">
                    <div class="alert alert-info">
                        <strong>Selected File:</strong> <span id="fileName"></span>
                        <button type="button" class="btn-close float-end" onclick="clearFile()"></button>
                    </div>
                </div>

                <div class="toast-message"></div>

                <!-- Features Section -->
                <div class="features-section">
                    <div class="feature-item">
                        <div
                            class="feature-icon"
                            style="background: #dbeafe; color: #1d4ed8"
                        >
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
                                />
                                <polyline points="14,2 14,8 20,8" />
                                <line x1="16" y1="13" x2="8" y2="13" />
                                <line x1="16" y1="17" x2="8" y2="17" />
                                <polyline points="10,9 9,9 8,9" />
                            </svg>
                        </div>
                        <div class="feature-title">CV Analysis</div>
                    </div>

                    <div class="feature-item">
                        <div
                            class="feature-icon"
                            style="background: #ecfdf5; color: #10b981"
                        >
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <polyline points="20,6 9,17 4,12" />
                            </svg>
                        </div>
                        <div class="feature-title">ATS Scoring</div>
                    </div>

                    <div class="feature-item">
                        <div
                            class="feature-icon"
                            style="background: #fef3c7; color: #f59e0b"
                        >
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <circle cx="12" cy="12" r="3" />
                                <path
                                    d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                                />
                            </svg>
                        </div>
                        <div class="feature-title">Job Matching</div>
                    </div>

                    <div class="feature-item">
                        <div
                            class="feature-icon"
                            style="background: #dbeafe; color: #3b82f6"
                        >
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path d="M3 3v18h18" />
                                <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3" />
                            </svg>
                        </div>
                        <div class="feature-title">Career Insights</div>
                    </div>
                </div>

                <div class="text-center">
                    <!-- Analyze Button -->
                    <button type="submit" class="analyze-btn" id="analyzeBtn" disabled>
                        <svg
                            width="20"
                            height="20"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polygon
                                points="13,2 3,14 12,14 11,22 21,10 12,10"
                            />
                        </svg>
                        Analyze CV with AI
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div class="overlay" id="loadingOverlay"></div>
    <div class="loading-spinner" id="loadingSpinner">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    {{-- <!-- Candidates Section -->
    <div class="candidates-section">
        <div class="candidates-header">
            <span>Candidates</span>
            <span class="candidates-count">3</span>
        </div>

        <table class="candidates-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>File</th>
                    <th>Status</th>
                    <th>Uploaded</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="candidate-name">Adit</div>
                    </td>
                    <td>adit@gmail.com</td>
                    <td>
                        <div class="file-info">
                            <div class="file-name">
                                Adit_-_FullStack_Developer_-_VC_20250501.pdf
                            </div>
                            <div class="file-size">118.8 KB</div>
                        </div>
                    </td>
                    <td>
                        <span class="status-badge">✓ Analyzed</span>
                    </td>
                    <td class="upload-date">2025-06-24<br />06:24</td>
                    <td>
                        <a href="candidate-detail.html" class="view-btn">
                            <svg
                                width="12"
                                height="12"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
                                />
                                <circle cx="12" cy="12" r="3" />
                            </svg>

                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="candidate-name">nmm</div>
                    </td>
                    <td>Not provided</td>
                    <td>
                        <div class="file-info">
                            <div class="file-name">
                                Trapped_Person_Incident_-_Balcony_Access_Failure_Level_5.pdf
                            </div>
                            <div class="file-size">195.7 KB</div>
                        </div>
                    </td>
                    <td>
                        <span class="status-badge">✓ Analyzed</span>
                    </td>
                    <td class="upload-date">2025-06-19<br />02:20</td>
                    <td>
                        <a href="candidate-detail.html" class="view-btn">
                            <svg
                                width="12"
                                height="12"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
                                />
                                <circle cx="12" cy="12" r="3" />
                            </svg>

                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="candidate-name">kaushik</div>
                    </td>
                    <td>kothiyakaushik09@gmail.com</td>
                    <td>
                        <div class="file-info">
                            <div class="file-name">
                                Kaushik_CV_09.pdf
                            </div>
                            <div class="file-size">202.5 KB</div>
                        </div>
                    </td>
                    <td>
                        <span class="status-badge">✓ Analyzed</span>
                    </td>
                    <td class="upload-date">2025-06-17<br />13:46</td>
                    <td>
                        <a href="candidate-detail.html" class="view-btn">
                            <svg
                                width="12"
                                height="12"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
                                />
                                <circle cx="12" cy="12" r="3" />
                            </svg>

                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div> --}}
</div>


@endsection


<script>

    function confirmResetSystem() {
        if (confirm('Are you sure you want to reset the system? This will delete ALL data and cannot be undone!')) {
            document.getElementById('reset-system-form').submit();
        }
    }

    document.addEventListener('DOMContentLoaded', function() {

        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('resumeFile');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const analyzeBtn = document.getElementById('analyzeBtn');
        const form = document.getElementById('resumeUploadForm');

        // Drag and drop functionality
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');

            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        uploadArea.addEventListener('click', function() {
            fileInput.click();
        });

        fileInput.addEventListener('click', function() {
            this.value = null;
        });

        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                handleFile(this.files[0]);
            }
        });

        function resetAndOpen() {
            fileInput.value = null;
            fileInput.click();
        }

        function handleFile(file) {
            // Allowed MIME types and extensions
            const allowedTypes = [
                'application/pdf',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'text/plain'
            ];
            const allowedExtensions = ['pdf', 'doc', 'docx', 'txt'];

            // Get file extension
            const fileExtension = file.name.split('.').pop().toLowerCase();

            // Validate file type or extension
            if (
                !allowedTypes.includes(file.type) &&
                !allowedExtensions.includes(fileExtension)
            ) {
                showToast('Please select a PDF, DOC, DOCX, or TXT file only', 'danger');
                return;
            }

            // Validate file size (5MB)
            if (file.size > 5 * 1024 * 1024) {
                showToast('File size must be less than 5MB', 'danger');
                return;
            }

            fileName.textContent = file.name;
            fileInfo.style.display = 'block';
            analyzeBtn.disabled = false;

            const dt = new DataTransfer();
            dt.items.add(file);
            fileInput.files = dt.files;

            console.log(fileInput.files);
        }

        // Toast message function
        function showToast(message, type = 'info') {

            // Remove any existing toast
            const oldToast = document.querySelector('.toast-message');
            if (oldToast) oldToast.remove();

            // Create toast element
            const toast = document.createElement('div');
            toast.className = `toast-message ${type === 'success' ? 'success' : type === 'danger' ? 'danger' : ''}`;
            toast.innerHTML = `
                <span>${message}</span>
                <button class="btn-close" style="margin-left:auto;" aria-label="Close">&times;</button>
            `;
            document.body.appendChild(toast);

            // Close on button click
            toast.querySelector('.btn-close').onclick = function() {
                toast.remove();
            };
            // Auto-hide after 4 seconds
            setTimeout(() => {
                toast.remove();
            }, 4000);
        }


        function clearFile() {
            fileInput.value = '';
            fileInfo.style.display = 'none';
            analyzeBtn.disabled = true;
        }

        // Form submission
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            if (!fileInput.files.length) {
                showToast('Please select a file to upload', 'danger');
                return;
            }

            const formData = new FormData(form);

            showLoading();

            fetch('{{ route("analyze") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': window.Laravel.csrfToken
                }
            })
            .then(response => response.json())
            .then(data => {
                hideLoading();

                if (data.success) {
                    showToast(data.message, 'success');
                    // Redirect to results page
                    window.location.href = `/results/${data.data.id}`;
                } else {
                    showToast(data.message || 'An error occurred', 'danger');
                }
            })
            .catch(error => {
                hideLoading();
                console.error('Error:', error);
                showToast('An unexpected error occurred. Please try again.', 'danger');
            });
        });

        // Make clearFile function global
        window.clearFile = clearFile;
    });


</script>