@extends('layouts.app')

@push('styles')

    <style>
        .passport-upload-area {
            transition: all 0.3s ease;
        }

        .passport-upload-area:hover {
            border-color: #0d6efd !important;
            background-color: #f8f9fa !important;
        }
    </style>
    <style>
        .upload-container {
            min-height: 300px;
            transition: all 0.3s ease;
        }

        .upload-area {
            border: 2px dashed #ced4da;
            border-radius: 8px;
            transition: all 0.3s ease;
            background-color: #f8f9fa;
            cursor: pointer;
        }

        .upload-area:hover, .upload-area.dragover {
            border-color: #0d6efd;
            background-color: #e7f1ff;
        }

        .upload-area.dragover {
            transform: scale(1.02);
        }

        .preview-container {
            display: none;
            position: relative;
            max-width: 100%;
            margin: 0 auto;
        }

        .preview-img {
            max-width: 100%;
            max-height: 400px;
            border-radius: 8px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }

        .btn-remove {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.8);
            color: #dc3545;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .preview-container:hover .btn-remove {
            opacity: 1;
        }

        .processing-animation {
            display: none;
            text-align: center;
            padding: 20px 0;
        }

        .spinner {
            width: 3rem;
            height: 3rem;
        }
    </style>
@endpush

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="mb-0"><i class="fas fa-passport me-2"></i>Passport OCR Scanner</h4>
                            <a href="{{ route('passports.index') }}" class="btn btn-outline-light btn-sm">
                                <i class="fas fa-arrow-left me-1"></i> View All
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="passportForm" action="{{ route('passports.store') }}" method="POST"
                              enctype="multipart/form-data">
                            @csrf

                            <div class="upload-container mb-4">
                                <div id="uploadArea" class="upload-area p-5 text-center">
                                    <div id="uploadContent">
                                        <i class="fas fa-cloud-upload-alt fa-4x mb-3 text-primary"></i>
                                        <h4>Upload Passport Image</h4>
                                        <p class="text-muted mb-3">Drag & drop your passport image here or click to
                                            browse</p>
                                        <div class="text-muted small">
                                            Supported formats: JPG, PNG (Max: 5MB)<br>
                                            For best results, ensure the passport is well-lit and flat
                                        </div>
                                        <input type="file" name="passport_image" id="passportImage" class="d-none"
                                               accept="image/jpeg,image/png">
                                    </div>

                                    <div id="previewContainer" class="preview-container mt-4">
                                        <img id="imagePreview" src="#" alt="Passport Preview" class="preview-img">
                                        <button type="button" id="removeImage" class="btn-remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>

                                    <div id="processingIndicator" class="processing-animation">
                                        <div class="spinner-border text-primary mb-3" role="status">
                                            <span class="visually-hidden">Processing...</span>
                                        </div>
                                        <h5>Processing Passport Image</h5>
                                        <p class="text-muted">This may take a few moments...</p>
                                    </div>
                                </div>

                                @error('passport_image')
                                <div class="alert alert-danger mt-3">
                                    <i class="fas fa-exclamation-circle me-2"></i>
                                    {{ $message }}
                                </div>
                                @enderror

                                <div id="fileInfo" class="mt-3 text-center"></div>
                            </div>

                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <button type="reset" id="resetBtn" class="btn btn-outline-secondary me-md-2"
                                        style="display: none;">
                                    <i class="fas fa-undo me-2"></i> Reset
                                </button>
                                <button type="submit" id="submitBtn" class="btn btn-primary btn-lg">
                                    <i class="fas fa-search me-2"></i> Scan Passport
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer bg-light">
                        <div class="row">
                            <div class="col-md-6">
                                <h6><i class="fas fa-lightbulb me-2 text-warning"></i> Tips for Better Results</h6>
                                <ul class="small text-muted mb-0">
                                    <li>Use good lighting when taking the photo</li>
                                    <li>Place the passport on a dark, flat surface</li>
                                    <li>Ensure all text is clearly visible</li>
                                    <li>Avoid glare on the passport</li>
                                </ul>
                            </div>
                            <div class="col-md-6 text-md-end mt-3 mt-md-0">
                                <a href="#" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                                   data-bs-target="#helpModal">
                                    <i class="far fa-question-circle me-1"></i> Need Help?
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Help Modal -->
    <div class="modal fade" id="helpModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-question-circle me-2"></i>Passport Scanning Help</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>How to get the best results:</h6>
                    <ol>
                        <li class="mb-2">Place the passport on a flat, well-lit surface.</li>
                        <li class="mb-2">Ensure all four corners of the passport are visible in the image.</li>
                        <li class="mb-2">Avoid shadows and glare on the passport page.</li>
                        <li class="mb-2">Position the camera directly above the passport.</li>
                        <li>Make sure the text is clear and not blurry.</li>
                    </ol>
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle me-2"></i>
                        For best results, scan the machine-readable zone (MRZ) at the bottom of the passport's
                        information page.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const uploadArea = document.getElementById('uploadArea');
                const fileInput = document.getElementById('passportImage');
                const imagePreview = document.getElementById('imagePreview');
                const previewContainer = document.getElementById('previewContainer');
                const uploadContent = document.getElementById('uploadContent');
                const processingIndicator = document.getElementById('processingIndicator');
                const resetBtn = document.getElementById('resetBtn');
                const submitBtn = document.getElementById('submitBtn');
                const fileInfo = document.getElementById('fileInfo');
                const form = document.getElementById('passportForm');

                // Handle click on upload area
                uploadArea.addEventListener('click', function (e) {
                    if (!e.target.closest('.btn-remove')) {
                        fileInput.click();
                    }
                });

                // Handle file selection
                fileInput.addEventListener('change', function (e) {
                    if (this.files && this.files[0]) {
                        const file = this.files[0];
                        updateFilePreview(file);
                    }
                });

                // Handle drag and drop
                ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                    uploadArea.addEventListener(eventName, preventDefaults, false);
                });

                function preventDefaults(e) {
                    e.preventDefault();
                    e.stopPropagation();
                }

                ['dragenter', 'dragover'].forEach(eventName => {
                    uploadArea.addEventListener(eventName, highlight, false);
                });

                ['dragleave', 'drop'].forEach(eventName => {
                    uploadArea.addEventListener(eventName, unhighlight, false);
                });

                function highlight() {
                    uploadArea.classList.add('dragover');
                }

                function unhighlight() {
                    uploadArea.classList.remove('dragover');
                }

                // Handle dropped files
                uploadArea.addEventListener('drop', handleDrop, false);

                function handleDrop(e) {
                    const dt = e.dataTransfer;
                    const files = dt.files;

                    if (files.length) {
                        fileInput.files = files;
                        updateFilePreview(files[0]);
                    }
                }

                // Update file preview
                function updateFilePreview(file) {
                    // Validate file type
                    const validTypes = ['image/jpeg', 'image/png'];
                    if (!validTypes.includes(file.type)) {
                        showAlert('Invalid file type. Please upload a JPG or PNG image.', 'danger');
                        return;
                    }

                    // Validate file size (5MB max)
                    const maxSize = 5 * 1024 * 1024; // 5MB
                    if (file.size > maxSize) {
                        showAlert('File is too large. Maximum size is 5MB.', 'danger');
                        return;
                    }

                    // Show preview
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        imagePreview.src = e.target.result;
                        uploadContent.style.display = 'none';
                        previewContainer.style.display = 'block';
                        resetBtn.style.display = 'inline-block';

                        // Update file info
                        fileInfo.innerHTML = `
                    <div class="alert alert-success d-inline-flex align-items-center">
                        <i class="fas fa-check-circle me-2"></i>
                        ${file.name} (${formatFileSize(file.size)})
                    </div>
                `;
                    };
                    reader.readAsDataURL(file);
                }

                // Format file size
                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];
                }

                // Show alert
                function showAlert(message, type = 'info') {
                    fileInfo.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
                }

                // Remove image
                document.getElementById('removeImage').addEventListener('click', function (e) {
                    e.stopPropagation();
                    resetForm();
                });

                // Reset form
                resetBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    resetForm();
                });

                function resetForm() {
                    fileInput.value = '';
                    imagePreview.src = '#';
                    previewContainer.style.display = 'none';
                    uploadContent.style.display = 'block';
                    resetBtn.style.display = 'none';
                    fileInfo.innerHTML = '';
                    uploadArea.classList.remove('dragover');
                }

                // Form submission
                form.addEventListener('submit', function () {
                    if (fileInput.files.length === 0) {
                        showAlert('Please select a passport image to upload.', 'warning');
                        return false;
                    }

                    // Show processing indicator
                    uploadContent.style.display = 'none';
                    previewContainer.style.display = 'none';
                    processingIndicator.style.display = 'block';
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Processing...';

                    return true;
                });
            });
        </script>
    @endpush

@endsection