<style type="text/css">
label.error {
	color : red;
	text-align: left;
	display: block;
}
.blockNameErr,#floor_name_err,#blockEditNameErr {
	color : red
}
</style>
<div class="row dash-main-row">               
	<div class="col-md-10 col-lg-10 p-0">
		<ul class="nav nav-pills mb-3 rooms-sections row" id="pills-tab" role="tablist">
			<li class="nav-item section-sec col-md-3 p-0">
				<a class="nav-link sec-head active" href="<?php echo base_url() ?>blocks" role="tab" aria-controls="pills-blocks" aria-selected="true">Blocks</a>
			</li>
			<li class="nav-item section-sec col-md-3 p-0">
				<a class="nav-link sec-head" href="<?php echo base_url() ?>floors" aria-selected="false">Floors</a>
			</li>
			<li class="nav-item section-sec col-md-3 p-0">
				<a class="nav-link sec-head" href="<?php echo base_url() ?>rooms" aria-selected="false">Rooms</a>
			</li>
			<li class="nav-item section-sec col-md-3 p-0">
				<a class="nav-link sec-head" href="<?php echo base_url() ?>beds" aria-selected="false">Beds</a>
			</li>
		</ul>
	</div>
</div>

<div class="row dash-main-row">
	<div class="col-md-12 col-lg-12 p-0">
		<?php if ($this->session->flashdata('success')) { ?>
			<div class="alert alert-success alert-dismissible fade show" role="alert">
				<p><?php echo $this->session->flashdata('success') ?></p>
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
		<?php } ?>

		<?php if ($this->session->flashdata('failed')) { ?>
			<div class="alert alert-danger alert-dismissible fade show" role="alert">
				<p><?php echo $this->session->flashdata('failed') ?></p>
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
		<?php } ?>
		
		<div class="block-head">
			<div class="block-head-left">
				<h3 class="dash-tab-head block-details-head">Block Details</h3>
			</div>

			<div class="block-head-right">
				<button type="button" onClick="set_block_id(0)" class="btn btn-success" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#AddBlockCenter">+ Add Blocks</button>
			</div>
		</div>
		<table class="table example dash-table">
			<thead>
				<tr>
					<th scope="col" class="dash-th">S.No</th>
					<th scope="col" class="dash-th">Block</th>
					<th scope="col" class="dash-th rooms-th">Floor</th>
					<th scope="col" class="dash-th rooms-th">Rooms</th>
					<th scope="col" class="dash-th rooms-th">Total Beds</th>
					<th scope="col" class="dash-th rooms-th">Total Students</th>
					<th scope="col" class="dash-th-action">Actions</th>
				</tr>
			</thead>
			<tfoot class="text-center">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
			<tbody>
				<?php foreach ($blocks_data as $key => $value) { 
					$roomCount = $value['room_count'] > 0 ? $value['room_count'] : 0;
				?>
					<tr>
						<td ><?= $key + 1 ?></td>
						<td><?= $value['block_name'] ?></td>
						<td class="rooms-td"><?= $value['floor_count'] ?></td>
						<td class="rooms-td"><?= $roomCount ?></td>
						<td class="rooms-td"><?= $value['beds_count'] ?></td>
						<td class="rooms-td"><?= $value['student_count'] ?></td>
						<td class="preview-img">
							<a data-toggle="modal" onClick="set_block_id(<?= $value['id'] ?>)" data-target="#EditBlockCenter" data-backdrop="static" data-keyboard="false">
								<img class="action-img" src="<?php echo base_url() ?>assets-hms/images/dashboard/edit-icon.svg" alt="">
							</a>
							
							<a data-toggle="modal" onclick ="coursedel(<?php echo $value['id'] ?>)" href="#deleteModal"><img  src="<?php echo base_url() ?>assets-hms/images/dashboard/delete-icon.svg" alt="" data-toggle="modal" data-target="#DeleteRoomsCenter"  data-backdrop="static" data-keyboard="false"></a>
						</td>

					</tr>
				<?php } ?>
				
			</tbody>
		</table>

	</div>
</div>


<!-- Add Modal -->
<div class="modal fade" id="AddBlockCenter" tabindex="-1" role="dialog" aria-labelledby="AddBlockCenterTitle" aria-hidden="true">

	<div class="modal-dialog modal-dialog-centered" role="document">

		<div class="modal-content">
			<form action="<?php echo base_url() ?>HmsAdmin/ae_blocks/0" id="block-form" method="post">
				<div class="modal-header add-block-header">
					<h5 class="modal-title" id="exampleModalLongTitle">Add New Block</h5>
				</div>

				<div class="modal-body add-block-body">

					<p>Block Name<span style="color:red">*</span></p>
					<input type="text" name="block_name" class="form-control edit-block-input  add-block-input">
					<div class="blockNameErr"></div>
					<div class="d-flex mt-4 mb-2">
						<p>Enter Floor Names</p>
						<i class="fas fa-plus add-icon" onclick="addInputField()"></i>
					</div>
					
					<div class="add-floors-container">
						<div class="add-floor-inputs">
							<input type="text" name="floor_names[0]" placeholder="Enter Name" class="add-input form-control add-block-input">
							<img class="edit-delete-ico" style="visibility:hidden" src="<?php echo base_url() ?>assets-hms/images/dashboard/delete-icon.svg" alt="">
						</div>
						<label id="floor_names[0]-error" class="error" for="floor_names[0]"></label>
					</div>

				</div>

				<div class="modal-footer add-block-footer">
					<button type="submit" class="btn btn-primary add-block-blue">Add Block</button>
					<button type="button" class="btn btn-secondary add-block-cancel" data-dismiss="modal">Cancel</button>
				</div>
			</form>
		</div>

	</div>
</div>
<!-- Add Modal Ends -->

<!-- Edit Modal -->
<div class="modal fade" id="EditBlockCenter" tabindex="-1" role="dialog" aria-labelledby="EditBlockCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">

		<div class="modal-content">
			<form id="block-edit-form" method="post">
				<div class="modal-header add-block-header">
					<h5 class="modal-title" id="exampleModalLongTitle">Edit Block</h5>

				</div>

				<div class="modal-body add-block-body " id="edit-modal-body">

					<p>Block Name<span style="color:red">*</span></p>
					<input type="text" name="block_edit_name" id="block-edit-input" class="form-control edit-block-input  add-block-input">
					<div id="blockEditNameErr"></div>
					<div class="d-flex mt-4 mb-2">
						<p>Add Floor</p>
						<i class="fas fa-plus add-icon" onclick="addInputField()"></i>
					</div>
					<div class="add-floors-container" id="edit_floors-container">
						
					</div>
					<div id="floor_name_err"></div>
				</div>

				<div class="modal-footer add-block-footer">
					<button type="submit" class="btn btn-primary add-block-blue" >Update</button>
					<button type="button" class="btn btn-secondary add-block-cancel" data-dismiss="modal">Cancel</button>
				</div>
			</form>
		</div>

	</div>
</div>
<!-- Edit Modal Ends -->

<!-- Delete  Modal -->
<div class="modal fade" id="DeleteRoomsCenter" tabindex="-1" role="dialog" aria-labelledby="DeleteRoomsCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header add-block-header">
				<h5 class="modal-title" id="exampleModalLongTitle">Delete Block</h5>
			</div>

			<div class="modal-body add-block-body">
				<input type="hidden" id="bl_id" />
				<h6>Are you sure you want to delete ?</h6>
			</div>

			<div class="modal-footer add-block-footer">
				<button type="button" onclick="deletedata($('#bl_id').val());" class="btn btn-danger ">Yes</button>
				<button type="button" class="btn btn-dark " data-dismiss="modal">No</button>
			</div>

		</div>
	</div>
</div>
</div>



<script>
	let block_id;
	let idCount = 0;
	$(document).ready(function() {

		$('.example').DataTable( {
            initComplete: function () {
                this.api().columns([1]).every( function () {
                    var column = this;
                    var select = $('<select><option value="">Filter</option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                            );

                        column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                    } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
        } );

		// $('#AddBlockCenter').modal('show');

		$('.add-input').each(function(index,ele) {
			$(ele).attr('name', 'floor_names['+idCount+']');
			idCount++;
		});

		// Add Form validation
		$("#block-form").validate({
			ignore: ':hidden',
			rules: {
				<?php for($i = 0; $i <= 20; $i++) { 
					echo "'floor_names[$i]' : {
						required : true,
						alphanumeric : true
					},";
				}?>
				block_name: {
					required: true,
					minlength: 1,
					alphanumeric : true
				}			
			},
			messages: {
				block_name: {
					required: "Please provide a block name",
					minlength : "Please enter more than 1 Character"
				},
			},
			submitHandler: function(form) {
				var inputValue = $("input[name='block_name']",form).val();
				inputValue = inputValue.toLowerCase();

				let flag = false;

				$.ajax({
					url : '<?php echo base_url() ?>' +  'HmsAdmin/ajax_validate_block_name',
					data : {
						value : inputValue,
						id : block_id
					},
					type : 'POST',
					async : false,
					success: function(data){
						console.log(data);
						if(data == 'success'){
							flag = true
						}
					}
				});


				if(flag) {
					form.submit();
				} else {
					$('.blockNameErr').show();
					$('.blockNameErr').text('This block name already exists.');
				}	
			}
		});


		// Edit Form Validation
		$("#block-edit-form").validate({
			ignore: ':hidden',
			rules: {
				<?php for($i = 0; $i <= 20; $i++) { 
					echo "'floor_edit_names[$i]' : {
						required : true,
						alphanumeric : true
					},";
				}?>
				block_edit_name: {
					required: true,
					minlength: 1,
					alphanumeric : true
				}			
			},
			messages: {
				block_edit_name: {
					required: "Please provide a block name",
					minlength : "Please enter more than 1 Character"
				},
			},
			submitHandler: function(form,e) {
				$('#floor_name_err').hide();
				e.preventDefault();
				$(form).attr('action', "<?php echo base_url() ?>HmsAdmin/ae_blocks/"+block_id);

				let flag = false;
				let dubFlag = false
				var inputValue = $("input[name='block_edit_name']",form).val();
				inputValue = inputValue.toLowerCase();
				
				let floor_inputs = $('.edit-input');
				let floor_names = [];

				$(floor_inputs).each(function(index,ele) {
					let val = $(ele).val().toLowerCase();
					floor_names.push(val);
				})



				let findDuplicates = arr => arr.filter((item, index) => arr.indexOf(item) != index)

                let dubArr = [...new Set(findDuplicates(floor_names))] // Unique duplicates
                console.log(dubArr);
                if(dubArr.length > 0) {
                	$('#floor_name_err').show();
                    $('#floor_name_err').text(dubArr.toString() + ' have been repeated, please change');
                } else {
                    dubFlag = true;
                }

				$.ajax({
					url : '<?php echo base_url() ?>' +  'HmsAdmin/ajax_validate_block_name',
					data : {
						value : inputValue,
						id : block_id,
					},
					type : 'POST',
					async : false,
					success: function(data){

						$('#blockEditNameErr').hide();
						
						if(data == 'success'){
							flag = true;
						} else {
							$('#blockEditNameErr').show();
							$('#blockEditNameErr').text('This block name already exists.');
							flag = false;
						}

					}
				});

				if(flag && dubFlag) {
					form.submit();
				} 
			}
		});
	});

	//
	const addInputField = () => {

		let checkForAdd = $('.edit-input').length;

		
		
		let inputContainer;
		if(checkForAdd == 0) {
			inputContainer = '<div class="add-floor-inputs mt-3"><input type="text" name="floor_names['+idCount+']" placeholder="Enter Floor Name" class="form-control add-input add-block-input"><img onClick="deleteInput(this)" class="edit-delete-ico" src="<?php echo base_url() ?>assets-hms/images/dashboard/delete-icon.svg" alt=""></div><label id="floor_names['+idCount+']-error" class="error" for="floor_names['+idCount+']"></label>';
		} else {

			inputContainer = '<div class="add-floor-inputs mt-3"><input type="text" name="floor_edit_names['+checkForAdd+']" placeholder="Enter Floor Name" class="edit-input form-control add-input add-block-input"><img onClick="deleteInput(this)" class="edit-delete-ico" src="<?php echo base_url() ?>assets-hms/images/dashboard/delete-icon.svg" alt=""></div><label id="floor_edit_names['+checkForAdd+']-error" class="error" for="floor_edit_names['+checkForAdd+']"></label>';
		}
		
		$('.add-floors-container').append(inputContainer);
		idCount++;
	}

	//
	const deleteInput = (ele) => {
		$(ele).parent().remove();
	}

	//
	const deleteInputFromDb = (ele,floor_id) => {

		$.ajax({
			url : '<?php echo base_url() ?>' +  'HmsAdmin/ajax_delete_floors',
			data : {
				id : floor_id
			},
			type : 'POST',
			async : false,
			success: function(data){
				if(data){
					$(ele).parent().remove();
				} else {
					$('#floor_name_err').text('Floor could not be deleted as it is linked with rooms');
				}
			}
		});

	}

	//
	const set_block_id = (val) => {
		block_id = val;
	}

	//
	jQuery.validator.addMethod("alphanumeric", function(value, element) {
		return this.optional(element) || /^[a-z0-9\-\s]+$/i.test(value);
	}, "Please enter alphanumeric Characters only");

	//
	function coursedel(icn){
		$('#bl_id').val(icn);
	}

	//
	function deletedata(id){
		window.location.href = "<?php echo base_url(); ?>HmsAdmin/delete_block/" + id;
	}

	//
	$(".mobileMenu , .hidesidebar").click(function(){
		$(".sideMenu").toggle();
	});

	//
	$("#EditBlockCenter").on('show.bs.modal', function(){
		$('#floor_name_err').text('')
		$('#edit_floors-container').empty();
		$.ajax({
			url : '<?php echo base_url() ?>' +  'HmsAdmin/ajax_get_block_floor_info',
			data : {
				id : block_id
			},
			type : 'POST',
			async : false,
			success: function(data){
				data = JSON.parse(data);
				
				if(!data){
					$('#edit-modal-body').empty();
					$('#edit-modal-body').append('<p>Data could not be displayed due to some error. Please try again later</p>');
				}else{
					$('#block-edit-input').val(data.block_name);
					$('#edit_floors-container').append(data.floors);
				}
			}
		});

	});
</script>