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

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>AMC Reports</title>

<script src="https://cdn.tailwindcss.com"></script>

<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>

<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet"/>

<style>

/* ── TOM SELECT – matches employee form ── */
.ts-wrapper { width: 100%; position: relative; }
.ts-control {
    min-height: 52px !important;
    height: 52px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}
.ts-control input { font-size: 14px !important; }
.ts-wrapper.focus .ts-control {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,0.10) !important;
}
.ts-dropdown {
    margin-top: 7px !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10) !important;
    z-index: 9999 !important;
}
.ts-dropdown-content {
    max-height: 220px !important;
    overflow-y: auto !important;
}
.ts-dropdown-content::-webkit-scrollbar { width: 6px; }
.ts-dropdown-content::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 20px; }
.ts-dropdown .option { padding: 13px 16px !important; font-size: 14px !important; cursor: pointer; }
.ts-dropdown .active { background: #f3e8ff !important; color: #7c3aed !important; }

/* ── Floating label select wrapper ── */
.sl-wrap { position: relative; }
.sl-label {
    position: absolute;
    left: 13px;
    top: -8px;
    background: #fff;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    color: #8b5cf6;
    pointer-events: none;
    z-index: 10;
    line-height: 1;
}

</style>

</head>

<body class="bg-gray-100 min-h-screen p-3 sm:p-5">

<div class="max-w-2xl mx-auto mt-8">

<div class="bg-white rounded-2xl border border-gray-200 shadow-sm">

<!-- HEADER -->
<div class="px-5 sm:px-7 pt-5 pb-3">
<h1 class="text-2xl font-bold text-gray-900">AMC Reports</h1>
</div>

<!-- BODY -->
<div class="px-5 sm:px-7 pb-6">

<!-- FORM -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

<!-- REPORT TYPE -->
<div class="sl-wrap mt-2">
<span class="sl-label">Report Type</span>
<select id="reportType">
<option>AMC Summary</option>
<option>AMC Renewal</option>
<option>Payment Report</option>
<option>Client Report</option>
</select>
</div>

<!-- DATE RANGE -->
<div class="sl-wrap mt-2">
<span class="sl-label">Date Range</span>
<select id="dateRange">
<option>This Year</option>
<option>This Month</option>
<option>Last 6 Months</option>
<option>Custom Range</option>
</select>
</div>

<!-- CLIENT -->
<div class="md:col-span-2 sl-wrap">
<span class="sl-label">Client</span>
<select id="clientSelect">
<option>All Clients</option>
<option>TechnoSoft Solutions</option>
<option>Bright Future Pvt. Ltd.</option>
<option>Smart Infotech</option>
</select>
</div>

</div>

<!-- BUTTON -->
<div class="flex justify-center mt-5">
<button class="h-11 px-10 rounded-xl bg-green-600 hover:bg-green-700 text-white text-sm font-semibold transition-all shadow-md shadow-green-100">
Generate Report
</button>
</div>

<!-- REPORT PREVIEW -->
<div class="mt-6">

<h2 class="text-base font-bold text-gray-900 mb-3">Report Preview</h2>

<div class="rounded-2xl border border-gray-200 overflow-hidden">

<div class="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-100">
<span class="text-sm text-gray-500 font-medium">Total Clients</span>
<span class="text-sm font-bold text-gray-900">58</span>
</div>

<div class="flex items-center justify-between px-4 py-3 border-b border-gray-100">
<span class="text-sm text-gray-500 font-medium">Active AMC</span>
<span class="text-sm font-bold text-gray-900">46</span>
</div>

<div class="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-100">
<span class="text-sm text-gray-500 font-medium">Expiring Soon</span>
<span class="text-sm font-bold text-yellow-600">7</span>
</div>

<div class="flex items-center justify-between px-4 py-3 border-b border-gray-100">
<span class="text-sm text-gray-500 font-medium">Expired AMC</span>
<span class="text-sm font-bold text-red-600">3</span>
</div>

<div class="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-100">
<span class="text-sm text-gray-500 font-medium">Total AMC Value</span>
<span class="text-sm font-bold text-gray-900">₹10,75,000.00</span>
</div>

<div class="flex items-center justify-between px-4 py-3 border-b border-gray-100">
<span class="text-sm text-gray-500 font-medium">Received</span>
<span class="text-sm font-bold text-green-600">₹2,20,000.00</span>
</div>

<div class="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-100">
<span class="text-sm text-gray-500 font-medium">Pending</span>
<span class="text-sm font-bold text-orange-500">₹6,45,000.00</span>
</div>

<div class="flex items-center justify-between px-4 py-3">
<span class="text-sm text-gray-500 font-medium">Overdue</span>
<span class="text-sm font-bold text-red-600">₹1,20,000.00</span>
</div>

</div>

</div>

<!-- EXPORT -->
<div class="flex flex-col sm:flex-row gap-3 mt-5">

<button class="flex-1 sm:flex-none h-11 px-6 rounded-xl border border-gray-200 bg-gray-100 hover:bg-gray-200 text-sm font-semibold text-gray-700 transition-all flex items-center justify-center gap-2">
<i class="ri-file-pdf-line text-lg"></i>
Export PDF
</button>

<button class="flex-1 sm:flex-none h-11 px-6 rounded-xl border border-gray-200 bg-gray-100 hover:bg-gray-200 text-sm font-semibold text-gray-700 transition-all flex items-center justify-center gap-2">
<i class="ri-file-excel-2-line text-lg"></i>
Export Excel
</button>

</div>

</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

<script>

const tsConfig = {
    create: false,
    maxOptions: 10,
    render: {
        no_results: function() {
            return '<div class="p-3 text-sm text-gray-400">No results found</div>';
        }
    }
};

new TomSelect('#reportType',   tsConfig);
new TomSelect('#dateRange',    tsConfig);
new TomSelect('#clientSelect', tsConfig);

</script>

</body>

</html>

<?php include 'footer.php'; ?>