EVOLUTION-NINJA

Edit File: addemployee.php

<?php echo view('includes/sidebar'); ?>

}

.fieldsbox {
        border-radius: 23px !important;
        padding: 5px 10px !important;
        height: 45px;
    }

.addemployeedetail {
        margin-inline: auto;
        margin-top: 15px;
    }

.addemp_page {
        width: 100%;
        padding: 20px 16px;

}

.textfields {
        border-radius: 14px;
    }

/* image content  */
    .div-img--contents {
        width: 240px;
        height: 150px;
    }

.img-wrapper {
        width: 100%;
        height: 100%;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        position: relative;
    }

.img-wrapper .img--upload {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        background-color: #D1DBFF;

}

.img-wrapper .img--upload #up-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.custom-btn {
        background-image: linear-gradient(#BD1620, #670E10);
        color: white;
        border: none;
        outline: none;
        height: 45px;
        margin-left: 15%;
        width: 70%;
        font-weight: 500;
        padding: 4px 10px;
        margin-top: 10px;
        border-radius: 20px;
    }

.emp2 {
        margin-top: -50px;
    }

@media (min-width: 768px) and (max-width: 1024px) {
        .div-img--contents {
            width: 90%;
        }

.inpfieldname {
            font-size: 15px;
        }
    }

@media only screen and (max-width:620px) {
        .fieldsbox {
            width: 100%
        }

.emp2 {
            margin-top: 100px !important;
        }

.home-section {
            height: 100%
        }

.addemployeedetail {
            margin: auto;
        }

.addemployeedetail>div {
            margin-top: 13px;
        }

.submit,
        .cancel {
            width: 110px
        }
    }
</style>
<section class="home-section fullpage">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        
    </div>
    <div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Add Employee</h1>
        </div>
    </div>
    
    <form id="employee-form">

<div class="row">

<div class="col-sm-4">
                            <label for="First_Name" class="form-label inpfieldname">First Name</label><br>
                            <input type="text" class="fieldsbox form-control" id="First_Name" name="First_Name"
                                placeholder="Enter first name" required>
                        </div>

<div class="col-sm-4">
                            <div class="div-img--contents">
                                <label for="upload-photo" class="form-label inpfieldname">Upload Department Logo</label>
                                <div class="img-wrapper">
                                    <div class="img--upload">
                                        <img src="" alt="" id="up-img" hidden>
                                        
                                    </div>
                                </div>
                                <input type="file" class="default-btn fieldsbox" name="file" id="upload-photo" hidden>
                                <button type="button" class="custom-btn btn" onclick="referDefaultBtn()">UPLOAD</button>
                            </div>
                        </div>
                    </div>

<div class="addemployeedetail row emp2">

<div class="col-sm-4">
                            <label for="Phone_Number" class="form-label inpfieldname">Phone Number</label><br>
                            <input type="tel" class="fieldsbox form-control" id="Phone_Number" name="Phone_Number"
                                placeholder="Enter phone name" required>
                        </div>

</div>

<div class="addemployeedetail row ">

<div class="col-sm-4">
                            <label for="dob" class="form-label inpfieldname">Date of Birth (dd/mm/yyyy)</label><br>
                            <input type="date" class="fieldsbox form-control" id="dob" name="dob" required>
                        </div>

<div class="col-sm-4">
                            <label for="Gender" class="form-label inpfieldname">Gender</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="Gender" name="gender"  required>
                                <option value="">Select</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>

</div>

<div class="addemployeedetail row ">
                        <div class="col-sm-4">
                            <label for="Department" class="form-label inpfieldname">Department</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="Department" name="department" required>
                                <option value="">Select</option>
                                <option value="">marketing</option>
                                <option value=""></option>
                            </select>
                        </div>

<div class="col-sm-4">
                            <label for="doj" class="form-label inpfieldname">Date of Joining (dd/mm/yyyy)</label><br>
                            <input type="date" class="fieldsbox form-control" id="doj" name="doj" required>
                        </div>
                    </div>

<div class="addemployeedetail row ">

<div class="col-sm-4">
                            <label for="Pan_Number" class="form-label inpfieldname">Pan Number</label><br>
                            <input type="text" class="fieldsbox form-control" id="Pan_Number" name="Pan_Number"
                                placeholder="Enter pan number" required>
                        </div>

<div class="col-sm-4">
                            <label for="Status" class="form-label inpfieldname">Status</label><br>
                            <select class="form-select form-control fieldsbox" aria-label="Default select example"
                                id="Status" name="status" required>
                                <option value="">Select</option>
                                <option value="To Be Start ">To Be Start</option>
                                <option value="Progress">Progress</option>
                                <option value="Completed">Completed</option>
                                <option value="UC Submitted Date">UC Submitted Date</option>
                                <option value="Handed Over Date">Handed Over Date</option>
                            </select>
                        </div>
                    </div>

<div class="addemployeedetail row ">
                        <div class="col-sm-8">
                            <label for="Address" class="form-label inpfieldname">Address</label><br>
                            <textarea name="Address" id="Address" class="form-control textfields" required></textarea>
                        </div>

</div>
                </div>

</div>
        </div>

<button type="submit" class="submit" id="app-btn">Submit</button>
            <button type="button" class="cancel">Cancel</button>
        </div>
        </div>

</form>

<div class="container">
  <table id="datatable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SL no</th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>MLA Name</th>
                            <th>District</th>
                            <th>Taluk</th>
                            <th>Address</th> 
                            <th>Action</th>
                          
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

</section>

<script>
    let defaultButton = document.querySelector(".default-btn");
    let customButton = document.querySelector(".custom-btn");
    let image = document.getElementById("up-img");
    let cancelIcon = document.querySelector(".cancel-icon");

function referDefaultBtn() {
        defaultButton.click();
    }

function cancelUpload() {
        image.src = "";
        image.hidden = true;
        defaultButton.value = "";
        cancelIcon.style.display = "none";
    }

defaultButton.addEventListener("change", function () {
        const file = this.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function () {
                const result = reader.result;
                image.hidden = false;
                image.src = result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>

</script>

<?php echo view('includes/footer'); ?>