<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="POS Web - Profesyonel Yazar Kasa Sistemi">
    <meta name="theme-color" content="#1e3a5f">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Müşteriler - POS Web Market</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- CSS Dosyaları -->
    <link rel="stylesheet" href="/assets/css/theme.css?v=1783112823">
    <link rel="stylesheet" href="/assets/css/layout.css?v=1783112823">
    <link rel="stylesheet" href="/assets/css/style.css?v=1783112823">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🛒%3C/text%3E%3C/svg%3E">
</head>
<body data-page="pages_customers">

<!-- Navbar -->
<nav class="navbar" id="navbar">
    <div class="navbar-left">
        <button class="sidebar-toggle" id="sidebarToggle" title="Menüyü Aç/Kapat">
            <i class="fas fa-bars"></i>
        </button>
        <a href="/index.php" class="navbar-brand">
            <div class="brand-icon">
                <i class="fas fa-cash-register"></i>
            </div>
            <div class="brand-text">
                <span class="brand-title">POS Web</span>
                <span class="brand-subtitle">Yazar Kasa Sistemi</span>
            </div>
        </a>
    </div>
    
    <div class="navbar-center">
        <div class="navbar-search">
            <i class="fas fa-search search-icon"></i>
            <input type="text" 
                   id="globalSearch" 
                   placeholder="Ürün, barkod veya kategori ara..." 
                   autocomplete="off">
            <kbd class="search-shortcut">Ctrl+K</kbd>
        </div>
    </div>
    
    <div class="navbar-right">
        <!-- Barkod Hızlı Arama -->
        <div class="navbar-action" id="barcodeScanBtn" title="Barkod Tara (Ctrl+B)">
            <i class="fas fa-barcode"></i>
            <span class="action-label">Barkod</span>
        </div>
        
        <!-- Stok Uyarıları -->
        <div class="navbar-action has-badge" id="stockAlertBtn" title="Düşük Stok Uyarıları">
            <i class="fas fa-bell"></i>
            <span class="badge" id="stockAlertCount" style="display:none;">0</span>
            <span class="action-label">Uyarılar</span>
        </div>
        
        <!-- Tam Ekran -->
        <div class="navbar-action" id="fullscreenBtn" title="Tam Ekran (F11)">
            <i class="fas fa-expand"></i>
            <span class="action-label">Tam Ekran</span>
        </div>
        
        <!-- Kullanıcı Menüsü -->
        <div class="navbar-user" id="userMenuBtn">
            <div class="user-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="user-info">
                <span class="user-name">Yönetici</span>
                <span class="user-role">Admin</span>
            </div>
            <i class="fas fa-chevron-down user-chevron"></i>
            
            <!-- Açılır Menü -->
            <div class="user-dropdown" id="userDropdown">
                <a href="/pages/settings.php" class="dropdown-item">
                    <i class="fas fa-cog"></i>
                    <span>Ayarlar</span>
                </a>
                <div class="dropdown-divider"></div>
                <a href="/pages/settings.php#backup" class="dropdown-item">
                    <i class="fas fa-database"></i>
                    <span>Yedekleme</span>
                </a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item text-danger" id="logoutBtn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>Çıkış</span>
                </a>
            </div>
        </div>
    </div>
</nav>

<!-- Barkod Tarama Modalı -->
<div class="modal" id="barcodeModal">
    <div class="modal-content modal-sm">
        <div class="modal-header">
            <h3><i class="fas fa-barcode"></i> Barkod Tara</h3>
            <button class="modal-close" data-modal="barcodeModal"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="barcodeInput">Barkod</label>
                <div class="input-group">
                    <input type="text" 
                           id="barcodeInput" 
                           class="form-control form-control-lg" 
                           placeholder="Barkodu okutun veya yazın..." 
                           autocomplete="off" 
                           autofocus>
                    <button class="btn btn-primary" id="barcodeSearchBtn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <small class="form-text">Barkod okuyucu ile okutun veya manuel girin</small>
            </div>
        </div>
    </div>
</div>

<!-- Stok Uyarıları Modalı -->
<div class="modal" id="stockAlertModal">
    <div class="modal-content modal-md">
        <div class="modal-header">
            <h3><i class="fas fa-exclamation-triangle text-warning"></i> Düşük Stok Uyarıları</h3>
            <button class="modal-close" data-modal="stockAlertModal"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div id="stockAlertList" class="stock-alert-list">
                <div class="loading-spinner">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span>Yükleniyor...</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <div class="sidebar-brand">
            <div class="brand-icon">
                <i class="fas fa-cash-register"></i>
            </div>
            <div class="brand-text">
                <span class="brand-title">POS Web</span>
                <span class="brand-subtitle">Profesyonel POS</span>
            </div>
        </div>
        <button class="sidebar-close" id="sidebarClose">
            <i class="fas fa-times"></i>
        </button>
    </div>
    
    <!-- Menü Grupları -->
    <nav class="sidebar-nav">
                <div class="menu-group">
            <span class="menu-group-title">Ana Menü</span>
            <ul class="menu-list">
                                <li class="menu-item " data-page="index">
                    <a href="/index.php" class="menu-link">
                        <i class="fas fa-cash-register menu-icon"></i>
                        <span class="menu-label">Satış Ekranı</span>
                                            </a>
                </li>
                                <li class="menu-item " data-page="pages_dashboard">
                    <a href="/pages/dashboard.php" class="menu-link">
                        <i class="fas fa-chart-line menu-icon"></i>
                        <span class="menu-label">Dashboard</span>
                                            </a>
                </li>
                            </ul>
        </div>
                <div class="menu-group">
            <span class="menu-group-title">Ürün Yönetimi</span>
            <ul class="menu-list">
                                <li class="menu-item " data-page="pages_products">
                    <a href="/pages/products.php" class="menu-link">
                        <i class="fas fa-boxes-stacked menu-icon"></i>
                        <span class="menu-label">Ürünler</span>
                                            </a>
                </li>
                                <li class="menu-item " data-page="pages_product_add">
                    <a href="/pages/product_add.php" class="menu-link">
                        <i class="fas fa-plus-circle menu-icon"></i>
                        <span class="menu-label">Yeni Ürün Ekle</span>
                                            </a>
                </li>
                            </ul>
        </div>
                <div class="menu-group">
            <span class="menu-group-title">Müşteri &amp; Satış</span>
            <ul class="menu-list">
                                <li class="menu-item active" data-page="pages_customers">
                    <a href="/pages/customers.php" class="menu-link">
                        <i class="fas fa-users menu-icon"></i>
                        <span class="menu-label">Müşteriler</span>
                                            </a>
                </li>
                                <li class="menu-item " data-page="pages_credit">
                    <a href="/pages/credit.php" class="menu-link">
                        <i class="fas fa-hand-holding-dollar menu-icon"></i>
                        <span class="menu-label">Veresiye</span>
                                                <span class="menu-badge credit-badge" id="credit-badge"></span>
                                            </a>
                </li>
                            </ul>
        </div>
                <div class="menu-group">
            <span class="menu-group-title">Finans</span>
            <ul class="menu-list">
                                <li class="menu-item " data-page="pages_cash">
                    <a href="/pages/cash.php" class="menu-link">
                        <i class="fas fa-vault menu-icon"></i>
                        <span class="menu-label">Kasa</span>
                                            </a>
                </li>
                                <li class="menu-item " data-page="pages_reports">
                    <a href="/pages/reports.php" class="menu-link">
                        <i class="fas fa-file-invoice-dollar menu-icon"></i>
                        <span class="menu-label">Raporlar</span>
                                            </a>
                </li>
                            </ul>
        </div>
                <div class="menu-group">
            <span class="menu-group-title">Sistem</span>
            <ul class="menu-list">
                                <li class="menu-item " data-page="pages_settings">
                    <a href="/pages/settings.php" class="menu-link">
                        <i class="fas fa-cog menu-icon"></i>
                        <span class="menu-label">Ayarlar</span>
                                            </a>
                </li>
                            </ul>
        </div>
            </nav>
    
    <!-- Kısayollar -->
    <div class="sidebar-shortcuts">
        <span class="shortcuts-title"><i class="fas fa-keyboard"></i> Kısayollar</span>
        <div class="shortcuts-list">
                        <div class="shortcut-item">
                <kbd>F1</kbd>
                <span>Yardım</span>
            </div>
                        <div class="shortcut-item">
                <kbd>F2</kbd>
                <span>Hızlı Satış</span>
            </div>
                        <div class="shortcut-item">
                <kbd>F9</kbd>
                <span>Ödeme</span>
            </div>
                        <div class="shortcut-item">
                <kbd>Ctrl+K</kbd>
                <span>Arama</span>
            </div>
                        <div class="shortcut-item">
                <kbd>Ctrl+B</kbd>
                <span>Barkod</span>
            </div>
                        <div class="shortcut-item">
                <kbd>Esc</kbd>
                <span>Kapat</span>
            </div>
                    </div>
    </div>
    
    <!-- Sidebar Footer -->
    <div class="sidebar-footer">
        <div class="system-info">
            <span class="version">v1.0.0</span>
            <span class="status online"><i class="fas fa-circle"></i> Çevrimiçi</span>
        </div>
    </div>
</aside>

<!-- Sidebar Overlay (mobil) -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<main class="main-content">
    <!-- Page Header -->
    <div class="page-header">
        <div class="page-header-left">
            <div class="page-header-icon">
                <i class="fas fa-users"></i>
            </div>
            <div>
                <h1 class="page-header-title">Müşteriler</h1>
                <p class="page-header-subtitle">Müşteri kayıtlarını yönetin</p>
            </div>
        </div>
        <div class="page-header-actions">
            <button class="btn btn-primary" id="addCustomerBtn">
                <i class="fas fa-user-plus"></i> Yeni Müşteri
            </button>
        </div>
    </div>
    
    <!-- Stats -->
    <div class="grid grid-cols-4 mb-6" id="customerStats" style="gap: var(--space-4);">
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon bg-primary"><i class="fas fa-users"></i></div>
            </div>
            <div class="stat-card-value" id="statTotal">-</div>
            <div class="stat-card-label">Toplam Müşteri</div>
        </div>
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon bg-danger"><i class="fas fa-hand-holding-dollar"></i></div>
            </div>
            <div class="stat-card-value" id="statDebtors">-</div>
            <div class="stat-card-label">Borçlu Müşteri</div>
        </div>
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon bg-warning"><i class="fas fa-money-bill-wave"></i></div>
            </div>
            <div class="stat-card-value" id="statTotalDebt">-</div>
            <div class="stat-card-label">Toplam Borç</div>
        </div>
        <div class="stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon bg-success"><i class="fas fa-user-check"></i></div>
            </div>
            <div class="stat-card-value" id="statNew">-</div>
            <div class="stat-card-label">Bu Ay Yeni</div>
        </div>
    </div>
    
    <!-- Toolbar -->
    <div class="toolbar">
        <div class="toolbar-left">
            <div class="search-box" style="width: 280px;">
                <i class="fas fa-search"></i>
                <input type="text" id="customerSearch" placeholder="Müşteri ara..." autocomplete="off">
            </div>
            <select id="debtFilter" class="form-control form-control-sm" style="width: 160px;">
                <option value="">Tümü</option>
                <option value="1">Borçlu Olanlar</option>
            </select>
        </div>
    </div>
    
    <!-- Customers Table -->
    <div class="content-card">
        <div class="table-container">
            <table class="table" id="customersTable">
                <thead>
                    <tr>
                        <th>Müşteri</th>
                        <th>Telefon</th>
                        <th>Adres</th>
                        <th>Toplam Borç</th>
                        <th>Ödenen</th>
                        <th>Kalan</th>
                        <th style="width: 140px;">İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td colspan="7" class="table-empty">Yükleniyor...</td></tr>
                </tbody>
            </table>
        </div>
        <div class="content-card-footer">
            <span class="text-sm text-secondary" id="customerPaginationInfo"></span>
            <div class="pagination" id="customerPagination"></div>
        </div>
    </div>
    
</main>

<!-- Müşteri Ekleme/Düzenleme Modalı -->
<div class="modal" id="customerModal">
    <div class="modal-content modal-md">
        <div class="modal-header">
            <h3 id="customerModalTitle"><i class="fas fa-user-plus"></i> Yeni Müşteri</h3>
            <button class="modal-close" data-modal="customerModal"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <form id="customerForm">
                <input type="hidden" id="customerId">
                <div class="form-group">
                    <label class="required">Ad Soyad</label>
                    <input type="text" id="customerName" class="form-control" required placeholder="Müşteri adı ve soyadı">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Telefon</label>
                        <input type="tel" id="customerPhone" class="form-control" placeholder="05XX XXX XX XX">
                    </div>
                    <div class="form-group">
                        <label>E-posta</label>
                        <input type="email" id="customerEmail" class="form-control" placeholder="ornek@email.com">
                    </div>
                </div>
                <div class="form-group">
                    <label>Adres</label>
                    <textarea id="customerAddress" class="form-control" rows="2" placeholder="Adres bilgisi"></textarea>
                </div>
                <div class="form-group">
                    <label>Notlar</label>
                    <textarea id="customerNotes" class="form-control" rows="2" placeholder="Müşteri hakkında notlar"></textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" data-modal="customerModal">İptal</button>
            <button class="btn btn-primary" id="saveCustomerBtn">
                <i class="fas fa-save"></i> Kaydet
            </button>
        </div>
    </div>
</div>



    </main>
    
    <!-- Toast Bildirimleri -->
    <div class="toast-container" id="toastContainer"></div>
    
    <!-- Yükleniyor Overlay -->
    <div class="loading-overlay" id="loadingOverlay" style="display:none;">
        <div class="loading-content">
            <div class="spinner"></div>
            <span class="loading-text">İşleniyor...</span>
        </div>
    </div>
    
    <!-- Onay Modalı -->
    <div class="modal" id="confirmModal">
        <div class="modal-content modal-sm">
            <div class="modal-header">
                <h3 id="confirmTitle"><i class="fas fa-question-circle"></i> Onay</h3>
                <button class="modal-close" data-modal="confirmModal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage">Bu işlemi yapmak istediğinize emin misiniz?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-modal="confirmModal">İptal</button>
                <button class="btn btn-primary" id="confirmBtn">Evet</button>
            </div>
        </div>
    </div>
    
    <!-- Bildirim Modalı -->
    <div class="modal" id="alertModal">
        <div class="modal-content modal-sm">
            <div class="modal-header">
                <h3 id="alertTitle"><i class="fas fa-info-circle"></i> Bilgi</h3>
                <button class="modal-close" data-modal="alertModal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <p id="alertMessage"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-modal="alertModal">Tamam</button>
            </div>
        </div>
    </div>

    <!-- JavaScript Dosyaları -->
    <script src="/assets/js/utils.js?v=1783112823"></script>
    <script src="/assets/js/app.js?v=1783112823"></script>
    
        <script src="/assets/js/customer.js?v=1783112823"></script>
        
    <!-- Sayfaya Özel Script -->
    <script>
        // Aktif sayfa bilgisi
        window.POS_APP = {
            currentPage: 'pages_customers',
            baseUrl: '',
            currency: '₺',
            vatRate: 18,
            shortcuts: {
                search: 'ctrl+k',
                barcode: 'ctrl+b',
                fullscreen: 'f11',
                cancel: 'escape'
            }
        };
    </script>
</body>
</html>
