
<?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;
    }
}
.preview-wrapper{
    position:relative;
    display:inline-block;
}

.preview-img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #ddd;
}

.remove-icon{
    position:absolute;
    top:-8px;
    right:-8px;
    width:24px;
    height:24px;
    background:#dc3545;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:24px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.remove-icon:hover{
    background:#bb2d3b;
}
</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 Staff</h6>
    </div>

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

        <a href="staff.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 Staff Details
                </h6>

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

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

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

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

                            <input type="text"
                                   class="form-control"
                                   name="staff_name"
                                   placeholder="Staff Name">

                        </div>
                        
                        <!-- Salary -->
                        <div class="col-sm-4">

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

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

                        </div>

                        <!-- Department -->
                        <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="Security">Security</option>
                                <option value="Housekeeping">Housekeeping</option>
                                <option value="Maintenance">Maintenance</option>
                                <option value="Electrician">Electrician</option>
                                <option value="Plumber">Plumber</option>
                                <option value="Gardener">Gardener</option>
                                <option value="CCTV Operator">CCTV Operator</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>

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

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

                            <input type="date"
                                   name="joining"
                                   class="form-control">

                        </div>

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

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

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

                        </div>

                        <!-- PROFILE PHOTO -->
<div class="col-md-4">
    <label class="form-label">
        Profile Photo <span class="text-danger">*</span>
    </label>

    <input type="file"
           id="profilePhoto"
           name="profile_photo"
           accept="image/*"
           class="form-control">

<div class="preview-wrapper mt-2" id="profileWrapper" style="display:none;">
    
    <img id="profilePreview"
         src=""
         class="preview-img">

    <span class="remove-icon"
          onclick="removeImage('profilePhoto','profilePreview','profileWrapper')">
        &times;
    </span>

</div>
</div>

<!-- AADHAAR CARD -->
<div class="col-md-4">
    <label class="form-label">
        Aadhaar Card <span class="text-danger">*</span>
    </label>

    <input type="file"
           id="aadhaarPhoto"
           name="aadhaar_photo"
           accept="image/*,.pdf"
           class="form-control">

<div class="preview-wrapper mt-2" id="aadhaarWrapper" style="display:none;">
    
    <img id="aadhaarPreview"
         src=""
         class="preview-img">

    <span class="remove-icon"
          onclick="removeImage('aadhaarPhoto','aadhaarPreview','aadhaarWrapper')">
        &times;
    </span>

</div>
</div>

<!-- PAN CARD -->
<div class="col-md-4">
    <label class="form-label">
        PAN Card <span class="text-danger">*</span>
    </label>

    <input type="file"
           id="panPhoto"
           name="pan_photo"
           accept="image/*,.pdf"
           class="form-control">

<div class="preview-wrapper mt-2" id="panWrapper" style="display:none;">
    
    <img id="panPreview"
         src=""
         class="preview-img">

    <span class="remove-icon"
          onclick="removeImage('panPhoto','panPreview','panWrapper')">
        &times;
    </span>

</div>
</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>
<script>

function previewImage(inputId, previewId, wrapperId){

    const input = document.getElementById(inputId);

    input.addEventListener('change', function(){

        const file = this.files[0];

        if(!file) return;

        const reader = new FileReader();

        reader.onload = function(e){

            document.getElementById(previewId).src = e.target.result;
            document.getElementById(wrapperId).style.display = 'inline-block';

        };

        reader.readAsDataURL(file);
    });
}

function removeImage(inputId, previewId, wrapperId){

    document.getElementById(inputId).value = '';
    document.getElementById(previewId).src = '';
    document.getElementById(wrapperId).style.display = 'none';

}

previewImage('profilePhoto','profilePreview','profileWrapper');
previewImage('aadhaarPhoto','aadhaarPreview','aadhaarWrapper');
previewImage('panPhoto','panPreview','panWrapper');

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