<?php
require_once __DIR__ . '/../../templates/header.php';
?>

<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800">Quản lý Đơn hàng</h1>
    <div class="row mb-4">
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2"><div class="card-body"><div class="row no-gutters align-items-center"><div class="col mr-2"><div class="text-xs font-weight-bold text-success text-uppercase mb-1">Tổng số hóa đơn</div><div class="h4 mb-0 font-weight-bold text-gray-800" id="summary-card-orders">0</div></div><div class="col-auto"><i class="fas fa-file-invoice-dollar fa-2x text-gray-300"></i></div></div></div></div>
        </div>
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2"><div class="card-body"><div class="row no-gutters align-items-center"><div class="col mr-2"><div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Tổng tiền</div><div class="h4 mb-0 font-weight-bold text-gray-800" id="summary-card-amount">0 ₫</div></div><div class="col-auto"><i class="fas fa-coins fa-2x text-gray-300"></i></div></div></div></div>
        </div>
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2"><div class="card-body"><div class="row no-gutters align-items-center"><div class="col mr-2"><div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Tổng nợ</div><div class="h4 mb-0 font-weight-bold text-gray-800" id="summary-card-debt">0 ₫</div></div><div class="col-auto"><i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i></div></div></div></div>
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-filter mr-2"></i>Bộ lọc và Tìm kiếm</h6>
        </div>
        <div class="card-body">
            <form id="filter-form">
                <div class="row align-items-end">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Chế độ xem</label>
                        <select class="form-select form-control" id="filterView">
                            <option value="all" selected>Tất cả đơn hàng</option>
                            <option value="debt">Đơn hàng còn nợ</option>
                            <option value="deleted">Đơn hàng đã xóa</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Mã đơn hàng</label>
                        <input type="text" class="form-control" id="code" placeholder="Nhập mã đơn hàng...">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label class="form-label">Từ ngày</label>
                        <input type="date" class="form-control" id="from_date">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label class="form-label">Đến ngày</label>
                        <input type="date" class="form-control" id="to_date">
                    </div>
                    <div class="col-md-2 mb-3">
                        <button type="submit" class="btn btn-primary w-100"><i class="fas fa-search fa-sm"></i> Lọc</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Danh sách đơn hàng</h6>
            <a href="/quanlybanhang/modules/pos/pos.php" class="btn btn-success btn-sm">
                <i class="fas fa-plus fa-sm"></i> Tạo đơn hàng mới
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="ordersTable" width="100%" cellspacing="0">
                    <thead class="table-light">
                        <tr>
                            <th></th>
                            <th>Mã ĐH</th>
                            <th>Ngày bán</th>
                            <th>Khách hàng</th>
                            <th>Thu ngân</th>
                            <th class="text-end">Tổng tiền</th>
                            <th class="text-end">Còn nợ</th>
                            <th class="text-center">Trạng thái</th>
                            <th class="text-center">Hành động</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<?php require_once __DIR__ . '/../../templates/footer.php'; ?>

<script>
$(document).ready(function() {
   // === BẮT ĐẦU: Code mặc định lọc ngày theo tháng hiện tại ===
    const today = new Date();
    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
    // Lấy ngày cuối cùng của tháng
    const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); 

    const formatDate = (date) => {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = ('0' + (d.getMonth() + 1)).slice(-2);
        const day = ('0' + d.getDate()).slice(-2);
        return `${year}-${month}-${day}`;
    };

    // Gán giá trị ngày đầu tháng và cuối tháng
    $('#from_date').val(formatDate(firstDayOfMonth));
    $('#to_date').val(formatDate(lastDayOfMonth));
    // === KẾT THÚC ===

    function formatNumber(num) { return (parseFloat(num) || 0).toLocaleString('vi-VN'); }
    
    var table = $('#ordersTable').DataTable({
        "processing": true,
        "serverSide": true,
        "searching": false,
        "ajax": {
            "url": "/quanlybanhang/ajax/orders_ajax.php",
            "type": "POST",
            "data": function(d) {
                d.action = 'get_orders_list';
                d.view_mode = $('#filterView').val();
                d.code = $('#code').val();
                d.from = $('#from_date').val();
                d.to = $('#to_date').val();
            }
        },
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "output_code", "render": (data, type, row) => `<a href="detail.php?id=${row.id}" class="fw-bold">${data}</a>` },
            { "data": "sell_date" },
            { "data": "customer_name" },
            { "data": "username" },
            { "data": "total_money", "className": "text-end", "render": data => formatNumber(data) },
            { "data": "lack", "className": "text-end text-danger", "render": data => formatNumber(data) },
            { "data": "order_status", "className": "text-center" },
            { "data": "actions", "orderable": false, "className": "text-center" }
        ],
        "language": { "url": "/quanlybanhang/assets/libs/datatables/vietnamese.json" },
        "order": [[2, "desc"]],
        "dom": "t<'d-flex justify-content-between align-items-center mt-3'<'#summary-info.py-2 fw-bold'>p>",
        "drawCallback": function(settings) {
            var json = this.api().ajax.json();
            if (json && json.summary) {
                let s = json.summary;
                $('#summary-card-orders').text(formatNumber(s.total_orders));
                $('#summary-card-amount').text(formatNumber(s.total_amount) + ' ₫');
                $('#summary-card-debt').text(formatNumber(s.total_debt) + ' ₫');
                let summaryText = `
                    <span class="me-4">Tổng số hóa đơn: <span class="text-dark">${formatNumber(s.total_orders)}</span></span>
                    <span class="me-4">Tổng tiền: <span class="text-dark">${formatNumber(s.total_amount)}</span></span>
                    <span>Tổng nợ: <span class="text-danger">${formatNumber(s.total_debt)}</span></span>`;
                $('#summary-info').html(summaryText);
            }
        }
    });
// Yêu cầu bảng tải lại dữ liệu với ngày mặc định
    table.ajax.reload();

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

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

    function formatDetailsTable(data) {
    if (!data || data.length === 0) {
        return '<div class="p-3 text-center text-muted">Không có chi tiết sản phẩm cho đơn hàng này.</div>';
    }
    let table = '<table class="table table-sm table-bordered" style="width: 90%; margin: 10px auto;">' +
                    '<thead class="table-light"><tr><th>STT</th><th>Mã sản phẩm</th><th>Tên sản phẩm</th><th class="text-end">Số lượng</th><th class="text-end">Đơn giá</th><th class="text-end">Thành tiền</th></tr></thead>' +
                    '<tbody>';
    data.forEach((item, index) => {
        let lineTotal = (item.quantity || 0) * (item.price || 0);
        let productLink = `/quanlybanhang/modules/products/add.php?id=${item.id}`;
        table += '<tr>' +
                    '<td>' + (index + 1) + '</td>' +
                    '<td><a href="' + productLink + '" target="_blank">' + (item.code || 'N/A') + '</a></td>' +
                    '<td>' + (item.name || 'N/A') + '</td>' +
                    '<td class="text-end">' + formatNumber(item.quantity) + '</td>' +
                    '<td class="text-end">' + formatNumber(item.price) + '</td>' +
                    '<td class="text-end fw-bold">' + formatNumber(lineTotal) + '</td>' +
                '</tr>';
    });
    table += '</tbody></table>';
    return table;
}
    $('#ordersTable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
 
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child('<div class="p-3 text-center">Đang tải chi tiết...</div>').show();
            tr.addClass('shown');
            
            $.ajax({
                url: '/quanlybanhang/ajax/orders_ajax.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    action: 'get_order_details',
                    order_id: row.data().id
                },
                success: function(response) {
                    if (response.status === 'success') {
                        row.child(formatDetailsTable(response.data)).show();
                    } else {
                        row.child('<div class="p-3 text-center text-danger">Lỗi: ' + response.message + '</div>').show();
                    }
                },
                error: function() {
                    row.child('<div class="p-3 text-center text-danger">Lỗi kết nối để lấy chi tiết đơn hàng.</div>').show();
                }
            });
        }
    });

    $('#ordersTable tbody').on('click', '.btn-delete-order', function(e) {
        e.preventDefault();
    var orderId = $(this).data('id');
    
    if (confirm('Bạn có chắc chắn muốn HỦY đơn hàng này? Hành động này sẽ hoàn lại số lượng sản phẩm vào tồn kho.')) {
        $.ajax({
            url: '/quanlybanhang/ajax/orders_ajax.php',
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'delete_order',
                order_id: orderId
            },
            success: function(response) {
                alert(response.message);
                if (response.status === 'success') {
                    table.ajax.reload(null, false); // Tải lại bảng mà không quay về trang đầu
                }
            },
            error: function() {
                alert('Đã xảy ra lỗi kết nối. Vui lòng thử lại.');
            }
        });
    }
});
    });

</script>

<style>
    td.details-control {
        background: url('/quanlybanhang/assets/img/details_open.png') no-repeat center center;
        cursor: pointer;
    }
    tr.shown td.details-control {
        background: url('/quanlybanhang/assets/img/details_close.png') no-repeat center center;
    }
</style>