@extends('layouts.default_module')
@section('module_name')
Pages
@stop
@section('add_btn')

{{-- {!! Form::open(['method' => 'post', 'route' => ['pages.first_time'], 'files'=>true]) !!}
<span>{!! Form::submit('Add', ['class' => 'btn btn-success pull-right']) !!}</span>
{!! Form::close() !!} --}}
@stop

@section('table-properties')
width="400px" style="table-layout:fixed;"
@endsection


<style>
	td {
		white-space: nowrap;
		overflow: hidden;
		width: 30px;
		height: 30px;
		text-overflow: ellipsis;
	}
</style>
@section('table')
<table id="userTable" style="opacity: 0">
<thead>
	<tr>
	   <th>PageNo</th>
	   <th>Para</th>
	   <th>Para_name</th>
	   <th>Para_st</th>
	   <th>Surah</th>
	   <th>Surah_name</th>
	   <th>Surah_st</th>
	   <th>Rukoo</th>
	   <th>Rukoo_st</th>
	   <th>Quarter</th>
	   <th>Half</th>
	   <th>Three Quarters</th>
	   <th>Image</th>
	   <th>Edit </th>
	</tr>
</thead>
<tbody>
</tbody>
</table>
@section('pagination')
<div class="col-md-3 pull-left">
	<div class="form-group text-center">
		<div>
			{!! Form::open(['method' => 'get', 'route' => ['dashboard']]) !!}
			{!! Form::submit('Cancel', ['class' => 'btn btn-default btn-block btn-lg btn-parsley']) !!}
			{!! Form::close() !!}
		</div>
	</div>
</div>
@endsection
@stop


@section('app_jquery')

<script>

$(document).ready(function(){

    fetchRecords();

    function fetchRecords(){

       $.ajax({

         url: '{!!asset("admin/pages/get_users/0")!!}',
         type: 'get',
         dataType: 'json',
         success: function(response){
            $("#userTable").css("opacity",1);
           var len = response['data'].length;

           console.log(response);

              for(var i=0; i<len; i++){
                  var id =  response['data'][i].id;
                  var page_number =  response['data'][i].page_number;
                  var para =  response['data'][i].para;
                  var para_name =  response['data'][i].para_name;
                  var para_start =  response['data'][i].para_start;
                  var surah =  response['data'][i].surah;
                  var surah_name =  response['data'][i].surah_name;
                  var surah_start =  response['data'][i].surah_start;
                  var rukoo  =  response['data'][i].rukoo;
                  var rukoo_start  =  response['data'][i].rukoo_start;
                  var quarter  =  response['data'][i].quarter;
                  var half  =  response['data'][i].half;
                  var three_quarters  =  response['data'][i].three_quarters;
                  var image  = response['data'][i].image;
                //   var deleted_at   = response['data'][i].deleted_at;

                if(!image){
                    image = asset('images/image/map.jpg');
                }

		        var image_col = `<img width="100px" src="`+image+`" class="show-product-img imgshow">`

                var edit = `<a class="btn btn-info" href="{!!asset('admin/pages/edit/`+id+`')!!}">Edit</a>`

                // var del =  `<form style='margin-bottom:0;' method="post" action="{!!asset('admin/pages/delete/`+id+`')!!}">
                //             <a href="" data-toggle="modal"  onclick="activate_delete(this)" name="activate_delete" data-target=".delete" modal_heading="Alert" modal_msg="Do you want to delete?">
                //             <span class="btn btn-info">{!!`+deleted_at+`?'Activate':'Delete'!!}</span></a>
                //             </form>`

                var tr_str = "<tr>" +
                    "<td>" +page_number+ "</td>" +
                    "<td>" +para+ "</td>" +
                    "<td>" +para_name+ "</td>" +
                    "<td>" +para_start+ "</td>" +
                    "<td>" +surah+ "</td>" +
                    "<td>" +surah_name+ "</td>" +
                    "<td>" +surah_start+ "</td>" +
                    "<td>" +rukoo+ "</td>" +
                    "<td>" +rukoo_start+ "</td>" +
                    "<td>" +quarter+ "</td>" +
                    "<td>" +half+ "</td>" +
                    "<td>" +three_quarters+ "</td>" +
                    "<td>" + image_col + "</td>" +
                    "<td>" + edit + "</td>" +
                    // "<td>" + del + "</td>" +
                "</tr>";

                 $("#userTable tbody").append(tr_str);
                }
                $('#userTable').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                });
        }
       });
    }

});

function set_msg_modal(msg){
        $('.set_msg_modal').html(msg);
    }

</script>
@endsection