<style>
    .carousel-item>img{
        object-fit:cover !important;
    }
    #carouselExampleControls .carousel-inner{
        height:25em !important;
    }
    #uni_modal .modal-footer{
        display:none
    }
</style>
<div class="container-fluid">
    <form id="enroll-form">
        <input type="hidden" name="id" value="">
        <input type="hidden" name="class_id" value="<?= isset($_GET['cid']) ? $_GET['cid'] : '' ?>">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label for="fullname" class="control-label">Fullname <small class="text-danger">*</small></label>
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control form-control-sm rounded-0" id="firstname" name="firstname" placeholder="First Name" required="required">
                        <input type="text" class="form-control form-control-sm rounded-0" id="middlename" name="middlename" placeholder="Middle Name (optional)">
                        <input type="text" class="form-control form-control-sm rounded-0" id="lastname" name="lastname" placeholder="Last Name" required="required">
                    </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label for="gender" class="control-label">Gender <small class="text-danger">*</small></label>
                    <select name="gender" id="gender" class="custom-select custom-select-sm rounded-0" required>
                        <option>Male</option>
                        <option>Female</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label for="dob" class="control-label">Birthday <small class="text-danger">*</small></label>
                    <input type="date" name="dob" id="dob" class="form-control form-control-sm rounded-0">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label for="contact" class="control-label">Contact # <small class="text-danger">*</small></label>
                    <input type="text" name="contact" id="contact" class="form-control form-control-sm rounded-0" required>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label for="email" class="control-label">Email</label>
                    <input type="email" name="email" id="email" class="form-control form-control-sm rounded-0">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label for="address" class="control-label">Address <small class="text-danger">*</small></label>
                    <textarea style="resize:none" rows="2" name="address" id="address" class="form-control form-control-sm rounded-0" required></textarea>
                </div>
            </div>
        </div>
        <fieldset class="border-top d-none" id="guardian-details">
            <legend>Parent or Guardian Details</legend>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label for="guardian_name" class="control-label">Name <small class="text-danger">*</small></label>
                        <input type="text" name="guardian_name" id="guardian_name" class="form-control form-control-sm rounded-0">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label for="guardian_contact" class="control-label">Contact # <small class="text-danger">*</small></label>
                        <input type="text" name="guardian_contact" id="guardian_contact" class="form-control form-control-sm rounded-0">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label for="relation" class="control-label">Relation with the Enrollee<small class="text-danger">*</small></label>
                        <input type="text" name="relation" id="relation" class="form-control form-control-sm rounded-0">
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <button class="btn btn-primary btn-block rounded-pill btn-lg bg-gradient-primary"><i class="fa fa-paper-plane"></i> Submit</button>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <button class="btn btn-light btn-block rounded-pill btn-lg bg-gradient-light border text-dark" type="button" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
            </div>
        </div>
    </form>
</div>
<script>
    $(function(){
        $('#enroll-form').submit(function(e){
			e.preventDefault();
            var _this = $(this)
			 $('.err-msg').remove();
			start_loader();
			$.ajax({
				url:_base_url_+"classes/Master.php?f=save_enroll",
				data: new FormData($(this)[0]),
                cache: false,
                contentType: false,
                processData: false,
                method: 'POST',
                type: 'POST',
                dataType: 'json',
				error:err=>{
					console.log(err)
					alert_toast("An error occured",'error');
					end_loader();
				},
				success:function(resp){
					if(typeof resp =='object' && resp.status == 'success'){
						location.reload()
					}else if(resp.status == 'failed' && !!resp.msg){
                        var el = $('<div>')
                            el.addClass("alert alert-danger err-msg").text(resp.msg)
                            _this.prepend(el)
                            el.show('slow')
                            $("html, body").scrollTop(0);
                            end_loader()
                    }else{
						alert_toast("An error occured",'error');
						end_loader();
                        console.log(resp)
					}
				}
			})
		})
        $('#dob').change(function(){
            var dob = new Date($(this).val())
            var today = new Date()
            console.log(dob.getTime(), today.getTime())
            var diff = today - dob;
            var age = Math.floor(diff / (24*60*60*1000*365.25));
            
            if(age < 18){
                $('#guardian-details').removeClass('d-none')
            }else{
                $('#guardian-details').addClass('d-none')
            }
        })
    })
</script>
