@extends('admin.layouts.mainlayout')
@section('content')
<div class="container">
    <h2 class="mb-4">New Teacher Biodata Form</h2>
    
    <form id="form" name="form" action="{{ route('addteacher') }}" method="POST" enctype="multipart/form-data">
        @csrf

           <!-- Login Information -->
           <div class="card mb-3">
			    
				<div class="card-body">
                    <div class="card-header">Login Information</div>
					<div class="mb-3">
					<label class="form-label">UserName</label>
					<input type="text" name="name" class="form-control" required>
				</div>
                <div class="card-body">
					<div class="mb-3">
					<label class="form-label">Password</label>
					<input type="text" name="password" class="form-control" id="password" required>
				</div>
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" required>
                </div>
            </div>
	        <!-- Personal Information -->
		        <div class="card mb-3">
			    <div class="card-header">Personal Information</div>
				<div class="card-body">
					<div class="mb-3">
					<label class="form-label">First Name</label>
					<input type="text" name="firstname" class="form-control" id="firstname" required>
				</div>
                <div class="card-body">
					<div class="mb-3">
					<label class="form-label">Other Name</label>
					<input type="text" name="othername" id="othername" class="form-control" required>
				</div>
                <div class="card-body">
					<div class="mb-3">
					<label class="form-label">Sur Name</label>
					<input type="text" name="surname" id="surname" class="form-control" required>
				</div>
                <div class="mb-3">
                    <label class="form-label">Date of Birth</label>
                    <input type="date" name="dob" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Gender</label>
                    <select name="gender" class="form-control" required>
                        <option value="">Select</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        <option value="Other">Other</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Nationality</label>
                    <input type="text" name="nationality" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Profile Photo</label>
                    <input type="file" id="photo" name="photo" class="form-control" accept="image/*">
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="card mb-3">
            <div class="card-header">Contact Information</div>
            <div class="card-body">
                 <div class="mb-3">
                    <label class="form-label">Phone Number</label>
                    <input type="text" name="phone" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-control" rows="2" required></textarea>
                </div>
            </div>
        </div>

        <!-- Academic & Professional Details -->
        <div class="card mb-3">
            <div class="card-header">Academic & Professional Details</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Highest Qualification</label>
                    <input type="text" name="qualification" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Subject of Expertise</label>
                    <input type="text" name="subject" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Years of Experience</label>
                    <input type="number" name="experience" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Certifications</label>
                    <textarea name="certifications" class="form-control" rows="2"></textarea>
                </div>
            </div>
        </div>

        <!-- Employment Details -->
        <div class="card mb-3">
            <div class="card-header">Employment Details</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Joining Date</label>
                    <input type="date" name="joining_date" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Designation</label>
                    <input type="text" name="designation" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Department</label>
                    <input type="text" name="department" class="form-control" required>
                </div>
            </div>
        </div>

        <!-- Emergency Contact -->
        <div class="card mb-3">
            <div class="card-header">Emergency Contact</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Emergency Contact Name</label>
                    <input type="text" name="emergency_name" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Relationship</label>
                    <input type="text" name="emergency_relationship" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Emergency Contact Number</label>
                    <input type="text" name="emergency_phone" class="form-control" required>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
<script type="text/javascript">
	const teacherForm = document.getElementById("form");

       var formData = new FormData(teacherForm);
       console.log('There are '+formData.length+ 'Elements ');
//submit the form using Ajax
document.getElementById("form").addEventListener("submit", function(event, formData){

	event.preventDefault();
	//this.submit();
    console.log(formData);
	fetch("/public/admin/addteacher", {
            method: "POST",
            body: formData
        })
        .then(response => response.json())
        .then(data => console.log("Upload success:", data))
	.catch(error => console.error("Upload error:", error));
    });
// get the pictures and compress it
	//const teacherForm = document.getElementById("form");
	//const frmdata = new formData(teacherForm);

	//const pic = getElementById("photo");
	//clear the selected photo
	//


//});
//the file is compressed after selection
document.getElementById("photo").addEventListener("change", function (event) {
 alert("Compressing the file");

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

       compressImage(file, 0.7, (compressedBlob) => {
        formData.append("image", compressedBlob, "compressed.jpg");
	alert("the file has been compressed");
	alert(formData.image);
	console.log(formData);
        // Upload to server
	//
       /*  fetch("/upload", {
            method: "POST",
            body: formData
        })
        .then(response => response.json())
        .then(data => console.log("Upload success:", data))
	.catch(error => console.error("Upload error:", error));
    }); */
})});


    function compressImage(file, quality, callback) {
    const reader = new FileReader();
    
    reader.readAsDataURL(file);
    reader.onload = (event) => {
        const img = new Image();
        img.src = event.target.result;
        
        img.onload = () => {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");

            // Set new dimensions (adjust as needed)
            const width = img.width > 1000 ? 1000 : img.width;
            const height = (img.height / img.width) * width;
            
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
            
            // Convert to Blob with quality factor
            canvas.toBlob((blob) => {
                callback(blob);
            }, "image/jpeg", quality); // Adjust quality (0.1 to 1)
        };
    };
}
</script>
@endsection