<?php
session_start();
require_once '../config.php';

// Check admin login
if (!isset($_SESSION['user_id']) || ($_SESSION['role'] ?? '') !== 'admin') {
    header('Location: ../login.php');
    exit;
}

$adminName = $_SESSION['name'] ?? 'Admin';

// Filters
$month = isset($_GET['month']) ? (int)$_GET['month'] : (int)date('m');
$year  = isset($_GET['year']) ? (int)$_GET['year'] : (int)date('Y');

if ($month < 1 || $month > 12) {
    $month = (int)date('m');
}
if ($year < 2000 || $year > 2100) {
    $year = (int)date('Y');
}

$monthSql = sprintf('%02d', $month);

// Summary data
$query = "
    SELECT 
        COUNT(*) AS total_bills,
        COALESCE(SUM(total_amount), 0) AS total_sales,
        COALESCE(SUM(paid_amount), 0) AS total_paid,
        COALESCE(SUM(due_amount), 0) AS total_due
    FROM bills
    WHERE MONTH(created_at) = '$monthSql'
      AND YEAR(created_at) = '$year'
";

$result = mysqli_query($conn, $query);
$data = mysqli_fetch_assoc($result) ?: [
    'total_bills' => 0,
    'total_sales' => 0,
    'total_paid'  => 0,
    'total_due'   => 0,
];

// Recent bills
$recentBills = [];
$listQuery = "
    SELECT id, customer_name, total_amount, paid_amount, due_amount, created_at
    FROM bills
    WHERE MONTH(created_at) = '$monthSql'
      AND YEAR(created_at) = '$year'
    ORDER BY id DESC
    LIMIT 20
";
$listResult = mysqli_query($conn, $listQuery);
if ($listResult) {
    while ($row = mysqli_fetch_assoc($listResult)) {
        $recentBills[] = $row;
    }
}

function e($value) {
    return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
}

$monthName = date('F', mktime(0, 0, 0, $month, 1));
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Monthly Report</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root{
            --bg:#f4f7fb;
            --card:#ffffff;
            --text:#0f172a;
            --muted:#64748b;
            --line:#e5e7eb;
            --primary:#374155;
            --primary-soft:#eef2f7;
            --success:#16a34a;
            --warning:#f59e0b;
            --danger:#ef4444;
            --info:#2563eb;
            --violet:#7c3aed;
            --shadow:0 14px 36px rgba(15,23,42,.08);
            --radius:20px;
            --sidebar-width:260px;
            --header-height:70px;
        }

        *{
            box-sizing:border-box;
        }

        html, body{
            max-width:100%;
            overflow-x:hidden;
        }

        body{
            margin:0;
            font-family:Inter, Arial, Helvetica, sans-serif;
            background:
                radial-gradient(circle at top left, rgba(55,65,85,.08), transparent 30%),
                radial-gradient(circle at bottom right, rgba(37,99,235,.06), transparent 28%),
                var(--bg);
            color:var(--text);
        }
        header{
    position:fixed;
    top:0;
    left:var(--sidebar-width);
    right:0;
    height:var(--header-height);
    z-index:1000;
}
.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:var(--sidebar-width);
    height:100vh;
    z-index:1001;
}
.page-wrap{
    position:relative;
    margin-left:var(--sidebar-width);
    min-height:100vh;
    padding-top:calc(var(--header-height) + 10px) !important;
    padding-left:14px !important;
    padding-right:14px !important;
    padding-bottom:14px !important;;
    width:calc(100% - var(--sidebar-width));
}

        .wrap{
            max-width:1600px;
            margin:0 auto;
        }

        .report-header{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:16px;
            margin-bottom:14px;
            padding:14px;
            background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            flex-wrap:wrap;
        }

        .title-block{
            display:flex;
            flex-direction:column;
            gap:6px;
        }

        .title-block h1{
            margin:0;
            font-size:20px;
            color:var(--primary);
            font-weight:900;
            letter-spacing:-.04em;
            display:flex;
            align-items:center;
            gap:12px;
        }

 .title-block h1 i{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#eef2f7;   /* light bg */
    color:#374155;        /* main theme */

    border-radius:12px;
    box-shadow:none;
}

        .title-block p{
            margin:0;
            font-size:12px;
            color:var(--muted);
            line-height:1.5;
        }

        .date-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 10px;
            font-size:12px !important;
            border-radius:999px;
            border:1px solid var(--line);
            background:#f8fafc;
            color:#334155;
            font-weight:700;
            white-space:nowrap;
        }

        .panel{
            background:var(--card);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            padding:14px;
        }

        .filter-bar{
            display:flex;
            flex-wrap:wrap;
            align-items:end;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
        }

        .filter-left{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:end;
        }

        .field{
            display:flex;
            flex-direction:column;
            gap:6px;
        }

        .field label{
            font-size:11px;
            color:var(--muted);
            font-weight:800;
            letter-spacing:.06em;
            text-transform:uppercase;
        }

        select,
        button,
        .btn-link{
            height:44px;
            border-radius:14px;
            border:1px solid var(--line);
            font-size:14px;
            outline:none;
            transition:.2s ease;
        }

        select{
            height:34px !important;
    font-size:12px !important;
            background:#fff;
            padding:0 12px;
            min-width:160px;
            color:#111827;
        }

        select:focus{
            border-color:#000;
            box-shadow:0 0 0 3px rgba(0,0,0,.05);
        }

        button,
        .btn-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            cursor:pointer;
           height:34px !important;
    font-size:12px !important;
    padding:0 10px !important;
    border-radius:10px !important;
            text-decoration:none;
            font-weight:700;
        }

        .btn-primary{
            background:linear-gradient(135deg, #111827, #374155);
            color:#fff;
            border:none;
            box-shadow:0 10px 18px rgba(17,24,39,.14);
        }

        .btn-primary:hover{
            transform:translateY(-1px);
            box-shadow:0 14px 24px rgba(17,24,39,.18);
        }

        .btn-secondary{
            background:#fff;
            color:#111827;
        }

        .btn-secondary:hover{
            background:#f8fafc;
        }

        .cards{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:16px;
        }

        .card{
            position:relative;
            overflow:hidden;
            background:#fff;
            border:1px solid var(--line);
            border-radius:18px;
            padding:12px;
            box-shadow:0 8px 24px rgba(0,0,0,.04);
            min-height:auto !important;
            transition:.2s ease;
        }

        .cards .card:hover{
            transform:translateY(-2px);
            box-shadow:0 14px 28px rgba(15,23,42,.08);
        }


        .cards .card:nth-child(1)::before{ background:linear-gradient(90deg,#2563eb,#60a5fa); }
        .cards .card:nth-child(2)::before{ background:linear-gradient(90deg,#7c3aed,#c084fc); }
        .cards .card:nth-child(3)::before{ background:linear-gradient(90deg,#16a34a,#4ade80); }
        .cards .card:nth-child(4)::before{ background:linear-gradient(90deg,#ef4444,#fb7185); }

   .card .icon{
    width:36px;
    height:36px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef2f7;     /* light background */
    color:#374155;          /* YOUR THEME COLOR */

    font-size:14px;
    margin-bottom:10px;

    box-shadow:0 4px 10px rgba(0,0,0,.05);
}

        .card h3{
            margin:0;
            font-size:11px;
            color:var(--muted);
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.08em;
        }

        .card .value{
            margin-top:12px;
            font-size:18px;
            font-weight:900;
            color:var(--primary);
            line-height:1.1;
            word-break:break-word;
        }

        .cards .card:nth-child(2) .value{ color:var(--violet); }
        .cards .card:nth-child(3) .value{ color:var(--success); }
        .cards .card:nth-child(4) .value{ color:var(--danger); }

        .subtext{
            margin-top:8px;
            color:var(--muted);
            font-size:11px;
        }

        .section-head{
            
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            gap:12px;
            margin:24px 0 14px;
            flex-wrap:wrap;
        }

        .section-head h2{
            
            margin:0;
             font-size:16px !important;
            font-weight:900;
            color:#111827;
            display:flex;
            align-items:center;
            gap:10px;
        }
.section-head h2 i{
    color:#374155;
    background:#eef2f7;
    padding:6px;
    border-radius:8px;
}
        .section-head p{
            margin:4px 0 0;
            color:var(--muted);
            font-size:12px;
        }

        .table-wrap{
            overflow:auto;
            border:1px solid var(--line);
            border-radius:18px;
            background:#fff;
            box-shadow:0 8px 24px rgba(0,0,0,.04);
        }

        table{
            width:100%;
            border-collapse:collapse;
            min-width:860px;
        }

        thead th{
            background:#f8fafc;
            color:#334155;
            font-size:11px;
            text-align:left;
            padding:8px;
            border-bottom:1px solid var(--line);
            font-weight:800;
        }

        tbody td{
            padding:8px;
            border-bottom:1px solid #f1f5f9;
            font-size:12px;
            color:#111827;
        }

        tbody tr:hover{
            background:#fafafa;
        }

        .amount{
            font-weight:800;
            color:#0f172a;
        }

        .amount.sales{
            color:var(--info);
        }

        .amount.paid{
            color:var(--success);
        }

        .amount.due{
            color:var(--danger);
        }

        .empty{
            padding:24px;
            text-align:center;
            color:var(--muted);
        }

        .summary-row{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:16px;
            margin-top:18px;
        }

        .summary-box{
            background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            border:1px solid var(--line);
            border-radius:18px;
            padding:12px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
        }

        .summary-box strong{
            color:#334155;
            font-size:12px;
        }

        .summary-box span{
            font-weight:900;
            color:var(--info);
            font-size:13px;
        }

        @media (max-width: 1100px){
            .cards{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }

            .summary-row{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 900px){
            .page-wrap{
                margin-left:0;
                padding:16px;
            }

            select{
                min-width:140px;
            }
        }

        @media (max-width: 640px){
            .cards{
                grid-template-columns:1fr;
            }

            .panel{
                padding:16px;
            }

            .report-header{
                padding:16px;
            }

            .title-block h1{
                font-size:22px;
            }

            select,
            button,
            .btn-link{
                width:100%;
            }

            .filter-left{
                width:100%;
            }

            .field{
                width:100%;
            }

            .field select{
                width:100%;
            }

            .date-pill{
                width:100%;
                justify-content:center;
            }
        }
        /* ================= RESPONSIVE FIX ================= */
@media (max-width: 1024px) {
    .page-wrap {
        margin-left: 0;
        width: 100%;
    }

    header {
        left: 0;
        width: 100%;
    }

    .sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-wrap {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 80px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 12px !important;
    }

    .wrap {
        width: 100%;
        max-width: 100%;
    }

    .report-header,
    .panel {
        padding: 12px;
        border-radius: 16px;
    }

    .report-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .title-block h1 {
        font-size: 18px;
        line-height: 1.3;
    }

    .title-block h1 i {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .title-block p {
        font-size: 12px;
    }

    .date-pill {
        width: 100%;
        justify-content: center;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .filter-left {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .field {
        width: 100%;
    }

    .field select,
    .field label,
    button,
    .btn-link {
        width: 100%;
    }

    select,
    button,
    .btn-link {
        font-size: 13px !important;
    }

    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        padding: 14px;
    }

    .card .value {
        font-size: 20px;
    }

    .card .icon {
        width: 34px;
        height: 34px;
    }

    .summary-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .section-head {
        margin: 18px 0 12px;
        align-items: flex-start;
    }

    .section-head h2 {
        font-size: 15px !important;
    }

    .section-head p {
        font-size: 12px;
    }

    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    table {
        min-width: 720px;
    }

    thead th,
    tbody td {
        font-size: 11px;
        padding: 8px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .page-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 76px !important;
    }

    .report-header,
    .panel {
        padding: 10px;
    }

    .title-block h1 {
        font-size: 16px;
    }

    .date-pill {
        font-size: 11px !important;
    }

    .card .value {
        font-size: 18px;
    }
}
    </style>
</head>
<body>

<?php include 'adminsidebar.php'; ?>
<?php include '../header.php'; ?>

<div class="page-wrap">
    <div class="wrap">

        <div class="report-header">
            <div class="title-block">
                <h1><i class="fa-solid fa-chart-line"></i> Monthly Report</h1>
                <p>Sales summary for <?php echo e($monthName . ' ' . $year); ?></p>
            </div>

            <div class="date-pill">
                <i class="fa-solid fa-calendar-days"></i>
                <?php echo e($monthName . ' ' . $year); ?>
            </div>
        </div>

        <div class="panel">
            <form method="GET" class="filter-bar">
                <div class="filter-left">
                    <div class="field">
                        <label for="month">Month</label>
                        <select name="month" id="month">
                            <?php for($m = 1; $m <= 12; $m++): ?>
                                <option value="<?php echo $m; ?>" <?php echo ($m == $month) ? 'selected' : ''; ?>>
                                    <?php echo date('F', mktime(0, 0, 0, $m, 1)); ?>
                                </option>
                            <?php endfor; ?>
                        </select>
                    </div>

                    <div class="field">
                        <label for="year">Year</label>
                        <select name="year" id="year">
                            <?php for($y = 2023; $y <= (int)date('Y'); $y++): ?>
                                <option value="<?php echo $y; ?>" <?php echo ($y == $year) ? 'selected' : ''; ?>>
                                    <?php echo $y; ?>
                                </option>
                            <?php endfor; ?>
                        </select>
                    </div>

                    <button type="submit" class="btn-primary">
                        <i class="fa-solid fa-filter"></i> Filter
                    </button>

                    <a href="monthly_reports.php" class="btn-link btn-secondary">
                        <i class="fa-solid fa-rotate-left"></i> Reset
                    </a>
                </div>
            </form>

            <div class="cards">
                <div class="card">
                    <div class="icon"><i class="fa-solid fa-file-invoice"></i></div>
                    <h3>Total Bills</h3>
                    <div class="value"><?php echo number_format((float)$data['total_bills']); ?></div>
                    <div class="subtext">All bills in selected month</div>
                </div>

                <div class="card">
                    <div class="icon"><i class="fa-solid fa-indian-rupee-sign"></i></div>
                    <h3>Total Sales</h3>
                    <div class="value">₹ <?php echo number_format((float)$data['total_sales'], 2); ?></div>
                    <div class="subtext">Gross billing amount</div>
                </div>

                <div class="card">
                    <div class="icon"><i class="fa-solid fa-circle-check"></i></div>
                    <h3>Paid</h3>
                    <div class="value">₹ <?php echo number_format((float)$data['total_paid'], 2); ?></div>
                    <div class="subtext">Collected amount</div>
                </div>

                <div class="card">
                    <div class="icon"><i class="fa-solid fa-clock"></i></div>
                    <h3>Due</h3>
                    <div class="value">₹ <?php echo number_format((float)$data['total_due'], 2); ?></div>
                    <div class="subtext">Outstanding balance</div>
                </div>
            </div>

            <div class="section-head">
                <div>
                    <h2><i class="fa-solid fa-receipt"></i> Recent Bills</h2>
                    <p>Latest 20 records for the selected month</p>
                </div>
            </div>

            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Customer Name</th>
                            <th>Total Amount</th>
                            <th>Paid Amount</th>
                            <th>Due Amount</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (!empty($recentBills)): ?>
                            <?php foreach ($recentBills as $row): ?>
                                <tr>
                                    <td>#<?php echo e($row['id']); ?></td>
                                    <td><?php echo e($row['customer_name']); ?></td>
                                    <td class="amount sales">₹ <?php echo number_format((float)$row['total_amount'], 2); ?></td>
                                    <td class="amount paid">₹ <?php echo number_format((float)$row['paid_amount'], 2); ?></td>
                                    <td class="amount due">₹ <?php echo number_format((float)$row['due_amount'], 2); ?></td>
                                    <td><?php echo date('d M Y', strtotime($row['created_at'])); ?></td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="6" class="empty">No bills found for this month.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>
</html>