@extends('user.layout.master')
@section('title', 'File Converter')
@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.dashboard') }}" class="back-arrow" style="margin-right: 10px; margin-top: -5px;">
                <div class="arrow-icon"></div>
            </a>File Converter
        </div>
    </div>

    <!-- Success/Error Messages -->
    <div id="messageContainer" style="display: none; margin-bottom: 1.5rem;">
        <div id="messageContent" class="alert" style="padding: 1rem; border-radius: 8px; margin-bottom: 1rem;"></div>
    </div>

    <!-- Converter Form -->
    <div style="max-width: 900px; margin: 0 auto;">
        @if((isset($hasZipArchive) && !$hasZipArchive) || (isset($hasLibreOffice) && !$hasLibreOffice))
        <div style="background: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;">
            <i class="fas fa-exclamation-triangle"></i>
            @if(isset($hasZipArchive) && !$hasZipArchive)
                ZIP extension is not enabled on this server. Pages conversions will be unavailable unless ZIP is enabled.
            @endif
            @if(isset($hasLibreOffice) && !$hasLibreOffice)
                @if(isset($hasZipArchive) && !$hasZipArchive)<br>@endif
                LibreOffice (soffice) is not installed. Some conversions (especially binary .doc files) require LibreOffice. Please install LibreOffice or enable the PHP ZIP extension.
            @endif
        </div>
        @endif
        <!-- 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">

            <input type="file"
                   id="fileInput"
                   name="file"
                   accept=".pdf,.doc,.docx,.pages"
                   style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;">

            <div id="dropZoneContent">
                <i class="fas fa-file-upload" style="font-size: 4rem; color: #0B9E8C; margin-bottom: 1rem;"></i>
                <h3 style="color: #333; margin-bottom: 0.5rem;">Drag & Drop your file 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, Pages (Max 10MB)</p>
            </div>

            <div id="fileInfo" style="display: none;">
                <i class="fas fa-file" id="fileIcon" 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>
                <p id="fileType" style="color: #999; font-size: 0.875rem; margin-bottom: 1rem;"></p>
                <button type="button" id="removeFileBtn" 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>

        <!-- Format Selection -->
        <div id="formatSelection" style="display: none; background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
            <h4 style="color: #333; margin-bottom: 1rem;">
                <i class="fas fa-exchange-alt" style="color: #0B9E8C; margin-right: 0.5rem;"></i>
                Convert To
            </h4>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
                <!-- PDF Option -->
                <div class="format-option" data-format="pdf" style="border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; cursor: pointer; transition: all 0.3s ease; text-align: center; background: white;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);">
                        <i class="fas fa-file-pdf" style="color: white; font-size: 24px;"></i>
                    </div>
                    <h5 style="margin: 0; color: #2d3748; font-weight: 600;">PDF</h5>
                    <p style="margin: 0.5rem 0 0 0; color: #718096; font-size: 0.875rem;">Best for printing & sharing</p>
                </div>

                <!-- DOCX Option -->
                <div class="format-option" data-format="docx" style="border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; cursor: pointer; transition: all 0.3s ease; text-align: center; background: white;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #2b579a 0%, #1e3a8a 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 12px rgba(43, 87, 154, 0.3);">
                        <i class="fas fa-file-word" style="color: white; font-size: 24px;"></i>
                    </div>
                    <h5 style="margin: 0; color: #2d3748; font-weight: 600;">DOCX</h5>
                    <p style="margin: 0.5rem 0 0 0; color: #718096; font-size: 0.875rem;">Editable format for Word</p>
                </div>

                <!-- DOC Option -->
                <div class="format-option" data-format="doc" style="border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; cursor: pointer; transition: all 0.3s ease; text-align: center; background: white;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 12px rgba(74, 85, 104, 0.3);">
                        <i class="fas fa-file-alt" style="color: white; font-size: 24px;"></i>
                    </div>
                    <h5 style="margin: 0; color: #2d3748; font-weight: 600;">DOC</h5>
                    <p style="margin: 0.5rem 0 0 0; color: #718096; font-size: 0.875rem;">Legacy format compatible</p>
                </div>

                <!-- Pages Option -->
                <div class="format-option" data-format="pages" style="border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; cursor: pointer; transition: all 0.3s ease; text-align: center; background: white;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #0B9E8C 0%, #0a8a7a 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 4px 12px rgba(11, 158, 140, 0.3);">
                        <i class="fas fa-file-alt" style="color: white; font-size: 24px;"></i>
                    </div>
                    <h5 style="margin: 0; color: #2d3748; font-weight: 600;">Pages</h5>
                    <p style="margin: 0.5rem 0 0 0; color: #718096; font-size: 0.875rem;">Apple Pages format</p>
                </div>
            </div>
        </div>

        <!-- Conversion Info -->
        <div id="conversionInfo" style="display: none; background: linear-gradient(135deg, #e7f3ff 0%, #d1e7ff 100%); border: 1px solid #0B9E8C; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid #0B9E8C;">
            <div style="display: flex; align-items: center; gap: 0.75rem;">
                <i class="fas fa-info-circle" style="color: #0B9E8C; font-size: 1.25rem;"></i>
                <div>
                    <strong style="color: #2d3748;">Conversion:</strong>
                    <span id="conversionText" style="color: #4a5568; margin-left: 0.5rem;"></span>
                </div>
            </div>
        </div>

        <!-- Convert Button -->
        <div style="text-align: center; margin-bottom: 2rem;">
            <button type="button"
                    id="convertBtn"
                    style="background: #0B9E8C; color: white; border: none; padding: 1rem 2.5rem; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; font-weight: 600; display: none;"
                    disabled>
                <i class="fas fa-sync-alt"></i> Convert File
            </button>
        </div>

        <!-- Download Section -->
        <div id="downloadSection" style="display: none; background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); border: 1px solid #28a745; border-radius: 12px; padding: 2rem; text-align: center; margin-bottom: 2rem;">
            <i class="fas fa-check-circle" style="font-size: 3rem; color: #28a745; margin-bottom: 1rem;"></i>
            <h4 style="color: #155724; margin-bottom: 0.5rem;">Conversion Successful!</h4>
            <p id="downloadFileName" style="color: #155724; margin-bottom: 1.5rem;"></p>
            <a id="downloadLink" href="#" download style="display: inline-block; background: #0B9E8C; color: white; text-decoration: none; padding: 0.75rem 2rem; border-radius: 6px; font-weight: 600;">
                <i class="fas fa-download"></i> Download Converted File
            </a>
        </div>

        <!-- Supported Conversions Info -->
        <div style="background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; margin-top: 2rem;">
            <h5 style="color: #333; margin-bottom: 1rem;">
                <i class="fas fa-info-circle" style="color: #0B9E8C; margin-right: 0.5rem;"></i>
                Supported Conversions
            </h5>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                <div style="padding: 1rem; background: #f8f9fa; border-radius: 6px;">
                    <strong style="color: #0B9E8C;">PDF →</strong>
                    <span style="color: #666;">DOCX, DOC, Pages</span>
                </div>
                <div style="padding: 1rem; background: #f8f9fa; border-radius: 6px;">
                    <strong style="color: #0B9E8C;">DOCX →</strong>
                    <span style="color: #666;">PDF, DOC, Pages</span>
                </div>
                <div style="padding: 1rem; background: #f8f9fa; border-radius: 6px;">
                    <strong style="color: #0B9E8C;">DOC →</strong>
                    <span style="color: #666;">PDF, DOCX, Pages</span>
                </div>
                <div style="padding: 1rem; background: #f8f9fa; border-radius: 6px;">
                    <strong style="color: #0B9E8C;">Pages →</strong>
                    <span style="color: #666;">PDF, DOCX, DOC</span>
                </div>
            </div>
            <div style="margin-top: 1rem; padding: 1rem; background: linear-gradient(135deg, #e7f3ff 0%, #d1e7ff 100%); border-left: 4px solid #0B9E8C; border-radius: 6px;">
                <p style="margin: 0; color: #2d3748; font-size: 0.9rem;">
                    <i class="fas fa-info-circle" style="color: #0B9E8C; margin-right: 0.5rem;"></i>
                    <strong>All formats can be converted to all other formats!</strong> Simply select your file and choose the target format.
                </p>
            </div>
            <div style="margin-top: 1rem; padding: 1rem; background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border-left: 4px solid #ffc107; border-radius: 6px;">
                <p style="margin: 0; color: #856404; font-size: 0.875rem;">
                    <i class="fas fa-exclamation-triangle" style="color: #ffc107; margin-right: 0.5rem;"></i>
                    <strong>Note:</strong> Binary .doc files (older Word format) may have limited support. For best results, convert .doc files to .docx first, or use RTF format.
                </p>
            </div>
        </div>
    </div>
</div>

<script>
// Use IIFE to avoid variable conflicts with master layout
(function() {
    'use strict';

const HAS_ZIP = {{ isset($hasZipArchive) && $hasZipArchive ? 'true' : 'false' }};

let selectedFile = null;
let selectedFormat = null;
let sourceFormat = null;

// 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',
        'application/vnd.apple.pages'
    ];

    const allowedExtensions = ['pdf', 'doc', 'docx', 'pages'];
    const fileExtension = file.name.split('.').pop().toLowerCase();

    if (!allowedExtensions.includes(fileExtension)) {
        showMessage('Please select a PDF, DOC, DOCX, or Pages file.', 'error');
        return;
    }

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

    selectedFile = file;
    sourceFormat = fileExtension;

    // 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);
    document.getElementById('fileType').textContent = `Type: ${fileExtension.toUpperCase()}`;

    // Set file icon
    const fileIcon = document.getElementById('fileIcon');
    if (fileExtension === 'pdf') {
        fileIcon.className = 'fas fa-file-pdf';
        fileIcon.style.color = '#dc3545';
    } else if (fileExtension === 'docx' || fileExtension === 'doc') {
        fileIcon.className = 'fas fa-file-word';
        fileIcon.style.color = '#2b579a';
    } else if (fileExtension === 'pages') {
        fileIcon.className = 'fas fa-file-alt';
        fileIcon.style.color = '#0B9E8C';
    } else {
        fileIcon.className = 'fas fa-file';
        fileIcon.style.color = '#0B9E8C';
    }

    // Show format selection and update available formats
    showFormatSelection();
    updateConversionInfo();
}

function removeFile() {
    selectedFile = null;
    selectedFormat = null;
    sourceFormat = null;
    document.getElementById('fileInput').value = '';
    document.getElementById('dropZoneContent').style.display = 'block';
    document.getElementById('fileInfo').style.display = 'none';
    document.getElementById('formatSelection').style.display = 'none';
    document.getElementById('conversionInfo').style.display = 'none';
    document.getElementById('convertBtn').style.display = 'none';
    document.getElementById('downloadSection').style.display = 'none';
    updateConvertButton();
}

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

function showFormatSelection() {
    const formatSelection = document.getElementById('formatSelection');
    formatSelection.style.display = 'block';

    // Show all format options except the source format
    document.querySelectorAll('.format-option').forEach(option => {
        const format = option.getAttribute('data-format');
        // Hide same-source option
        if (format === sourceFormat) {
            option.style.display = 'none';
            option.classList.remove('disabled');
            option.removeAttribute('title');
            return;
        }

        // If ZIP is missing, disable only Pages targets; DOCX is allowed via LibreOffice
        if (!HAS_ZIP && (format === 'pages')) {
            option.style.display = 'block';
            option.classList.add('disabled');
            option.style.opacity = '0.5';
            option.style.cursor = 'not-allowed';
            option.setAttribute('title', 'Requires PHP ZIP extension.');
        } else {
            option.style.display = 'block';
            option.classList.remove('disabled');
            option.style.opacity = '1';
            option.style.cursor = 'pointer';
            option.removeAttribute('title');
        }
    });
}

function selectFormat(format, element) {
    // Prevent selecting formats that require ZIP when not available
    if (!HAS_ZIP && (format === 'pages')) {
        showMessage('This conversion requires the PHP ZIP extension. Please enable it on the server.', 'error');
        return;
    }
    selectedFormat = format;

    // Update visual selection
    document.querySelectorAll('.format-option').forEach(option => {
        option.style.borderColor = '#e2e8f0';
        option.style.background = 'white';
    });

    element.style.borderColor = '#0B9E8C';
    element.style.background = 'linear-gradient(135deg, #f0f9f8 0%, #e8f5f3 100%)';

    updateConversionInfo();
    updateConvertButton();
}

function updateConversionInfo() {
    if (sourceFormat && selectedFormat) {
        const conversionText = document.getElementById('conversionText');
        conversionText.textContent = `${sourceFormat.toUpperCase()} → ${selectedFormat.toUpperCase()}`;
        document.getElementById('conversionInfo').style.display = 'block';
    }
}

function updateConvertButton() {
    const convertBtn = document.getElementById('convertBtn');
    if (selectedFile && selectedFormat) {
        convertBtn.disabled = false;
        convertBtn.style.display = 'inline-block';
        convertBtn.style.opacity = '1';
    } else {
        convertBtn.disabled = true;
        convertBtn.style.opacity = '0.5';
    }
}

function convertFile() {
    if (!selectedFile || !selectedFormat) {
        showMessage('Please select a file and target format.', 'error');
        return;
    }

    const formData = new FormData();
    formData.append('file', selectedFile);
    formData.append('target_format', selectedFormat);
    formData.append('_token', '{{ csrf_token() }}');

    const convertBtn = document.getElementById('convertBtn');
    const originalHtml = convertBtn.innerHTML;
    convertBtn.disabled = true;
    convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Converting...';

    fetch('{{ route("user.converter.convert") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(async response => {
        // Check if response is JSON
        const contentType = response.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
            return response.json();
        } else {
            // If not JSON, read as text to see what we got
            const text = await response.text();
            console.error('Non-JSON response:', text);
            throw new Error('Server returned non-JSON response. Status: ' + response.status);
        }
    })
    .then(data => {
        convertBtn.innerHTML = originalHtml;
        convertBtn.disabled = false;

        if (data && data.success) {
            showMessage(data.message, 'success');
            showDownloadSection(data.download_url, data.filename, data.file_path);
        } else {
            showMessage(data?.message || 'Conversion failed. Please try again.', 'error');
        }
    })
    .catch(error => {
        convertBtn.innerHTML = originalHtml;
        convertBtn.disabled = false;
        console.error('Conversion error:', error);
        showMessage('An error occurred during conversion. Please check the console for details or try again.', 'error');
    });
}

function showDownloadSection(downloadUrl, filename, filePath) {
    document.getElementById('downloadFileName').textContent = filename;
    const downloadLink = document.getElementById('downloadLink');
    downloadLink.href = downloadUrl;
    downloadLink.download = filename;

    // Also add click handler to track download
    downloadLink.onclick = function(e) {
        // Optional: Track download
        window.location.href = '{{ route("user.converter.download") }}?file_path=' + encodeURIComponent(filePath) + '&filename=' + encodeURIComponent(filename);
        return false;
    };

    document.getElementById('downloadSection').style.display = 'block';

    // Scroll to download section
    document.getElementById('downloadSection').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function showMessage(message, type) {
    const messageContainer = document.getElementById('messageContainer');
    const messageContent = document.getElementById('messageContent');

    messageContent.className = 'alert';
    if (type === 'success') {
        messageContent.style.background = '#d4edda';
        messageContent.style.border = '1px solid #c3e6cb';
        messageContent.style.color = '#155724';
        messageContent.innerHTML = '<i class="fas fa-check-circle"></i> ' + message;
    } else {
        messageContent.style.background = '#f8d7da';
        messageContent.style.border = '1px solid #f5c6cb';
        messageContent.style.color = '#721c24';
        messageContent.innerHTML = '<i class="fas fa-exclamation-circle"></i> ' + message;
    }

    messageContainer.style.display = 'block';

    // Auto-hide after 5 seconds
    setTimeout(() => {
        messageContainer.style.display = 'none';
    }, 5000);
}

// Initialize - Attach event listeners
document.addEventListener('DOMContentLoaded', function() {
    updateConvertButton();

    // File input change handler
    const fileInput = document.getElementById('fileInput');
    if (fileInput) {
        fileInput.addEventListener('change', handleFileSelect);
    }

    // Drag and drop handlers
    const dropZone = document.getElementById('dropZone');
    if (dropZone) {
        dropZone.addEventListener('dragover', handleDragOver);
        dropZone.addEventListener('dragleave', handleDragLeave);
        dropZone.addEventListener('drop', handleDrop);
    }

    // Remove file button
    const removeFileBtn = document.getElementById('removeFileBtn');
    if (removeFileBtn) {
        removeFileBtn.addEventListener('click', removeFile);
    }

    // Format option click handlers
    document.querySelectorAll('.format-option').forEach(option => {
        option.addEventListener('click', function() {
            const format = this.getAttribute('data-format');
            selectFormat(format, this);
        });
    });

    // Convert button click handler
    const convertBtn = document.getElementById('convertBtn');
    if (convertBtn) {
        convertBtn.addEventListener('click', convertFile);
    }
});

})(); // End IIFE
</script>

<style>
.format-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.format-option.disabled:hover {
    transform: none;
    box-shadow: none;
}

.format-option.selected {
    border-color: #0B9E8C !important;
    background: linear-gradient(135deg, #f0f9f8 0%, #e8f5f3 100%) !important;
}

#dropZone.dragover {
    border-color: #0B9E8C !important;
    background-color: #f8f9fa !important;
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .format-option {
        margin-bottom: 1rem;
    }
}
</style>

@endsection