@extends('layouts.master')

 @section('page-content')
 <div class="title-bar">
 	<h1 class="title-bar-title">
 		<span class="d-ib">All Videos</span>
 	</h1>
 </div>
 <div class="row gutter-xs">
 	<div class="col-xs-12">
 		<div class="card">
 			<div class="card-header bg-primary">
 				<div class="card-actions">
 					<button type="button" class="card-action card-toggler" title="Collapse"></button>
 				</div>
 				<strong>Videos List</strong>
 			</div>
 			<div class="card-body">

 				<table class="table table-bordered table-striped table-nowrap dataTable" cellspacing="0" width="100%">
 					<thead>
 						<tr>
 							<th>#</th>
 							<th>Video Title</th>
 							<!-- <th>Embed Url</th> -->
 							<th>Status</th>
 							<th>Action</th>
 						</tr>
 					</thead>
 					<tbody>
                                              
                        @foreach($videos as $video)
                        					<tr>
                    <td>{{$count++}}</td>
					<td>{{$video['video_title']}}</td>
					<!-- <td>{{$video['embed_url']}}</td> -->
					<td>{{$video['status']}}</td>
					<td>
                                                <p class="event hide">{{ json_encode($video) }}</p>
                        <!-- <a class="btn btn-outline-primary btn-xs videos" title="Video Members"  data-event_id={{$video['id']}} tooltip>
                            <i class="icon icon-eye"></i>
                        </a> -->
                        <a href="editvideo/{{ $video['id'] }}" class="btn btn-outline-success btn-xs edit" title="Edit Event" tooltip>
                        <i class="icon icon-edit"></i>
                        <a href="deletevideo/{{ $video['id'] }}" class="btn btn-outline-danger btn-xs" title="Delete Event" tooltip="" data-original-title="Delete samiti" onclick="confirm('Are you sure delete this records..!');">
                          <i class="icon icon-trash"></i>
                        </a>
                        </a>
 								{{-- <a class="btn btn-outline-primary btn-xs" title="View More" tooltip>
 									<i class="icon icon-eye"></i>
 								</a>
 								<a class="btn btn-outline-success btn-xs" title="Edit Region" tooltip>
 									<i class="icon icon-edit"></i>
 								</a>
 								<button class="btn btn-outline-danger btn-xs" title="Delete Region" tooltip>
 									<i class="icon icon-trash"></i>
 								</button> --}}
					</td>
					</tr>
					@endforeach


 					</tbody>
 				</table>
 			</div>
 		</div>
 	</div>
 </div>
 @endsection
 @push('page-script')
 <script>
 	let column_num = parseInt( $(this).parent().index());

 	$("#checkAll").click(function() {
 		if($('.check-row').click()) {
 			if ($(this).is(":checked")) {
     //$('input:checkbox').not(this).prop('checked', this.checked);
     $(".edit").hide();
 }
 else {
 	$(".edit").show();
 }
}
});

$(document).on('click', '.videos', function(){

    var sample = $(this).parent().find(".videos").text();

    data = JSON.parse(sample);

    var event_id = $(this).attr('data-event_id');
    id = data.id;

    $('#member_list').DataTable().clear().draw();
    $.each(data.members_array, function (key, value) {
        var count = key+1;
        $('#member_list').DataTable().row.add([
            count,value
        ]).draw();

    });

    $('#myModal').modal('show');

});

</script>
@endpush
@push('modals')
    <div id="myModal" 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">List of Interested Members for event</h4>
                </div>
                <div class="modal-body">

                    <table id="member_list" class="table  table-condensed table-nowrap dataTable" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th style="width:90%">Members</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>


                    </div>

                </div>

            </div>
        </div>
    @endpush