?php
$pageTitle = 'ورود و خروج - سیستم انبارداری یمیش';
$currentPage = 'transactions';
require_once __DIR__ . '/includes/header.php';

// دریافت لیست محصولات
$products = fetchAll("
    SELECT id, name, unit, stock
    FROM products
    ORDER BY name ASC
");
?>

<div class="container">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1">ورود و خروج کالا</h2>
                    <p class="text-muted mb-0">ثبت تراکنش‌های ورود و خروج کالا</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Type Selector -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="btn-group w-100" role="group">
                <button type="button" class="btn btn-outline-success btn-lg" id="btnIn" onclick="setTransactionType('IN')">
                    <i class="bi bi-arrow-down-circle me-2"></i>
                    ثبت ورود کالا
                </button>
                <button type="button" class="btn btn-outline-danger btn-lg" id="btnOut" onclick="setTransactionType('OUT')">
                    <i class="bi bi-arrow-up-circle me-2"></i>
                    ثبت خروج کالا
                </button>
            </div>
        </div>
    </div>

    <!-- Transaction Form -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-plus-circle me-2"></i>
                        ثبت تراکنش جدید
                    </h5>
                </div>
                <div class="card-body">
                    <form id="transactionForm">
                        <input type="hidden" id="transactionType" name="type" value="IN">

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">نوع تراکنش</label>
                                <input type="text" class="form-control" id="typeDisplay" value="ورود کالا" disabled>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">محصول <span class="text-danger">*</span></label>
                                <select class="form-select" name="product_id" id="productSelect" required>
                                    <option value="">انتخاب محصول...</option>
                                                                    </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">مقدار <span class="text-danger">*</span></label>
                                <input
                                    type="number"
                                    class="form-control"
                                    name="quantity"
                                    id="quantityInput"
                                    min="0.001"
                                    step="0.001"
                                    required
                                >
                                <small class="text-muted" id="unitHint">واحد: ---</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">توضیحات</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    name="description"
                                    id="descriptionInput"
                                    placeholder="توضیحات اختیاری..."
                                >
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-success" id="submitBtn">
                                <i class="bi bi-check-lg me-2"></i>
                                ثبت ورود کالا
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Stock Info -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        اطلاعات محصول
                    </h5>
                </div>
                <div class="card-body" id="productInfo">
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-box fs-1 d-block mb-3"></i>
                        محصولی انتخاب نشده است
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Transactions -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-clock-history me-2"></i>
                            تراکنش‌های اخیر
                        </h5>
                        <button class="btn btn-sm btn-outline-primary" onclick="loadTransactions()">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>نوع</th>
                                    <th>محصول</th>
                                    <th>مقدار</th>
                                    <th>واحد</th>
                                    <th>توضیحات</th>
                                    <th>تاریخ</th>
                                </tr>
                            </thead>
                            <tbody id="transactionsTableBody">
                                <tr>
                                    <td colspan="6" class="text-center py-5">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">در حال بارگذاری...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let currentType = 'IN';

// تنظیم نوع تراکنش
function setTransactionType(type) {
    currentType = type;
    document.getElementById('transactionType').value = type;

    const btnIn = document.getElementById('btnIn');
    const btnOut = document.getElementById('btnOut');
    const typeDisplay = document.getElementById('typeDisplay');
    const submitBtn = document.getElementById('submitBtn');

    if (type === 'IN') {
        btnIn.classList.add('active');
        btnOut.classList.remove('active');
        typeDisplay.value = 'ورود کالا';
        submitBtn.innerHTML = '<i class="bi bi-check-lg me-2"></i> ثبت ورود کالا';
        submitBtn.className = 'btn btn-success';
    } else {
        btnOut.classList.add('active');
        btnIn.classList.remove('active');
        typeDisplay.value = 'خروج کالا';
        submitBtn.innerHTML = '<i class="bi bi-check-lg me-2"></i> ثبت خروج کالا';
        submitBtn.className = 'btn btn-danger';
    }
}

// دریافت لیست تراکنش‌ها
async function loadTransactions() {
    try {
        const response = await fetch(`api/transactions.php?type=${currentType}`);
        const transactions = await response.json();
        renderTransactions(transactions);
    } catch (error) {
        console.error('Error loading transactions:', error);
        showError('خطا در دریافت لیست تراکنش‌ها');
    }
}

// نمایش تراکنش‌ها
function renderTransactions(transactions) {
    const tbody = document.getElementById('transactionsTableBody');

    if (transactions.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="6" class="text-center py-5">
                    <div class="text-muted">
                        <i class="bi bi-inbox fs-1 d-block mb-3"></i>
                        تراکنشی یافت نشد
                    </div>
                </td>
            </tr>
        `;
        return;
    }

    tbody.innerHTML = transactions.map(t => `
        <tr>
            <td>
                <span class="badge ${t.type === 'IN' ? 'badge-success' : 'badge-danger'}">
                    ${t.type_name}
                </span>
            </td>
            <td>${t.product_name}</td>
            <td><strong>${Formatter.number(t.quantity)}</strong></td>
            <td>${t.unit_name}</td>
            <td>${t.description || '-'}</td>
            <td><small>${toJalali(t.created_at)}</small></td>
        </tr>
    `).join('');
}

// نمایش اطلاعات محصول
function showProductInfo(product) {
    const container = document.getElementById('productInfo');
    const unitHint = document.getElementById('unitHint');

    unitHint.textContent = `واحد: ${product.unit_name}`;

    container.innerHTML = `
        <div class="mb-3">
            <strong class="d-block mb-2">${product.name}</strong>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">واحد:</span>
                <strong>${product.unit_name}</strong>
            </div>
            <div class="d-flex justify-content-between">
                <span class="text-muted">موجودی فعلی:</span>
                <strong class="${product.stock <= 0 ? 'text-danger' : 'text-success'}">
                    ${Formatter.number(product.stock)} ${product.unit_name}
                </strong>
            </div>
        </div>
        ${currentType === 'OUT' && product.stock <= 0 ? `
            <div class="alert alert-danger mb-0">
                <i class="bi bi-exclamation-triangle me-2"></i>
                موجودی این محصول صفر است
            </div>
        ` : ''}
    `;
}

// تغییر انتخاب محصول
document.getElementById('productSelect').addEventListener('change', function() {
    const option = this.options[this.selectedIndex];

    if (this.value) {
        const product = {
            name: option.text.split('(')[0].trim(),
            unit: option.dataset.unit,
            stock: parseFloat(option.dataset.stock),
            unit_name: option.dataset.unitName
        };
        showProductInfo(product);
    } else {
        document.getElementById('productInfo').innerHTML = `
            <div class="text-center py-4 text-muted">
                <i class="bi bi-box fs-1 d-block mb-3"></i>
                محصولی انتخاب نشده است
            </div>
        `;
        document.getElementById('unitHint').textContent = 'واحد: ---';
    }
});

// ثبت فرم تراکنش
document.getElementById('transactionForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());

    // اعتبارسنجی
    if (!data.product_id) {
        Toast.error('خطا', 'لطفاً محصول را انتخاب کنید');
        return;
    }

    if (!data.quantity || parseFloat(data.quantity) <= 0) {
        Toast.error('خطا', 'لطفاً مقدار معتبر وارد کنید');
        return;
    }

    // بررسی موجودی برای خروج
    if (currentType === 'OUT') {
        const select = document.getElementById('productSelect');
        const option = select.options[select.selectedIndex];
        const currentStock = parseFloat(option.dataset.stock);

        if (parseFloat(data.quantity) > currentStock) {
            Toast.error('خطا', `موجودی کافی نیست. موجودی فعلی: ${Formatter.number(currentStock)}`);
            return;
        }
    }

    try {
        Loading.show();

        const response = await fetch('api/transactions.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        });

        const result = await response.json();

        if (response.ok) {
            Toast.success('موفق', result.message || 'تراکنش با موفقیت ثبت شد');

            // ریست فرم
            this.reset();
            document.getElementById('transactionType').value = currentType;

            // بارگذاری مجدد تراکنش‌ها
            await loadTransactions();

            // رفرش صفحه برای آپدیت موجودی محصولات
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            Toast.error('خطا', result.error || 'خطا در ثبت تراکنش');
        }
    } catch (error) {
        console.error('Error saving transaction:', error);
        Toast.error('خطا', 'خطا در ارتباط با سرور');
    } finally {
        Loading.hide();
    }
});

// بارگذاری اولیه
setTransactionType('IN');
loadTransactions();
</script>

  </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">
                        <i class="bi bi-c-circle me-1"></i>
                        2026 سیستم انبارداری یمیش - گروه بازرگانی
                    </p>
                    <small class="text-muted">
                        طراحی و توسعه با ❤️
                    </small>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Custom JS -->
    <script src="assets/js/main.js"></script>

    <script>
        // نمایش پیام‌های سیستم
        
            </script>
</body>
</html>