<?php
$meta_qry = $conn->query("SELECT * FROM `individual_meta` where `individual_id` ='{$_settings->userdata('id')}'");
while($row = $meta_qry->fetch_assoc()){
    ${$row['meta_field']} = $row['meta_value'];
}
?>
<div class="content py-5 bg-gradient-primary px-4">
    <div class="container-fluid">
        <div class="d-flex align-items-center">
            <h2 class="w-auto mr-4">Account Verification</h2>
            <div>
                <?php
                switch($_settings->userdata('status')){
                    case 0:
                        echo '<span class="badge badge-light bg-gradient-light border text-sm px-3 rounded-pill"><i class="fa fa-circle"></i> Waiting for Verification</span>';
                        break;
                    case 1:
                        echo '<span class="badge badge-light bg-gradient-light border text-sm px-3 rounded-pill"><i class="fa fa-check"></i> Verified</span>';
                        break;
                    case 2:
                        echo '<span class="badge badge-light bg-gradient-light border text-sm px-3 rounded-pill"><i class="fa fa-times"></i> Denied</span>';
                        break;
                    case 3:
                        echo '<span class="badge badge-light bg-gradient-light border text-sm px-3 rounded-pill"><i class="fa fa-exclamation-circle"></i> Blocked</span>';
                        break;
                }
                ?>
            </div>
        </div>
    </div>
</div>
<div class="row justify-content-center" style="margin-top:-3em">
    <div class="col-lg-8 col-md-10 col-sm-12 col-xs-12">
        <div class="card card-outline-primary rounded-0 shadow">
            <div class="card-body">
                <div class="container-fluid">
                    <?php if($_settings->chk_flashdata('fixed_success')): ?>
                        <div class="alert alert-success rounded-0">
                            <div class="d-flex w-100 align-items-center">
                                <div class="col-11"><?= $_settings->flashdata('fixed_success') ?></div>
                                <div class="col-1 text-right">
                                    <button class="border-0 btn-sm bg-transparent text-light" type="button" onclick="$(this).closest('.alert').remove()"><i class="fa fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                        <script>
                            $(function(){
                                setTimeout(() => {
                                    $('html, body').scrollTop(0)
                                }, 300);
                            })
                        </script>
                    <?php endif; ?>
                    <form action="" id="manage-user-meta">
                        <input type="hidden" name="individual_id" value="<?= $_settings->userdata('id') ?>">
                        <div class="form-group col-lg-8 col-md-10 col-sm-12 col-xs-12">
                            <label for="firstname" class="control-label">First Name</label>
                            <input type="text" class="form-control form-control-sm rounded-0" value="<?= $_settings->userdata('firstname') ?>" id="firstname" name="firstname" disabled>
                        </div>
                        <div class="form-group col-lg-8 col-md-10 col-sm-12 col-xs-12">
                            <label for="middlename" class="control-label">Middle Name</label>
                            <input type="text" class="form-control form-control-sm rounded-0" value="<?= $_settings->userdata('middlename') ?>" id="middlename" name="middlename" disabled>
                        </div>
                        <div class="form-group col-lg-8 col-md-10 col-sm-12 col-xs-12">
                            <label for="lastname" class="control-label">Last Name</label>
                            <input type="text" class="form-control form-control-sm rounded-0" value="<?= $_settings->userdata('lastname') ?>" id="lastname" name="lastname" disabled>
                        </div>
                        <div class="form-group col-lg-8 col-md-10 col-sm-12 col-xs-12">
                            <label for="gender" class="control-label">Gender</label>
                            <select class="form-control form-control-sm rounded-0" id="gender" name ="gender" required>
                                <option value="Male" <?= isset($gender) && $gender == 'Male' ? "selected" : '' ?>>Male</option>
                                <option value="Female" <?= isset($gender) && $gender == 'Female' ? "selected" : '' ?>>Female</option>
                            </select>
                        </div>
                        <div class="form-group col-lg-8 col-md-10 col-sm-12 col-xs-12">
                            <label for="contact" class="control-label">Contact #</label>
                            <input type="text" class="form-control form-control-sm rounded-0" value="<?= isset($contact) ? $contact : '' ?>" id="contact" name="contact" required>
                        </div>
                        <div class="form-group col-lg-8 col-md-10 col-sm-12 col-xs-12">
                            <label for="email" class="control-label">Email</label>
                            <input type="text" class="form-control form-control-sm rounded-0" value="<?= $_settings->userdata('email') ?>" id="email" name="email" disabled>
                        </div>
                        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <label for="address" class="control-label">Address</label>
                            <textarea rows="3" class="form-control form-control-sm rounded-0" id="address" name="address" required><?= isset($address) ? $address : '' ?></textarea>
                        </div>
                        <div class="form-group col-lg-8 col-md-10 col-sm-12 col-xs-12">
                            <label for="vaccine_card_path" class="control-label">Upload an Image of your Vaccine Card</label>
                            <div class="custom-file custom-file-sm">
                                <input type="file" id="vaccine_card_path" class="custom-file-input rounded-0"  name="vaccine_card_path" accept="image/png, image/jpeg" onchange="displayImg(this,$(this))">
                                <label for="vaccine_card_path" class="custom-file-label  rounded-0">Choose File</label>
                            </div>
                        </div>
                        <div class="form-group col-lg-6 col-md-8 col-sm-12 col-xs-12">
                            <img src="<?= validate_image(isset($vaccine_card_path) ? $vaccine_card_path : '') ?>" alt="" class="img-thumbnail" id="vaccine-img">
                        </div>
                    </form>
                </div>
            </div>
            <div class="card-footer py-1 text-center">
                <button class="btn btn-primary btn-sm btn-flat bg-gradient-primary" form="manage-user-meta"><i class="fa fa-save"></i> Update Data</button>
            </div>
        </div>
    </div>
</div>
<script>
    function displayImg(input,_this) {
	    if (input.files && input.files[0]) {
	        var reader = new FileReader();
	        reader.onload = function (e) {
	        	$('#vaccine-img').attr('src', e.target.result);
                _this.siblings('label').text(input.files[0].name)
	        }

	        reader.readAsDataURL(input.files[0]);
	    }else{
			$('#vaccine-img').attr('src', "<?php echo validate_image(isset($meta['avatar']) ? $meta['avatar'] :'') ?>");
            _this.siblings('label').text('Choose File')
		}
	}
    $(function(){
        $('#manage-user-meta').submit(function(e){
            e.preventDefault()
            var _this = $(this)
            $('.err-msg').remove()
            var el = $('<div>')
                el.addClass('alert alert-danger err-msg')
                el.hide()
            if(_this[0].checkValidity() == false)
            _this[0].reportValidity();
            start_loader()
            $.ajax({
                url:_base_url_+"classes/Users.php?f=update_user_meta",
                method:'POST',
                type:'POST',
                cache:false,
                contentType:false,
                processData:false,
                data:new FormData(_this[0]),
                dataType:'json',
                error:err=>{
                    console.error(err)
                    el.text('An error occurred while updating data.')
                    _this.prepend(el)
                    el.show('slow')
                    $('html, body').scrollTop(0)
                    end_loader()
                },
                success:function(resp){
                    if(resp.status == 'success'){
                        location.reload()
                    }else if(!!resp.msg){
                        el.html(resp.msg)
                        _this.prepend(el)
                        el.show('slow')
                        $('html, body').scrollTop(0)
                    }else{
                        el.text('An error occurred while updating data.')
                        _this.prepend(el)
                        el.show('slow')
                        $('html, body').scrollTop(0)
                    }
                    end_loader()
                }

            })
        })
    })
</script>