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

{!! Form::open(['method' => 'get', 'route' => ['quran.create'], '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>Quran Line</th>
	   <th>Quran Name</th>
	   <th>Edit</th>
	   <th>Delete</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/quran/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 quran_line =  response['data'][i].quran_id;
                  var quran_line_in_words =  response['data'][i].name;
                  var deleted_at   = response['data'][i].deleted_at;

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

                var del =  `<form style='margin-bottom:0;' method="post" action="{!!asset('admin/quran/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>" +quran_line+ "</td>" +
                    "<td>" +quran_line_in_words+ "</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