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

    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>

<style>.ts-wrapper{width:100%;position:relative;}.ts-control{min-height:56px !important;height:56px !important;border:1px solid #d1d5db !important;border-radius:16px !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:8px !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;overflow-x:hidden !important;scroll-behavior:smooth;}.ts-dropdown-content::-webkit-scrollbar{width:6px;}.ts-dropdown-content::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:20px;}.ts-dropdown .option{padding:14px 16px !important;font-size:14px !important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff !important;color:#7c3aed !important;}.fi{position:relative;}.fi input,.fi textarea{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi textarea{height:100px;resize:none;padding-top:16px;}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;z-index:2;}.fi textarea+label{top:22px;transform:none;}.fi input:focus+label,.fi input:not(:placeholder-shown)+label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.fi textarea:focus+label,.fi textarea:not(:placeholder-shown)+label{top:-8px;transform:none;font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}.fi input[readonly]{background:#f9fafb;color:#6b7280;cursor:not-allowed;}.fi input[readonly]:focus{border-color:#d1d5db;box-shadow:none;}.fi input[readonly]+label{background:#f9fafb;}.form-step{display:none;}.form-step.active{display:block;}@media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.fi textarea,.si select{height:52px;}.fi textarea{height:90px;}}</style>

</head>

<body class="bg-gray-100 min-h-screen">

    <!-- HEADER -->
    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">

        <div class="flex items-start justify-between">

            <div>
                <h1 class="text-3xl font-bold text-gray-900">
                    Renew AMC
                </h1>
            </div>

            <a href="amc_renew_list.php">
                <button class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">
                    <i class="ri-arrow-left-line"></i>
                    Back
                </button>
            </a>

        </div>

    </div>

    <!-- MAIN -->
    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pb-6 sm:pb-10">

        <div class="w-full bg-white rounded-2xl sm:rounded-3xl shadow-xl border border-gray-100 p-3 sm:p-6 md:p-8 lg:p-12 overflow-visible">

            <div class="flex flex-col lg:flex-row gap-6 lg:gap-14">

                <!-- SIDEBAR -->
                <div class="w-full lg:w-64 xl:w-72 flex-shrink-0">

                    <!-- MOBILE -->
                    <div class="flex lg:hidden items-center justify-between mb-6">

                        <span id="mobileLabel" class="text-sm font-semibold text-gray-800">
                            Step 1 of 2 — Renewal Details
                        </span>

                        <div class="flex gap-1.5">
                            <div id="mdot0" class="w-2.5 h-2.5 rounded-full bg-violet-500"></div>
                            <div id="mdot1" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        </div>

                    </div>

                    <!-- DESKTOP -->
                    <div class="hidden lg:flex flex-col gap-0">

                        <?php

                        $steps = [
                            ['01', 'Renewal Details', 'Client & date information'],
                            ['02', 'Services', 'Services covered under AMC'],
                        ];

                        foreach ($steps as $index => $step):

                        ?>

                            <div class="flex gap-4 items-start">

                                <div class="flex flex-col items-center">

                                    <div id="sd<?= $index ?>"
                                        class="w-7 h-7 rounded-full <?= $index == 0 ? 'border-[3px] border-violet-500' : 'border-2 border-violet-200' ?> bg-white flex items-center justify-center transition-all duration-300"></div>

                                    <?php if ($index != 1): ?>
                                        <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                                    <?php endif; ?>

                                </div>

                                <div class="pt-0.5">

                                    <div class="text-[11px] font-semibold text-gray-400">
                                        <?= $step[0] ?>
                                    </div>

                                    <div id="st<?= $index ?>"
                                        class="text-[15px] font-bold <?= $index == 0 ? 'text-gray-900' : 'text-gray-400' ?>">
                                        <?= $step[1] ?>
                                    </div>

                                    <div class="text-xs text-gray-400">
                                        <?= $step[2] ?>
                                    </div>

                                </div>

                            </div>

                        <?php endforeach; ?>

                    </div>

                </div>

                <!-- FORM -->
                <div class="flex-1 min-w-0 lg:border-l lg:border-gray-100 lg:pl-10 xl:pl-12">

                    <!-- STEP 1 -->
                    <div class="form-step active" id="fs0">

                        <div class="mb-8">
                            <p class="text-xs text-gray-400 mb-1">Step 1 of 2</p>
                            <h1 class="text-3xl font-bold text-gray-900">Renewal Details</h1>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                            <div class="si">
                                <select id="clientSelect" onchange="fetchClientEndDate(this.value)">
                                    <option value="" disabled selected>Client *</option>
                                    <option value="technosoft">TechnoSoft Solutions</option>
                                    <option value="infosys">Infosys Ltd</option>
                                    <option value="tata">Tata Consultancy</option>
                                    <option value="wipro">Wipro Technologies</option>
                                </select>
                            </div>

                            <div class="fi">
                                <input type="text" id="currentEndDate" placeholder=" " readonly value="">
                                <label>Current End Date</label>
                            </div>

                            <div class="fi">
                                <input type="date" id="newStartDate" placeholder=" ">
                                <label>New Start Date *</label>
                            </div>

                            <div class="fi">
                                <input type="date" id="newEndDate" placeholder=" ">
                                <label>New End Date *</label>
                            </div>

                            <div class="fi">
                                <input type="number" id="amount" placeholder=" " oninput="calcTotal()">
                                <label>Amount (₹) *</label>
                            </div>

                            <div class="fi">
                                <input type="number" id="gst" placeholder=" " oninput="calcTotal()">
                                <label>GST (₹)</label>
                            </div>

                            <div class="fi">
                                <input type="text" id="totalAmount" placeholder=" " readonly>
                                <label>Total Amount (₹)</label>
                            </div>

                            <div class="si">
                                <select id="paymentTerms">
                                    <option value="" disabled selected>Payment Terms *</option>
                                    <option>Advance Payment</option>
                                    <option>Net 15 Days</option>
                                    <option>Net 30 Days</option>
                                    <option>Quarterly</option>
                                    <option>Yearly</option>
                                </select>
                            </div>

                            <div class="fi sm:col-span-2">
                                <textarea placeholder=" " id="notes"></textarea>
                                <label>Notes (Optional)</label>
                            </div>

                        </div>

                    </div>

                    <!-- STEP 2 -->
                    <div class="form-step" id="fs1">

                        <div class="mb-8">
                            <p class="text-xs text-gray-400 mb-1">Step 2 of 2</p>
                            <h1 class="text-3xl font-bold text-gray-900">Services</h1>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                            <div class="si sm:col-span-2">
                                <select id="serviceType">
                                    <option value="" disabled selected>Service Type *</option>
                                    <option>AMC - Hardware</option>
                                    <option>AMC - Software</option>
                                    <option>AMC - Network</option>
                                    <option>AMC - Full IT Support</option>
                                    <option>Web Development</option>
                                    <option>SEO</option>
                                    <option>SMM</option>
                                    <option>Digital Marketing</option>
                                </select>
                            </div>

                            <div class="fi">
                                <input type="number" placeholder=" ">
                                <label>No. of Visits / Month</label>
                            </div>

                            <div class="fi">
                                <input type="number" placeholder=" ">
                                <label>Response Time (Hours)</label>
                            </div>

                            <div class="si">
                                <select id="supportMode">
                                    <option value="" disabled selected>Support Mode</option>
                                    <option>On-Site</option>
                                    <option>Remote</option>
                                    <option>Both</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="priorityLevel">
                                    <option value="" disabled selected>Priority Level</option>
                                    <option>Low</option>
                                    <option>Medium</option>
                                    <option>High</option>
                                    <option>Critical</option>
                                </select>
                            </div>

                            <div class="fi sm:col-span-2">
                                <textarea placeholder=" "></textarea>
                                <label>Service Scope / Description</label>
                            </div>

                        </div>

                    </div>

                    <!-- SUCCESS -->
                    <div id="successMsg" class="hidden text-center py-8 sm:py-12">

                        <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-3">
                            <i class="ri-check-line text-3xl text-violet-600"></i>
                        </div>

                        <h2 class="text-xl font-bold text-gray-900 mb-2">
                            AMC Renewed!
                        </h2>

                        <p class="text-sm text-gray-500 mb-4">
                            AMC has been renewed successfully.
                        </p>

                    </div>

                    <!-- BUTTONS -->
                    <div id="btnRow" class="flex flex-col-reverse sm:flex-row gap-3 sm:gap-0 items-stretch sm:items-center justify-between mt-8 sm:mt-10 pt-6 border-t border-gray-100">

                        <button id="prevBtn" onclick="goStep(-1)" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-7 rounded-xl border border-gray-200 bg-white text-black text-sm font-semibold opacity-40 cursor-not-allowed transition-all">
                            <i class="ri-arrow-left-line"></i>
                            Previous
                        </button>

                        <button id="nextBtn" onclick="goStep(1)" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">
                            Next
                            <i class="ri-arrow-right-line"></i>
                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>

        let cur = 0;
        const total = 2;

        const mobileLabels = [
            'Step 1 of 2 — Renewal Details',
            'Step 2 of 2 — Services',
        ];

        const clientEndDates = {
            'technosoft': '31-03-2025',
            'infosys': '30-06-2025',
            'tata': '31-12-2025',
            'wipro': '28-02-2026',
        };

        const searchableSelects = [
            '#clientSelect',
            '#paymentTerms',
            '#serviceType',
            '#supportMode',
            '#priorityLevel',
        ];

        searchableSelects.forEach(id => {
            if (document.querySelector(id)) {
                new TomSelect(id, {
                    create: false,
                    allowEmptyOption: true,
                    placeholder: 'Search...',
                    closeAfterSelect: true,
                    render: {
                        no_results: function () {
                            return '<div class="p-3 text-sm text-gray-400">No results found</div>';
                        }
                    }
                });
            }
        });

        function fetchClientEndDate(val) {
            const field = document.getElementById('currentEndDate');
            field.value = clientEndDates[val] || '';
        }

        function calcTotal() {

            const amt = parseFloat(document.getElementById('amount').value) || 0;

            const gst = parseFloat(document.getElementById('gst').value) || 0;

            const total = amt + gst;

            const field = document.getElementById('totalAmount');

            field.value = total > 0 ? total.toLocaleString('en-IN') : '';
        }

        function updateSidebar() {

            for (let i = 0; i < total; i++) {

                const dot = document.getElementById('sd' + i);

                const title = document.getElementById('st' + i);

                if (i < cur) {

                    dot.className = 'w-7 h-7 rounded-full bg-violet-500 border-2 border-violet-500 flex items-center justify-center transition-all duration-300';

                    dot.innerHTML = '<i class="ri-check-line text-white text-xs"></i>';

                    title.className = 'text-[15px] font-bold text-gray-400';

                } else if (i === cur) {

                    dot.className = 'w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center transition-all duration-300';

                    dot.innerHTML = '';

                    title.className = 'text-[15px] font-bold text-gray-900';

                } else {

                    dot.className = 'w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center transition-all duration-300';

                    dot.innerHTML = '';

                    title.className = 'text-[15px] font-bold text-gray-400';
                }
            }

            document.getElementById('mobileLabel').textContent = mobileLabels[Math.min(cur, total - 1)];

            for (let i = 0; i < total; i++) {

                document.getElementById('mdot' + i).className =
                    i <= cur
                        ? 'w-2.5 h-2.5 rounded-full bg-violet-500'
                        : 'w-2.5 h-2.5 rounded-full bg-violet-200';
            }
        }

        function goStep(dir) {

            if (cur === total - 1 && dir === 1) {

                document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));

                document.getElementById('btnRow').style.display = 'none';

                document.getElementById('successMsg').classList.remove('hidden');

                setTimeout(() => {
                    window.location.href = 'amc_renew_list.php';
                }, 2000);

                return;
            }

            const nxt = cur + dir;

            if (nxt < 0 || nxt >= total) return;

            document.getElementById('fs' + cur).classList.remove('active');

            cur = nxt;

            document.getElementById('fs' + cur).classList.add('active');

            updateSidebar();

            const pb = document.getElementById('prevBtn');

            const nb = document.getElementById('nextBtn');

            if (cur === 0) {

                pb.classList.add('opacity-40', 'cursor-not-allowed');

            } else {

                pb.classList.remove('opacity-40', 'cursor-not-allowed');
            }

            if (cur === total - 1) {

                nb.innerHTML = '<i class="ri-check-line"></i> Renew AMC';

                nb.classList.remove('bg-violet-500', 'hover:bg-violet-600');

                nb.classList.add('bg-green-600', 'hover:bg-green-700');

            } else {

                nb.innerHTML = 'Next <i class="ri-arrow-right-line"></i>';

                nb.classList.add('bg-violet-500', 'hover:bg-violet-600');

                nb.classList.remove('bg-green-600', 'hover:bg-green-700');
            }
        }

    </script>

</body>

</html>

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