<?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>Target Management</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:130px;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;}.form-step{display:none;}.form-step.active{display:block;}.notes-wrap{position:relative;}.notes-counter{position:absolute;bottom:10px;right:14px;font-size:11px;color:#9ca3af;pointer-events:none;z-index:3;}.milestone-card{border:1px solid #e5e7eb;border-radius:18px;padding:16px 18px;background:#faf5ff;display:flex;align-items:center;gap:14px;transition:0.25s;}.milestone-card:hover{border-color:#c4b5fd;}.milestone-badge{width:36px;height:36px;border-radius:10px;background:#ede9fe;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:700;color:#7c3aed;}.review-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:18px;padding:18px 20px;}.review-card-title{font-size:13px;font-weight:700;color:#8b5cf6;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;}.review-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid #f3f4f6;}.review-row:last-child{border-bottom:none;}.review-key{font-size:13px;color:#6b7280;flex-shrink:0;min-width:130px;}.review-val{font-size:13px;font-weight:600;color:#1f2937;text-align:right;}.checkbox-wrap{display:flex;align-items:center;gap:8px;padding:4px 0;}.checkbox-wrap input[type="checkbox"]{width:18px;height:18px;accent-color:#8b5cf6;cursor:pointer;}.checkbox-wrap label{font-size:13px;color:#6b7280;cursor:pointer;}@media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.fi textarea,.si select{height:52px;}.fi textarea{height:110px;}}</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">Add Target</h1>
        </div>
        <a href="target.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 3 — Target 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>

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

                    <?php
                    $steps = [
                        ['01','Target Details','Name, type & schedule'],
                        ['02','Target Setting','Metrics & milestones'],
                        ['03','Review','Confirm & submit'],
                    ];
                    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>

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

                <!-- ========================
                     STEP 1 — TARGET DETAILS
                ========================= -->
                <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">Target Details</h1>
                    </div>

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

                        <!-- Target Name — full width -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="targetName">
                            <label>Target Name *</label>
                        </div>

                        <!-- Target Type | Team / User -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                            <div class="si">
                                <select id="targetType">
                                    <option value="" disabled selected>Select type *</option>
                                    <option>Revenue</option>
                                    <option>Units Sold</option>
                                    <option>Calls</option>
                                    <option>Meetings</option>
                                    <option>Leads</option>
                                    <option>Conversions</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="teamUser">
                                    <option value="" disabled selected>Select user *</option>
                                    <option>Rajesh</option>
                                    <option>Ramesh</option>
                                </select>
                            </div>

                        </div>

                        <!-- Target Amount — full width -->
                        <div class="fi">
                            <input type="number" placeholder=" " id="targetAmount" min="0">
                            <label>Target Amount (₹) *</label>
                        </div>

                        <!-- Start Date | End Date -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

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

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

                        </div>

                        <!-- Description — full width with counter -->
                        <div class="notes-wrap">
                            <div class="fi">
                                <textarea placeholder=" " id="description" maxlength="1000"
                                    oninput="updateCounter(this,'descCounter')"></textarea>
                                <label>Description</label>
                            </div>
                            <span class="notes-counter" id="descCounter">0/1000</span>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 2 — TARGET SETTING
                ========================= -->
                <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">Target Setting</h1>
                    </div>

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

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

                            <div class="si">
                                <select id="frequency">
                                    <option value="" disabled selected>Frequency *</option>
                                    <option>Daily</option>
                                    <option>Weekly</option>
                                    <option>Monthly</option>
                                    <option>Quarterly</option>
                                    <option>Yearly</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="targetStatus">
                                    <option value="" disabled selected>Status *</option>
                                    <option>Active</option>
                                    <option>Inactive</option>
                                    <option>Draft</option>
                                </select>
                            </div>

                        </div>

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

                            <div class="si">
                                <select id="incentiveType">
                                    <option value="" disabled selected>Incentive Type</option>
                                    <option>Fixed Amount</option>
                                    <option>Percentage</option>
                                    <option>Gift / Voucher</option>
                                    <option>No Incentive</option>
                                </select>
                            </div>

                            <div class="fi">
                                <input type="number" placeholder=" " id="incentiveValue" min="0">
                                <label>Incentive Value (₹ / %)</label>
                            </div>
                                                        
                            <div class="fi self-start">
                                <input type="number" placeholder=" " id="settingNumber">
                            
                                <label>Number</label>
                            </div>
                            
                            <div class="notes-wrap">
                                <div class="fi">
                                    <textarea
                                        placeholder=" "
                                        id="settingDescription"
                                        maxlength="500"
                                        oninput="updateCounter(this,'settingDescCounter')"></textarea>
                            
                                    <label>Description</label>
                                </div>
                            
                                <span class="notes-counter" id="settingDescCounter">
                                    0/500
                                </span>
                            </div>

                            

                        </div>


                        <!-- Milestones -->
                        <div>
                            <div class="flex items-center justify-between mb-3">
                                <p class="text-sm font-semibold text-gray-700">Milestones</p>
                        
                                <button type="button"
                                    onclick="addMilestone()"
                                    class="w-9 h-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white flex items-center justify-center transition-all">
                                    <i class="ri-add-line"></i>
                                </button>
                            </div>
                        
                            <div id="milestoneWrap" class="flex flex-col gap-3">
                        
                                <!-- Default Milestone -->
                                <div class="milestone-card milestone-item">
                                    
                                    <div class="milestone-badge">M1</div>
                        
                                    <div class="fi flex-1">
                                        <input type="number"
                                            placeholder=" "
                                            name="milestone[]"
                                            min="0"
                                            max="100">
                                        <label>Milestone 1 (% of target)</label>
                                    </div>
                        
                                    <button type="button"
                                        onclick="removeMilestone(this)"
                                        class="removeBtn w-10 h-10 rounded-xl border border-red-200 text-red-500 hover:bg-red-50 flex items-center justify-center transition-all">
                                        <i class="ri-subtract-line"></i>
                                    </button>
                        
                                </div>
                        
                            </div>
                        </div>

                        <!-- Checkboxes -->
                        <div class="flex flex-col gap-2 mt-1">
                            <div class="checkbox-wrap">
                                <input type="checkbox" id="notifyOnMilestone">
                                <label for="notifyOnMilestone">Notify team on milestone achievement</label>
                            </div>
                            <div class="checkbox-wrap">
                                <input type="checkbox" id="autoReset">
                                <label for="autoReset">Auto-reset target on period end</label>
                            </div>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 3 — REVIEW
                ========================= -->
                <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">Review</h1>
                        <p class="text-sm text-gray-400 mt-1">Please review all details before submitting.</p>
                    </div>

                    <div class="flex flex-col gap-4">

                        <!-- Target Details Summary -->
                        <div class="review-card">
                            <div class="review-card-title">Target Details</div>
                            <div class="review-row">
                                <span class="review-key">Target Name</span>
                                <span class="review-val" id="rv-targetName">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Target Type</span>
                                <span class="review-val" id="rv-targetType">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Team / User</span>
                                <span class="review-val" id="rv-teamUser">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Target Amount</span>
                                <span class="review-val" id="rv-targetAmount">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Start Date</span>
                                <span class="review-val" id="rv-startDate">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">End Date</span>
                                <span class="review-val" id="rv-endDate">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Description</span>
                                <span class="review-val" id="rv-description">—</span>
                            </div>
                        </div>

                        <!-- Target Setting Summary -->
                        <div class="review-card">
                            <div class="review-card-title">Target Setting</div>
                            <div class="review-row">
                                <span class="review-key">Frequency</span>
                                <span class="review-val" id="rv-frequency">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Status</span>
                                <span class="review-val" id="rv-targetStatus">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Incentive Type</span>
                                <span class="review-val" id="rv-incentiveType">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Incentive Value</span>
                                <span class="review-val" id="rv-incentiveValue">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Number</span>
                                <span class="review-val" id="rv-settingNumber">—</span>
                            </div>
                            <div class="review-row">
                                <span class="review-key">Description</span>
                                <span class="review-val" id="rv-settingDescription">—</span>
                            </div>
                            <div id="reviewMilestones" class="w-full"></div>
                        </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">Target Created!</h2>
                    <p class="text-sm text-gray-500 mb-4">Target 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 — Target Details',
        'Step 2 of 3 — Target Setting',
        'Step 3 of 3 — Review',
    ];

    /* =========================
       SEARCHABLE SELECT
    ========================== */

    const searchableSelects = [
        '#targetType',
        '#teamUser',
        '#frequency',
        '#targetStatus',
        '#incentiveType',
    ];

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

    /* =========================
       NOTES COUNTER
    ========================== */

    function updateCounter(textarea, counterId){
        const counter = document.getElementById(counterId);
        if(counter) counter.textContent = textarea.value.length + '/' + textarea.maxLength;
    }

    /* =========================
       REVIEW POPULATE
    ========================== */

function getVal(id){
    const el = document.getElementById(id);

    if(!el) return '—';

    if(el.tagName === 'SELECT'){
        return el.options[el.selectedIndex]?.text || '—';
    }

    const v = el.value.trim();

    if(!v) return '—';

    if(id === 'targetAmount' || id === 'incentiveValue'){
        return '₹ ' + Number(v).toLocaleString('en-IN');
    }

    return v;
}

function populateReview(){

    const map = {
        'rv-targetName'    : 'targetName',
        'rv-targetType'    : 'targetType',
        'rv-teamUser'      : 'teamUser',
        'rv-targetAmount'  : 'targetAmount',
        'rv-startDate'     : 'startDate',
        'rv-endDate'       : 'endDate',
        'rv-description'   : 'description',
        'rv-frequency'     : 'frequency',
        'rv-targetStatus'  : 'targetStatus',
        'rv-incentiveType' : 'incentiveType',
        'rv-incentiveValue': 'incentiveValue',
        'rv-settingNumber'     : 'settingNumber',
        'rv-settingDescription': 'settingDescription',
    };

    Object.entries(map).forEach(([rvId, srcId]) => {

        const el = document.getElementById(rvId);

        if(el){
            el.textContent = getVal(srcId);
        }

    });

    /* =========================
       Dynamic Milestones Review
    ========================== */

    let milestoneHTML = '';

    const milestones = document.querySelectorAll('input[name="milestone[]"]');

    milestones.forEach((milestone,index)=>{

        const value = milestone.value
            ? milestone.value + '%'
            : '—';

        milestoneHTML += `
        
            <div class="review-row">
                <span class="review-key">
                    Milestone ${index + 1}
                </span>

                <span class="review-val">
                    ${value}
                </span>
            </div>

        `;

    });

    document.getElementById('reviewMilestones').innerHTML = milestoneHTML;

}


    /* =========================
       SIDEBAR
    ========================== */

    function updateSidebar(){
        for(let i=0; i<3; 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<3; 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';
        }
    }

    /* =========================
       NAVIGATION
    ========================== */

    function goStep(dir){

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

    Swal.fire({
        icon: 'success',
        title: 'Target Created!',
        text: 'Target has been added successfully.',
        confirmButtonColor: '#8b5cf6',
        confirmButtonText: 'OK'
    }).then(() => {
        window.location.href = 'target.php';
    });

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

        if(cur === 2) populateReview();

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

function updateMilestoneNumbers(){

    const items = document.querySelectorAll('.milestone-item');

    items.forEach((item,index)=>{

        item.querySelector('.milestone-badge').innerText = 'M' + (index + 1);

        item.querySelector('label').innerText =
            'Milestone ' + (index + 1) + ' (% of target)';

    });

    // Hide remove button if only 1 milestone
    const removeBtns = document.querySelectorAll('.removeBtn');

    if(items.length === 1){
        removeBtns[0].classList.add('opacity-40','pointer-events-none');
    } else {
        removeBtns.forEach(btn=>{
            btn.classList.remove('opacity-40','pointer-events-none');
        });
    }
}

function addMilestone(){

    const wrap = document.getElementById('milestoneWrap');

    const count = document.querySelectorAll('.milestone-item').length + 1;

    const div = document.createElement('div');

    div.className = 'milestone-card milestone-item';

    div.innerHTML = `
    
        <div class="milestone-badge">M${count}</div>

        <div class="fi flex-1">
            <input type="number"
                placeholder=" "
                name="milestone[]"
                min="0"
                max="100">
            <label>Milestone ${count} (% of target)</label>
        </div>

        <button type="button"
            onclick="removeMilestone(this)"
            class="removeBtn w-10 h-10 rounded-xl border border-red-200 text-red-500 hover:bg-red-50 flex items-center justify-center transition-all">
            <i class="ri-subtract-line"></i>
        </button>
    `;

    wrap.appendChild(div);

    updateMilestoneNumbers();
}

function removeMilestone(btn){

    const items = document.querySelectorAll('.milestone-item');

    if(items.length <= 1){
        return;
    }

    btn.closest('.milestone-item').remove();

    updateMilestoneNumbers();
}

updateMilestoneNumbers();

</script>
</body>
</html>

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