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

<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">Quản lý Kho hàng</h1>
        <ul class="nav nav-tabs mb-3">
    <li class="nav-item">
        <a class="nav-link active" href="/quanlybanhang/modules/users/list.php">
            <i class="fas fa-user fa-sm mr-1"></i> Nhân viên
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/quanlybanhang/modules/users/permissions.php">
            <i class="fas fa-user-shield fa-sm mr-1"></i> Phân quyền
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/quanlybanhang/modules/settings/print_config.php">
            <i class="fas fa-print fa-sm mr-1"></i> Cài đặt trang in
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/quanlybanhang/modules/stores/list.php">
            <i class="fas fa-print fa-sm mr-1"></i> Quản lý kho
        </a>
    </li>
</ul>
        <button class="btn btn-primary btn-sm" id="btn-add-store">
            <i class="fas fa-plus fa-sm"></i> Thêm Kho
        </button>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Danh sách kho</h6>
        </div>
        <div class="card-body">
            <table class="table table-bordered" id="stores-table">
                <thead>
                    <tr>
                        <th style="width: 50px;">#</th>
                        <th>Tên Kho</th>
                        <th>Ngày tạo</th>
                        <th style="width: 100px;">Hành động</th>
                    </tr>
                </thead>
                <tbody>
                    </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="store-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="store-form">
                <input type="hidden" name="action" value="save_store">
                <input type="hidden" name="id" id="store-id">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-title">Thêm Kho</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="store_name">Tên Kho</label>
                        <input type="text" class="form-control" name="store_name" id="store_name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Bỏ qua</button>
                    <button type="submit" class="btn btn-primary">Lưu</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

<script>
$(document).ready(function() {
    const AJAX_URL = '/quanlybanhang/ajax/stores_ajax.php';

    function loadStores() {
        $.getJSON(AJAX_URL, { action: 'get_stores' }, function(response) {
            if (response.status === 'success') {
                const tbody = $('#stores-table tbody');
                tbody.empty();
                response.data.forEach((store, index) => {
                    tbody.append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>${store.store_name}</td>
                            <td>${new Date(store.created).toLocaleString('vi-VN')}</td>
                            <td>
                                <button class="btn btn-warning btn-sm btn-edit" data-id="${store.id}" data-name="${store.store_name}"><i class="fas fa-edit"></i></button>
                                <button class="btn btn-danger btn-sm btn-delete" data-id="${store.id}"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                    `);
                });
            }
        });
    }

    $('#btn-add-store').on('click', function() {
        $('#store-form')[0].reset();
        $('#store-id').val('');
        $('#modal-title').text('Thêm Kho');
        $('#store-modal').modal('show');
    });

    $('#stores-table').on('click', '.btn-edit', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        $('#store-id').val(id);
        $('#store_name').val(name);
        $('#modal-title').text('Sửa Kho');
        $('#store-modal').modal('show');
    });

    $('#store-form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: AJAX_URL, type: 'POST', data: $(this).serialize(), dataType: 'json',
            success: function(response) {
                alert(response.message);
                if (response.status === 'success') {
                    $('#store-modal').modal('hide');
                    loadStores();
                }
            }
        });
    });

    $('#stores-table').on('click', '.btn-delete', function() {
        const id = $(this).data('id');
        if (confirm('Bạn có chắc muốn xóa kho này? Thao tác này có thể ảnh hưởng đến các dữ liệu liên quan.')) {
            $.post(AJAX_URL, { action: 'delete_store', id: id }, function(response) {
                alert(response.message);
                if (response.status === 'success') {
                    loadStores();
                }
            }, 'json');
        }
    });

    loadStores(); // Tải danh sách kho khi trang được mở
});
</script>