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

<style>
    .tabs .nav-link {
        border: none;
        padding: 12px 20px;
        font-weight: 500;
        color: #6c757d;
    }

    .tabs .nav-link.active {
        color: #0d6efd;
        border-bottom: 3px solid #0d6efd;
    }
    .role-dropdown {
        left: 13px;
        width: 94% !important;
    }

</style>
<style>

.small-swal{
    width:320px !important;
    border-radius:14px !important;
    padding:1rem !important;
}

.small-swal-title{
    font-size:18px !important;
    margin-top:5px !important;
}

.small-swal-text{
    font-size:14px !important;
}

.small-swal-button{
    font-size:13px !important;
    padding:8px 18px !important;
    border-radius:8px !important;
}

.small-swal-icon{
    transform:scale(0.75);
    margin:10px auto !important;
}

</style>

<div class="dashboard-main-body">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Add Complaint</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="complaint.php" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Listing">
            <iconify-icon icon="ic:baseline-arrow-back" class="icon text-xl line-height-1"></iconify-icon>
        </a>
    </div>
    <div class="container-fluid mt-3">

        <ul class="nav nav-tabs tabs mb-4">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#complaintTab">
                    Complaint
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#residentTab">
                    Resident
                </a>
            </li>
        </ul>

        
        <div class="tab-content mt-4">
            
            <!-------------------- complaint Tab------------------>
            <div class="tab-pane fade show active" id="complaintTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">Add Complaint</h6>

                        <form method="post" id="complaintForm" enctype="multipart/form-data">
                            <div class="row gy-3 mt-4">

                                <div class="col-sm-4">
                                    <label class="form-label">Complaint Title <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control" placeholder="Enter Complaint Title" />
                                </div>
                                
                                <div class="col-sm-4 position-relative">
                                    <label class="form-label">Complaint Type<span class="text-danger">*</span></label>
                                    <input type="text" id="search" name="role"  placeholder="Search for Category" class="form-control" autocomplete="off" />
                                    <ul id="roleDropdown" class="role-dropdown">
                                        <li>Maintenance</li>
                                        <li>Security</li>
                                        <li>Parking</li>
                                        <li>Water Supply</li>
                                        <li>Other</li>
                                    </ul>
                                </div>
                                
                                <div class="col-sm-4">
                                    <label class="form-label">Date & Time of Complaint <span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="date_of_complaint" class="form-control"  />
                                </div>
                                <div class="col-sm-4">
    <label class="form-label">
        Upload Complaint Image
    </label>

    <input 
        type="file" 
        name="complaint_image"
        class="form-control"
        accept="image/*"
    >
</div>

    <img 
        id="previewImage"
        src=""
        alt="Preview"
        style="
            display:none;
            width:120px;
            height:120px;
            object-fit:cover;
            border-radius:12px;
            margin-top:10px;
            border:1px solid #ddd;
            padding:4px;
            background:#fff;
        "
    >


<div class="col-sm-4 position-relative">

    <label class="form-label">
        Priority <span class="text-danger">*</span>
    </label>

    <input 
        type="text"
        id="prioritySearch"
        name="priority"
        placeholder="Search Priority"
        class="form-control"
        autocomplete="off"
    />

    <ul id="priorityDropdown" class="role-dropdown">
        <li>Low</li>
        <li>Medium</li>
        <li>High</li>
        <li>Urgent</li>
    </ul>

</div>
                                <div class="col-sm-12 mb-4">
                                    <label class="form-label">Description <span class="text-danger">*</span></label>
                                    <textarea name="description" class="form-control" rows="4" placeholder="Enter Complaint Description" ></textarea>
                                </div>
                                
                
                                <div class="text-end mt-4">
                                    <button type="submit" class="btn btn-primary-600">
                                        <i class="bi bi-floppy"></i>
                                    </button>
                                </div>

                            </div>
                        </form>

                    </div>
                </div>
            </div>
            
             <!-------------------- Resident Tab------------------>
            <div class="tab-pane fade show" id="residentTab">
                <div class="card">
                    <div class="card-body">

                        <h6 class="mb-4 text-xl">Add Resident</h6>

                        <form method="post" id="residentForm">
                            <div class="row gy-3 mt-4">
                                
                                <div class="col-sm-4">
                                    <label class="form-label">Resident Name <span class="text-danger">*</span></label>
                                    <input type="text" name="resident_name" class="form-control" placeholder="Enter Resident Name"  />
                                </div>
                                
                                 <div class="col-sm-4">
                                    <label class="form-label"> Flat/Unit No. <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Flat/Unit Visiting" >
                                </div>
                                
                                <div class="col-sm-4">
                                    <label class="form-label">Mobile No <span class="text-danger">*</span></label>
                                   <input type="tel" name="mobile" class="form-control" placeholder="Enter Mobile Number" maxlength="10" pattern="^\d{10}$" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')" >
                                </div>
                                
                                <div class="col-sm-4">
                                    <label class="form-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="form-control" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Za-z]{2,}$" placeholder="Enter Email" >
                                </div>

                                
                                <div class="text-end mt-5">
                                    <button type="submit" class="btn btn-primary-600">
                                        <i class="bi bi-floppy"></i>
                                    </button>
                                </div>

                            </div>
                        </form>

                    </div>
                </div>
            </div>

        </div>
        
    </div>
</div>


<script>

function showError(message){

    Swal.fire({
        icon: 'error',
        title: 'Validation Error',
        text: message,
        confirmButtonColor: '#0d6efd',
        confirmButtonText: 'OK',
        customClass:{
        popup:'small-swal',
        title:'small-swal-title',
        htmlContainer:'small-swal-text',
        confirmButton:'small-swal-button',
        icon:'small-swal-icon'
    },
    });

}

function showSuccess(form){

    Swal.fire({
        icon: 'success',
        title: 'Success',
        text: 'Form submitted successfully!',
        confirmButtonColor: '#0d6efd',
        confirmButtonText: 'OK',
            customClass:{
        popup:'small-swal',
        title:'small-swal-title',
        htmlContainer:'small-swal-text',
        confirmButton:'small-swal-button',
        icon:'small-swal-icon'
    },
    }).then(() => {

        form.submit();

    });

}

</script>

<script>

/* Complaint Form Validation */
document.getElementById('complaintForm').addEventListener('submit', function(e){

    e.preventDefault();

    let title = this.title.value.trim();

    let category = this.role.value.trim();

    let date = this.date_of_complaint.value;

    let description = this.description.value.trim();
    let priority = this.priority.value.trim();

    let image = this.complaint_image.files[0];

    if(title === ''){

        return showError('Complaint title is required');

    }

    if(category === ''){

        return showError('Please select complaint category');

    }

    if(date === ''){

        return showError('Please select complaint date & time');

    }

    if(description === ''){

        return showError('Description is required');

    }
    
    if(priority === ''){

    return showError('Please select priority');

}

    /* Image Validation */

    if(image){

        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'image/jpg',
            'image/webp'
        ];

        if(!allowedTypes.includes(image.type)){

            return showError('Only JPG, PNG and WEBP images allowed');

        }

        if(image.size > 2 * 1024 * 1024){

            return showError('Image size must be less than 2MB');

        }

    }

    showSuccess(this);

});

</script>

<script>

/* Priority Searchable Dropdown */

document.addEventListener('DOMContentLoaded', function () {

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

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

    const priorityItems = priorityDropdown ? priorityDropdown.querySelectorAll('li') : [];

    function filterPriorityDropdown() {

        const value = prioritySearch.value.toLowerCase().trim();

        let visibleCount = 0;

        priorityItems.forEach(item => {

            if(item.textContent.toLowerCase().includes(value)){

                item.style.display = 'block';

                visibleCount++;

            }else{

                item.style.display = 'none';

            }

        });

        priorityDropdown.style.display = visibleCount ? 'block' : 'none';

    }

    if(prioritySearch && priorityDropdown){

        prioritySearch.addEventListener('focus', () => {

            priorityDropdown.style.display = 'block';

        });

        prioritySearch.addEventListener('input', filterPriorityDropdown);

        priorityItems.forEach(item => {

            item.addEventListener('click', function(){

                prioritySearch.value = this.textContent;

                priorityDropdown.style.display = 'none';

            });

        });

        document.addEventListener('click', function(e){

            if(
                !e.target.closest('#prioritySearch') &&
                !e.target.closest('#priorityDropdown')
            ){

                priorityDropdown.style.display = 'none';

            }

        });

    }

});

</script>

<!--searchable dropdown script-->
<script>
document.addEventListener('DOMContentLoaded', function () {

    const search = document.getElementById('search');
    const dropdown = document.getElementById('roleDropdown');
    const roleItems = dropdown ? dropdown.querySelectorAll('li') : [];

    function showDropdown() {
        if (dropdown) dropdown.style.display = 'block';
    }

    function hideDropdown() {
        if (dropdown) dropdown.style.display = 'none';
    }

    function showAllItems() {
        roleItems.forEach(item => item.style.display = 'block');
    }

    function filterDropdown() {
        const value = search.value.toLowerCase().trim();
        if (!dropdown) return;

        if (value === '') {
            hideDropdown();
            return;
        }

        let visibleCount = 0;
        roleItems.forEach(item => {
            if (item.textContent.toLowerCase().includes(value)) {
                item.style.display = 'block';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });

        dropdown.style.display = visibleCount ? 'block' : 'none';
    }

    if (search && dropdown) {

        // Show dropdown on focus
        search.addEventListener('focus', () => {
            showAllItems();
            showDropdown();
        });

        // Filter while typing
        search.addEventListener('input', filterDropdown);

        // Select item
        roleItems.forEach(item => {
            item.addEventListener('click', function () {
                search.value = this.textContent;
                hideDropdown();
            });
        });

        // Hide when clicking outside
        document.addEventListener('click', function (e) {
            if (!e.target.closest('#search') && !e.target.closest('#roleDropdown')) {
                hideDropdown();
            }
        });
    }

});
</script>

<script>
document.querySelector('input[name="complaint_image"]').addEventListener('change', function(e){

    const file = e.target.files[0];

    if(file){

        const reader = new FileReader();

        reader.onload = function(event){

            const img = document.getElementById('previewImage');

            img.src = event.target.result;

            img.style.display = 'block';
        }

        reader.readAsDataURL(file);
    }

});
</script>

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