{{-- <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نتایج تشخیص</title>
  <link href="{{ asset('static/patients/css/bootstrap.min.css') }}" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('static/patients/css/spur.css') }}">
  <link href="{{ asset('static/result.css') }}" rel="stylesheet">
  <style>
    /* Progress Circle Styles */
    .tc {
      text-align: center;
      padding: 20px;
    }
    
    .progress-circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .progress-circle img {
      max-width: 80%;
      max-height: 80%;
    }
    
    .result-text {
      font-size: 1.5rem;
      font-weight: bold;
      margin-top: 20px;
      padding: 15px;
      border-radius: 10px;
      transition: all 0.5s ease;
    }
    
    .result-sick {
      color: #dc3545;
      background-color: #f8d7da;
      border: 1px solid #f5c6cb;
    }
    
    .result-healthy {
      color: #28a745;
      background-color: #d4edda;
      border: 1px solid #c3e6cb;
    }
    
    .loading-text {
      font-size: 1.2rem;
      color: #6c757d;
      margin-top: 15px;
    }
  </style>
</head>
<body class="d-flex justify-content-center align-items-center vh-100 bg-light">
  <div class="tc">
    <div class="progress-circle" id="progress-circle">
      <img id="pre" src="{{ asset('static/pre.gif') }}" alt="در حال پردازش..."/>
    </div>
    
    <div class="loading-text" id="loading-text">
      در حال تحلیل داده‌ها و محاسبه نتیجه...
    </div>
    
    <div class="result-text" id="result" style="display: none;"></div>
    
    <div class="mt-4" id="buttons" style="display: none;">
      <button type="button" class="btn btn-lg btn-dark m-2" onclick="history.back()">بازگشت</button>
      <a href="{{ route('patients.index') }}" class="btn btn-lg btn-primary m-2">لیست بیماران</a>
      <a href="{{ route('diagnose.clinical') }}" class="btn btn-lg btn-success m-2">تشخیص جدید</a>
    </div>
    
    <!-- Hidden form for storing diagnosis results -->
    @if(isset($diagnosis_id))
      <form id="save-result-form" action="{{ route('diagnose.result.store') }}" method="POST" style="display: none;">
        @csrf
        <input type="hidden" name="diagnosis_id" value="{{ $diagnosis_id }}">
        <input type="hidden" name="result" id="diagnosis-result">
      </form>
    @endif
  </div>

  <script>
    const progressCircle = document.getElementById('progress-circle');
    const loadingText = document.getElementById('loading-text');
    const resultDiv = document.getElementById('result');
    const buttons = document.getElementById('buttons');
    const pre = document.getElementById('pre');
    const diagnosisResultInput = document.getElementById('diagnosis-result');
    const saveResultForm = document.getElementById('save-result-form');

    let progress = 0;
    let progressInterval;
    
    // Simulate AI processing time (between 3-6 seconds)
    const processingTime = 3000 + Math.random() * 3000;
    const updateInterval = processingTime / 100;

    // Update loading text with dots animation
    let dots = 0;
    const dotsInterval = setInterval(() => {
      dots = (dots + 1) % 4;
      loadingText.textContent = 'در حال تحلیل داده‌ها و محاسبه نتیجه' + '.'.repeat(dots);
    }, 500);

    // Start progress simulation
    progressInterval = setInterval(() => {
      progress += 1;
      
      // Update progress circle (optional visual effect)
      // progressCircle.style.background = `conic-gradient(#0d6efd ${progress * 3.6}deg, #ccc ${progress * 3.6}deg)`;

      if (progress >= 100) {
        clearInterval(progressInterval);
        clearInterval(dotsInterval);
        
        setTimeout(() => {
          // Hide loading elements
          progressCircle.style.display = 'none';
          pre.style.display = 'none';
          loadingText.style.display = 'none';
          
          // Calculate diagnosis result based on some logic
          // This is where you would integrate your actual diagnosis algorithm
          const result = calculateDiagnosisResult();
          
          // Display result
          displayResult(result);
          
          // Save result to database if form exists
          if (diagnosisResultInput && saveResultForm) {
            diagnosisResultInput.value = result;
            // Uncomment to auto-save result
            // saveResultForm.submit();
          }
          
        }, 500);
      }
    }, updateInterval);
    
    // Simulated diagnosis calculation function
    // Replace this with your actual diagnosis logic
    function calculateDiagnosisResult() {
      // This is a mock calculation - replace with real AI/ML model
      const riskFactors = [
        @if(isset($age) && $age === 'high') 0.2 @endif
        @if(isset($diabetes) && $diabetes === 'high') 0.3 @endif
        @if(isset($smoking) && $smoking === 'high') 0.15 @endif
        @if(isset($family_history) && $family_history === 'high') 0.25 @endif
        @if(isset($eye_condition) && $eye_condition === 'high') 0.1 @endif
      ].filter(factor => factor !== undefined);
      
      const totalRisk = riskFactors.length > 0 
        ? riskFactors.reduce((a, b) => a + b) / riskFactors.length 
        : Math.random();
      
      // Adjust thresholds based on your actual model
      if (totalRisk > 0.6) {
        return 'high_risk';
      } else if (totalRisk > 0.3) {
        return 'medium_risk';
      } else {
        return 'low_risk';
      }
    }
    
    function displayResult(result) {
      let resultText, resultClass, description;
      
      switch(result) {
        case 'high_risk':
          resultText = '⚠️ بیمار (ریسک بالا)';
          resultClass = 'result-sick';
          description = 'احتمال ابتلا به AMD بالا است. مراجعه به متخصص چشم‌پزشک توصیه می‌شود.';
          break;
        case 'medium_risk':
          resultText = '⚠️ ریسک متوسط';
          resultClass = 'result-sick';
          description = 'برخی عوامل خطر شناسایی شده است. معاینات منظم چشم‌پزشکی توصیه می‌شود.';
          break;
        case 'low_risk':
          resultText = '✅ سالم (ریسک پایین)';
          resultClass = 'result-healthy';
          description = 'عوامل خطر قابل توجهی شناسایی نشد. معاینات دوره‌ای را ادامه دهید.';
          break;
        default:
          resultText = '🔍 نیاز به بررسی بیشتر';
          resultClass = 'result-text';
          description = 'نتایج نیاز به بررسی تخصصی دارند.';
      }
      
      resultDiv.innerHTML = `
        <h3>${resultText}</h3>
        <p class="mt-3">${description}</p>
        <hr>
        <div class="mt-3">
          <small class="text-muted">تاریخ تشخیص: {{ now()->format('Y/m/d H:i') }}</small>
          <br>
          <small class="text-muted">کد پیگیری: AMD-{{ str_pad(mt_rand(1, 99999), 5, '0', STR_PAD_LEFT) }}</small>
        </div>
      `;
      
      resultDiv.className = `result-text ${resultClass}`;
      resultDiv.style.display = 'block';
      buttons.style.display = 'block';
    }
    
    // Function to print/save result
    function printResult() {
      const printContent = document.getElementById('result').innerHTML;
      const originalContent = document.body.innerHTML;
      
      document.body.innerHTML = `
        <div style="padding: 20px; font-family: Tahoma; direction: rtl; text-align: center;">
          <h2>گزارش تشخیص AMD</h2>
          <hr>
          ${printContent}
          <hr>
          <small>چاپ شده در تاریخ: {{ now()->format('Y/m/d H:i') }}</small>
        </div>
      `;
      
      window.print();
      document.body.innerHTML = originalContent;
      location.reload();
    }
  </script>
  
  <script src="{{ asset('static/my_auth/bootstrap.min.js') }}"></script>
  
  <script>
    // Add print button functionality
    document.addEventListener('DOMContentLoaded', function() {
      const buttonsDiv = document.getElementById('buttons');
      if (buttonsDiv) {
        const printButton = document.createElement('button');
        printButton.type = 'button';
        printButton.className = 'btn btn-lg btn-info m-2';
        printButton.innerHTML = '<i class="fa fa-print"></i> چاپ نتیجه';
        printButton.onclick = printResult;
        buttonsDiv.appendChild(printButton);
      }
    });
  </script>
</body>
</html> --}}





<!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">
    
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ 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="{{ asset('static/my_auth/font.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('static/patients/css/spur.css') }}">
    
    <title>نتیجه تشخیص</title>
    
    <style>
        .result-card {
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .prediction-box {
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .amd-positive {
            background-color: #ffeaea;
            border: 2px solid #ff6b6b;
        }
        
        .amd-negative {
            background-color: #e8f7ef;
            border: 2px solid #4caf50;
        }
        
        .probability-bar {
            height: 25px;
            background: linear-gradient(to right, #4caf50, #ff9800, #f44336);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            margin: 20px 0;
        }
        
        .probability-indicator {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #000;
        }
        
        .probability-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
        }
    </style>
</head>

<body>
<div class="dash">
    <!-- Navigation similar to other pages -->
    <div class="dash-app">
        <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 result-card">
                            <div class="card-header">
                                <div class="spur-card-icon">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <div class="spur-card-title">نتیجه تشخیص بیماری AMD</div>
                            </div>
                            
                            <div class="card-body">
                                @if(session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        {{ session('success') }}
                                        <button type="button" class="close" data-dismiss="alert">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                @endif
                                
                                @if($api_response)
                                    <div class="prediction-box {{ $api_response['predicted_class'] == 1 ? 'amd-positive' : 'amd-negative' }}">
                                        <h3 class="mb-3">
                                            @if($api_response['predicted_class'] == 1)
                                                <i class="fa fa-exclamation-triangle text-danger"></i>
                                                نتیجه: احتمال ابتلا به AMD
                                            @else
                                                <i class="fa fa-check-circle text-success"></i>
                                                نتیجه: سالم (عدم ابتلا به AMD)
                                            @endif
                                        </h3>
                                        
                                        <div class="probability-display mb-4">
                                            <h4>احتمال AMD: <strong>{{ number_format($api_response['probability_AMD'] * 100, 2) }}%</strong></h4>
                                            
                                            <div class="probability-bar">
                                                <div class="probability-indicator" 
                                                     style="left: {{ $api_response['probability_AMD'] * 100 }}%">
                                                </div>
                                            </div>
                                            
                                            <div class="probability-labels">
                                                <span>0% (سالم)</span>
                                                <span>50%</span>
                                                <span>100% (AMD)</span>
                                            </div>
                                        </div>
                                        
                                        <div class="alert alert-info">
                                            <i class="fa fa-info-circle"></i>
                                            {{ $api_response['message'] ?? '0 = No AMD, 1 = AMD' }}
                                        </div>
                                    </div>
                                    
                                    @if($diagnosis)
                                        <div class="diagnosis-details mt-4">
                                            <h5>جزئیات تشخیص:</h5>
                                            <table class="table table-bordered">
                                                <tr>
                                                    <th>تاریخ تشخیص:</th>
                                                    <td>{{ $diagnosis->created_at->format('Y/m/d H:i') }}</td>
                                                </tr>
                                                <tr>
                                                    <th>نوع تشخیص:</th>
                                                    <td>
                                                        @if($diagnosis->diagnosis_type == 'image')
                                                            تشخیص با تصویر
                                                        @else
                                                            تشخیص با داده های بالینی
                                                        @endif
                                                    </td>
                                                </tr>
                                                @if($diagnosis->patient)
                                                <tr>
                                                    <th>بیمار:</th>
                                                    <td>
                                                        {{ $diagnosis->patient->first_name }} {{ $diagnosis->patient->last_name }}
                                                        (کد ملی: {{ $diagnosis->patient->national_code }})
                                                    </td>
                                                </tr>
                                                @endif
                                            </table>
                                        </div>
                                    @endif
                                    
                                    <div class="raw-response mt-4" style="direction: ltr">
                                        <h6>پاسخ کامل API:</h6>
                                        <pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
{{ json_encode($api_response, JSON_PRETTY_PRINT) }}
                                        </pre>
                                    </div>
                                    
                                    <div class="action-buttons mt-4">
                                        <a href="{{ route('diagnose.clinical') }}" class="btn btn-primary">
                                            <i class="fa fa-file-text"></i> تشخیص با داده های بالینی جدید
                                        </a>
                                        <a href="{{ route('diagnose.scan') }}" class="btn btn-success">
                                            <i class="fa fa-camera"></i> تشخیص با تصویر جدید
                                        </a>
                                        <a href="{{ route('patients.index') }}" class="btn btn-secondary">
                                            <i class="fa fa-list"></i> بازگشت به لیست بیماران
                                        </a>
                                        
                                        @if($diagnosis)
                                        <button onclick="printResult()" class="btn btn-info">
                                            <i class="fa fa-print"></i> چاپ نتیجه
                                        </button>
                                        @endif
                                    </div>
                                    
                                @else
                                    <div class="alert alert-warning">
                                        <i class="fa fa-exclamation-triangle"></i>
                                        اطلاعات تشخیص یافت نشد. لطفاً ابتدا یک تشخیص انجام دهید.
                                    </div>
                                    
                                    <div class="text-center">
                                        <a href="{{ route('diagnose.clinical') }}" class="btn btn-primary btn-lg m-2">
                                            <i class="fa fa-file-text"></i> تشخیص با داده های بالینی
                                        </a>
                                        <a href="{{ route('diagnose.scan') }}" class="btn btn-success btn-lg m-2">
                                            <i class="fa fa-camera"></i> تشخیص با تصویر
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    function printResult() {
        window.print();
    }
</script>

<script src="{{ asset('static/my_auth/jquery.min.js') }}"></script>
<script src="{{ asset('static/my_auth/popper.js') }}"></script>
<script src="{{ asset('static/my_auth/bootstrap.min.js') }}"></script>
<script src="{{ asset('static/patients/js/spur.js') }}"></script>

</body>
</html>