@extends('backend.layouts.app')
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<script>
    $('document').ready(function(){
        $table = $('#example').DataTable({
            dom: 'Blfrtip',
        });
    });
</script>

@section('content')

<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center"> Swimming Pool Registration </h5>
		    <a href="{{route('swimming-pool')}}" style="color: #000000; border: 1px solid #eee; width: 60%; margin: 15px auto; box-shadow: 0px 0px 5px 5px #9e9c9c;">
                <i class="fa fa-home" aria-hidden="true" style="font-size: 20px; "></i>
                {{-- <img src="{{ url('public/backend/images/icons/admission.png') }}" style="width: 20px"> --}}
                    Swimming Dashboard
            </a>
		<ol class="breadcrumb float-right">
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid">
    <form action="{{ route('swimmingPoolCutomizeGuestReport') }}" method="GET">
        <div class="row">
            <div class="col-sm-2">
                <div class="form-group">
                </div>
            </div>
            <div class="col-sm-1">
            </div>
            <div class="col-sm-2">
            </div>
            <div class="col-sm-2">
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">Date From</label>
                    <input type="text" name="date_from" class="single-date-picker form-control" value="2026-06-10" autocomplete="off"/>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label class="control-label">Date To</label>
                    <input type="text" name="date_to" class="single-date-picker form-control" value="2026-06-10"  autocomplete="off"/>
                </div>
            </div>
            <div class="col-sm-1" style="padding-top: 25px;">
                <div class="form-group">
                    <button type="submit" class="btn btn-info"><i class="fa fa-search"></i></button>								
                </div>
            </div>
        </div>					
    </form>
	<div class="col-md-12">
		<div style="text-align: right; margin-bottom: 20px;">

        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Swimming Guest Report</h3>
            </div>
            <div class="card-body">		
                <table class="table table-striped table-bordered" id="example">
                    <thead>
                        <tr>
                            <th>Sl</th>
                            <th>Date</th>
                            <th>Service Name</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(sizeof($model) > 0)
                        @foreach($model as $m)
                        <tr>
                            <td>{{ ++$sl }}</td>
                            <td>{{ date("Y-m-d", strtotime($m->entry_date ))}}</td>
                            <td>{{ $m->service_name }}</td>
                            <td>{{ $m->total }}</td>
                            <td>
                                <a class="btn btn-success" href="#">
                                </a>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>			
            </div>
        </div>			
	</div>
</div>

@endsection

@section('modal_content')

@endsection
@section('page_script')>
<script>
    $('document').ready(function(){
		$('.single-date-picker').daterangepicker({
			singleDatePicker: true,
			showDropdowns: true,
			autoUpdateInput: false,
			locale: {
		      format: 'YYYY-MM-DD'
		    }
		});
        $('.single-date-picker').on('apply.daterangepicker', function(ev, picker){
			$(this).val(picker.startDate.format('YYYY-MM-DD'));			
		});
    });
</script>

@endsection