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

<style>

/* =========================
   SWEET ALERT
========================= */
.small-swal {
    width: 320px !important;
    border-radius: 14px !important;
    padding: 1rem !important;
}

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

.small-swal-text {
    font-size: 14px !important;
    color: #6b7280 !important;
}

.small-swal .swal2-icon {
    transform: scale(0.72);
    margin: 8px auto !important;
}

.small-swal .swal2-confirm {
    padding: 7px 18px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    background: #4a63ff !important;
}

/* =========================
   MULTIPLE IMAGE UPLOAD
========================= */
.upload-multiple-box{
    width:100%;
    max-width:500px;
    min-height:180px;
    border:2px dashed #d0d5dd;
    border-radius:16px;
    background:#f9fafb;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:0.3s;
    padding:24px;
}

.upload-multiple-box:hover{
    border-color:#4a63ff;
    background:#f5f8ff;
}

.upload-content{
    width:100%;
}

.upload-icon{
    width:90px;
    opacity:0.7;
    margin-bottom:14px;
}

.upload-text{
    font-size:22px;
    color:#4b5563;
    font-weight:500;
    line-height:1.6;
}

/* PREVIEW IMAGES */
.preview-item img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:14px;
    border:1px solid #e5e7eb;
    background:#fff;
}

/* TABLET */
@media(max-width:768px){

    .upload-multiple-box{
        min-height:190px;
        padding:20px;
    }

    .upload-icon{
        width:70px;
    }

    .upload-text{
        font-size:17px;
    }

    .preview-item img{
        height:150px;
    }
}

/* MOBILE */
@media(max-width:576px){

    .upload-multiple-box{
        min-height:160px;
        padding:16px;
    }

    .upload-icon{
        width:55px;
        margin-bottom:10px;
    }

    .upload-text{
        font-size:14px;
        line-height:1.5;
    }

    .preview-item img{
        height:130px;
    }
}

</style>

<div class="dashboard-main-body">

    <!-- PAGE TITLE -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Add Visitor</h6>
    </div>

    <!-- BACK BUTTON -->
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">

        <a href="visitor_record.php"
           class="btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center">

            <iconify-icon icon="ic:baseline-arrow-back"
                          class="icon text-xl line-height-1">
            </iconify-icon>

        </a>

    </div>

    <div class="container-fluid mt-3">

        <div class="card">

            <div class="card-body">

                <h6 class="mb-4 text-xl">
                    Fill Visitor Details
                </h6>

                <form method="post" id="visitorForm">

                    <div class="row gy-3 mt-4">

                        <!-- VISITOR NAME -->
                        <div class="col-sm-4">

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

                            <input type="text"
                                   class="form-control"
                                   name="visitor_name"
                                   placeholder="Visitor Name">

                        </div>

                        <!-- PURPOSE -->
                        <div class="col-sm-4">

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

                            <select name="purpose" class="form-select">

                                <option value="">Select Purpose</option>
                                <option value="Delivery">Delivery</option>
                                <option value="Guest">Guest</option>
                                <option value="Maintenance">Maintenance</option>
                                <option value="Meeting">Meeting</option>
                                <option value="Service">Service</option>
                                <option value="Courier">Courier</option>
                                <option value="Other">Other</option>

                            </select>

                        </div>

                        <!-- MOBILE -->
                        <div class="col-sm-4">

                            <label class="form-label">
                                Mobile No. <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="mobile"
                                   class="form-control"
                                   placeholder="Mobile No"
                                   maxlength="10"
                                   inputmode="numeric"
                                   oninput="this.value=this.value.replace(/[^0-9]/g,'')">

                        </div>

                        <!-- ENTRY TIME -->
                        <div class="col-sm-4">

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

                            <input type="datetime-local"
                                   name="in_time"
                                   class="form-control">

                        </div>

                        <!-- FLAT -->
                        <div class="col-sm-4">

                            <label class="form-label">
                                Visiting Flat/Unit <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="flat"
                                   class="form-control"
                                   placeholder="Visiting Flat/Unit">

                        </div>

                        <!-- EXIT TIME -->
                        <div class="col-sm-4">

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

                            <input type="datetime-local"
                                   name="out_time"
                                   class="form-control">

                        </div>

                        <!-- VEHICLE -->
                        <div class="col-sm-4">

                            <label class="form-label">
                                Vehicle No. <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="vehicle_no"
                                   class="form-control"
                                   placeholder="Vehicle No">

                        </div>

                        <!-- REMARK -->
                        <div class="col-sm-4">

                            <label class="form-label">
                                Remark
                            </label>

                            <input type="text"
                                   class="form-control"
                                   name="remark"
                                   placeholder="Remark">

                        </div>

                        <!-- PHOTO SECTION -->
                        <div class="col-12 d-flex flex-column align-items-start">

                            <label class="form-label mb-2">
                                Visitor Photos <span class="text-danger">*</span>
                            </label>

                            <!-- HIDDEN FILE INPUT -->
                            <input type="file"
                                   id="visitorPhotoInput"
                                   accept="image/*"
                                   multiple
                                   hidden>

                            <!-- UPLOAD BOX -->
                            <div class="upload-multiple-box"
                                 onclick="document.getElementById('visitorPhotoInput').click()">

                                <div class="upload-content text-center">

                                    <img src="https://cdn-icons-png.flaticon.com/512/685/685655.png"
                                         class="upload-icon">

                                    <p class="upload-text mb-0">
                                        Click to Upload Multiple Photos
                                    </p>

                                </div>

                            </div>

                            <!-- IMAGE PREVIEW -->
                            <div id="previewContainer"
                                 class="row g-3 mt-3">
                            </div>

                            <!-- BUTTON -->
                            <button type="button"
                                    class="btn btn-light border mt-3"
                                    onclick="document.getElementById('visitorPhotoInput').click()">

                                Upload Photos

                            </button>

                        </div>

                        <!-- SAVE BUTTON -->
                        <div class="col-12 text-end mt-4">

                            <button type="submit"
                                    class="btn btn-primary-600">

                                <i class="bi bi-floppy"></i> Save

                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

<script>

/* =========================
   SWEET ALERT FUNCTIONS
========================= */
function showError(msg){

    Swal.fire({
        icon:'error',
        title:'Missing Information',
        text:msg,
        confirmButtonColor:'#4a63ff',
        customClass:{
            popup:'small-swal',
            title:'small-swal-title',
            htmlContainer:'small-swal-text'
        }
    });

}

function showSuccess(form){

    Swal.fire({
        icon:'success',
        title:'Success',
        text:'Form submitted successfully!',
        confirmButtonColor:'#4a63ff',
        customClass:{
            popup:'small-swal',
            title:'small-swal-title',
            htmlContainer:'small-swal-text'
        }
    }).then(()=>{
        form.submit();
    });

}

/* =========================
   FORM VALIDATION
========================= */
document.getElementById('visitorForm')
.addEventListener('submit', function(e){

    e.preventDefault();

    const name = this.visitor_name.value.trim();
    const mobile = this.mobile.value.trim();
    const vehicle = this.vehicle_no.value.trim();
    const purpose = this.purpose.value.trim();

    if(!name){
        return showError('Visitor name is required');
    }

    if(!/^[0-9]{10}$/.test(mobile)){
        return showError('Enter valid 10-digit mobile number');
    }

    if(!vehicle){
        return showError('Vehicle number is required');
    }

    if(!purpose){
        return showError('Purpose is required');
    }

    showSuccess(this);

});

/* =========================
   MULTIPLE IMAGE PREVIEW
========================= */
document.getElementById('visitorPhotoInput')
.addEventListener('change', function(e){

    const files = e.target.files;

    if(!files.length) return;

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

    previewContainer.innerHTML = '';

    Array.from(files).forEach(file => {

        const reader = new FileReader();

        reader.onload = function(event){

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

            col.className =
            'col-6 col-sm-4 col-md-3 col-lg-2 preview-item';

            col.innerHTML = `
                <img src="${event.target.result}">
            `;

            previewContainer.appendChild(col);

        };

        reader.readAsDataURL(file);

    });

    Swal.fire({
        icon:'success',
        title:'Photos Uploaded',
        text:files.length + ' photos selected successfully',
        confirmButtonColor:'#4a63ff',
        customClass:{
            popup:'small-swal',
            title:'small-swal-title',
            htmlContainer:'small-swal-text'
        }
    });

});

</script>

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

