<?php require_once __DIR__ . '/../../templates/header.php'; ?>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Danh sách phiếu chuyển kho</h1>
        <a href="create.php" class="btn btn-primary btn-sm"><i class="fas fa-plus fa-sm"></i> Tạo phiếu chuyển</a>
    </div>

    <div class="card shadow mb-4">
         <div class="card-header py-3">
            <form id="filter-form" class="row g-3 align-items-center">
                <div class="col-md-3"><input type="text" class="form-control" id="search_term" placeholder="Nhập mã phiếu..."></div>
                <div class="col-md-2">
                    <select id="status_filter" class="form-control">
                        <option value="">Tất cả trạng thái</option>
                        <option value="0">Đang chuyển</option>
                        <option value="1">Hoàn thành</option>
                    </select>
                </div>
                <div class="col-md-2"><input type="text" id="start_date" class="form-control" placeholder="Từ ngày"></div>
                <div class="col-md-2"><input type="text" id="end_date" class="form-control" placeholder="Đến ngày"></div>
                <div class="col-md-1"><button type="submit" class="btn btn-primary w-100">Lọc</button></div>
            </form>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="transfers-table" class="table table-bordered" width="100%">
                    <thead>
                        <tr>
                            <th>Mã phiếu</th><th>Kho xuất</th><th>Kho nhập</th><th>Số lượng</th>
                            <th>Tình trạng</th><th>Ngày chuyển</th><th>Người chuyển</th>
                            <th>Ngày nhận</th><th>Người nhận</th><th>Hành động</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr><th colspan="10" id="summary-footer"></th></tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<?php require_once __DIR__ . '/../../templates/footer.php'; ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
    $('#start_date, #end_date').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight: true });
    
    var current_store_id = <?php echo $_SESSION['store_id'] ?? 1; ?>;

    var table = $('#transfers-table').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '/quanlybanhang/ajax/transfers_ajax.php', type: 'POST',
            data: function(d) {
                d.action = 'get_transfers';
                d.search_term = $('#search_term').val();
                d.status = $('#status_filter').val();
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
            }
        },
        columns: [
            { data: 'transfer_code' }, { data: 'from_store_name' }, { data: 'to_store_name' },
            { data: 'total_quantity' },
            { data: 'transfer_status', render: function(data) {
                if (data == '1') return '<span class="badge badge-success">Hoàn thành</span>';
                return '<span class="badge badge-warning">Đang chuyển</span>';
            }},
            { data: 'transfer_date' }, { data: 'creator_name' },
            { data: 'received_date' }, { data: 'confirmer_name' },
            { data: 'id', orderable: false, render: function(data, type, row) {
                let buttons = `<a href="print.php?id=${data}" target="_blank" class="btn btn-info btn-sm" title="In phiếu"><i class="fas fa-print"></i></a> `;
                if (row.transfer_status == '0' && row.to_store == current_store_id) {
                    buttons += `<button class="btn btn-success btn-sm btn-confirm" data-id="${data}" title="Xác nhận đã nhận hàng"><i class="fas fa-check-circle"></i></button>`;
                }
                return buttons;
            }}
        ],
        language: { "url": "/quanlybanhang/assets/libs/datatables/vietnamese.json" },
        drawCallback: function (settings) {
            var summary = settings.json.summary;
            $('#summary-footer').html(`Tổng số phiếu: <strong>${settings.json.recordsFiltered}</strong> | Đang chuyển: <strong class="text-warning">${summary.pending}</strong> | Hoàn thành: <strong class="text-success">${summary.completed}</strong>`);
        }
    });

    $('#filter-form').on('submit', function(e) { e.preventDefault(); table.ajax.reload(); });

    $('#transfers-table').on('click', '.btn-confirm', function() {
        var id = $(this).data('id');
        if (confirm('Bạn có chắc chắn muốn xác nhận đã nhận đủ hàng cho phiếu này? Thao tác này sẽ cập nhật tồn kho và không thể hoàn tác.')) {
            $.post('/quanlybanhang/ajax/transfers_ajax.php', { action: 'confirm_transfer', id: id }, function(response) {
                alert(response.message);
                if(response.status === 'success') table.ajax.reload();
            }, 'json');
        }
    });
});
</script>