<?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>View AMC Invoice</title>

    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
    
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
    
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-[#fafafa] font-[DM_Sans] text-[#0f0e17]">

    <!-- PAGE TITLE -->

    <div class="max-w-[1800px] mx-auto mt-6 mb-5 flex items-center justify-between gap-3 px-4">
        
        <h1 class="text-[18px] sm:text-2xl font-bold text-black leading-tight">
            View AMC Invoice
        </h1>

    </div>

    <!-- PAGE WRAPPER -->

    <div class="max-w-[1360px] w-full mx-auto px-4 pb-6">

        <!-- BACK BUTTON -->

<!-- BACK BUTTON -->

<div class="w-full flex justify-end mb-5">

    <a href="amc_invoice.php">

        <button class="inline-flex items-center gap-2 h-9 px-4 rounded-[10px] bg-white border border-[#e8e8f0] text-[#6b6b80] text-xs font-semibold hover:border-[#5b4fcf] hover:bg-[#ede9ff] hover:text-[#5b4fcf] transition-all duration-200">

            <i class="ri-arrow-left-line"></i>

            Back

        </button>

    </a>

</div>

        <!-- AMC DETAILS CARD -->

        <div class="bg-white border border-[#e8e8f0] rounded-[18px] overflow-hidden">

            <!-- CARD HEADER -->

            <div class="px-5 py-4 border-b border-[#e8e8f0] flex items-center gap-3">

                <div class="w-8 h-8 rounded-[9px] bg-[#ede9ff] flex items-center justify-center">

                    <i class="ri-file-list-3-line text-[#5b4fcf] text-[16px]"></i>

                </div>

                <h2 class="font-['Playfair_Display'] text-[15px] font-semibold text-[#0f0e17]">
                    AMC Invoice
                </h2>

            </div>

            <!-- CARD BODY -->

<div class="p-8">

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-10 gap-y-10">

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            Select Client
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                            TechnoSoft Solutions
                        </div>
                    </div>

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            Invoice Number
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                            Annual AMC
                        </div>
                    </div>

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            Invoice Date
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                            01-04-2025
                        </div>
                    </div>

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            Due Date
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                            31-03-2026
                        </div>
                    </div>

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            Amount (₹)
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                            ₹25,000
                        </div>
                    </div>

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            GST (₹)
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                            1800
                        </div>
                    </div>

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            Total Amount (₹)
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                            ₹29,500
                        </div>
                    </div>

                    <!-- FIELD -->

                    <div>
                        <div class="text-[10px] font-bold uppercase tracking-[0.06em] text-[#6b6b80] mb-1">
                            Status
                        </div>

                        <div class="text-[14px] font-medium text-[#0f0e17]">
                           Paid
                        </div>
                    </div>


                </div>

            </div>

        </div>

    </div>

</body>
</html>

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