<?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>Add AMC Contract</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,.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,.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:.25s}.fi textarea{height:140px;resize:none;padding-top:16px}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,.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:.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:.25s}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,.10)}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none}.form-step{display:none}.form-step.active{display:block}.service-row{display:grid;grid-template-columns:1fr 2fr 100px;gap:20px;padding:18px 0;border-bottom:1px solid #f1f1f1;align-items:center}.service-head{font-size:13px;font-weight:700;color:#6b7280;padding-bottom:14px;border-bottom:1px solid #e5e7eb}.checkbox-service{width:20px;height:20px;accent-color:#2563eb;cursor:pointer}#termsEditor:empty:before{content:attr(data-placeholder);color:#9ca3af}#termsEditor ul{list-style:disc;padding-left:20px}#termsEditor ol{list-style:decimal;padding-left:20px}#termsEditor a{color:#2563eb;text-decoration:underline}@media(max-width:640px){.ts-control{height:52px!important;min-height:52px!important}.fi input,.fi textarea,.si select{height:52px}.fi textarea{height:120px}.service-row{grid-template-columns:1fr;gap:8px}}</style>

</head>

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

    <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">
                    Add AMC Contract
                </h1>
            </div>

            <a href="amc_contract_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>

    <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">

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

                    <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 3 — AMC 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 id="mdot2" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        </div>

                    </div>

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

                        <?php

                        $steps = [

                            ['01', 'AMC Details', 'Contract & billing details'],
                            ['02', 'Service Details', 'Included AMC services'],
                            ['03', 'Terms & Conditions', 'AMC rules & attachments'],

                        ];

                        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 != 2): ?>
                                        <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>

                <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 3</p>
                            <h1 class="text-3xl font-bold text-gray-900">AMC Details</h1>
                        </div>

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

                            <div class="si">
                                <select id="client">
                                    <option value="" disabled selected>Select Client *</option>
                                    <option>ABC Pvt Ltd</option>
                                    <option>XYZ Corporation</option>
                                    <option>Tech Solutions</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="amcType">
                                    <option value="" disabled selected>Select AMC Type *</option>
                                    <option>Hardware AMC</option>
                                    <option>Software AMC</option>
                                    <option>Comprehensive AMC</option>
                                    <option>Non Comprehensive AMC</option>
                                </select>
                            </div>

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

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

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Amount (₹) *</label>
                            </div>

                            <div class="sm:col-span-2">

                                <label class="block text-sm font-semibold text-gray-700 mb-3">
                                    Do You Want To Apply GST?
                                </label>

                                <div class="flex items-center gap-6">

                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio"
                                            name="hasGST"
                                            value="yes"
                                            onchange="toggleGSTField(true)"
                                            class="w-4 h-4 accent-violet-500">

                                        <span class="text-sm text-gray-700">
                                            Yes
                                        </span>
                                    </label>

                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio"
                                            name="hasGST"
                                            value="no"
                                            onchange="toggleGSTField(false)"
                                            checked
                                            class="w-4 h-4 accent-violet-500">

                                        <span class="text-sm text-gray-700">
                                            No
                                        </span>
                                    </label>

                                </div>

                            </div>

                            <div class="fi hidden" id="gstFieldWrap">

                                <input type="text"
                                    placeholder=" "
                                    id="gstPercent"
                                    maxlength="2">

                                <label>GST (%)</label>

                            </div>

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

                            <div class="si">
                                <select id="paymentTerms">
                                    <option value="" disabled selected>Select Payment Terms</option>
                                    <option>Advance</option>
                                    <option>Monthly</option>
                                    <option>Quarterly</option>
                                    <option>Yearly</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="billingCycle">
                                    <option value="" disabled selected>Select Billing Cycle</option>
                                    <option>Monthly</option>
                                    <option>Quarterly</option>
                                    <option>Half Yearly</option>
                                    <option>Yearly</option>
                                </select>
                            </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 3</p>
                            <h1 class="text-3xl font-bold text-gray-900">AMC Services</h1>
                        </div>

                        <div class="rounded-2xl border border-gray-200 p-6">

                            <div class="service-row service-head">
                                <div>Service Name</div>
                                <div>Description</div>
                                <div>Included</div>
                            </div>

                            <div class="service-row">
                                <div class="font-medium text-gray-800">Hardware Support</div>
                                <div class="text-gray-500">Includes system hardware issues</div>
                                <div><input type="checkbox" class="checkbox-service" checked></div>
                            </div>

                            <div class="service-row">
                                <div class="font-medium text-gray-800">Software Support</div>
                                <div class="text-gray-500">Includes OS & application support</div>
                                <div><input type="checkbox" class="checkbox-service" checked></div>
                            </div>

                            <div class="service-row">
                                <div class="font-medium text-gray-800">Network Support</div>
                                <div class="text-gray-500">Includes LAN/WAN support</div>
                                <div><input type="checkbox" class="checkbox-service" checked></div>
                            </div>

                            <div class="service-row">
                                <div class="font-medium text-gray-800">On-site Visit</div>
                                <div class="text-gray-500">Includes physical visit</div>
                                <div><input type="checkbox" class="checkbox-service"></div>
                            </div>

                            <div class="service-row">
                                <div class="font-medium text-gray-800">Remote Support</div>
                                <div class="text-gray-500">Includes remote troubleshooting</div>
                                <div><input type="checkbox" class="checkbox-service" checked></div>
                            </div>

                            <div class="service-row border-0">
                                <div class="font-medium text-gray-800">Backup Support</div>
                                <div class="text-gray-500">Includes backup & recovery</div>
                                <div><input type="checkbox" class="checkbox-service"></div>
                            </div>

                            <button type="button" onclick="openServiceModal()" class="mt-6 inline-flex items-center gap-2 text-blue-600 font-semibold">
                                <i class="ri-add-line"></i>
                                Add Custom Service
                            </button>

                        </div>

                    </div>

                    <!-- STEP 3 -->
                    <div class="form-step" id="fs2">

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

                        <div>

                            <label class="block text-sm font-semibold text-gray-700 mb-3">
                                Terms & Conditions *
                            </label>

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

                                <div class="flex items-center gap-1 px-4 py-3 border-b border-gray-100 bg-gray-50">

                                    <button type="button" onclick="formatDoc('bold')" class="w-9 h-9 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-700">
                                        <i class="ri-bold"></i>
                                    </button>

                                    <button type="button" onclick="formatDoc('italic')" class="w-9 h-9 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-700">
                                        <i class="ri-italic"></i>
                                    </button>

                                    <button type="button" onclick="formatDoc('underline')" class="w-9 h-9 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-700">
                                        <i class="ri-underline"></i>
                                    </button>

                                    <div class="w-px h-6 bg-gray-200 mx-1"></div>

                                    <button type="button" onclick="formatDoc('insertUnorderedList')" class="w-9 h-9 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-700">
                                        <i class="ri-list-unordered"></i>
                                    </button>

                                    <button type="button" onclick="formatDoc('insertOrderedList')" class="w-9 h-9 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-700">
                                        <i class="ri-list-ordered"></i>
                                    </button>

                                    <div class="w-px h-6 bg-gray-200 mx-1"></div>

                                    <button type="button" onclick="addLink()" class="w-9 h-9 rounded-lg hover:bg-gray-200 flex items-center justify-center text-gray-700">
                                        <i class="ri-link"></i>
                                    </button>

                                </div>

                                <div id="termsEditor" contenteditable="true" class="min-h-[260px] p-5 outline-none text-sm text-gray-700" data-placeholder="Enter terms and conditions..."></div>

                                <div class="flex justify-end px-4 py-3 border-t border-gray-100 text-xs text-gray-400">
                                    <span id="editorCount">0</span>/1000
                                </div>

                            </div>

                        </div>

                        <div class="mt-8">

                            <label class="block text-sm font-semibold text-gray-700 mb-3">
                                Attachments
                            </label>

                            <input type="file" class="block w-full border border-gray-200 rounded-xl p-3">

                            <p class="text-xs text-gray-400 mt-2">
                                PDF, DOC, DOCX (Max. 5MB)
                            </p>

                        </div>

                    </div>

                    <!-- SERVICE MODAL -->
                    <div id="serviceModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4">

                        <div class="w-full max-w-lg rounded-3xl bg-white shadow-2xl overflow-hidden">

                            <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100">

                                <h3 class="text-xl font-bold text-gray-900">
                                    Add Custom Service
                                </h3>

                                <button onclick="closeServiceModal()" class="w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center text-gray-500">
                                    <i class="ri-close-line text-xl"></i>
                                </button>

                            </div>

                            <div class="p-6 space-y-5">

                                <div class="fi">
                                    <input type="text" placeholder=" ">
                                    <label>Service Name *</label>
                                </div>

                                <div class="fi">
                                    <textarea placeholder=" "></textarea>
                                    <label>Description *</label>
                                </div>

                            </div>

                            <div class="flex justify-end gap-3 px-6 py-5 border-t border-gray-100 bg-gray-50">

                                <button onclick="closeServiceModal()" class="h-11 px-5 rounded-xl border border-gray-200 bg-white text-gray-700 font-semibold hover:bg-gray-50">
                                    Cancel
                                </button>

                                <button class="h-11 px-6 rounded-xl bg-violet-500 hover:bg-violet-600 text-white font-semibold">
                                    Save Service
                                </button>

                            </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 Contract Created!
                        </h2>

                        <p class="text-sm text-gray-500 mb-4">
                            AMC contract has been added 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 = 3;

        const mobileLabels = [

            'Step 1 of 3 — AMC Details',
            'Step 2 of 3 — Service Details',
            'Step 3 of 3 — Terms & Conditions',

        ];

        const searchableSelects = [

            '#client',
            '#amcType',
            '#paymentTerms',
            '#billingCycle',

        ];

        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 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, 2)];

            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';

            }

        }
        /* =========================
           GST SHOW / HIDE
        ========================== */

        function toggleGSTField(show) {

            const gstWrap =
                document.getElementById('gstFieldWrap');

            if (show) {

                gstWrap.classList.remove('hidden');

            } else {

                gstWrap.classList.add('hidden');

                document.getElementById('gstPercent').value = '';

            }

        }


        /* =========================
           GST ONLY NUMBER
        ========================== */

        document
            .getElementById('gstPercent')
            .addEventListener('input', function() {

                this.value = this.value
                    .replace(/\D/g, '')
                    .slice(0, 2);

            });

        function goStep(dir) {

            if (cur === 2 && 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_contract_list.php';
                }, 2000);

                return;

            }

            const nxt = cur + dir;

            /* =========================
   STEP 1 GST VALIDATION
========================== */

            if (cur === 0 && dir === 1) {

                const gstYes =
                    document.querySelector(
                        'input[name="hasGST"]:checked'
                    ).value === 'yes';

                const gstPercent =
                    document.getElementById('gstPercent').value.trim();

                if (gstYes) {

                    if (gstPercent === '') {

                        Swal.fire({
                            icon: 'warning',
                            title: 'GST Required',
                            text: 'Please enter GST percentage',
                            confirmButtonColor: '#8b5cf6'
                        });

                        return;
                    }

                    if (parseInt(gstPercent) > 28) {

                        Swal.fire({
                            icon: 'warning',
                            title: 'Invalid GST',
                            text: 'GST cannot exceed 28%',
                            confirmButtonColor: '#8b5cf6'
                        });

                        return;
                    }

                }

            }

            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 === 2) {

                nb.innerHTML =
                    '<i class="ri-check-line"></i> Create 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'
                );

            }

        }

        const editor = document.getElementById('termsEditor');
        const counter = document.getElementById('editorCount');

        if (editor) {

            editor.addEventListener('input', () => {
                counter.textContent = editor.innerText.length;
            });

        }

        function formatDoc(command) {

            document.execCommand(command, false, null);

        }

        function addLink() {

            const url = prompt('Enter URL');

            if (url) {
                document.execCommand('createLink', false, url);
            }

        }

        function openServiceModal() {

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

            document.getElementById('serviceModal')
                .classList.add('flex');

        }

        function closeServiceModal() {

            document.getElementById('serviceModal')
                .classList.add('hidden');

            document.getElementById('serviceModal')
                .classList.remove('flex');

        }
    </script>

</body>

</html>

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