<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>طلب تحويل مخزون جديد<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/inventory/transfers" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة للتحويلات</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<form method="POST" action="/inventory/transfers" id="transferForm">
    <?= csrf_field() ?>

    <!-- Transfer Details Card -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="repeat" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;font-size:15px;">بيانات التحويل</h3>
        </div>
        <div style="padding:20px;">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;">
                <div class="form-group">
                    <label class="form-label">من المخزن <span style="color:#DC2626;">*</span></label>
                    <select name="from_warehouse_id" id="from_warehouse_id" class="form-select" required>
                        <option value="">-- اختر المخزن --</option>
                        <?php foreach ($warehouses as $wh): ?>
                        <option value="<?= (int) $wh['id'] ?>" <?= old('from_warehouse_id') == $wh['id'] ? 'selected' : '' ?>><?= e($wh['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">إلى المخزن <span style="color:#DC2626;">*</span></label>
                    <select name="to_warehouse_id" id="to_warehouse_id" class="form-select" required>
                        <option value="">-- اختر المخزن --</option>
                        <?php foreach ($warehouses as $wh): ?>
                        <option value="<?= (int) $wh['id'] ?>" <?= old('to_warehouse_id') == $wh['id'] ? 'selected' : '' ?>><?= e($wh['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">تاريخ التحويل <span style="color:#DC2626;">*</span></label>
                    <input type="date" name="transfer_date" value="<?= e(old('transfer_date', date('Y-m-d'))) ?>" class="form-input" required>
                </div>
            </div>
            <div class="form-group" style="margin-top:15px;">
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-input" rows="3" placeholder="ملاحظات إضافية عن التحويل..."><?= e(old('notes', '')) ?></textarea>
            </div>
        </div>
    </div>

    <!-- Items Card -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="package" style="width:18px;height:18px;color:#D97706;"></i>
                <h3 style="margin:0;color:#D97706;font-size:15px;">الأصناف المحولة</h3>
            </div>
            <button type="button" id="addItemBtn" class="btn btn-sm btn-outline" style="font-size:12px;padding:5px 12px;color:#0D7377;border-color:#0D7377;">
                <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إضافة صنف
            </button>
        </div>
        <div style="padding:20px;">
            <table class="data-table" id="itemsTable" style="width:100%;">
                <thead>
                    <tr>
                        <th style="width:50%;">الصنف</th>
                        <th style="width:30%;">الكمية</th>
                        <th style="width:20%;text-align:center;">حذف</th>
                    </tr>
                </thead>
                <tbody id="itemsBody">
                    <!-- Rows added dynamically -->
                </tbody>
            </table>
            <div id="noItemsMsg" style="padding:30px;text-align:center;color:#9CA3AF;font-size:14px;">
                <i data-lucide="package-open" style="width:32px;height:32px;color:#D1D5DB;margin-bottom:8px;"></i>
                <div>لم يتم إضافة أصناف بعد. اضغط "إضافة صنف" للبدء.</div>
            </div>
        </div>
    </div>

    <!-- Submit -->
    <div style="display:flex;gap:10px;justify-content:flex-start;">
        <button type="submit" class="btn btn-primary" style="padding:12px 30px;font-size:15px;">
            <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
            إنشاء طلب التحويل
        </button>
        <a href="/inventory/transfers" class="btn btn-outline" style="padding:12px 30px;font-size:15px;">إلغاء</a>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // Items data for select options
    var availableItems = [
        <?php foreach ($items as $item): ?>
        { id: <?= (int) $item['id'] ?>, name: '<?= e($item['name_ar']) ?>', sku: '<?= e($item['sku']) ?>' },
        <?php endforeach; ?>
    ];

    var itemsBody = document.getElementById('itemsBody');
    var noItemsMsg = document.getElementById('noItemsMsg');
    var addItemBtn = document.getElementById('addItemBtn');
    var rowCounter = 0;

    function buildItemOptions() {
        var html = '<option value="">-- اختر الصنف --</option>';
        for (var i = 0; i < availableItems.length; i++) {
            var it = availableItems[i];
            html += '<option value="' + it.id + '">' + it.name + ' (' + it.sku + ')</option>';
        }
        return html;
    }

    function updateVisibility() {
        var rows = itemsBody.querySelectorAll('tr');
        noItemsMsg.style.display = rows.length > 0 ? 'none' : '';
    }

    function addRow() {
        rowCounter++;
        var tr = document.createElement('tr');
        tr.id = 'itemRow_' + rowCounter;
        tr.innerHTML =
            '<td>' +
                '<select name="item_ids[]" class="form-select" required>' + buildItemOptions() + '</select>' +
            '</td>' +
            '<td>' +
                '<input type="number" name="quantities[]" class="form-input" step="0.001" min="0.001" required placeholder="0.000" style="direction:ltr;text-align:left;">' +
            '</td>' +
            '<td style="text-align:center;">' +
                '<button type="button" class="btn btn-sm" style="background:#FEE2E2;color:#DC2626;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;" onclick="removeRow(\'' + tr.id + '\')">' +
                    '<i data-lucide="trash-2" style="width:14px;height:14px;vertical-align:middle;"></i>' +
                '</button>' +
            '</td>';

        itemsBody.appendChild(tr);
        updateVisibility();

        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }

    window.removeRow = function(rowId) {
        var row = document.getElementById(rowId);
        if (row) {
            row.remove();
            updateVisibility();
        }
    };

    addItemBtn.addEventListener('click', addRow);

    // Add one row by default
    addRow();
});
</script>
<?php $__template->endSection(); ?>
