<?php
ini_set('display_errors',1);
error_reporting(E_ALL);

require_once __DIR__.'/../../../includes/auth.php';
requireLogin();

require_once __DIR__.'/../../../config/database.php';

require_once __DIR__.'/../../../includes/header.php';
require_once __DIR__.'/../../../includes/sidebar.php';

$resultMessage = "";

/* Default billing dates */
$periodStart = $_POST['period_start'] ?? date('Y-m-01');
$periodEnd   = $_POST['period_end'] ?? date('Y-m-t');

$showStep2 = isset($_POST['run_billing']);

if(isset($_POST['run_billing'])){

    $_POST['billing_period_start'] = $periodStart;
    $_POST['billing_period_end']   = $periodEnd;

    ob_start();
    require __DIR__.'/billing_run_preview.php';
    $resultMessage = ob_get_clean();
}
?>

<div class="main-content">

<div class="page-header">
    <h1>⚡ Billing Run (Preview)</h1>
    <p class="subtitle">Improved UI version for testing before production.</p>
</div>

<div class="card intro">
    <h3>What this process does</h3>
    <div class="features">
        <div>✔️ Calculate meter usage</div>
        <div>✔️ Apply tariff blocks</div>
        <div>✔️ Generate invoices</div>
        <div>✔️ Create invoice lines</div>
    </div>
</div>

<form method="POST">

<!-- STEP 1 -->
<div class="card">

    <div class="step-title">
        <span>1</span>
        <h3>Billing Period</h3>
    </div>

    <div class="grid">
        <div>
            <label>Start Date</label>
            <input type="date" name="period_start" value="<?= htmlspecialchars($periodStart) ?>" required>
        </div>

        <div>
            <label>End Date</label>
            <input type="date" name="period_end" value="<?= htmlspecialchars($periodEnd) ?>" required>
        </div>
    </div>

    <button type="button" onclick="showStep2()" class="btn primary">Next →</button>

</div>

<!-- STEP 2 -->
<div class="card" id="step2" style="display:<?= $showStep2 ? 'block' : 'none' ?>;">

    <div class="step-title">
        <span>2</span>
        <h3>Billing Mode</h3>
    </div>

    <div class="mode-grid">

        <label class="mode-card">
            <input type="radio" name="billing_mode" value="full" checked>
            <h4>Full</h4>
            <p>Meter + Unit + Account</p>
        </label>

        <label class="mode-card">
            <input type="radio" name="billing_mode" value="rental">
            <h4>Rental</h4>
            <p>Unit + Account only</p>
        </label>

        <label class="mode-card">
            <input type="radio" name="billing_mode" value="utilities">
            <h4>Utilities</h4>
            <p>Meter only</p>
        </label>

        <label class="mode-card">
            <input type="radio" name="billing_mode" value="custom">
            <h4>Custom</h4>
            <p>Manual selection</p>
        </label>

    </div>

    <div class="custom">
        <label><input type="checkbox" name="include_meter"> Meter</label>
        <label><input type="checkbox" name="include_unit"> Unit</label>
        <label><input type="checkbox" name="include_account"> Account</label>
    </div>

    <button type="submit" name="run_billing" class="btn success">🚀 Run Billing</button>

</div>

</form>

<?php if($resultMessage): ?>
<div class="card result">
    <?= $resultMessage ?>
</div>
<?php endif; ?>

</div>

<style>
.card {background:#fff;padding:20px;border-radius:12px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.subtitle{color:#6b7280;}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;}
.mode-card{border:1px solid #e5e7eb;padding:15px;border-radius:10px;cursor:pointer;}
.mode-card:hover{border-color:#2563eb;}
.step-title{display:flex;align-items:center;gap:10px;margin-bottom:15px;}
.step-title span{background:#2563eb;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.btn{padding:10px 16px;border:none;border-radius:8px;cursor:pointer;}
.primary{background:#2563eb;color:#fff;}
.success{background:#10b981;color:#fff;}
.custom{margin-top:10px;padding:10px;border:1px dashed #ccc;border-radius:10px;}
</style>

<script>
function showStep2(){
    document.getElementById('step2').style.display='block';
}
</script>

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