<?php require view('theme/header'); ?>
<div class="page">
	<div class="container">
		<div class="well mt">
			<?= htmlspecialchars_decode($page_content['page_content']) ?>
		</div>
		<div class="well">
		    
		    
		    <div class="orders-btn py-3">
					<ul class="nav">
						<li>
							<div class="col-md-12">
								<div class="services-search">
									<input type="text" id="searchService" placeholder="Ara" class="form-control">
								</div>
							</div>
						</li>
					</ul>
				</div>
				<hr style="size:6px">
		    
		    
			<table class="table table-hover">
				<thead>
					<tr>
						<th>#</th>
						<th>{SERVICES_NAME}</th>
						<th>{SERVICES_CHARGE}</th>
						<th>{SERVICES_MIN}</th>
						<th>{SERVICES_MAX}</th>
						<?php if($settings['service_speed'] == 1): ?>
						<th>Ortalama Süre</th>
						<?php endif; ?>
						<th>{SERVICES_DESC}</th>
					</tr>
				</thead>
				<tbody  id="myTable" class="servicestableclass">
					{SERVICES_LIST}
				</tbody>
			</table>
		</div>          
	</div>

</div>



<div id="descModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{SERVICES_DESC}</h4>
      </div>
      <div class="modal-body" id="modalContent"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>






<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
	$(document).ready(function() {
		$("#searchService").on("keyup", function() {
			var value = $(this).val().toLowerCase();
			$(".servicestableclass tr").filter(function() {
				$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
			});
		});
	});
</script>



<?php require view('theme/footer'); ?>
