{{-- 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 -->

<style>
    :root {
        --primary-color: #4f46e5;
        --secondary-color: #06b6d4;
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --danger-color: #ef4444;
        --dark-color: #1f2937;
        --light-color: #f8fafc;
    }

    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        font-family: 'Inter', sans-serif;
    }

    .navbar {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }

    .card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
        border-radius: 50px;
        padding: 12px 30px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
    }

    .score-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        color: white;
        margin: 0 auto;
    }

    .score-excellent { background: linear-gradient(135deg, #10b981, #059669); }
    .score-good { background: linear-gradient(135deg, #06b6d4, #0891b2); }
    .score-average { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .score-poor { background: linear-gradient(135deg, #ef4444, #dc2626); }

    .upload-area {
        border: 3px dashed #d1d5db;
        border-radius: 20px;
        padding: 60px 20px;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .upload-area:hover {
        border-color: var(--primary-color);
        background: rgba(79, 70, 229, 0.05);
    }

    .upload-area.dragover {
        border-color: var(--primary-color);
        background: rgba(79, 70, 229, 0.1);
        transform: scale(1.02);
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .progress-custom {
        height: 8px;
        border-radius: 10px;
        background: #e5e7eb;
    }

    .progress-bar {
        border-radius: 10px;
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    }

    .analysis-card {
        transition: all 0.3s ease;
    }

    .analysis-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px;
        padding: 30px;
        text-align: center;
    }

    .stat-number {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .loading-spinner {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }
</style>



<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Inter", sans-serif;
        background: #f8fafc;
        min-height: 100vh;
        padding-top: 70px; /* Account for header only */
    }

    /* Header */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #e2e8f0;
        z-index: 1000;
        transition: all 0.3s ease;
    }

    .nav {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        font-size: 1.5rem;
        font-weight: 800;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-decoration: none;
    }

    .nav-links {
        display: flex;
        list-style: none;
        gap: 2rem;
        align-items: center;
    }

    .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #64748b;
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        padding: 0.5rem 0;
        transition: color 0.2s ease;
    }

    .nav-link:hover {
        color: #1f2937;
    }

    .nav-link.active {
        color: #1d4ed8;
    }

    .nav-link .icon {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }

    .nav-link .dropdown-arrow {
        width: 12px;
        height: 12px;
        stroke-width: 2;
        transition: transform 0.2s ease;
    }

    .nav-link:hover .dropdown-arrow {
        transform: rotate(180deg);
    }

    .nav-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .settings-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #64748b;
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        transition: all 0.2s ease;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .settings-btn:hover {
        background: #f1f5f9;
        color: #1f2937;
    }

    .settings-btn .icon {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }

    .settings-btn .dropdown-arrow {
        width: 12px;
        height: 12px;
        stroke-width: 2;
        transition: transform 0.2s ease;
    }

    .settings-btn:hover .dropdown-arrow {
        transform: rotate(180deg);
    }

    .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        color: #64748b;
        cursor: pointer;
        padding: 0.5rem;
    }

    /* Dropdown Menu */
    .nav-dropdown {
        position: relative;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        min-width: 200px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s ease;
        z-index: 1001;
        margin-top: 8px;
    }

    .nav-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        color: #64748b;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
        border-radius: 6px;
        margin: 4px;
    }

    .dropdown-item:hover {
        background: #f8fafc;
        color: #1f2937;
    }

    .dropdown-icon {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }

    /* Footer */
    .footer {
        background: #f8fafc;
        color: #64748b;
        padding: 3rem 2rem 2rem;
        border-top: 1px solid #e2e8f0;
    }

    .footer-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .footer-content {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4rem;
        margin-bottom: 2rem;
    }

    .footer-brand {
        max-width: 320px;
    }

    .footer-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: #1f2937;
    }

    .footer-description {
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        font-size: 14px;
    }

    .footer-social {
        display: flex;
        gap: 8px;
    }

    .social-icon {
        width: 32px;
        height: 32px;
        background: #e2e8f0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .social-icon:hover {
        background: #1d4ed8;
        color: white;
    }

    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }

    .footer-column {
        display: flex;
        flex-direction: column;
    }

    .footer-links {
        list-style: none;
        padding: 0;
    }

    .footer-links li {
        margin-bottom: 8px;
    }

    .footer-links a {
        color: #64748b;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s ease;
    }

    .footer-links a:hover {
        color: #1f2937;
    }

    .footer-bottom {
        border-top: 1px solid #e2e8f0;
        padding-top: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-copyright {
        color: #64748b;
        font-size: 13px;
    }

    .footer-badge {
        display: flex;
        align-items: center;
    }

    .security-badge {
        background: rgba(34, 197, 94, 0.1);
        color: #059669;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        border: 1px solid rgba(34, 197, 94, 0.2);
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .nav-links {
            display: none;
        }

        .mobile-menu-btn {
            display: block;
        }

        .nav {
            padding: 0 1rem;
        }

        .logo {
            font-size: 1.25rem;
        }

        .footer-content {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        .footer-links-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .footer-bottom {
            flex-direction: column;
            text-align: center;
        }
    }

    /* Main Content */
    .main-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2rem;
    }

    .page-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 0.5rem;
    }

    .page-subtitle {
        color: #64748b;
        font-size: 1rem;
        line-height: 1.5;
    }

    .header-actions {
        display: flex;
        gap: 1rem;
        flex-shrink: 0;
    }

    .btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
        border: none;
    }

    .btn-primary {
        background: #1d4ed8;
        color: white;
    }

    .btn-primary:hover {
        background: #1e40af;
    }

    .btn-secondary {
        background: white;
        color: #1d4ed8;
        border: 1px solid #1d4ed8;
    }

    .btn-secondary:hover {
        background: #f3f4f6;
    }

    .btn-danger {
        background: white;
        color: #ef4444;
        border: 1px solid #ef4444;
    }

    .btn-danger:hover {
        background: #fef2f2;
    }

    /* Upload Section */
    .upload-section {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .section-header {
        background: #1d4ed8;
        color: white;
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .section-header h3 {
        font-size: 1.125rem;
        font-weight: 600;
    }

    .section-header .subtitle {
        margin-left: auto;
        font-size: 0.875rem;
        opacity: 0.9;
    }

    .upload-content {
        padding: 2rem;
    }

    .upload-area {
        border: 2px dashed #d1d5db;
        border-radius: 12px;
        padding: 4rem 2rem;
        text-align: center;
        background: #fafbff;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .upload-area:hover,
    .upload-area.dragover {
        border-color: #1d4ed8;
        background: #f3f4f6;
    }

    .upload-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 1.5rem;
        color: #1d4ed8;
    }

    .upload-text {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.5rem;
    }

    .upload-subtext {
        color: #64748b;
        margin-bottom: 2rem;
    }

    .file-formats {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .format-badge {
        padding: 0.375rem 0.875rem;
        border-radius: 20px;
        font-size: 0.8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .format-pdf {
        background: #1d4ed8;
        color: white;
    }

    .format-doc {
        background: #10b981;
        color: white;
    }

    .format-docx {
        background: #3b82f6;
        color: white;
    }

    .format-txt {
        background: #f59e0b;
        color: white;
    }

    .file-size-limit {
        font-size: 0.875rem;
        color: #6b7280;
    }

    /* Form Styles */
    .form-section {
        margin-bottom: 2rem;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
    }

    .required {
        color: #ef4444;
    }

    .form-input {
        padding: 0.875rem 1rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.875rem;
        background: white;
        transition: all 0.2s ease;
    }

    .form-input:focus {
        outline: none;
        border-color: #1d4ed8;
        box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
    }

    .file-input {
        width: 100%;
        padding: 0.875rem 1rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: white;
        font-size: 0.875rem;
    }

    .file-input::file-selector-button {
        padding: 0.5rem 1rem;
        margin-right: 1rem;
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .file-input::file-selector-button:hover {
        background: #e5e7eb;
    }

    /* Info Section */
    .info-section {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;
        margin-bottom: 2rem;
        color: #64748b;
        font-size: 0.875rem;
    }

    .info-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Features Section */
    .features-section {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-bottom: 2rem;
        padding-top: 2rem;
        border-top: 1px solid #e5e7eb;
    }

    .feature-item {
        text-align: center;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 1rem;
        padding: 12px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
    }

    /* Analyze Button */
    .analyze-btn {
        width: 100%;
        padding: 1.25rem 2rem;
        background: #1d4ed8;
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .analyze-btn:hover {
        background: #1e40af;
        transform: translateY(-1px);
    }

    .analyze-btn:disabled {
        background: #9ca3af;
        cursor: not-allowed;
        transform: none;
    }

    /* Candidates Section */
    .candidates-section {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .candidates-header {
        background: #1d4ed8;
        color: white;
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .candidates-count {
        background: rgba(255, 255, 255, 0.2);
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .candidates-table {
        width: 100%;
        border-collapse: collapse;
    }

    .candidates-table th {
        background: #f8fafc;
        padding: 1rem 1.5rem;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
    }

    .candidates-table td {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.875rem;
        vertical-align: middle;
    }

    .candidates-table tr:nth-child(even) {
        background: #f8fafc;
    }

    .candidate-name {
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.25rem;
    }

    .candidate-email {
        color: #64748b;
        font-size: 0.8125rem;
    }

    .file-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .file-name {
        font-weight: 500;
        color: #1e293b;
        font-size: 0.8125rem;
    }

    .file-size {
        background: #22d3ee;
        color: white;
        padding: 0.125rem 0.5rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        width: fit-content;
    }

    .status-badge {
        background: #dcfce7;
        color: #166534;
        padding: 0.375rem 0.75rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        width: fit-content;
    }

    .upload-date {
        color: #64748b;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .view-btn {
        background: white;
        color: #1d4ed8;
        border: 1px solid #1d4ed8;
        padding: 0.5rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        width: 32px;
        height: 32px;
    }

    .view-btn:hover {
        background: #f3f4f6;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .features-section {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .nav-links {
            display: none;
        }

        .page-header {
            flex-direction: column;
            gap: 1rem;
        }

        .header-actions {
            width: 100%;
            justify-content: flex-start;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .features-section {
            grid-template-columns: 1fr;
        }

        .main-container {
            padding: 1rem;
        }

        .upload-area {
            padding: 2rem 1rem;
        }

        .candidates-table {
            font-size: 0.75rem;
        }

        .candidates-table th,
        .candidates-table td {
            padding: 0.75rem 0.5rem;
        }
    }
</style>
@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>
            <a href="{{ route('reset') }}" 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
            </a>
        </div>
    </div>

    <div class="upload-section">
        <div class="section-header">
            <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="7,10 12,15 17,10" />
                <line x1="12" y1="15" x2="12" y2="3" />
            </svg>
            <h3>CV Upload & Analysis</h3>
            <span class="subtitle"
                >Powered by quantum-enhanced AI technology</span
            >
        </div>

        <div class="upload-content">
            <div class="container py-12">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body p-5">
                                <div class="text-center mb-4">
                                    <h2 class="fw-bold">Upload Your Resume</h2>
                                    <p class="text-muted">Upload your PDF resume to get instant ATS analysis and recommendations</p>
                                </div>

                                <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 display-1 text-muted mb-3"></i>
                                            <h4>Drag & Drop your CV here</h4>
                                            <p class="text-muted">or click to browse files</p>
                                            <p class="small text-muted">Supported format: PDF (Max 5MB)</p>

                                            <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" style="display: none;">
                                            <button type="button" class="btn btn-primary" onclick="resetAndOpen()">
                                                Choose File
                                            </button> --}}
                                        </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="row mt-4">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="candidateName" class="form-label">Candidate Name (Optional)</label>
                                                <input type="text" class="form-control" id="candidateName" name="candidate_name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="email" class="form-label">Email (Optional)</label>
                                                <input type="email" class="form-control" id="email" name="email">
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="file" id="resumeFile" name="resume" accept=".pdf" style="display: none;">
                                                <button type="button" class="btn btn-primary" onclick="resetAndOpen()">
                                                    Choose File
                                                </button>
                                            </div>
                                        </div>
                                    </div> --}}


                                    <div class="form-section">
                                        <div class="form-grid">
                                            <div class="form-group">
                                                <label class="form-label" for="candidateName">
                                                    Candidate Name
                                                    <span class="required">*</span>
                                                </label>
                                                <input
                                                    type="text"
                                                    class="form-input"
                                                    placeholder="Enter full name"
                                                    id="candidateName"
                                                    required
                                                />
                                            </div>

                                            <div class="form-group">
                                                <label for="email" class="form-label">Email Address (Optional)</label>
                                                <input
                                                    type="email"
                                                    class="form-input"
                                                    placeholder="candidate@example.com"
                                                    id="email" name="email"
                                                />

                                            </div>

                                            <div class="form-group full-width">
                                                <label class="form-label"
                                                    >CV File
                                                    <span class="required">*</span></label
                                                >
                                                <input
                                                    type="file"
                                                    class="file-input"
                                                    accept=".pdf,.doc,.docx,.txt"
                                                    id="resumeFile"
                                                    name="resume"
                                                    required
                                                    onclick="resetAndOpen()"
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-center">
                                        <button type="submit" class="btn btn-primary btn-lg" disabled id="analyzeBtn">
                                            <i class="fas fa-brain me-2"></i>
                                            Analyze Resume
                                        </button>
                                    </div>

                                </form>






                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Info Section -->
            <div class="info-section">
                <svg
                    class="info-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <circle cx="12" cy="12" r="10" />
                    <path d="M12 16v-4" />
                    <path d="M12 8h.01" />
                </svg>
                Files are processed securely and deleted after analysis
            </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>
    </div>

    <!-- Upload Section -->
    {{-- <div class="upload-section">
        <div class="section-header">
            <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="7,10 12,15 17,10" />
                <line x1="12" y1="15" x2="12" y2="3" />
            </svg>
            <h3>CV Upload & Analysis</h3>
            <span class="subtitle"
                >Powered by quantum-enhanced AI technology</span
            >
        </div>

        <div class="upload-content">
            <!-- Upload Area -->
            <div class="upload-area" id="uploadArea">
                <svg
                    class="upload-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
                    />
                    <polyline points="17,8 12,3 7,8" />
                    <line x1="12" y1="3" x2="12" y2="15" />
                </svg>

                <div class="upload-text">Drag & drop your CV here</div>
                <div class="upload-subtext">
                    or click to browse files
                </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>

                <div class="file-size-limit">
                    Maximum file size: 5MB
                </div>
            </div>

            <!-- Form Fields -->
            <div class="form-section">
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label">
                            Candidate Name
                            <span class="required">*</span>
                        </label>
                        <input
                            type="text"
                            class="form-input"
                            placeholder="Enter full name"
                            id="candidateName"
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label class="form-label">Email Address</label>
                        <input
                            type="email"
                            class="form-input"
                            placeholder="candidate@example.com"
                            id="candidateEmail"
                        />
                    </div>

                    <div class="form-group full-width">
                        <label class="form-label"
                            >CV File
                            <span class="required">*</span></label
                        >
                        <input
                            type="file"
                            class="file-input"
                            accept=".pdf,.doc,.docx,.txt"
                            id="cvFile"
                            required
                        />
                    </div>
                </div>
            </div>

            <!-- Info Section -->
            <div class="info-section">
                <svg
                    class="info-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <circle cx="12" cy="12" r="10" />
                    <path d="M12 16v-4" />
                    <path d="M12 8h.01" />
                </svg>
                Files are processed securely and deleted after analysis
            </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>

            <!-- Analyze Button -->
            <button class="analyze-btn" id="analyzeBtn">
                <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>
    </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>

{{-- @push('scripts')
<script>
// Upload CV specific functionality
document.addEventListener("DOMContentLoaded", function () {
    // File upload functionality
    const uploadArea = document.getElementById("uploadArea");
    const fileInput = document.getElementById("cvFile");
    const analyzeBtn = document.getElementById("analyzeBtn");
    const candidateName = document.getElementById("candidateName");

    // Drag and drop functionality
    uploadArea.addEventListener("click", () => fileInput.click());

    uploadArea.addEventListener("dragover", (e) => {
        e.preventDefault();
        uploadArea.classList.add("dragover");
    });

    uploadArea.addEventListener("dragleave", () => {
        uploadArea.classList.remove("dragover");
    });

    uploadArea.addEventListener("drop", (e) => {
        e.preventDefault();
        uploadArea.classList.remove("dragover");
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            updateUploadArea(files[0]);
        }
    });

    fileInput.addEventListener("change", (e) => {
        if (e.target.files.length > 0) {
            updateUploadArea(e.target.files[0]);
        }
    });

    function updateUploadArea(file) {
        const uploadText = uploadArea.querySelector(".upload-text");
        const uploadSubtext =
            uploadArea.querySelector(".upload-subtext");

        uploadText.textContent = `Selected: ${file.name}`;
        uploadSubtext.textContent = `Size: ${(file.size / 1024 / 1024).toFixed(2)} MB`;

        checkFormValidity();
    }

    function checkFormValidity() {
        const hasFile =
            fileInput.files && fileInput.files.length > 0;
        const hasName = candidateName.value.trim() !== "";

        analyzeBtn.disabled = !(hasFile && hasName);
    }

    candidateName.addEventListener("input", checkFormValidity);

    // Analyze button functionality
    analyzeBtn.addEventListener("click", function () {
        if (this.disabled) return;

        // Simulate analysis process
        this.innerHTML = `
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;">
            <path d="M21 12a9 9 0 11-6.219-8.56"/>
        </svg>
        Analyzing CV...
    `;
        this.disabled = true;

        setTimeout(() => {
            alert(
                "CV analysis completed! The candidate has been added to your dashboard.",
            );
            window.location.href = "candidate-dashboard.html";
        }, 3000);



    });

    // Initial form validation
    checkFormValidity();

    // Header scroll effect
    window.addEventListener("scroll", function () {
        const header = document.querySelector(".header");
        if (window.scrollY > 10) {
            header.style.background = "rgba(255, 255, 255, 0.98)";
            header.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.1)";
        } else {
            header.style.background = "rgba(255, 255, 255, 0.95)";
            header.style.boxShadow = "none";
        }
    });
});

// Add CSS for spin animation
const style = document.createElement("style");
style.textContent = `
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
`;
document.head.appendChild(style);

</script>
@endpush --}}

@endsection


<script>
    // Upload CV specific functionality
    // document.addEventListener("DOMContentLoaded", function () {
    //     // File upload functionality
    //     const uploadArea = document.getElementById("uploadArea");
    //     const fileInput = document.getElementById("cvFile");
    //     const analyzeBtn = document.getElementById("analyzeBtn");
    //     const candidateName = document.getElementById("candidateName");

    //     // Drag and drop functionality
    //     uploadArea.addEventListener("click", () => fileInput.click());

    //     uploadArea.addEventListener("dragover", (e) => {
    //         e.preventDefault();
    //         uploadArea.classList.add("dragover");
    //     });

    //     uploadArea.addEventListener("dragleave", () => {
    //         uploadArea.classList.remove("dragover");
    //     });

    //     uploadArea.addEventListener("drop", (e) => {
    //         e.preventDefault();
    //         uploadArea.classList.remove("dragover");
    //         const files = e.dataTransfer.files;
    //         if (files.length > 0) {
    //             fileInput.files = files;
    //             updateUploadArea(files[0]);
    //         }
    //     });

    //     fileInput.addEventListener("change", (e) => {
    //         if (e.target.files.length > 0) {
    //             updateUploadArea(e.target.files[0]);
    //         }
    //     });

    //     function updateUploadArea(file) {
    //         const uploadText = uploadArea.querySelector(".upload-text");
    //         const uploadSubtext =
    //             uploadArea.querySelector(".upload-subtext");

    //         uploadText.textContent = `Selected: ${file.name}`;
    //         uploadSubtext.textContent = `Size: ${(file.size / 1024 / 1024).toFixed(2)} MB`;

    //         checkFormValidity();
    //     }

    //     function checkFormValidity() {
    //         const hasFile =
    //             fileInput.files && fileInput.files.length > 0;
    //         const hasName = candidateName.value.trim() !== "";

    //         analyzeBtn.disabled = !(hasFile && hasName);
    //     }

    //     candidateName.addEventListener("input", checkFormValidity);

    //     // Analyze button functionality
    //     analyzeBtn.addEventListener("click", function () {
    //         if (this.disabled) return;

    //         // Simulate analysis process
    //         this.innerHTML = `
    //         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;">
    //             <path d="M21 12a9 9 0 11-6.219-8.56"/>
    //         </svg>
    //         Analyzing CV...
    //     `;
    //         this.disabled = true;

    //         setTimeout(() => {
    //             alert(
    //                 "CV analysis completed! The candidate has been added to your dashboard.",
    //             );
    //             window.location.href = "candidate-dashboard.html";
    //         }, 3000);



    //     });

    //     // Initial form validation
    //     checkFormValidity();

    //     // Header scroll effect
    //     window.addEventListener("scroll", function () {
    //         const header = document.querySelector(".header");
    //         if (window.scrollY > 10) {
    //             header.style.background = "rgba(255, 255, 255, 0.98)";
    //             header.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.1)";
    //         } else {
    //             header.style.background = "rgba(255, 255, 255, 0.95)";
    //             header.style.boxShadow = "none";
    //         }
    //     });
    // });

    // // Add CSS for spin animation
    // const style = document.createElement("style");
    // style.textContent = `
    // @keyframes spin {
    //     from { transform: rotate(0deg); }
    //     to { transform: rotate(360deg); }
    // }
    // `;
    // document.head.appendChild(style);



    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;        // Clear prior value
            fileInput.click();             // Now open dialog
        }

        function handleFile(file) {
            // Validate file type
            if (file.type !== 'application/pdf') {
                showToast('Please select a PDF 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;
        }

        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>