@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([2,3,4]).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="col-xl-12">
	<div class="breadcrumb-holder" style=" height: inherit;">
		<h5 style="text-align: center">Edit/Manage Caddie/Pro/R&A/Caddie/Pro/R&A/NDC ID </h5>
		<a href="{{route('driving-rande-caddy.index')}}" 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"> --}}
			Driving Caddy Dashboard
		</a>
		
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid">
	<div class="col-md-12">
		<div style="text-align: right; margin-bottom: 20px;">

        </div>
        <div class="card">
            <div class="card-body">		
                <table class="table table-striped table-bordered" id="example" style="width: 100%;">
                    <thead>
						<tr>
							<th class="text-center">Serial</th>
							<th class="text-center">Photo</th>
							<th class="text-center">ID</th>
							<th class="text-center">Name</th>
							<th class="text-center">Mobile</th>
							<th class="text-center">Action</th>
						</tr>
                        <tr>
							<th class="text-center">Serial</th>
							<th class="text-center">Photo</th>
							<th class="text-center">ID</th>
							<th class="text-center">Name</th>
							<th class="text-center">Mobile</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>
								@if(file_exists($m->photo))
								<img src="{{ asset($m->photo) }}" style="width: 30px; height: auto;">
								@else
								<img src="http://placehold.it/30x30" style="width: 30px; height: auto;">
								@endif
							</td>
							<td class="text-center">{{ $m->caddy_id }}</td>
							<td>{{ $m->name }}</td>
							<td class="text-center">{{ $m->phone_no }}</td>
							<td class="text-center">
								<a href="{{ route('driving-rande-caddy.edit', $m->id) }}" class="btn btn-sm btn-warning"><i class="fa fa-edit"></i></a>
                                <a class="btn btn-danger item-delete-btn btn-sm" href="{{route('driving-rande-caddy.destroy', $m->id)}}"><i class="fa fa-times"></i></a>
							</td>
						</tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>			
            </div>
        </div>			
	</div>
</div>
@endsection

@section('modal_content')

@endsection
@section('page_script')>
<script>
  $('document').ready(function(){
    var err = $('#modalValue').val();
    $('#exitEntry').modal({ 'show' : err =="exitEntry" ? true : false });
    $('#edit').modal({ 'show' : err =="edit" ? true : false });
  });
</script>
<script>
    $('document').ready(function(){
        $('#p_method option')
            .filter(function() { return $.trim( $(this).text() ) == 'Cash'; })
            .attr('selected',true);

        $("#edit").on("show.bs.modal", function(e) { 
            var id = $(e.relatedTarget).data('target-id');
            var current_due = $(e.relatedTarget).data('current_due');
            $('#edit .modal-body #current_due').val(current_due);
            $('#editForm').attr('action',$('#mainUrlSwmiimg').val()+'/duePaid/'+id);
            if(current_due > 0){
                $('#edit .modal-footer #modalSubmit').prop('disabled', false);
            }else{
                $('#edit .modal-footer #modalSubmit').prop('disabled', true);
            }
        });
        $("#exitEntry").on("show.bs.modal", function(e) { 
            var id = $(e.relatedTarget).data('target-id');
            var name = $(e.relatedTarget).data('name');
            var entry_time = $(e.relatedTarget).data('entry_time');
            var entry_date = $(e.relatedTarget).data('entry_date');
             console.log(entry_time);
            $('#exitEntry .modal-body #name').val(name);
            $('#exitEntry .modal-body #entry_time').val(entry_time);
            $('#exitEntry .modal-body #entry_date').val(entry_date);
            $('#exitTimeForm').attr('action',$('#mainUrlSwmiimg').val()+'/entryExitTime/'+id);
        });
        $('.timepicker').timepicker({
            zindex: 99999999,
            timeFormat: 'H:mm:ss',
            dynamic: true,
            dropdown: true,
            scrollbar: true,
            interval: 1,
            showInputs: false,
            minuteStep: 5
        });

        
       
    });
</script>

@endsection