<?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 Bug</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;}.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%;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi input{height:56px;}.fi textarea{min-height:140px;padding-top:18px;resize:none;}.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;}.fi textarea+label{top:20px;transform:none;}.fi input:focus+label,.fi input:not(:placeholder-shown)+label,.fi textarea:focus+label,.fi textarea:not(:placeholder-shown)+label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.si{position:relative;}.select-label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px;}.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;}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}.upload-box{border:2px dashed #d1d5db;border-radius:20px;padding:40px 20px;text-align:center;background:#fafafa;transition:0.25s;cursor:pointer;}.upload-box:hover{border-color:#8b5cf6;background:#f9f5ff;}.upload-box.dragover{border-color:#8b5cf6;background:#f3e8ff;}.upload-icon{width:60px;height:60px;border-radius:50%;background:#ede9fe;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}.uploaded-files{margin-top:16px;}.file-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:1px solid #e5e7eb;border-radius:14px;margin-top:10px;background:#fff;}@media(max-width:640px){.ts-control{min-height:52px !important;height:52px !important;}.fi input,.si select{height:52px;}}</style>

</head>

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

    <!-- HEADER -->
    <div class="max-w-7xl mx-auto px-3 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 Bug
                </h1>

            </div>

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

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

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

            <!-- FORM CONTENT -->
            <div id="formContent">

                <div class="mb-8">

                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">
                        Bug Details
                    </h2>

                </div>

                <!-- FORM GRID -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">

                    <!-- BUG TITLE -->
                    <div class="fi">

                        <input type="text" id="bugTitle" placeholder=" " />

                        <label>Bug Title <span class="text-red-500">*</span></label>

                    </div>

                    <!-- DATE -->
                    <div class="fi">

                        <input type="date" id="bugDate" placeholder=" " />

                        <label>Date<span class="text-red-500">*</span></label>

                    </div>

                    <!-- SEVERITY -->
                    <div>
                        <div class="si">

                            <select id="severity">

                                <option value="">Select Severity</option>

                                <option>Low</option>

                                <option>Medium</option>

                                <option>High</option>

                                <option>Critical</option>

                            </select>

                        </div>

                    </div>

                    <!-- STATUS -->
                    <div>
                        <div class="si">

                            <select id="status">

                                <option value="">Select Status</option>

                                <option>Open</option>

                                <option>In Progress</option>

                                <option>Resolved</option>

                                <option>Closed</option>

                            </select>

                        </div>

                    </div>

                    <!-- PROJECT -->
                    <div>
                        <div class="si">

                            <select id="project">

                                <option value="">Select Project</option>

                                <option>CRM System</option>

                                <option>HRMS Portal</option>

                                <option>Inventory App</option>

                            </select>

                        </div>

                    </div>

                    <!-- ASSIGNED -->
                    <div>
                        <div class="si">

                            <select id="assigned">

                                <option value="">Assign User</option>
                                <option>Dev</option>
                                <option>Saif</option>

                            </select>

                        </div>

                    </div>

                </div>

                <!-- BUG DESCRIPTION -->
                <div class="mt-6">

                    <div class="fi">

                        <textarea id="bugDescription" placeholder=" "></textarea>

                        <label>Bug Description<span class="text-red-500">*</span></label>

                    </div>

                </div>

                <!-- ATTACHMENT -->
                <div class="mt-6">

                    <label class="block text-sm font-semibold text-gray-700 mb-3">
                        Attachment (Upload or Drag and Drop)
                    </label>

                    <div
                        class="upload-box"
                        id="uploadBox">

                        <input
                            type="file"
                            id="fileInput"
                            class="hidden"
                            multiple>

                        <div class="upload-icon">

                            <i class="ri-upload-cloud-2-line text-3xl text-violet-600"></i>

                        </div>

                        <h3 class="text-lg font-semibold text-gray-800 mb-2">
                            Upload Files
                        </h3>

                        <p class="text-sm text-gray-500">
                            Drag & drop files here or click to browse
                        </p>

                    </div>

                    <div
                        class="uploaded-files"
                        id="uploadedFiles">

                    </div>

                </div>

                <!-- BUTTON -->
                <div class="flex justify-end mt-8 pt-6 border-t border-gray-100">

                    <button
                        onclick="submitForm()"
                        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">

                        Save Bug

                        <i class="ri-check-line"></i>

                    </button>

                </div>

            </div>

            <!-- SUCCESS -->
            <div id="successMsg" class="hidden text-center py-10">

                <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-4">

                    <i class="ri-check-line text-3xl text-violet-600"></i>

                </div>

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

                <p class="text-sm text-gray-500 mb-5">
                    Bug has been reported successfully.
                </p>
            </div>

        </div>

    </div>

    <script>
        /* SEARCHABLE DROPDOWNS */

        const searchableSelects = [
            '#severity',
            '#status',
            '#project',
            '#assigned'
        ];

        searchableSelects.forEach(id => {

            if (document.querySelector(id)) {

                new TomSelect(id, {
                    create: false,
                    allowEmptyOption: true,
                    placeholder: 'Search...',
                    closeAfterSelect: true
                });

            }

        });

        /* FILE UPLOAD */

        const uploadBox = document.getElementById('uploadBox');

        const fileInput = document.getElementById('fileInput');

        const uploadedFiles = document.getElementById('uploadedFiles');

        uploadBox.addEventListener('click', () => {

            fileInput.click();

        });

        uploadBox.addEventListener('dragover', (e) => {

            e.preventDefault();

            uploadBox.classList.add('dragover');

        });

        uploadBox.addEventListener('dragleave', () => {

            uploadBox.classList.remove('dragover');

        });

        uploadBox.addEventListener('drop', (e) => {

            e.preventDefault();

            uploadBox.classList.remove('dragover');

            handleFiles(e.dataTransfer.files);

        });

        fileInput.addEventListener('change', () => {

            handleFiles(fileInput.files);

        });

        function handleFiles(files) {

            [...files].forEach(file => {

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

                item.className = 'file-item';

                item.innerHTML = `
                    <div class="flex items-center gap-3">
                        <i class="ri-file-line text-xl text-violet-600"></i>
                        <div>
                            <p class="text-sm font-medium text-gray-800">${file.name}</p>
                            <p class="text-xs text-gray-500">${(file.size / 1024).toFixed(1)} KB</p>
                        </div>
                    </div>

                    <button
                        type="button"
                        class="text-red-500 hover:text-red-700"
                        onclick="this.parentElement.remove()">

                        <i class="ri-delete-bin-line"></i>

                    </button>
                `;

                uploadedFiles.appendChild(item);

            });

        }

        /* SUBMIT */


        function submitForm() {

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

            const bugDate =
                document.getElementById('bugDate').value;

            const severity =
                document.getElementById('severity').value;

            const status =
                document.getElementById('status').value;

            const project =
                document.getElementById('project').value;

            const assigned =
                document.getElementById('assigned').value;

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

            /* BUG TITLE */
            if (bugTitle === '') {

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

                return;
            }

            /* DATE */
            if (bugDate === '') {

                Swal.fire({
                    icon: 'warning',
                    title: 'Date Required',
                    text: 'Please select bug date',
                    confirmButtonColor: '#8b5cf6'
                });

                return;
            }

            /* SEVERITY */
            if (severity === '') {

                Swal.fire({
                    icon: 'warning',
                    title: 'Severity Required',
                    text: 'Please select severity',
                    confirmButtonColor: '#8b5cf6'
                });

                return;
            }

            /* STATUS */
            if (status === '') {

                Swal.fire({
                    icon: 'warning',
                    title: 'Status Required',
                    text: 'Please select status',
                    confirmButtonColor: '#8b5cf6'
                });

                return;
            }

            /* PROJECT */
            if (project === '') {

                Swal.fire({
                    icon: 'warning',
                    title: 'Project Required',
                    text: 'Please select project',
                    confirmButtonColor: '#8b5cf6'
                });

                return;
            }

            /* ASSIGNED USER */
            if (assigned === '') {

                Swal.fire({
                    icon: 'warning',
                    title: 'Assigned User Required',
                    text: 'Please assign user',
                    confirmButtonColor: '#8b5cf6'
                });

                return;
            }

            /* DESCRIPTION */
            if (bugDescription === '') {

                Swal.fire({
                    icon: 'warning',
                    title: 'Bug Description Required',
                    text: 'Please enter bug description',
                    confirmButtonColor: '#8b5cf6'
                });

                return;
            }


            /* SUCCESS */
            Swal.fire({
                icon: 'success',
                title: 'Bug Reported!',
                text: 'Bug has been reported successfully',
                confirmButtonColor: '#8b5cf6'
            }).then(() => {

                window.location.href = 'qa_bug_list.php';

            });

        }



        /* RESET */

        function resetForm() {

            document.querySelectorAll('input, textarea')
                .forEach(el => el.value = '');

            document.querySelectorAll('select')
                .forEach(el => {

                    if (el.tomselect) {

                        el.tomselect.clear();

                    } else {

                        el.selectedIndex = 0;
                    }

                });

            uploadedFiles.innerHTML = '';

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

            document.getElementById('successMsg')
                .classList.add('hidden');
        }
    </script>

</body>

</html>

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