@extends('user.layout.master')
@section('title', 'Upload Resume')
@section('content')

<div class="template-section-container resume-create-page">
    <div class="template-section-header">
        <div class="template-section-title" style="display: flex;">
            <a href="{{ route('user.resumes.index') }}" class="back-arrow" style="margin-right: 10px; margin-top: -5px;">
                <div class="arrow-icon"></div>
            </a>Upload Resume
        </div>
    </div>

    <!-- Success Message -->
    @if(session('success'))
        <div style="background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    <!-- Upload Form -->
    <div style="max-width: 800px; margin: 0 auto;">
        <form id="uploadForm" enctype="multipart/form-data" method="POST" action="{{ route('user.resumes.upload.start') }}">
                @csrf

            <!-- File Upload Area -->
            <div style="background: white; border: 2px dashed #0B9E8C; border-radius: 12px; padding: 3rem; text-align: center; margin-bottom: 2rem; position: relative; transition: all 0.3s ease;" 
                 id="dropZone" 
                 ondrop="handleDrop(event)" 
                 ondragover="handleDragOver(event)" 
                 ondragleave="handleDragLeave(event)">
                
                <input type="file" 
                       id="resumeFile" 
                       name="resume_file" 
                       accept=".pdf,.doc,.docx" 
                       style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;"
                       onchange="handleFileSelect(event)">
                
                <div id="dropZoneContent">
                    <i class="fas fa-cloud-upload-alt" style="font-size: 4rem; color: #0B9E8C; margin-bottom: 1rem;"></i>
                    <h3 style="color: #333; margin-bottom: 0.5rem;">Drag & Drop your resume here</h3>
                    <p style="color: #666; margin-bottom: 1.5rem;">or <span style="color: #0B9E8C; cursor: pointer; text-decoration: underline;">click to browse</span></p>
                    <p style="color: #999; font-size: 0.9rem;">Supported formats: PDF, DOC, DOCX (Max 10MB)</p>
                    </div>

                <div id="fileInfo" style="display: none;">
                    <i class="fas fa-file-pdf" style="font-size: 3rem; color: #0B9E8C; margin-bottom: 1rem;"></i>
                    <h4 id="fileName" style="color: #333; margin-bottom: 0.5rem;"></h4>
                    <p id="fileSize" style="color: #666; margin-bottom: 1rem;"></p>
                    <button type="button" onclick="removeFile()" style="background: #dc3545; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">
                        <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>

                <!-- Resume Name -->
            <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333;">Resume Name</label>
                <input type="text" 
                       name="name" 
                       value="{{ old('name', auth()->user()->name ?? '') }}" 
                       placeholder="Enter a name for your resume"
                       style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;"
                       required>
                @error('name')
                    <p style="color: #dc3545; font-size: 0.875rem; margin-top: 0.5rem;">{{ $message }}</p>
                @enderror
                </div>

            <!-- Template Selection (link to dedicated page) -->
            <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
                <h4 style="color: #333; margin-bottom: 1rem;">Template</h4>
                <p id="templateStatus" style="color: #666; margin-bottom: 1rem;">No template selected.</p>
                <a href="{{ route('user.resumes.templates.selection') }}" style="display: inline-block; background: #0B9E8C; color: white; text-decoration: none; padding: 0.75rem 1.25rem; border-radius: 6px;">
                    <i class="fas fa-layer-group"></i> Choose Template
                </a>
                @error('template_id')
                    <p style="color: #dc3545; font-size: 0.875rem; margin-top: 1rem;">{{ $message }}</p>
                @enderror
            </div>

                <!-- Submit Button -->
            <div style="text-align: center;">
                <button type="submit" 
                        id="submitBtn"
                        style="background: #0B9E8C; color: white; border: none; padding: 1rem 2rem; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease;"
                        disabled>
                        <i class="fas fa-upload"></i> Continue
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
let selectedFile = null;
let selectedTemplate = null;

// Init on page load
document.addEventListener('DOMContentLoaded', function() {
    // If a template_id is passed in the URL, preselect it
    const params = new URLSearchParams(window.location.search);
    const preselected = params.get('template_id');
    if (preselected) {
        selectedTemplate = preselected;
        const status = document.getElementById('templateStatus');
        if (status) status.textContent = `Template selected (ID: ${preselected})`;
        // Hidden input for submission
        let templateInput = document.querySelector('input[name="template_id"]');
        if (!templateInput) {
            templateInput = document.createElement('input');
            templateInput.type = 'hidden';
            templateInput.name = 'template_id';
            document.getElementById('uploadForm').appendChild(templateInput);
        }
        templateInput.value = preselected;
    }
    updateSubmitButton();
});

// File handling
            function handleDragOver(e) {
                e.preventDefault();
    e.currentTarget.style.borderColor = '#0B9E8C';
    e.currentTarget.style.backgroundColor = '#f8f9fa';
            }

            function handleDragLeave(e) {
                e.preventDefault();
    e.currentTarget.style.borderColor = '#0B9E8C';
    e.currentTarget.style.backgroundColor = 'white';
            }

            function handleDrop(e) {
                e.preventDefault();
    e.currentTarget.style.borderColor = '#0B9E8C';
    e.currentTarget.style.backgroundColor = 'white';
    
                const files = e.dataTransfer.files;
                if (files.length > 0) {
        handleFile(files[0]);
                }
            }

function handleFileSelect(e) {
    const file = e.target.files[0];
                if (file) {
        handleFile(file);
    }
}

function handleFile(file) {
    // Validate file type
    const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
    if (!allowedTypes.includes(file.type)) {
        alert('Please select a PDF, DOC, or DOCX file.');
        return;
    }

    // Validate file size (10MB)
    if (file.size > 10 * 1024 * 1024) {
        alert('File size must be less than 10MB.');
        return;
    }

    selectedFile = file;
    
    // Update UI
    document.getElementById('dropZoneContent').style.display = 'none';
    document.getElementById('fileInfo').style.display = 'block';
    document.getElementById('fileName').textContent = file.name;
    document.getElementById('fileSize').textContent = formatFileSize(file.size);
    
    // Enable submit button
    updateSubmitButton();
}

function removeFile() {
    selectedFile = null;
    document.getElementById('resumeFile').value = '';
    document.getElementById('dropZoneContent').style.display = 'block';
    document.getElementById('fileInfo').style.display = 'none';
    updateSubmitButton();
            }

            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

// No in-page template selection; use the dedicated page instead

// Update submit button state
function updateSubmitButton() {
    const submitBtn = document.getElementById('submitBtn');
    
    if (selectedFile) {
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
    } else {
        submitBtn.disabled = true;
        submitBtn.style.opacity = '0.5';
    }
}

// Form submission
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    if (!selectedFile) {
        e.preventDefault();
        alert('Please select a file to upload.');
        return;
    }
});

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateSubmitButton();
        });
    </script>

<style>
/* Drag and Drop Styles */
#dropZone.dragover {
    border-color: #0B9E8C !important;
    background-color: #f8f9fa !important;
    transform: scale(1.02);
}

/* Template Cards */
.template-card:hover {
    border-color: #0B9E8C !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Option Selection */
label[for*="Option"]:hover {
    border-color: #0B9E8C !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }
}
</style>

@endsection