@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.16/js/jquery.dataTables.min.js"></script>
<script>
    $('document').ready(function(){
        var table = $('#example').DataTable({
				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,
                initComplete: function () {
                	this.api().columns([1]).every(function () {
                    var column = this;
                    var select = $('<select class="form-control select2"><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;
				},
        });
        // $(".filterhead").each( function ( i ) {
        //     var select = $('<select class="select2" width="100%;"><option value="">Search</option></select>')
        //     .appendTo( $(this).empty() )
        //     .on( 'change', function () {
        //        var term = $(this).val();
        //         table.column().search(term, false, false ).draw();
        //     } );
 	    //      table.column().data().unique().sort().each( function ( d, j ) {
        //           console.log(j);
        //     	select.append( '<option value="'+d+'">'+d+'</option>' )
        //     } );
		// } );
        $('.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">
			@if($type == 'update')
				Update Bill Name 
			@else
				Entry Bill Name 
			@endif
			</h5>
			<h5 style="text-align: center"> </h5>
			<a href="{{route('bill-collection')}}" 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"> --}}
                    Bill Collection
			</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" style=" margin-top: -19px; ">
    	<div class="col-sm-12">
    		<div class="card">
                @if($type == 'store')
    			<form method="post" action="{{ route('service-bill-name.store') }}">
                @else
                <form method="post" action="{{ route('service-bill-name.update',$editData->id) }}">
                @method('PUT')
                @endif
                @csrf
	    			<div class="card-header">
	    				<h3 class="card-title">
                        @if($type == 'update')
                            Update Bill Name 
                        @else
							Entry Bill Name 
                        @endif
                        </h3>
	    			</div>
	    			<div class="card-body">
	    				<div class="row">
	    					<div class="col-sm-6">
	    						<div class="form-group">
	    							<label>Bill Name</label>
	    							<input type="text" name="bill_name" value="@if( isset($editData) ) {{ $editData->bill_name }}  @endif" class="form-control" placeholder="Bill Name"  required="" autocomplete="off"/>
	    						</div>
	    					</div>
	    					<div class="col-sm-6" style=" top: 26px; ">
								@if($type == 'store')
									<button type="sumbit" class="btn btn-primary">Submit</button>
								@else
									<button type="sumbit" class="btn btn-primary">Update</button>
								@endif
	    					</div>
	    				</div>
	    			</div>				
    			</form>
    		</div>
    		<div class="card">
    			<div class="card-header">
    				<h3 class="card-title">Bill Name 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"> Bill Name </th>
    							<th class="text-center">Action</th>
    						</tr>
                            <tr>
    							<th class="text-center">Serial</th>
    							<th class="text-center"> Bill Name </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->bill_name}}</td>
    							
    							<td class="text-center">
    								<a href="{{route('service-bill-name.edit', $m->id)}}" class="btn btn-sm btn-primary" style="margin-right: 8px;"><i class="fa fa-edit"></i></a>
                                    <a class="btn btn-danger item-delete-btn btn-sm" href="{{route('service-bill-name.destroy', $m->id)}}"><i class="fa fa-times"></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();
			}
		});			
	});
</script>
@endsection