@extends('backend.layouts.app')
<style>
    table thead tr th{
        font-size:11px;
    }
</style>
<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.20/js/jquery.dataTables.min.js"></script>
<script>
    $('document').ready(function(){
        var table = $('#example').DataTable({
            // "bLengthChange": false,
            language: {
                "lengthMenu": "Display _MENU_ Records",
                'paginate': {
                    'previous': '<span> <i class="fa fa-arrow-circle-left" style=" font-size: 18px; " aria-hidden="true"></i></span>',
                    'next': '<span><i class="fa fa-arrow-circle-right" style=" font-size: 18px; " aria-hidden="true"></i></span>',
                },
            },
            "lengthMenu": [[5,10,50,100,300,500, -1], [5,10,50,100,300,500, "All"]],
            "ordering":false,
            // columnDefs: [
            //     { width: 200, targets: 2 },
            //     { width: 200, targets: 3 },
            // ],
            fixedColumns: false,
            initComplete: function () {
                this.api().columns([1,2,3]).every( function () {
                    var column = this;
                    var select = $('<select class="form-control select2" style="width: 100%;"><option value="">Search</option></select>')
                        .appendTo( $(column.header()).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>' )
                    } );
                } );
            },
            "infoCallback": function( settings, start, end, max, total, pre ) {
                var api = this.api();
                var pageInfo = api.page.info();
                var htmlView = '<strong>Total Records: '+total+'</strong>'
                return htmlView;
            },
        });
        $('.select2').select2();
    });
</script>
@section('content')
<div class="container-fluid">

    <div class="row">
        <div class="col-xl-12">
            <div class="breadcrumb-holder">
			<h5 style="text-align: center">Price Set Up for Guest </h5>
			<a href="{{route('swimming-pool')}}" class="btn btn-success" style="color: #000000; border: 1px solid #eee; margin: 0px auto;">
					<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>
                <h1 class="main-title float-left">
                	
            	</h1>
               <!-- <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item">Home</li>
                    <li class="breadcrumb-item">Tournaments</li>
                    <li class="breadcrumb-item active">
                    	Age Categories
                    </li>
                </ol> -->
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    
    <div class="row">
    	<div class="col-sm-12">
    		<div class="card">
            @if($type == 'create')
    			<form method="post" name="editservice" action="{{ route('guest-price-setup.store') }}">
            @else
            <form method="post" name="editservice" action="{{ route('guest-price-setup.update',$editData->id) }}">
            @method('put')
            @endif
    				@csrf
	    			<div class="card-header">
	    				<h3 class="card-title"> 
                        @if($type == 'create') New @else Update @endif Service for Guest
                        </h3>
	    			</div>
	    			<div class="card-body">
	    				<div class="row">
						 <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Member Category</label>
                                    <select class="form-control select2 tee-category-select" name="member_category_id" id="member_category_id" required="">
                                        <option value="">Select Member Category</option>
                                        @if(sizeof($memCategory) > 0)
                                        @foreach($memCategory as $category)
                                        <option value="{{$category->id}}" 
                                            @if(isset($editData))
                                                @if($editData->member_category_id == $category->id)
                                                    selected 
                                                @endif
                                            @endif
                                        >{{$category->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
							<div class="col-sm-3">
                                <div class="form-group">
                                    <label>Service Dept</label>
									<input type="hidden" id='swmming_poll_department_id_edit' value="@if(isset($editData)) {{ $editData->swmming_poll_department_id }} @else 0 @endif">
                                    <select class="form-control select2 tee-category-select" name="swmming_poll_department_id" id="swmming_poll_department_id" required="">
                                        <option value="">Select Department</option>
                                        @if(sizeof($memDept) > 0)
                                        @foreach($memDept as $memDept)
                                        <option value="{{$memDept->id}}" 
                                            @if(isset($editData))
                                                @if($editData->swmming_poll_department_id == $memDept->id)
                                                    selected 
                                                @endif
                                            @endif
                                        >{{$memDept->department_type}}</option>
                                        @endforeach
                                        @endif
                                    </select>
									
                                </div>
                            </div>
							 <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Service</label>
									<input type="hidden" id='drivingrangeservice_idEdit' value="@if(isset($editData)) {{ $editData->swimmingpoolservice_id }} @else 0 @endif">
                                    <select class="form-control select2 tee-category-select" name="service_id" id="drivingrangeservice_id" required="">
                                        <option value="">Select Service</option>
                                    </select>
                                </div>
                            </div>
	    					<div class="col-sm-1">
	    						<div class="form-group">
	    							<label>Person</label>
	    							<input type="text" name="person" value="{{isset($editData) && !empty($editData)?$editData->person:''}}" class="form-control" required/>
	    						</div>
	    					</div>
                            <div class="col-sm-2">
	    						<div class="form-group">
	    							<label>Price </label>
	    							<input type="text" name="price" value="{{isset($editData) && !empty($editData)?$editData->price:''}}" class="form-control" required/>
	    						</div>
	    					</div>
	    				</div>
						<div class="row">
						<div class="col-sm-3">
	    					</div> 
							<div class="col-sm-3">
	    						
	    					</div>
						</div>
	    			</div>
	    			<div class="card-footer text-right">
                    @if($type == 'create')
						<button type="sumbit" class="btn btn-primary">Add</button>
                    @else
                        <button type="sumbit" class="btn btn-primary">Update</button>  
                    @endif
	    			</div>  				
    			</form>
    		</div>
    		<div class="card">
    			<div class="card-header">
    				<h3 class="card-title">Service List</h3>
    			</div>
    			<div class="card-body">
    				<table class="table table-bordered table-sm" id="example" style="width: 100%;">
    					<thead>
    						<tr>
    							<th class="text-center">Serial</th>
    							<th class="text-center">Member Cat</th>
								<th class="text-center">Service Dept</th>
    							<th class="text-center">Service Name</th>
                                <th class="text-center">Person</th>
								<th class="text-center">Price</th>
    							<th class="text-center">Action</th>
    						</tr>
							<tr>
    							<th class="text-center">Serial</th>
    							<th class="text-center">Member Cat</th>
								<th class="text-center">Service Dept</th>
    							<th class="text-center">Service Name</th>
                                <th class="text-center">Person</th>
								<th class="text-center">Price</th>
    							<th class="text-center">Action</th>
    						</tr>
    					</thead>
    					<tbody>
                            @if(sizeof($model) > 0)
                            @foreach($model as $m)
                            <tr>
    							<td class="text-center">{{ ++$sl }}</td>
								<td>{{$m->member_category->name}}</td>
    							<td>{{$m->swimming_dept->department_type}}</td>
                                <td>{{$m->swimming_service->service_name}}</td>
                                <td>{{$m->person}}</td>
								<td>{{$m->price}}</td>
    							
    							<td class="text-center">
    								<a href="{{ route('guest-price-setup.edit',$m->id) }}" class="btn btn-sm btn-primary" style="margin-right: 8px;"><i class="fa fa-edit"></i></a>
    								<a href="#" class="btn btn-danger btn-sm tee-remove-btn"><i class="fa fa-remove"></i></a>
    							</td>
    						</tr>
                            @endforeach
                            @endif
    					</tbody>
    				</table>
    			</div>
    		</div>
    	</div>
    </div>   
    
</div>
@endsection
@section('page_script')
<script type="text/javascript">

	$(function(){								
		$('.tee-remove-btn').on('click', function(e){
			e.preventDefault();
			if(confirm('Are you sure to delete this service.')){
				$(this).closest('td').find('form').submit();
			}
		});			
	});
	
	var selectData = $('#drivingrangeservice_idEdit').val();   
	var countryID = $('#swmming_poll_department_id_edit').val();

	if(countryID!=0){
		getDetails(countryID);
	}
 /////
  $('#swmming_poll_department_id').change(function(){
		var countryID = $(this).val();
		getDetails(countryID);
   });
	function getDetails(countryID){
		console.log(countryID);
		if(countryID){
			$.ajax({
			type:"GET",
			// url:"{{url('ajaxdepts')}}?country_id="+countryID,
			url: "{{ route('ajaxdepts') }}",
			data:{
				'country_id':countryID,
			},
			success:function(res){  
				console.log(res);             
				if(res){
					$("#drivingrangeservice_id").empty();
					$.each(res,function(key,value){
						var d = $('#drivingrangeservice_id').val();
						if(selectData != 0){
							console.log(selectData);
							if(parseInt(key) == parseInt(selectData)){
								$("#drivingrangeservice_id").append('<option value="'+key+'" selected>'+value+'</option>');
							}else{
								$("#drivingrangeservice_id").append('<option value="'+key+'">'+value+'</option>');
							}
						}else{
							$("#drivingrangeservice_id").append('<option value="'+key+'">'+value+'</option>');
						}
					
					});
			
				}else{
					$("#drivingrangeservice_id").empty();
				}
			},
			error:function(res){
				console.log(res);
			},
			});
		}else{
			$("#drivingrangeservice_id").empty();
		}  
	}
</script>
@endsection