<?php include("../Header/Session.php"); ?>
<?php include("../Header/Connection.php"); ?>

<!DOCTYPE html>
<html lang="en">
<?php include ("../Header/head.php"); ?>
<body class="skin-default fixed-layout">

<div id="main-wrapper">
<?php include ("../Header/header.php"); ?>
<?php include ("../Header/left_menu.php"); ?>
<?php include ("../Header/right_sidebar.php"); ?>

<div class="page-wrapper">
<div class="container-fluid">
<br><br>

<style>
.gold-info-card {
    border: 1px solid rgba(212,175,55,0.45);
    border-left: 5px solid #d4af37;
    border-radius: 8px;
    background: rgba(212,175,55,0.10);
    padding: 16px;
    min-height: 120px;
}

.gold-info-card h5 {
    color: #000000;
    font-weight: 700;
    margin-bottom: 12px;
}

.gold-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.gold-info-item {
    background: #ffffff;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.gold-info-label {
    color: #666666;
    display: block;
    font-size: 12px;
}

.gold-info-value {
    color: #000000;
    font-weight: 700;
}

.item-code-feedback {
    display: block;
    font-size: 12px;
    margin-top: 6px;
}

.item-code-feedback.is-available {
    color: #1e7e34;
}

.item-code-feedback.is-duplicate {
    color: #dc3545;
}
</style>

<div class="row">
<div class="col-lg-12">
<div class="card">
    <div class="card-body">
        <form method="post" action="../Controller/Database_sql.php" enctype="multipart/form-data" id="gold_sales_form">
            <div class="form-body">
                <h3 class="card-title">Add Gold Sales</h3>
                <hr>
                <div class="row p-t-20">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Type Of Gold</label>
                            <select name="emas_ref_code" id="emas_ref_code" class="form-control" required>
                                <option value="">Select Type Of Gold</option>
                                <?php
                                $q_emas = "SELECT *
                                           FROM emas_setting
                                           WHERE status='1'
                                           ORDER BY emas_name ASC";
                                $result_emas = $mysqli->query($q_emas);
                                if ($result_emas && $result_emas->num_rows > 0)
                                {
                                    while($row_emas = $result_emas->fetch_assoc())
                                    {
                                        $emas_ref_code = $row_emas['emas_ref_code'];
                                        $emas_name = $row_emas['emas_name'];
                                        $emas_price = $row_emas['emas_price'];
                                        $emas_sale_profit_pergram = $row_emas['emas_sale_profit_pergram'];
                                        $emas_upah_simpan = $row_emas['emas_upah_simpan'];
                                        $emas_buy_back_percent = $row_emas['emas_buy_back_percent'];
                                        $emas_remark = $row_emas['emas_remark'];
                                ?>
                                <option
                                    value="<?php echo htmlspecialchars($emas_ref_code, ENT_QUOTES); ?>"
                                    data-name="<?php echo htmlspecialchars($emas_name, ENT_QUOTES); ?>"
                                    data-price="<?php echo htmlspecialchars($emas_price, ENT_QUOTES); ?>"
                                    data-profit="<?php echo htmlspecialchars($emas_sale_profit_pergram, ENT_QUOTES); ?>"
                                    data-upah="<?php echo htmlspecialchars($emas_upah_simpan, ENT_QUOTES); ?>"
                                    data-buyback="<?php echo htmlspecialchars($emas_buy_back_percent, ENT_QUOTES); ?>"
                                    data-remark="<?php echo htmlspecialchars($emas_remark, ENT_QUOTES); ?>">
                                    <?php echo htmlspecialchars($emas_name, ENT_QUOTES); ?>
                                </option>
                                <?php
                                    }
                                }
                                ?>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="gold-info-card" id="gold_info_card">
                            <h5>Gold Information</h5>
                            <p>Please select type of gold to view details.</p>
                        </div>
                    </div>

                    <div style="margin-top:10px;" class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Item Code</label>
                            <input type="text" maxlength="100" class="form-control" name="item_code" id="item_code" required autocomplete="off">
                            <span id="item_code_feedback" class="item-code-feedback"></span>
                        </div>
                    </div>

                    <div style="margin-top:10px;" class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Gold Weight (gram)</label>
                            <input type="number" step="0.01" min="0.01" class="form-control" name="gold_weight" required>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Customer Full Name</label>
                            <input type="text" maxlength="150" class="form-control" name="customer_full_name" required>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Customer Email</label>
                            <input type="email" maxlength="150" class="form-control" name="customer_email">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Customer Phone Number</label>
                            <input type="text" maxlength="50" class="form-control" name="customer_phone_number" required>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Attachment (PDF/Image, max 3 files, below 10MB each)</label>
                            <input type="file" class="form-control" name="gold_sale_attachments[]" accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,image/*,application/pdf" multiple>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Customer Address</label>
                            <textarea rows="3" class="form-control" name="customer_address" required></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Remark</label>
                            <textarea rows="3" class="form-control" name="sale_remark"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <button name="Add_Gold_Sales" id="gold_sale_submit_btn" class="btn btn-success"><i class="fa fa-check"></i> Submit</button>
            </div>
        </form>
    </div>
</div>
</div>
</div>

</div>
</div>

<?php include ("../Footer/footer.php"); ?>
</div>

<?php include ("../Header/all_jquery.php"); ?>
<script>
document.getElementById('emas_ref_code').addEventListener('change', function () {
    var option = this.options[this.selectedIndex];
    var card = document.getElementById('gold_info_card');

    if (!this.value) {
        card.innerHTML = '<h5>Gold Information</h5><p>Please select type of gold to view details.</p>';
        return;
    }

    card.innerHTML =
        '<h5>' + option.getAttribute('data-name') + '</h5>' +
        '<div style="margin-bottom:10px;"class="gold-info-grid">' +
            '<div class="gold-info-item"><span class="gold-info-label">Price / Gram</span><span class="gold-info-value">RM ' + option.getAttribute('data-price') + '</span></div>' +
            '<div class="gold-info-item"><span class="gold-info-label">Profit / Gram</span><span class="gold-info-value">RM ' + option.getAttribute('data-profit') + '</span></div>' +
            '<div class="gold-info-item"><span class="gold-info-label">Upah Simpan</span><span class="gold-info-value">' + option.getAttribute('data-upah') + '%</span></div>' +
            '<div class="gold-info-item"><span class="gold-info-label">Buy Back</span><span class="gold-info-value">' + option.getAttribute('data-buyback') + '%</span></div>' +
        '</div>' +
        '<p style="margin-top:12px;margin-bottom:0;">' + (option.getAttribute('data-remark') || '-') + '</p>';
});

var itemCodeInput = document.getElementById('item_code');
var itemCodeFeedback = document.getElementById('item_code_feedback');
var submitButton = document.getElementById('gold_sale_submit_btn');
var itemCodeTimer = null;

function setItemCodeStatus(message, statusClass, isDuplicate) {
    itemCodeFeedback.textContent = message;
    itemCodeFeedback.className = 'item-code-feedback ' + statusClass;
    itemCodeInput.setCustomValidity(isDuplicate ? 'Item Code already exists.' : '');
    submitButton.disabled = isDuplicate;
}

itemCodeInput.addEventListener('input', function () {
    var itemCode = itemCodeInput.value.trim();
    clearTimeout(itemCodeTimer);

    if (itemCode === '') {
        setItemCodeStatus('', '', false);
        return;
    }

    setItemCodeStatus('Checking item code...', '', false);
    itemCodeTimer = setTimeout(function () {
        fetch('../Controller/check_gold_sale_item_code.php?item_code=' + encodeURIComponent(itemCode), {
            credentials: 'same-origin'
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            if (data.exists) {
                setItemCodeStatus('This Item Code already exists. Please key in another Item Code.', 'is-duplicate', true);
            } else {
                setItemCodeStatus('Item Code is available.', 'is-available', false);
            }
        })
        .catch(function () {
            setItemCodeStatus('Unable to check Item Code right now.', 'is-duplicate', true);
        });
    }, 400);
});

document.getElementById('gold_sales_form').addEventListener('submit', function (event) {
    if (!itemCodeInput.checkValidity()) {
        event.preventDefault();
        itemCodeInput.reportValidity();
    }
});
</script>

</body>
</html>
