<?php
session_start();
if(!isset($_SESSION['username'])) {
    header("Location: ../login.php");
    exit();
}

include('../includes/db.php');

$success_message = "";
$error_message = "";
$shift_id = isset($_GET['shift_id']) ? $_GET['shift_id'] : (isset($_POST['shift_id']) ? $_POST['shift_id'] : 0);

// Get shift details
$shift_sql = "SELECT * FROM shift_entries WHERE id='$shift_id' AND status='OPEN'";
$shift_result = mysqli_query($conn, $shift_sql);
$shift = mysqli_fetch_assoc($shift_result);

if(!$shift) {
    header("Location: shift_open.php");
    exit();
}

// Get all nozzles with their details
$nozzles_sql = "SELECT n.*, t.tank_name, f.name as fuel_name 
                FROM nozzles n
                LEFT JOIN tanks t ON n.tank_id = t.id
                LEFT JOIN fuel_types f ON t.fuel_type_id = f.id
                ORDER BY n.id";
$nozzles_result = mysqli_query($conn, $nozzles_sql);

// Process readings
if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['save_readings'])) {
    $readings = $_POST['readings'];
    $opening_readings = $_POST['opening_readings'];
    $date_time = date('Y-m-d H:i:s');
    $all_valid = true;
    
    foreach($readings as $nozzle_id => $closing_reading) {
        if($closing_reading === '') {
            $error_message = "Please fill all closing readings!";
            $all_valid = false;
            break;
        }
        if($opening_readings[$nozzle_id] === '') {
            $error_message = "Please fill all opening readings!";
            $all_valid = false;
            break;
        }
    }
    
    if($all_valid) {
        mysqli_begin_transaction($conn);
        
        try {
            foreach($readings as $nozzle_id => $closing_reading) {
                $closing_reading = floatval($closing_reading);
                $opening_reading = floatval($opening_readings[$nozzle_id]);
                
                if($closing_reading < $opening_reading) {
                    throw new Exception("Closing reading ($closing_reading) cannot be less than opening reading ($opening_reading) for Nozzle: $nozzle_id");
                }
                
                $sale_liters = $closing_reading - $opening_reading;
                
                // Insert reading
                $insert_sql = "INSERT INTO nozzle_readings (shift_id, nozzle_id, opening_reading, closing_reading, sale_liters, date_time) 
                              VALUES ('$shift_id', '$nozzle_id', '$opening_reading', '$closing_reading', '$sale_liters', '$date_time')";
                mysqli_query($conn, $insert_sql);
                
                // Update nozzle meter reading
                $update_nozzle = "UPDATE nozzles SET meter_reading='$closing_reading' WHERE id='$nozzle_id'";
                mysqli_query($conn, $update_nozzle);
            }
            
            mysqli_commit($conn);
            $success_message = "All nozzle readings saved successfully!";
        } catch (Exception $e) {
            mysqli_rollback($conn);
            $error_message = $e->getMessage();
        }
    }
}

// Get existing readings for this shift
$existing_sql = "SELECT * FROM nozzle_readings WHERE shift_id='$shift_id'";
$existing_result = mysqli_query($conn, $existing_sql);
$has_readings = mysqli_num_rows($existing_result) > 0;

if($has_readings && !isset($_POST['save_readings'])) {
    header("Location: shift_close.php?shift_id=$shift_id");
    exit();
}
?>

<?php include('../includes/log.php'); ?>
<?php include('../includes/sd.php'); ?>

<div class="nozzle-readings-container">
    <!-- Page Header -->
    <div class="page-header">
        <div class="header-left">
            <h2><i class="fas fa-gas-pump"></i> Nozzle Readings</h2>
            <p><?php echo $shift['shift_name']; ?> Shift - Record closing readings for all nozzles</p>
        </div>
        <div class="header-right">
            <div class="stats-badge">
                <i class="fas fa-chart-line"></i>
                <span>Shift: <?php echo $shift['shift_name']; ?></span>
            </div>
        </div>
    </div>

    <!-- Alerts -->
    <?php if($success_message): ?>
        <div class="alert-custom alert-success">
            <i class="fas fa-check-circle"></i> <?php echo $success_message; ?>
            <a href="shift_close.php?shift_id=<?php echo $shift_id; ?>" class="btn-link">Proceed to Close Shift &raquo;</a>
            <button class="close-alert" onclick="this.parentElement.remove();">&times;</button>
        </div>
    <?php endif; ?>
    
    <?php if($error_message): ?>
        <div class="alert-custom alert-danger">
            <i class="fas fa-exclamation-triangle"></i> <?php echo $error_message; ?>
            <button class="close-alert" onclick="this.parentElement.remove();">&times;</button>
        </div>
    <?php endif; ?>

    <!-- Info Card -->
    <div class="info-card">
        <div class="info-icon">
            <i class="fas fa-info-circle"></i>
        </div>
        <div class="info-content">
            <strong>Opening Reading:</strong> Last shift's closing reading (editable if needed)
            <br>
            <strong>Formula:</strong> Sale (Liters) = Closing Reading - Opening Reading
        </div>
    </div>

    <!-- Readings Form -->
    <div class="form-card">
        <div class="form-card-header">
            <i class="fas fa-edit"></i>
            <h4>Enter Nozzle Readings</h4>
        </div>
        <div class="form-card-body">
            <form method="POST" action="" id="readingsForm">
                <input type="hidden" name="shift_id" value="<?php echo $shift_id; ?>">
                <div class="table-responsive">
                    <table class="readings-table" id="readingsTable">
                        <thead>
                            <tr>
                                <th width="12%">Nozzle Name</th>
                                <th width="18%">Tank / Fuel</th>
                                <th width="15%">Opening Reading (L)</th>
                                <th width="15%">Closing Reading (L)</th>
                                <th width="15%">Sale (L)</th>
                                <th width="25%">Status / Info</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            mysqli_data_seek($nozzles_result, 0);
                            if(mysqli_num_rows($nozzles_result) > 0): 
                                while($nozzle = mysqli_fetch_assoc($nozzles_result)):
                                    // ============================================
                                    // GET OPENING READING FROM LAST SHIFT'S CLOSING
                                    // ============================================
                                    
                                    // First, get the last reading from ANY shift (most recent)
                                    $last_reading_sql = "SELECT closing_reading, shift_id, date_time 
                                                        FROM nozzle_readings 
                                                        WHERE nozzle_id='{$nozzle['id']}' 
                                                        ORDER BY id DESC LIMIT 1";
                                    $last_reading_result = mysqli_query($conn, $last_reading_sql);
                                    
                                    if(mysqli_num_rows($last_reading_result) > 0) {
                                        $last = mysqli_fetch_assoc($last_reading_result);
                                        $opening = $last['closing_reading'];
                                        $last_shift_info = "Last closing: " . number_format($opening, 2) . " L";
                                        
                                        // Check if this was from a closed shift
                                        $shift_check_sql = "SELECT status FROM shift_entries WHERE id='{$last['shift_id']}'";
                                        $shift_check = mysqli_query($conn, $shift_check_sql);
                                        if(mysqli_num_rows($shift_check) > 0) {
                                            $shift_data = mysqli_fetch_assoc($shift_check);
                                            if($shift_data['status'] == 'CLOSED') {
                                                $last_shift_info .= " (from previous closed shift)";
                                            } else {
                                                $last_shift_info .= " (from current/open shift)";
                                            }
                                        }
                                    } else {
                                        // No previous readings found, use nozzle's current meter reading
                                        $opening = $nozzle['meter_reading'];
                                        $last_shift_info = "Using current meter reading: " . number_format($opening, 2) . " L";
                                    }
                                    
                                    // Also check if there's a reading for the current shift already
                                    $current_shift_reading_sql = "SELECT opening_reading, closing_reading 
                                                                FROM nozzle_readings 
                                                                WHERE nozzle_id='{$nozzle['id']}' AND shift_id='$shift_id'";
                                    $current_shift_reading_result = mysqli_query($conn, $current_shift_reading_sql);
                                    $has_current_reading = mysqli_num_rows($current_shift_reading_result) > 0;
                                    
                                    if($has_current_reading) {
                                        $current = mysqli_fetch_assoc($current_shift_reading_result);
                                        $opening = $current['opening_reading'];
                                        $last_shift_info = "Opening from current shift: " . number_format($opening, 2) . " L";
                                    }
                            ?>
                                <tr>
                                    <td data-label="Nozzle">
                                        <div class="nozzle-name">
                                            <i class="fas fa-oil-can"></i>
                                            <strong><?php echo htmlspecialchars($nozzle['nozzle_name']); ?></strong>
                                        </div>
                                    </div>
                                    <td>
                                        <div class="tank-info">
                                            <i class="fas fa-warehouse"></i>
                                            <?php echo htmlspecialchars($nozzle['tank_name']); ?>
                                            <br>
                                            <small class="fuel-type"><?php echo htmlspecialchars($nozzle['fuel_name']); ?></small>
                                        </div>
                                    </div>
                                    <td>
                                        <div class="opening-input">
                                            <input type="number" step="0.01" name="opening_readings[<?php echo $nozzle['id']; ?>]" 
                                                   class="form-control-modern opening-reading" 
                                                   value="<?php echo number_format($opening, 2); ?>"
                                                   onchange="calculateSale(this)" required>
                                            <small class="input-hint"><?php echo $last_shift_info; ?></small>
                                        </div>
                                    </div>
                                    <td>
                                        <div class="closing-input">
                                            <input type="number" step="0.01" name="readings[<?php echo $nozzle['id']; ?>]" 
                                                   class="form-control-modern closing-reading" 
                                                   placeholder="Enter closing reading"
                                                   value="<?php echo $has_current_reading ? number_format($current['closing_reading'], 2) : ''; ?>"
                                                   onchange="calculateSale(this)" required>
                                            <small class="input-hint">Enter current meter reading</small>
                                        </div>
                                    </div>
                                    <td>
                                        <div class="sale-result" id="sale_<?php echo $nozzle['id']; ?>">
                                            <?php 
                                            if($has_current_reading) {
                                                $sale = $current['closing_reading'] - $current['opening_reading'];
                                                if($sale < 0) {
                                                    echo '<span class="sale-negative"><i class="fas fa-exclamation-triangle"></i> ' . number_format($sale, 2) . ' L</span>';
                                                    echo '<br><small class="text-danger">Invalid: Closing < Opening</small>';
                                                } elseif($sale == 0) {
                                                    echo '<span class="sale-zero"><i class="fas fa-minus-circle"></i> ' . number_format($sale, 2) . ' L</span>';
                                                    echo '<br><small>No sale recorded</small>';
                                                } else {
                                                    echo '<span class="sale-positive"><i class="fas fa-check-circle"></i> ' . number_format($sale, 2) . ' L</span>';
                                                    echo '<br><small class="text-success">Sale calculated</small>';
                                                }
                                            } else {
                                                echo '<span class="sale-placeholder">—</span>';
                                            }
                                            ?>
                                        </div>
                                    </div>
                                    <td>
                                        <div class="status-badge" id="status_<?php echo $nozzle['id']; ?>">
                                            <?php 
                                            if($has_current_reading) {
                                                $sale = $current['closing_reading'] - $current['opening_reading'];
                                                if($sale < 0) {
                                                    echo '<i class="fas fa-times-circle"></i> Invalid';
                                                    echo '<br><small class="text-danger">Closing < Opening</small>';
                                                } elseif($sale == 0) {
                                                    echo '<i class="fas fa-check-circle"></i> Zero Sale';
                                                    echo '<br><small>No fuel sold</small>';
                                                } else {
                                                    echo '<i class="fas fa-check-circle"></i> Valid';
                                                    echo '<br><small>' . number_format($sale, 2) . ' L sold</small>';
                                                }
                                            } else {
                                                echo '<i class="fas fa-clock"></i> Waiting';
                                                echo '<br><small>Enter closing reading</small>';
                                            }
                                            ?>
                                        </div>
                                    </div>
                                </tr>
                            <?php 
                                endwhile;
                            else: 
                            ?>
                                <tr>
                                    <td colspan="6" class="empty-state">
                                        <i class="fas fa-gas-pump"></i>
                                        <p>No nozzles found</p>
                                        <small>Please add nozzles before recording readings</small>
                                    </div>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
                
                <?php if(mysqli_num_rows($nozzles_result) > 0): ?>
                    <div class="form-actions">
                        <button type="submit" name="save_readings" class="btn-submit">
                            <i class="fas fa-save"></i> Save All Readings
                        </button>
                        <button type="button" class="btn-reset-form" onclick="resetForm()">
                            <i class="fas fa-undo-alt"></i> Reset Closing Readings
                        </button>
                    </div>
                <?php endif; ?>
            </form>
        </div>
    </div>
</div>

<style>
/* Nozzle Readings Page Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Quicksand:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-header h2,
.form-card-header h4 {
    font-family: 'Quicksand', sans-serif;
}

.nozzle-readings-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, #A04657 0%, #6b2a36 100%);
    border-radius: 24px;
    padding: 28px 32px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    box-shadow: 0 4px 20px rgba(160,70,87,0.25);
}

.page-header h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
}

.page-header p {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
}

.stats-badge {
    background: rgba(255,255,255,0.2);
    padding: 8px 18px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
}

/* Info Card */
.info-card {
    background: #e3f2fd;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 4px solid #2196f3;
}

.info-icon i {
    font-size: 28px;
    color: #2196f3;
}

.info-content {
    flex: 1;
}

.info-content strong {
    color: #1565c0;
}

.info-content small {
    color: #666;
}

/* Alert Styles */
.alert-custom {
    padding: 16px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.3s ease;
    font-weight: 500;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background: #ffebee;
    color: #c62828;
    border-left: 4px solid #dc3545;
}

.alert-success .btn-link {
    background: #28a745;
    color: #fff;
    padding: 6px 15px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 12px;
    margin-left: 15px;
}

.alert-success .btn-link:hover {
    background: #1e7e34;
}

.close-alert {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.5;
}

/* Form Card */
.form-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

.form-card-header {
    background: linear-gradient(135deg, #A04657 0%, #6b2a36 100%);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.form-card-header i {
    font-size: 20px;
}

.form-card-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.form-card-body {
    padding: 24px;
}

/* Readings Table */
.readings-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.readings-table th {
    padding: 14px 12px;
    background: #f8f9fc;
    font-weight: 700;
    color: #445566;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 2px solid #e8e8e8;
}

.readings-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* Nozzle Name */
.nozzle-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nozzle-name i {
    font-size: 20px;
    color: #A04657;
}

/* Tank Info */
.tank-info {
    font-size: 13px;
}

.tank-info i {
    color: #A04657;
    margin-right: 5px;
}

.fuel-type {
    color: #999;
    font-size: 11px;
}

/* Form Controls */
.form-control-modern {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    font-size: 13px;
    transition: all 0.3s;
    background: #fafafa;
}

.form-control-modern:focus {
    border-color: #A04657;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(160,70,87,0.1);
}

.opening-reading {
    background: #fff8e1;
    border-color: #ffc107;
}

.opening-reading:focus {
    border-color: #ff9800;
}

.closing-reading {
    background: #e8f5e9;
    border-color: #28a745;
}

.closing-reading:focus {
    border-color: #28a745;
}

.input-hint {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 5px;
}

/* Sale Result */
.sale-result {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

.sale-placeholder {
    color: #999;
}

.sale-positive {
    color: #28a745;
}

.sale-zero {
    color: #ffc107;
}

.sale-negative {
    color: #dc3545;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.status-badge i {
    margin-right: 5px;
}

.status-badge.waiting {
    background: #f0f0f0;
    color: #999;
}

.status-badge.valid {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.invalid {
    background: #ffebee;
    color: #c62828;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.btn-submit {
    padding: 12px 28px;
    background: linear-gradient(135deg, #A04657, #6b2a36);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(160,70,87,0.3);
}

.btn-reset-form {
    padding: 12px 28px;
    background: #f0f0f0;
    color: #555;
    border: none;
    border-radius: 14px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-reset-form:hover {
    background: #e0e0e0;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 50px !important;
}

.empty-state i {
    font-size: 56px;
    color: #A04657;
    opacity: 0.3;
    margin-bottom: 16px;
    display: block;
}

.empty-state p {
    font-size: 15px;
    font-weight: 500;
    color: #666;
}

.text-danger {
    color: #dc3545 !important;
}

.text-success {
    color: #28a745 !important;
}

/* Responsive */
@media (max-width: 992px) {
    .nozzle-readings-container {
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    .nozzle-readings-container {
        padding: 0 12px;
    }
    
    .page-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }
    
    .page-header h2 {
        font-size: 22px;
    }
    
    .readings-table th {
        display: none;
    }
    
    .readings-table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    
    .readings-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 45%;
        text-align: left;
        font-weight: 700;
        font-size: 11px;
        color: #555;
    }
    
    .readings-table tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-submit, .btn-reset-form {
        justify-content: center;
    }
    
    .info-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #A04657;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b2a36;
}
</style>

<script>
function calculateSale(element) {
    const row = element.closest('tr');
    const openingInput = row.querySelector('.opening-reading');
    const closingInput = row.querySelector('.closing-reading');
    const saleDiv = row.querySelector('.sale-result');
    const statusDiv = row.querySelector('.status-badge');
    
    const opening = parseFloat(openingInput?.value) || 0;
    const closing = parseFloat(closingInput?.value) || 0;
    const sale = closing - opening;
    
    if(closingInput && closingInput.value !== '') {
        if(sale < 0) {
            saleDiv.innerHTML = `<span class="sale-negative"><i class="fas fa-exclamation-triangle"></i> ${sale.toFixed(2)} L</span>
                                 <br><small class="text-danger">Invalid: Closing < Opening</small>`;
            statusDiv.innerHTML = `<i class="fas fa-times-circle"></i> Invalid
                                   <br><small class="text-danger">Closing < Opening</small>`;
            statusDiv.className = 'status-badge invalid';
        } else if(sale === 0) {
            saleDiv.innerHTML = `<span class="sale-zero"><i class="fas fa-minus-circle"></i> ${sale.toFixed(2)} L</span>
                                 <br><small>No sale recorded</small>`;
            statusDiv.innerHTML = `<i class="fas fa-check-circle"></i> Zero Sale
                                   <br><small>No fuel sold</small>`;
            statusDiv.className = 'status-badge valid';
        } else {
            saleDiv.innerHTML = `<span class="sale-positive"><i class="fas fa-check-circle"></i> ${sale.toFixed(2)} L</span>
                                 <br><small class="text-success">Sale calculated</small>`;
            statusDiv.innerHTML = `<i class="fas fa-check-circle"></i> Valid
                                   <br><small>${sale.toFixed(2)} L sold</small>`;
            statusDiv.className = 'status-badge valid';
        }
    } else {
        saleDiv.innerHTML = `<span class="sale-placeholder">—</span>`;
        statusDiv.innerHTML = `<i class="fas fa-clock"></i> Waiting
                               <br><small>Enter closing reading</small>`;
        statusDiv.className = 'status-badge waiting';
    }
}

// Add event listeners to all inputs
document.querySelectorAll('.opening-reading, .closing-reading').forEach(input => {
    input.addEventListener('input', function() {
        calculateSale(this);
    });
    input.addEventListener('change', function() {
        calculateSale(this);
    });
});

// Reset form function - only clears closing readings
function resetForm() {
    if(confirm('Are you sure you want to reset all closing readings?')) {
        document.querySelectorAll('.closing-reading').forEach(input => {
            input.value = '';
        });
        document.querySelectorAll('.sale-result').forEach(div => {
            div.innerHTML = '<span class="sale-placeholder">—</span>';
        });
        document.querySelectorAll('.status-badge').forEach(badge => {
            badge.innerHTML = '<i class="fas fa-clock"></i> Waiting<br><small>Enter closing reading</small>';
            badge.className = 'status-badge waiting';
        });
    }
}

// Auto hide alerts
document.querySelectorAll('.alert-custom').forEach(alert => {
    setTimeout(() => {
        alert.style.opacity = '0';
        setTimeout(() => alert.remove(), 300);
    }, 5000);
});

// Initialize calculations for existing values
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.closing-reading').forEach(input => {
        if(input.value !== '') {
            calculateSale(input);
        }
    });
});
</script>

<?php include('../includes/ft.php'); ?>