<!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="{{ 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>
        .patient-header {
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            color: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .patient-header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(50%, -50%);
        }
        
        .patient-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: #0d6efd;
            margin-left: 20px;
            border: 5px solid rgba(255, 255, 255, 0.2);
        }
        
        .info-card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            margin-bottom: 20px;
        }
        
        .info-card:hover {
            transform: translateY(-5px);
        }
        
        .info-card .card-header {
            background-color: #f8f9fa;
            border-bottom: 2px solid #0d6efd;
            font-weight: 600;
        }
        
        .info-item {
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.2s;
        }
        
        .info-item:hover {
            background-color: #f8f9fa;
        }
        
        .info-item:last-child {
            border-bottom: none;
        }
        
        .info-label {
            font-weight: 600;
            color: #495057;
            min-width: 150px;
        }
        
        .info-value {
            color: #212529;
        }
        
        .action-card {
            background-color: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 25px;
            text-align: center;
        }
        
        .action-btn {
            margin: 5px;
            min-width: 200px;
            transition: all 0.3s ease;
        }
        
        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .diagnosis-history {
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        .history-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        
        .history-item:last-child {
            border-bottom: none;
        }
        
        .history-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 15px;
        }
        
        .history-icon.clinical {
            background-color: #e7f5ff;
            color: #0d6efd;
        }
        
        .history-icon.scan {
            background-color: #fff3cd;
            color: #ffc107;
        }
        
        .history-date {
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        .patient-actions {
            position: absolute;
            left: 20px;
            top: 20px;
        }
        
        .quick-actions {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .status-badge {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-right: 10px;
        }
        
        .status-active {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .qr-code {
            width: 120px;
            height: 120px;
            background: #f8f9fa;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            border: 2px solid #dee2e6;
        }
        
        .qr-code i {
            font-size: 48px;
            color: #6c757d;
        }
        
        @media print {
            .no-print {
                display: none !important;
            }
            
            .info-card {
                box-shadow: none;
                border: 1px solid #dee2e6;
            }
            
            .action-card, .quick-actions {
                display: none !important;
            }
        }
    </style>
</head>

<body dir="rtl">
<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="{{ route('patients.index') }}" class="spur-logo">
                <span>پنل مدیریت</span>
            </a>
        </header>
        <nav class="dash-nav-list">
            <a href="{{ route('patients.index') }}" class="dash-nav-item active">
                <i class="fa fa-list ml-2"></i>
                مدیریت بیماران
            </a>
            <a href="{{ route('diagnose.clinical') }}" class="dash-nav-item">
                <i class="fa fa-file-text ml-2"></i>
                تشخیص با داده های بالینی
            </a>
            <a href="{{ route('diagnose.scan') }}" class="dash-nav-item">
                <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>پنل مدیریت - مشخصات بیمار ({{ $patient->first_name }} {{ $patient->last_name }})</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="{{ route('logout') }}"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            خروج
                        </a>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>
        </header>
        <main class="dash-content">
            <div class="container mt-4">
                
                <!-- Patient Header -->
                <div class="patient-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="h3 mb-2">{{ $patient->first_name }} {{ $patient->last_name }}</h1>
                            <p class="mb-0 opacity-75">کد پرونده: P-{{ str_pad($patient->id, 6, '0', STR_PAD_LEFT) }}</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="patient-avatar">
                                @if($patient->sex == 'زن')
                                    <i class="fa fa-female"></i>
                                @else
                                    <i class="fa fa-male"></i>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="quick-actions no-print">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="status-badge status-active">
                                <i class="fa fa-circle mr-1"></i> بیمار فعال
                            </span>
                            <span class="text-muted">
                                عضو از {{ $patient->created_at->diffForHumans() }}
                            </span>
                        </div>
                        <div>
                            <button class="btn btn-outline-primary btn-sm" onclick="window.print()">
                                <i class="fa fa-print"></i> چاپ اطلاعات
                            </button>
                            <a href="{{ route('patients.edit', $patient->id) }}" class="btn btn-outline-success btn-sm mr-2">
                                <i class="fa fa-edit"></i> ویرایش
                            </a>
                            <form action="{{ route('patients.destroy', $patient->id) }}" method="POST" class="d-inline" id="deleteForm">
                                @csrf
                                @method('DELETE')
                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmDelete()">
                                    <i class="fa fa-trash"></i> حذف
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Patient Information -->
                    <div class="col-md-8">
                        <div class="info-card">
                            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                                <span>مشخصات کامل بیمار</span>
                                <small>آخرین به‌روزرسانی: {{ $patient->updated_at->format('Y/m/d H:i') }}</small>
                            </div>
                            <div class="card-body">
                                <div class="info-item d-flex">
                                    <div class="info-label">نام و نام خانوادگی:</div>
                                    <div class="info-value flex-grow-1">
                                        {{ $patient->first_name }} {{ $patient->last_name }}
                                    </div>
                                </div>
                                
                                <div class="info-item d-flex">
                                    <div class="info-label">کد ملی:</div>
                                    <div class="info-value flex-grow-1">
                                        {{ $patient->national_code }}
                                        <small class="text-muted mr-2">({{ $patient->national_code }})</small>
                                    </div>
                                </div>
                                
                                <div class="info-item d-flex">
                                    <div class="info-label">جنسیت:</div>
                                    <div class="info-value flex-grow-1">
                                        {{ $patient->sex }}
                                        @if($patient->sex == 'زن')
                                            <i class="fa fa-female text-pink mr-2"></i>
                                        @else
                                            <i class="fa fa-male text-blue mr-2"></i>
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="info-item d-flex">
                                    <div class="info-label">سن:</div>
                                    <div class="info-value flex-grow-1">
                                        {{ $patient->age }} سال
                                        <small class="text-muted mr-2">(متولد {{ 1403 - $patient->age }})</small>
                                    </div>
                                </div>
                                
                                <div class="info-item d-flex">
                                    <div class="info-label">شماره تلفن:</div>
                                    <div class="info-value flex-grow-1">
                                        <a href="tel:{{ $patient->phone_number }}" class="text-decoration-none">
                                            <i class="fa fa-phone mr-1"></i>
                                            {{ substr($patient->phone_number, 0, 4) }} {{ substr($patient->phone_number, 4, 3) }} {{ substr($patient->phone_number, 7, 4) }}
                                        </a>
                                    </div>
                                </div>
                                
                                <div class="info-item d-flex">
                                    <div class="info-label">آدرس:</div>
                                    <div class="info-value flex-grow-1">
                                        <i class="fa fa-map-marker text-danger mr-1"></i>
                                        {{ $patient->address }}
                                    </div>
                                </div>
                                
                                <div class="info-item d-flex">
                                    <div class="info-label">تاریخ ثبت:</div>
                                    <div class="info-value flex-grow-1">
                                        {{ verta($patient->created_at)->format('Y/m/d') }}
                                        <small class="text-muted mr-2">({{ $patient->created_at->diffForHumans() }})</small>
                                    </div>
                                </div>
                                
                                <div class="info-item d-flex">
                                    <div class="info-label">آخرین به‌روزرسانی:</div>
                                    <div class="info-value flex-grow-1">
                                        {{ verta($patient->updated_at)->format('Y/m/d H:i') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Diagnosis History -->
                        @if(isset($diagnoses) && $diagnoses->count() > 0)
                            <div class="diagnosis-history">
                                <h5 class="mb-3"><i class="fa fa-history mr-1"></i> سابقه تشخیص‌ها</h5>
                                @foreach($diagnoses as $diagnosis)
                                    <div class="history-item">
                                        <div class="history-icon {{ $diagnosis->type == 'clinical' ? 'clinical' : 'scan' }}">
                                            <i class="fa {{ $diagnosis->type == 'clinical' ? 'fa-file-text' : 'fa-camera' }}"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between">
                                                <h6 class="mb-1">
                                                    تشخیص {{ $diagnosis->type == 'clinical' ? 'بالینی' : 'تصویر فوندوس' }}
                                                </h6>
                                                <span class="history-date">
                                                    {{ verta($diagnosis->created_at)->format('Y/m/d H:i') }}
                                                </span>
                                            </div>
                                            <p class="mb-0 text-muted">
                                                نتیجه: 
                                                <span class="badge {{ $diagnosis->result == 'positive' ? 'badge-danger' : 'badge-success' }}">
                                                    {{ $diagnosis->result == 'positive' ? 'مثبت' : 'منفی' }}
                                                </span>
                                                - اطمینان: {{ $diagnosis->confidence ?? 'N/A' }}%
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="empty-state">
                                <i class="fa fa-history"></i>
                                <h5>هنوز تشخیصی ثبت نشده است</h5>
                                <p class="text-muted">برای این بیمار هیچ سابقه تشخیصی وجود ندارد.</p>
                            </div>
                        @endif
                    </div>

                    <!-- Actions & Quick Info -->
                    <div class="col-md-4">
                        <!-- Quick Actions Card -->
                        <div class="action-card mb-4">
                            <h5 class="mb-3"><i class="fa fa-bolt mr-1"></i> اقدامات سریع</h5>
                            
                            <div class="d-flex flex-column">
                                <a href="{{ route('diagnose.clinical') }}?patient_id={{ $patient->id }}" 
                                   class="btn btn-success action-btn mb-2">
                                    <i class="fa fa-file-text mr-1"></i>
                                    تشخیص با داده های بالینی جدید
                                </a>
                                
                                <a href="{{ route('diagnose.scan') }}?patient_id={{ $patient->id }}" 
                                   class="btn btn-warning action-btn mb-2">
                                    <i class="fa fa-camera mr-1"></i>
                                    تشخیص با تصویر فوندوس
                                </a>
                                
                                <a href="tel:{{ $patient->phone_number }}" 
                                   class="btn btn-info action-btn mb-2">
                                    <i class="fa fa-phone mr-1"></i>
                                    تماس با بیمار
                                </a>
                                
                                <a href="{{ route('patients.edit', $patient->id) }}" 
                                   class="btn btn-primary action-btn mb-2">
                                    <i class="fa fa-edit mr-1"></i>
                                    ویرایش اطلاعات
                                </a>
                                
                                <button class="btn btn-secondary action-btn mb-2" onclick="generateQR()">
                                    <i class="fa fa-qrcode mr-1"></i>
                                    تولید کد QR
                                </button>
                            </div>
                        </div>

                        <!-- QR Code Card -->
                        <div class="info-card">
                            <div class="card-header">
                                <i class="fa fa-qrcode mr-1"></i> کد شناسایی بیمار
                            </div>
                            <div class="card-body text-center">
                                <div class="qr-code" id="qrCodeContainer">
                                    <i class="fa fa-qrcode"></i>
                                </div>
                                <p class="small text-muted">
                                    این کد برای شناسایی سریع بیمار در سیستم استفاده می‌شود.
                                </p>
                                <button class="btn btn-outline-primary btn-sm" onclick="downloadQR()">
                                    <i class="fa fa-download mr-1"></i> دانلود QR
                                </button>
                            </div>
                        </div>

                        <!-- Statistics Card -->
                        <div class="info-card mt-4">
                            <div class="card-header">
                                <i class="fa fa-chart-bar mr-1"></i> آمار بیمار
                            </div>
                            <div class="card-body">
                                <div class="info-item d-flex">
                                    <div class="info-label">تعداد تشخیص‌ها:</div>
                                    <div class="info-value">
                                        {{ $diagnoses->count() ?? 0 }}
                                    </div>
                                </div>
                                <div class="info-item d-flex">
                                    <div class="info-label">تشخیص مثبت:</div>
                                    <div class="info-value">
                                        {{ $positiveDiagnoses ?? 0 }}
                                    </div>
                                </div>
                                <div class="info-item d-flex">
                                    <div class="info-label">تشخیص منفی:</div>
                                    <div class="info-value">
                                        {{ $negativeDiagnoses ?? 0 }}
                                    </div>
                                </div>
                                <div class="info-item d-flex">
                                    <div class="info-label">میانگین اطمینان:</div>
                                    <div class="info-value">
                                        {{ $avgConfidence ?? 'N/A' }}%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    // Delete confirmation
    function confirmDelete() {
        if (confirm('آیا مطمئن هستید که می‌خواهید این بیمار را حذف کنید؟ این عمل غیرقابل بازگشت است.')) {
            document.getElementById('deleteForm').submit();
        }
    }
    
    // Generate QR Code
    function generateQR() {
        const qrContainer = document.getElementById('qrCodeContainer');
        const patientData = {
            id: {{ $patient->id }},
            name: "{{ $patient->first_name }} {{ $patient->last_name }}",
            nationalCode: "{{ $patient->national_code }}",
            url: window.location.href
        };
        
        // Clear container
        qrContainer.innerHTML = '';
        
        // Generate QR code using a library (you need to include qrcode.js)
        // This is a placeholder - you need to include a QR code library
        if (typeof QRCode !== 'undefined') {
            new QRCode(qrContainer, {
                text: JSON.stringify(patientData),
                width: 100,
                height: 100,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            
            alert('کد QR با موفقیت تولید شد!');
        } else {
            alert('لطفا کتابخانه QR Code را اضافه کنید.');
            // Fallback: Show patient info
            qrContainer.innerHTML = `
                <div style="text-align: center; padding: 10px;">
                    <div style="font-weight: bold; margin-bottom: 5px;">{{ $patient->first_name }} {{ $patient->last_name }}</div>
                    <div style="font-size: 0.8rem; color: #666;">کد: {{ $patient->id }}</div>
                </div>
            `;
        }
    }
    
    // Download QR Code
    function downloadQR() {
        const qrContainer = document.getElementById('qrCodeContainer');
        const canvas = qrContainer.querySelector('canvas');
        
        if (canvas) {
            const link = document.createElement('a');
            link.download = `patient-{{ $patient->id }}-qr.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
        } else {
            alert('لطفا ابتدا کد QR را تولید کنید.');
        }
    }
    
    // Keyboard shortcuts
    document.addEventListener('keydown', (e) => {
        // Ctrl+E to edit
        if (e.ctrlKey && e.key === 'e') {
            e.preventDefault();
            window.location.href = "{{ route('patients.edit', $patient->id) }}";
        }
        
        // Ctrl+D for clinical diagnosis
        if (e.ctrlKey && e.key === 'd') {
            e.preventDefault();
            window.location.href = "{{ route('diagnose.clinical') }}?patient_id={{ $patient->id }}";
        }
        
        // Ctrl+S for scan diagnosis
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            window.location.href = "{{ route('diagnose.scan') }}?patient_id={{ $patient->id }}";
        }
        
        // Esc to go back
        if (e.key === 'Escape') {
            e.preventDefault();
            window.location.href = "{{ route('patients.index') }}";
        }
    });
    
    // Copy patient info to clipboard
    function copyPatientInfo() {
        const patientInfo = `
نام و نام خانوادگی: {{ $patient->first_name }} {{ $patient->last_name }}
کد ملی: {{ $patient->national_code }}
سن: {{ $patient->age }} سال
شماره تماس: {{ $patient->phone_number }}
آدرس: {{ $patient->address }}
        `.trim();
        
        navigator.clipboard.writeText(patientInfo).then(() => {
            alert('اطلاعات بیمار در کلیپ‌بورد کپی شد!');
        });
    }
    
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', () => {
        // Add copy button to quick actions
        const quickActions = document.querySelector('.quick-actions > div:first-child');
        if (quickActions) {
            const copyBtn = document.createElement('button');
            copyBtn.className = 'btn btn-outline-secondary btn-sm mr-2';
            copyBtn.innerHTML = '<i class="fa fa-copy"></i> کپی اطلاعات';
            copyBtn.onclick = copyPatientInfo;
            quickActions.appendChild(copyBtn);
        }
        
        // Add Persian date conversion for national code
        const nationalCodeEl = document.querySelector('.info-item:nth-child(2) .info-value');
        if (nationalCodeEl) {
            const nationalCode = "{{ $patient->national_code }}";
            if (nationalCode.length === 10) {
                // Simple birth year extraction from Iranian national code
                const birthCode = parseInt(nationalCode.substring(0, 3));
                const birthYear = (birthCode < 500 ? 1300 : 1300 + 100) + birthCode;
                const birthElement = document.createElement('small');
                birthElement.className = 'text-muted mr-2 d-block mt-1';
                birthElement.textContent = `سال تولد احتمالی: ${birthYear}`;
                nationalCodeEl.appendChild(birthElement);
            }
        }
    });
</script>

<!-- Include QR Code Library (optional) -->
<!--
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.0/build/qrcode.min.js"></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>