<?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" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <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;}
        .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;}
        .form-step{display:none;}
        .form-step.active{display:block;}
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <!-- PAGE 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">New Ticket</h1>
            </div>
            <a href="puresaas_complaint_management.php"
                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
            </a>
        </div>
    </div>
    <!-- MAIN CARD -->
    <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">
                    <div class="hidden lg:flex flex-col gap-0">
                        <!-- Step 1 -->
                        <div class="flex gap-4 items-start">
                            <div class="flex flex-col items-center">
                                <div id="sd0" class="w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center transition-all duration-300"></div>
                                <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                            </div>
                            <div class="pt-0.5">
                                <div class="text-[11px] font-semibold text-gray-400">01</div>
                                <div id="st0" class="text-[15px] font-bold text-gray-900">Client Info</div>
                                <div class="text-xs text-gray-400">Client Info</div>
                            </div>
                        </div>
                        <!-- Step 2 -->
                        <div class="flex gap-4 items-start">
                            <div class="flex flex-col items-center">
                                <div id="sd1" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center transition-all duration-300"></div>
                                <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                            </div>
                            <div class="pt-0.5">
                                <div class="text-[11px] font-semibold text-gray-400">02</div>
                                <div id="st1" class="text-[15px] font-bold text-gray-400">Assignment</div>
                                <div class="text-xs text-gray-400">Assignment</div>
                            </div>
                        </div>
                        <!-- Step 3 -->
                        <div class="flex gap-4 items-start">
                            <div class="flex flex-col items-center">
                                <div id="sd2" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center transition-all duration-300"></div>
                                <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                            </div>
                            <div class="pt-0.5">
                                <div class="text-[11px] font-semibold text-gray-400">03</div>
                                <div id="st2" class="text-[15px] font-bold text-gray-400">Priority & Status</div>
                                <div class="text-xs text-gray-400">Priority & Status</div>
                            </div>
                        </div>
                        <!-- Step 4 -->
                        <div class="flex gap-4 items-start">
                            <div class="flex flex-col items-center">
                                <div id="sd3" class="w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center transition-all duration-300"></div>
                            </div>
                            <div class="pt-0.5">
                                <div class="text-[11px] font-semibold text-gray-400">04</div>
                                <div id="st3" class="text-[15px] font-bold text-gray-400">Review & Save</div>
                                <div class="text-xs text-gray-400">Review & Save</div>
                            </div>
                        </div>
                    </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 4</p>
        <h1 class="text-3xl font-bold text-gray-900">Client Info</h1>
    </div>

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

        <!-- Client / Company Name -->
        <div class="fi">
            <input type="text" id="client_name" placeholder=" ">
            <label>Client / Company Name</label>
        </div>

        <!-- Product -->
        <div class="si">
            <select id="product">
                <option value="" disabled selected>Select Product</option>
                <option>PureEstate</option>
                <option>BuilderPro</option>
                <option>SocietyPro</option>
            </select>
        </div>

        <!-- Category -->
        <div class="si">
            <select id="category">
                <option value="" disabled selected>Select Category</option>
                <option>Battey Issue</option>
            </select>
        </div>

    </div>
</div>

<div class="form-step" id="fs1">
    <div class="mb-8">
        <p class="text-xs text-gray-400 mb-1">Step 2 of 4</p>
        <h1 class="text-3xl font-bold text-gray-900">Assignment</h1>
    </div>

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

        <!-- Raised By -->
        <div class="si">
            <select id="raised_by">
                <option value="" disabled selected>Raised By</option>
                <option>Alice Johnson</option>
                <option>Bob Smith</option>
                <option>Carol White</option>
                <option>David Brown</option>
            </select>
        </div>

        <!-- Assign To -->
        <div class="si">
            <select id="assign_to">
                <option value="" disabled selected>Assign To</option>
                <option>Team Alpha</option>
                <option>Team Beta</option>
                <option>Rajesh Kumar</option>
                <option>Priya Patel</option>
            </select>
        </div>

        <!-- Description -->
        <div class="fi sm:col-span-2">
            <textarea id="description" placeholder=" "></textarea>
            <label>Description</label>
        </div>

    </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 4</p>
        <h1 class="text-3xl font-bold text-gray-900">Priority & Status</h1>
    </div>

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

        <!-- Priority -->
        <div class="si">
            <select id="priority">
                <option value="" disabled selected>Select Priority</option>
                <option>Low</option>
                <option>Medium</option>
                <option>High</option>
                <option>Critical</option>
            </select>
        </div>

        <!-- Status -->
        <div class="si">
            <select id="status">
                <option value="" disabled selected>Select Status</option>
                <option>Open</option>
                <option>In Progress</option>
                <option>On Hold</option>
                <option>Resolved</option>
                <option>Closed</option>
            </select>
        </div>

    </div>
</div>

                    <!-- STEP 4 -->
                    <div class="form-step" id="fs3">
                        <div class="mb-8">
                            <p class="text-xs text-gray-400 mb-1">Step 4 of 4</p>
                            <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Review & Save</h1>
                            <p class="text-sm text-gray-500 mt-1.5">Confirm details before saving.</p>
                        </div>
                        <div
                            id="reviewContent"
                            class="rounded-xl border border-gray-100 divide-y divide-gray-100 overflow-y-auto max-h-[55vh] sm:max-h-[500px] pr-1 bg-white">
                        </div>
                    </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 = 4;

        const searchableSelects = [
            '#product',
            '#category',
            '#raised_by',
            '#assign_to',
            '#priority',
            '#status'
        ];

        searchableSelects.forEach(id => {
            if (document.querySelector(id)) {
                new TomSelect(id, {
                    create: false,
                    allowEmptyOption: true,
                    placeholder: 'Search...',
                    closeAfterSelect: true,
                });
            }
        });

        function buildReview() {
            const rows = [
                ['Client / Company Name', document.getElementById('client_name').value   || '-'],
                ['Product',              document.getElementById('product').value         || '-'],
                ['Category',             document.getElementById('category').value        || '-'],
                ['Raised By',            document.getElementById('raised_by').value       || '-'],
                ['Assign To',            document.getElementById('assign_to').value       || '-'],
                ['Description',          document.getElementById('description').value     || '-'],
                ['Priority',             document.getElementById('priority').value        || '-'],
                ['Status',               document.getElementById('status').value          || '-'],
            ];

            document.getElementById('reviewContent').innerHTML = rows.map(([k, v]) => `
                <div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-4 px-4 sm:px-5 py-3.5 bg-white hover:bg-gray-50 transition-colors">
                    <span class="text-xs text-gray-500 sm:min-w-[170px] flex-shrink-0 font-semibold">${k}</span>
                    <span class="text-sm text-gray-800 break-all whitespace-pre-wrap flex-1 min-w-0">${v}</span>
                </div>
            `).join('');
        }

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


        function goStep(dir) {
                    // STEP VALIDATION
if (dir === 1) {

    // STEP 1
    if (cur === 0) {

        if (!document.getElementById('client_name').value.trim()) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please enter Client / Company Name',
                width: '350px'
            });
            return;
        }

        if (!document.getElementById('product').value) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please select Product',
                width: '350px'
            });
            return;
        }

        if (!document.getElementById('category').value) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please select Category',
                width: '350px'
            });
            return;
        }
    }

    // STEP 2
    if (cur === 1) {

        if (!document.getElementById('raised_by').value) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please select Raised By',
                 width: '350px'
            });
            return;
        }

        if (!document.getElementById('assign_to').value) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please select Assign To',
                 width: '350px'
            });
            return;
        }

        if (!document.getElementById('description').value.trim()) {
            Swal.fire({
                icon: 'warning',
                title: 'Validation Error',
                text: 'Please enter Description',
                 width: '350px'
            });
            return;
        }
    }

    // STEP 3
    if (cur === 2) {

        if (!document.getElementById('priority').value) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please select Priority',
                 width: '350px'
            });
            return;
        }

        if (!document.getElementById('status').value) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Information',
                text: 'Please select Status',
                 width: '350px'
            });
            return;
        }
    }
}

            if (cur === 3 && dir === 1) {
                Swal.fire({
                    icon: 'success',
                    title: 'Ticket Saved Successfully',
                    text: 'Redirecting...',
                    confirmButtonColor: '#8b5cf6',
                    timer: 2000,
                    showConfirmButton: false,
                     width: '350px'
                }).then(() => {
                    window.location.href = 'index.html';
                });
                return;
            }

            const nxt = cur + dir;
            if (nxt < 0 || nxt >= total) return;

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

            if (cur === 3) buildReview();

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