<style type="text/css">
#common_err {
    color: red;
    text-align: center;
}
label.error {
    color : red;
}
.field-container {
    margin : 0 0 20px !important;
}
.disabledByMe{
  pointer-events: none;
}
</style>
<div class="row dash-main-row">
    <div class="col-md-10 col-lg-10 p-0">
        <div class="mt-3 mb-3">
            <h5><?= $option ?></h4>
        </div>
        <div class="block-head">
            <h3 class="dash-tab-head">Assign Rooms</h3>
            <div id="common_err"></div>     
        </div>
        <form id="assign-student-form" action="<?php echo base_url() ?>assign-students/<?= $student_id ?>" method="POST">
            <div class="row">
             <div class="col-md-5">
                <?php
                if($status == 'Update') {
                    echo '<input type="hidden" name="hms_student_id" id="hms_student_id">';
                }
                ?>

                <div class="field-container">
                    <label>Block name <span style="color:red">*</span></label>
                    <select id="block" name="block_id" onChange="getData(this.value,'hms_floors','block_id','#floor','floor_name')" class="form-control assign-select-box">
                        <option selected value="">Select Block</option>
                        <?php foreach($blocks as $key => $value) { ?>
                            <option value="<?= $value['id'] ?>"><?= $value['block_name'] ?></option>
                        <?php } ?>
                    </select>
                </div>

                <div class="field-container">
                    <label>Room name<span style="color:red">*</span></label>
                    <select id="rooms" onChange="getData(this.value,'hms_beds','room_id','#beds','bed_name','yes')" name="room_id" class="form-control assign-select-box">
                     <option selected value="">Select Room</option>
                 </select>
             </div>

             <div class="field-container">
                 <label>Food type<span style="color:red">*</span></label>
                 <select id="food"  readonly name="food_type" class="form-control disabledByMe assign-select-box">
                    <?php if($food_type == 'Veg') {
                        echo '<option selected value="Veg">Veg</option>';
                        echo '<option value="Non-Veg">Non-Veg</option>';
                    } else {
                        echo '<option  value="Veg">Veg</option>';
                        echo '<option selected value="Non-Veg">Non-Veg</option>';
                    } ?>
                     
                     
                 </select>
             </div>


         </div>
         <div class="col-md-5">
            <div class="field-container">
                <label>Floor name<span style="color:red">*</span></label>
                <select id="floor" onChange="getData(this.value,'hms_rooms','room_floor_id','#rooms','room_name')" name="floor_id" class="form-control assign-select-box">
                    <option selected value="">Select Floor</option>
                </select>
            </div>


            <div class="field-container">
                <label>Bed name<span style="color:red">*</span></label>
                <select id="beds" name="bed_id" class="form-control assign-select-box">
                    <option selected value="">Select Bed</option>
                </select>
            </div>
        </div>
    </div>

    <div class="mt-3 mb-3">
        <?php
        if($status == 'Update') { ?>
            <button type="submit" class="btn btn-primary student-update-btn">Update</button>
        <?php } else { ?>
            <button type="submit" class="btn btn-primary student-update-btn">Assign</button>
        <?php } ?>

        <a href="<?php echo base_url() ?>students" class="btn btn-dark mt-0 ml-2 deleted-btn">Back</a>
    </div>
</form>
</div>
</div>

</div>

<script>
    const getData = function(val,table,column,displayId,item,bed_clause='') {
        $('#common_err').hide();
        $.ajax({
            url : '<?php echo base_url() ?>' +  'HmsAdmin/ajax_get_rows',
            data : {
                id : val,
                table : table,
                column : column,
                bed_clause : bed_clause
            },
            type : 'POST',
            async : false,
            success: function(data){

                if(!data){
                    $('#common_err').show();
                    $('#common_err').text('Selected Block has not been fully assigned with Floor or Rooms or Beds');
                } else {
                    data = JSON.parse(data);
                    
                    console.log(data);

                    $(data).each(function(index,ele) {
                        console.log(ele)
                        if(index == 0) {
                            $(displayId).empty();
                            $(displayId).append('<option selected value="">Select Option</option>');
                        }
                        $(displayId).append('<option value="'+ele.id+'">'+ele[item]+'</option>')
                    });
                }
            }
        });
    }

    const checkOnLoad = function() {
        $.ajax({
            url : '<?php echo base_url() ?>' +  'HmsAdmin/ajax_get_rows_onready',
            data : {
                id : '<?php echo $student_id ?>',
            },
            type : 'POST',
            async : false,
            success: function(data){

                if(data) {
                    data = JSON.parse(data);
                    
                    let floors = data.floor;
                    let rooms = data.rooms;
                    let beds = data.beds;
                    let blocks = data.blocks;
                    let food = data.food_type;

                    if($('#hms_student_id').length > 0)
                        $('#hms_student_id').val(data.hms_student_id);

                    $(floors).each(function(index,ele) {
                        if(data.floor_name == ele.floor_name) {
                            $('#floor').append('<option selected value="'+ele.id+'">'+ele.floor_name+'</option>');
                        } else {
                            $('#floor').append('<option value="'+ele.id+'">'+ele.floor_name+'</option>')
                        }
                    });

                    $(rooms).each(function(index,ele) {
                        if(data.room_name == ele.room_name) {
                            $('#rooms').append('<option selected value="'+ele.id+'">'+ele.room_name+'</option>');
                        } else {
                            $('#rooms').append('<option value="'+ele.id+'">'+ele.room_name+'</option>')
                        }
                    })

                    $(beds).each(function(index,ele) {
                        if(data.bed_name == ele.bed_name) {
                            $('#beds').append('<option selected value="'+ele.id+'">'+ele.bed_name+'</option>');
                        } else {
                            $('#beds').append('<option value="'+ele.id+'">'+ele.bed_name+'</option>')
                        }
                    })

                    $(blocks).each(function(index,ele) {

                        if(data.block_name == ele.block_name) {                            
                            $('#block').append('<option selected value="'+ele.id+'">'+ele.block_name+'</option>');
                        } else {
                            $('#block').append('<option value="'+ele.id+'">'+ele.block_name+'</option>')
                        }
                    })

                    
                    $("#food option").each(function(index,ele)
                    {   
                        if(ele.value == food){
                            $('#food').val(ele.value);
                        }
                    });

                }
            }
        });
    }

    $(document).ready(function() {
        checkOnLoad();

        $("#assign-student-form").validate({
            ignore: ':hidden',
            rules: {

                block_id : 'required',
                floor_id : 'required',
                room_id : 'required',
                bed_id : 'required',
                food_type : 'required'

            },
            messages : {
                block_id: {
                    required: "Please select a block",
                },
                floor_id: {
                    required: "Please select a floor",
                },
                room_id: {
                    required: "Please select a room",
                },
                bed_id: {
                    required: "Please select a bed",
                },
                food_type: {
                    required: "Please select a food type",
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

    })
</script>