<?php
/**
 * NEPHRO ERP - STOK HAREKETLERİ (Cihaz Tasarımı Uyumlu)
 * Modern minimal tasarım, cihaz ve stok sayfalarıyla %100 uyumlu
 */
global $pdo;
if (session_status() === PHP_SESSION_NONE) { session_start(); }

if (!function_exists('h')) {
    function h($s){ return htmlspecialchars((string)$s, ENT_QUOTES, "UTF-8"); }
}

$urun_id = (int)($_GET['urun_id'] ?? 0);
$urun = null;
$hareketler = [];

if ($urun_id > 0) {
    $u_stmt = $pdo->prepare("SELECT * FROM stok WHERE id = ?");
    $u_stmt->execute([$urun_id]);
    $urun = $u_stmt->fetch(PDO::FETCH_ASSOC);

    if ($urun) {
        $h_stmt = $pdo->prepare("
            SELECT sh.*, k.ad_soyad 
            FROM stok_hareketleri sh 
            LEFT JOIN kullanicilar k ON sh.kullanici_id = k.id 
            WHERE sh.stok_id = ? 
            ORDER BY sh.islem_tarihi DESC
        ");
        $h_stmt->execute([$urun_id]);
        $hareketler = $h_stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}
?>

<style>
/* === Cihaz Yönetimi Stilinde Değişkenler === */
:root {
    --primary: #3b82f6;
    --primary-light: #eff6ff;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --dark: #1e293b;
    --light: #f8fafc;
    --border: #e2e8f0;
    --card: #ffffff;
    --muted: #64748b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background: var(--light);
    padding: 20px;
    color: var(--dark);
}

/* === Container === */
.container {
    max-width: 800px;
    margin: 0 auto;
}

/* === Back Button === */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}

.back-btn:hover {
    background: var(--light);
    color: var(--primary);
}

/* === Product Header === */
.product-header {
    background: var(--card);
    border-radius: 18px;
    padding: 25px;
    border: 1px solid var(--border);
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.product-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
}

.product-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--muted);
}

.meta-item i {
    width: 16px;
    text-align: center;
}

.stock-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
}

.stock-badge small {
    display: block;
    font-size: 11px;
    opacity: 0.9;
    margin-bottom: 2px;
    font-weight: 600;
}

.stock-badge .amount {
    font-size: 20px;
    font-weight: 800;
}

/* === Quick Action Panel === */
.action-panel {
    background: var(--card);
    border-radius: 18px;
    padding: 25px;
    border: 1px solid var(--border);
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.action-panel h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-panel h2 i {
    color: var(--primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.form-select, .form-input {
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    background: var(--light);
}

.form-select:focus, .form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    height: 46px;
}

.btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* === Timeline === */
.timeline-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-header i {
    color: var(--primary);
}

.timeline {
    position: relative;
    padding-left: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

/* === Movement Card === */
.movement-card {
    background: var(--card);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
    position: relative;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.movement-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.movement-card::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--primary);
    z-index: 1;
}

.movement-info {
    flex: 1;
}

.movement-type {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.type-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.type-in .type-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.type-out .type-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.type-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
}

.movement-details {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.detail-item i {
    width: 14px;
    text-align: center;
}

/* === Movement Amount === */
.movement-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.amount-badge {
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    min-width: 100px;
    text-align: center;
}

.amount-in {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.amount-out {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* === Action Buttons === */
.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-icon:hover {
    background: var(--light);
    color: var(--dark);
}

.btn-icon.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

.empty-state i {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 20px;
}

/* === No Product Selected === */
.no-product {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted);
}

.no-product i {
    font-size: 64px;
    color: #cbd5e1;
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-product h3 {
    font-size: 20px;
    color: var(--dark);
    margin-bottom: 10px;
    font-weight: 600;
}

.no-product p {
    margin-bottom: 30px;
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
    body {
        padding: 15px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .movement-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .movement-amount {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .amount-badge {
        min-width: auto;
    }
    
    .stock-badge {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 15px;
        width: fit-content;
    }
    
    .movement-card::before {
        left: -20px;
    }
}
</style>

<div class="container">
    <?php if($urun): ?>
        <!-- Back Button -->
        <a href="index.php?sayfa=stok-liste" class="back-btn">
            <i class="fas fa-arrow-left"></i> Stok Listesine Dön
        </a>

        <!-- Product Header -->
        <div class="product-header">
            <h1><?= h($urun['urun_adi']) ?></h1>
            
            <div class="product-meta">
                <div class="meta-item">
                    <i class="fas fa-barcode"></i>
                    <span><?= h($urun['barkod'] ?: '-') ?></span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-tag"></i>
                    <span>LOT: <?= h($urun['lot_no'] ?: '-') ?></span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-scale-balanced"></i>
                    <span>Birim: <?= h($urun['birim'] ?: 'Adet') ?></span>
                </div>
            </div>

            <div class="stock-badge">
                <small>MEVCUT STOK</small>
                <div class="amount"><?= $urun['stok_miktari'] ?></div>
            </div>
        </div>

        <!-- Quick Action Panel -->
        <div class="action-panel">
            <h2><i class="fas fa-bolt"></i> Hızlı Hareket Kaydı</h2>
            <form action="islem.php" method="POST">
                <input type="hidden" name="stok_id" value="<?= $urun_id ?>">
                
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">İşlem Türü</label>
                        <select name="islem_tipi" class="form-select" required>
                            <option value="Giriş">Stok Girişi</option>
                            <option value="Çıkış">Stok Çıkışı</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Miktar</label>
                        <input type="number" name="miktar" class="form-input" placeholder="Adet/Miktar" required min="1" step="0.01">
                    </div>
                    
                    <button type="submit" name="stok_hareket_kaydet" class="btn-primary">
                        <i class="fas fa-save"></i> Kaydet
                    </button>
                </div>
            </form>
        </div>

        <!-- Timeline Header -->
        <div class="timeline-header">
            <i class="fas fa-history"></i> İşlem Geçmişi
        </div>

        <!-- Timeline -->
        <div class="timeline">
            <?php if(empty($hareketler)): ?>
                <div class="empty-state">
                    <i class="fas fa-file-alt"></i>
                    <h3>Henüz Hareket Kaydı Yok</h3>
                    <p>Bu malzemeye ait henüz bir işlem gerçekleştirilmemiş</p>
                </div>
            <?php else: ?>
                <?php foreach($hareketler as $h): ?>
                    <div class="movement-card <?= $h['islem_tipi'] == 'Giriş' ? 'type-in' : 'type-out' ?>">
                        <div class="movement-info">
                            <div class="movement-type">
                                <div class="type-icon">
                                    <i class="fas fa-<?= $h['islem_tipi'] == 'Giriş' ? 'arrow-down' : 'arrow-up' ?>"></i>
                                </div>
                                <div class="type-label"><?= h($h['islem_tipi']) ?> İşlemi</div>
                            </div>
                            
                            <div class="movement-details">
                                <div class="detail-item">
                                    <i class="far fa-clock"></i>
                                    <span><?= date('d.m.Y H:i', strtotime($h['islem_tarihi'])) ?></span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-user"></i>
                                    <span><?= h($h['ad_soyad'] ?: 'Sistem') ?></span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="movement-amount">
                            <div class="amount-badge <?= $h['islem_tipi'] == 'Giriş' ? 'amount-in' : 'amount-out' ?>">
                                <?= $h['islem_tipi'] == 'Giriş' ? '+' : '-' ?><?= $h['miktar'] ?>
                            </div>
                            
                            <div class="action-buttons">
                                <a href="islem.php?islem=hareket_sil&id=<?= $h['id'] ?>&stok_id=<?= $urun_id ?>&miktar=<?= $h['miktar'] ?>&tip=<?= h($h['islem_tipi']) ?>" 
                                   class="btn-icon delete" 
                                   title="İşlemi İptal Et"
                                   onclick="return confirm('Bu işlemi iptal etmek istediğinize emin misiniz? Stok miktarı güncellenecektir.')">
                                    <i class="fas fa-trash-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    <?php else: ?>
        <!-- No Product Selected -->
        <div class="no-product">
            <i class="fas fa-box-open"></i>
            <h3>Ürün Seçilmedi</h3>
            <p>Stok hareketlerini görüntülemek için bir ürün seçmelisiniz</p>
            <a href="index.php?sayfa=stok-liste" class="btn-primary" style="text-decoration: none; display: inline-flex;">
                <i class="fas fa-list"></i> Stok Listesine Git
            </a>
        </div>
    <?php endif; ?>
</div>

<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 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@400;500;600;700;800&display=swap" rel="stylesheet">