<?php require view('theme/header'); ?>
<div class="page">
	<div class="container">
	    <style>
    .well.mo{
        border-radius:10px;
        box-shadow: 0px 0px 8px 1px rgb(0 0 0 / 38%);
    }
    @media only screen and (min-width: 728px) {
      .well.mo,.text-center.wellmo {
        display:none;
      }
    }
    @media only screen and (max-width: 728px) {
      .well.do {
        display:none;
      }
    }
    .well.mo span{
        float:right;
        color:crimson;
    }
</style>
		<div class="well">
			<?= htmlspecialchars_decode($page_content['page_content']) ?>
		</div>
		    {SERVICES_LIST2}
		<div class="well do">
		    
		    <div class="orders-btn py-3">

							<div class="col-md-12">
								<div class="services-search">
									<input type="text" id="searchService" placeholder="Ara" class="form-control">
								</div>
							</div>
				</div>
				<hr style="size:6px">
		    
			<table class="table table-hover">
				<thead>
					<tr>
						<th class="text-center">#</th>
						<th>{SERVICES_NAME}</th>
						<th>{SERVICES_CHARGE}</th>
						<th class="text-center">{SERVICES_MIN}</th>
						<th class="text-center">{SERVICES_MAX}</th>
						<?php if($settings['service_speed'] == 1): ?>
						<th class="text-center">Ortalama Süre</th>
						<?php endif; ?>
						<th class="text-center">{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'); ?>
