<!doctype html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- CSRF Token -->
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

    <link href="<?php echo e(asset('static/patients/css/bootstrap.min.css')); ?>" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
    <link href="<?php echo e(asset('static/my_auth/font.css')); ?>" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo e(asset('static/patients/css/spur.css')); ?>">

    <title>پنل مدیریت - تشخیص با تصویر</title>

    <style>
        .upload-area {
            border: 3px dashed #ddd;
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: #f9f9f9;
            margin-bottom: 20px;
        }
        
        .upload-area:hover {
            border-color: #0d6efd;
            background-color: #f0f8ff;
        }
        
        .upload-area.dragover {
            border-color: #0d6efd;
            background-color: #e7f3ff;
        }
        
        .upload-icon {
            font-size: 48px;
            color: #6c757d;
            margin-bottom: 15px;
        }
        
        .image-preview-container {
            margin-top: 20px;
            display: none;
        }
        
        .image-preview {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .processing-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            display: none;
        }
        
        .processing-content {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #0d6efd;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .requirements {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            border-right: 4px solid #0d6efd;
        }
        
        .requirements h6 {
            color: #0d6efd;
            margin-bottom: 10px;
        }
        
        .requirements ul {
            margin-bottom: 0;
            padding-right: 20px;
        }
        
        .requirements li {
            margin-bottom: 5px;
            color: #6c757d;
        }
    </style>

</head>

<body>
<div class="dash">
    <div class="dash-nav dash-nav-dark" style="right: 0">
        <header>
            <a href="#!" class="menu-toggle">
                <i class="fa fa-bars"></i>
            </a>
            <a href="<?php echo e(route('patients.index')); ?>" class="spur-logo">
                <span>پنل مدیریت</span>
            </a>
        </header>
        <nav class="dash-nav-list">
            <a href="<?php echo e(route('patients.index')); ?>" class="dash-nav-item">
                <i class="fa fa-list ml-2"></i>
                مدیریت بیماران
            </a>
            <a href="<?php echo e(route('diagnose.clinical')); ?>" class="dash-nav-item">
                <i class="fa fa-file-text ml-2"></i>
                تشخیص بالینی
            </a>
            <a href="<?php echo e(route('diagnose.scan')); ?>" class="dash-nav-item active">
                <i class="fa fa-camera ml-2"></i>
                تشخیص با تصویر
            </a>
        </nav>
    </div>
    <div class="dash-app">
        <header class="dash-toolbar d-flex justify-content-around">
            <a href="#!" class="menu-toggle">
                <i class="fa fa-bars"></i>
            </a>
            <span>پنل مدیریت - تشخیص با تصویر فوندوس</span>

            <div class="tools">
                <div class="dropdown tools-item">
                    <a href="#" class="" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-user"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                        <a class="dropdown-item" href="<?php echo e(route('logout')); ?>"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            خروج
                        </a>
                        <form id="logout-form" action="<?php echo e(route('logout')); ?>" method="POST" style="display: none;">
                            <?php echo csrf_field(); ?>
                        </form>
                    </div>
                </div>
            </div>
        </header>
        <main class="dash-content text-right" style="direction: rtl">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card spur-card">
                            <div class="card-header">
                                <div class="spur-card-icon">
                                    <i class="fas fa-camera"></i>
                                </div>
                                <div class="spur-card-title">تشخیص با تصویر فوندوس</div>
                            </div>
                            <div class="card-body">
                                
                                <!-- Flash Messages -->
                                <?php if(session('success')): ?>
                                    <div style="direction: rtl" class="alert alert-success alert-dismissible shadow fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <?php echo e(session('success')); ?>

                                    </div>
                                <?php endif; ?>

                                <?php if(session('error')): ?>
                                    <div style="direction: rtl" class="alert alert-danger alert-dismissible shadow fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <?php echo e(session('error')); ?>

                                    </div>
                                <?php endif; ?>

                                <?php if($errors->any()): ?>
                                    <div style="direction: rtl" class="alert alert-danger alert-dismissible shadow fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <ul class="mb-0">
                                            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <li><?php echo e($error); ?></li>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </ul>
                                    </div>
                                <?php endif; ?>

                                <!-- Upload Form -->
                                <form id="scan-form" method="POST" action="<?php echo e(route('diagnose.scan.store')); ?>" enctype="multipart/form-data">
                                    <?php echo csrf_field(); ?>
                                    
                                    <?php if(isset($patient_id)): ?>
                                        <input type="hidden" name="patient_id" value="<?php echo e($patient_id); ?>">
                                    <?php endif; ?>
                                    
                                    <!-- Drag & Drop Area -->
                                    <div class="upload-area" id="uploadArea">
                                        <div class="upload-icon">
                                            <i class="fa fa-cloud-upload"></i>
                                        </div>
                                        <h5>برای آپلود تصویر کلیک کنید یا آن را اینجا بکشید</h5>
                                        <p class="text-muted">فرمت‌های مجاز: JPG, PNG, JPEG (حداکثر 5MB)</p>
                                        <input type="file" id="imageInput" name="fundus_image" accept="image/*" class="d-none" required>
                                    </div>
                                    
                                    <!-- File Input (Fallback) -->
                                    <div class="mb-3">
                                        <label for="formFileLg" class="form-label">یا مستقیم فایل را انتخاب کنید</label>
                                        <input class="form-control form-control-lg" id="formFileLg" type="file" name="fundus_image_fallback" accept="image/*">
                                    </div>
                                    
                                    <!-- Image Preview -->
                                    <div class="image-preview-container" id="imagePreviewContainer">
                                        <h5>پیش‌نمایش تصویر:</h5>
                                        <img id="imagePreview" class="image-preview" alt="پیش‌نمایش تصویر">
                                        <div class="mt-2">
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removeImage()">
                                                <i class="fa fa-trash"></i> حذف تصویر
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <!-- Patient Selection (if applicable) -->
                                    <?php if(isset($patients) && $patients->count() > 0): ?>
                                        <div class="mb-3">
                                            <label for="patientSelect" class="form-label">انتخاب بیمار (اختیاری)</label>
                                            <select class="form-control" id="patientSelect" name="patient_id">
                                                <option value="">-- انتخاب بیمار --</option>
                                                <?php $__currentLoopData = $patients; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $patient): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option value="<?php echo e($patient->id); ?>">
                                                        <?php echo e($patient->first_name); ?> <?php echo e($patient->last_name); ?> - کد ملی: <?php echo e($patient->national_code); ?>

                                                    </option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                        </div>
                                    <?php endif; ?>
                                    <div class="mb-3">
    <label for="eye_side" class="form-label">سمت چشم (اختیاری)</label>
    <select class="form-control" id="eye_side" name="eye_side">
        <option value="">-- انتخاب سمت چشم --</option>
        <option value="OD">چشم راست (OD)</option>
        <option value="OS">چشم چپ (OS)</option>
        <option value="both">هر دو چشم</option>
    </select>
</div>

<div class="mb-3">
    <label for="notes" class="form-label">یادداشت (اختیاری)</label>
    <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="هر گونه توضیح یا یادداشت اضافی..."></textarea>
</div>
                                    
                                    <!-- Image Requirements -->
                                    <div class="requirements">
                                        <h6><i class="fa fa-info-circle"></i> نکات مهم برای تصویر فوندوس:</h6>
                                        <ul>
                                            <li>تصویر باید از کیفیت مناسب برخوردار باشد</li>
                                            <li>تمرکز دوربین باید روی شبکیه چشم باشد</li>
                                            <li>از نور مناسب و یکنواخت استفاده شود</li>
                                            <li>تصویر نباید تار یا تاریک باشد</li>
                                            <li>فرمت تصویر باید استاندارد باشد</li>
                                        </ul>
                                    </div>
                                    
                                    <!-- Submit Button -->
                                    <div class="mt-4 text-center">
                                        <button type="submit" class="btn btn-lg btn-success m-2" id="submitBtn">
                                            <i class="fa fa-paper-plane"></i> ارسال برای تحلیل
                                        </button>
                                        <a href="<?php echo e(route('diagnose.result')); ?>" class="btn btn-lg btn-info m-2" style="display: none;" id="resultBtn">
                                            <i class="fa fa-chart-bar"></i> مشاهده نتایج
                                        </a>
                                    </div>
                                </form>

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

<!-- Processing Overlay -->
<div class="processing-overlay" id="processingOverlay">
    <div class="processing-content">
        <div class="spinner"></div>
        <h4>در حال تحلیل تصویر...</h4>
        <p id="processingMessage">لطفاً منتظر بمانید، تصویر در حال پردازش است.</p>
        <div class="progress mt-3" style="height: 10px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" style="width: 0%"></div>
        </div>
    </div>
</div>

<script>
    // DOM Elements
    const uploadArea = document.getElementById('uploadArea');
    const imageInput = document.getElementById('imageInput');
    const fallbackInput = document.getElementById('formFileLg');
    const imagePreview = document.getElementById('imagePreview');
    const imagePreviewContainer = document.getElementById('imagePreviewContainer');
    const scanForm = document.getElementById('scan-form');
    const submitBtn = document.getElementById('submitBtn');
    const resultBtn = document.getElementById('resultBtn');
    const processingOverlay = document.getElementById('processingOverlay');
    const progressBar = document.getElementById('progressBar');
    const processingMessage = document.getElementById('processingMessage');
    
    // File upload via drag & drop
    uploadArea.addEventListener('click', () => {
        imageInput.click();
    });
    
    // Drag & drop events
    ['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, () => {
            uploadArea.classList.add('dragover');
        });
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        uploadArea.addEventListener(eventName, () => {
            uploadArea.classList.remove('dragover');
        });
    });
    
    uploadArea.addEventListener('drop', (e) => {
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleImage(files[0]);
        }
    });
    
    // Handle file input change
    imageInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleImage(e.target.files[0]);
        }
    });
    
    fallbackInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleImage(e.target.files[0]);
        }
    });
    
    // Handle image file
    function handleImage(file) {
        // Validate file type
        const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
        if (!validTypes.includes(file.type)) {
            alert('لطفاً فقط تصویر آپلود کنید! فرمت‌های مجاز: JPG, PNG, GIF');
            return;
        }
        
        // Validate file size (5MB max)
        if (file.size > 5 * 1024 * 1024) {
            alert('حجم فایل باید کمتر از ۵ مگابایت باشد!');
            return;
        }
        
        // Set file to both inputs
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        imageInput.files = dataTransfer.files;
        fallbackInput.files = dataTransfer.files;
        
        // Show preview
        const reader = new FileReader();
        reader.onload = (e) => {
            imagePreview.src = e.target.result;
            imagePreviewContainer.style.display = 'block';
        };
        reader.readAsDataURL(file);
        
        // Enable submit button
        submitBtn.disabled = false;
    }
    
    // Remove image
    function removeImage() {
        imageInput.value = '';
        fallbackInput.value = '';
        imagePreviewContainer.style.display = 'none';
        submitBtn.disabled = true;
    }
    
    // Form submission with processing simulation
    scanForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // Validate image is selected
        if (!imageInput.files.length && !fallbackInput.files.length) {
            alert('لطفاً یک تصویر انتخاب کنید!');
            return;
        }
        
        // Show processing overlay
        showProcessing();
        
        // Simulate upload and processing
        simulateProcessing(() => {
            // After processing, submit the form
            scanForm.submit();
        });
    });
    
    function showProcessing() {
        processingOverlay.style.display = 'flex';
        submitBtn.disabled = true;
        
        // Update messages and progress
        const messages = [
            'در حال بارگذاری تصویر...',
            'در حال پردازش تصویر...',
            'استخراج ویژگی‌های تصویر...',
            'تحلیل الگوهای شبکیه...',
            'محاسبه نتیجه تشخیص...',
            'آماده سازی گزارش...'
        ];
        
        let currentStep = 0;
        const progressInterval = setInterval(() => {
            if (currentStep < messages.length) {
                processingMessage.textContent = messages[currentStep];
                progressBar.style.width = ((currentStep + 1) / messages.length * 100) + '%';
                currentStep++;
            } else {
                clearInterval(progressInterval);
            }
        }, 1000);
    }
    
    function simulateProcessing(callback) {
        // Simulate processing time (5-8 seconds)
        const processingTime = 5000 + Math.random() * 3000;
        
        setTimeout(() => {
            callback();
        }, processingTime);
    }
    
    // Check if there's a recent scan result
    document.addEventListener('DOMContentLoaded', () => {
        const scanResult = localStorage.getItem('lastScanResult');
        if (scanResult) {
            resultBtn.style.display = 'inline-block';
        }
    });
</script>

<script src="<?php echo e(asset('static/my_auth/jquery.min.js')); ?>"></script>
<script src="<?php echo e(asset('static/my_auth/popper.js')); ?>"></script>
<script src="<?php echo e(asset('static/my_auth/bootstrap.min.js')); ?>"></script>
<script src="<?php echo e(asset('static/patients/js/spur.js')); ?>"></script>

</body>
</html><?php /**PATH /home/mehdi/Pojects/AMD/resources/views/diagnose/scan.blade.php ENDPATH**/ ?>