<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="UTF-8">
    <title>شرطة المدينة - MDT</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="tablet-frame">
        <div class="tablet-container">
            <div class="screen">
                <div class="top-bar">
                    <div class="time" id="current-time">00:00</div>
                    <div class="status">
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-full"></i>
                    </div>
                </div>
                
                <div class="container">
                    <div class="sidebar">
                        <div class="profile-section">
                            <div class="avatar">
                                <i class="fas fa-user-shield"></i>
                            </div>
                            <div class="officer-info">
                                <h3 id="officer-name">الضابط</h3>
                                <span id="officer-badge">رقم الشارة: #1234</span>
                            </div>
                        </div>
                        
                        <nav class="menu">
                            <button class="menu-item active" data-page="search">
                                <i class="fas fa-search"></i>
                                <span>بحث عن مواطن</span>
                            </button>
                            <button class="menu-item" data-page="wanted">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span>المطلوبين</span>
                            </button>
                            <button class="menu-item" data-page="cases">
                                <i class="fas fa-gavel"></i>
                                <span>القضايا</span>
                            </button>
                            <button class="menu-item" data-page="vehicles">
                                <i class="fas fa-car"></i>
                                <span>المركبات</span>
                            </button>
                        </nav>
                    </div>

                    <div class="main-content">
                        <div id="search-page" class="page active">
                            <div class="search-container">
                                <div class="search-box">
                                    <i class="fas fa-search"></i>
                                    <input type="text" id="search-input" placeholder="ابحث عن طريق الاسم أو الهوية...">
                                </div>
                            </div>
                            <div id="search-results" class="results-container"></div>
                        </div>

                        <div id="wanted-page" class="page">
                            <h2><i class="fas fa-exclamation-triangle"></i> قائمة المطلوبين</h2>
                            <div class="wanted-list"></div>
                        </div>

                        <div id="cases-page" class="page">
                            <h2><i class="fas fa-gavel"></i> القضايا</h2>
                            <div class="cases-actions">
                                <button class="add-case-btn" onclick="showPlayersPage()">
                                    <i class="fas fa-plus"></i>
                                    إضافة قضية جديدة
                                </button>
                                <div class="cases-search">
                                    <i class="fas fa-search"></i>
                                    <input type="text" id="case-search" placeholder="ابحث عن قضية...">
                                </div>
                            </div>
                            
                            <div class="cases-filters">
                                <div class="filter-group">
                                    <span class="filter-label">نوع القضية:</span>
                                    <button class="filter-btn active" data-type="all">الكل</button>
                                    <button class="filter-btn" data-type="criminal">جنائية</button>
                                    <button class="filter-btn" data-type="traffic">مرورية</button>
                                </div>
                                <div class="filter-group">
                                    <span class="filter-label">حالة القضية:</span>
                                    <button class="filter-btn active" data-status="all">الكل</button>
                                    <button class="filter-btn" data-status="executed">منفذة</button>
                                    <button class="filter-btn" data-status="pending">غير منفذة</button>
                                </div>
                            </div>

                            <div class="cases-list"></div>
                        </div>

                        <div id="vehicles-page" class="page">
                            <h2><i class="fas fa-car"></i> المركبات</h2>
                            <div class="vehicles-search">
                                <input type="text" placeholder="ابحث عن مركبة...">
                            </div>
                            <div class="vehicles-list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>