@extends('residential.templates.uadmin')

@section('content')
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">Pages</h1>
    	</div>
    </div>
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
	                    
                        <div class="panel-heading">
                            All Pages <a href="{{ url('uadmin/pages/add') }}"> <i class="fa fa-plus fa-fw" style="float: right;"></i> </a>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>URL</th>
                                            <th>Created</th>
                                            <th>Updated</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                                                                @foreach ($pages as $page)
                                                                                        @if($count % 2 == 1)
                                                <tr class="odd">
                                            @else
                                            	<tr class="even">
                                            @endif
                                                <td><a href='{{ url("uadmin/pages/edit/{$page->id}") }}'>{{ $page->id }}</a></td>
                                                <td><a href='{{ url("uadmin/pages/edit/{$page->id}") }}'>{{ $page->name }}</a></td>
                                                <td><a target="blank" href='{{ url($page->url) }}'>{{ $page->url }}</a></td>
                                                <td>{{ $page->created_at }}</td>
                                                <td>{{ $page->updated_at }}</td>
                                                <td style="text-align: center; white-space: nowrap;">
                                                	<a href='{{ url("uadmin/pages/edit/{$page->id}") }}'>
                                                		<i class="fa fa-edit fa-fw" style="text-align: left;"></i>
                                                	</a>
                                                    &nbsp;
                                                	<a href='{{ url("uadmin/pages/{$page->id}") }}'>
                                                        <i class="fa fa-puzzle-piece fa-fw" style="text-align: left;"></i>
                                                    </a>
                                                	<form style="display: inline;" role="form" method="POST" action="{{ url('admin/pages/delete') }}" 
    													onsubmit="return confirm('Are you sure you want to delete page ({{ $page->name }})?')">
    													<input type="hidden" name="_token" value="{{ csrf_token() }}">
    													<input type="hidden" name="pageID" value="{{ $page->id }}">
    													<button type="submit" style="border: none; background-color: white; padding: 0;">
                                                			<i class="fa fa-trash-o fa-fw" style="text-align: right;"></i>
                                                		</button>
                                                	</form>
                                                </td>
                                            </tr>
                                      	@endforeach
                                   </tbody>
                            	</table>
                            </div>
                         </div>
                     </div>
                 </div>
             </div>


 
               
@endsection

@section('extras')
	<!-- DataTables CSS -->
    <link href="{{ asset('uad/css/plugins/dataTables.bootstrap.css') }}" rel="stylesheet">
    
    <style>
    	a:hover{
    		text-decoration: none;
    	}
    </style>
@endsection

@section('bottom')

    <!-- DataTables JavaScript -->
    <script src="{{ asset('uad/js/plugins/dataTables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('uad/js/plugins/dataTables/dataTables.bootstrap.js') }}"></script>
    
    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').dataTable({
			"pageLength": 25,
			"order": [ 4, 'desc' ]
});   
    });
    if ( typeof $.fn.dataTable == "function" && typeof $.fn.dataTableExt.fnVersionCheck == "function" && $.fn.dataTableExt.fnVersionCheck('1.9.2')/*older versions should work too*/ )
    {
        $.fn.dataTableExt.oApi.clearSearch = function ( oSettings )
        {
     
            var table = this;
             
            //any browser, must include your own file
            //var clearSearch = $('<img src="/images/delete.png" style="vertical-align:text-bottom;cursor:pointer;" alt="Delete" title="Delete"/>');
             
            //no image file needed, css embedding must be supported by browser
            var clearSearch = $('<i class="fa fa-times-circle-o fa-fw" style="vertical-align:text-bottom;cursor:pointer;color: gray;"></i>');
            $(clearSearch).click( function ()
                    {
                          table.fnFilter('');
                    });
            $(oSettings.nTableWrapper).find('div.dataTables_filter').append(clearSearch);
            $(oSettings.nTableWrapper).find('div.dataTables_filter label').css('margin-right', '-16px');//16px the image width
            $(oSettings.nTableWrapper).find('div.dataTables_filter input').css('padding-right', '16px');
        }
     
        //auto-execute, no code needs to be added
        $.fn.dataTable.models.oSettings['aoInitComplete'].push( {
            "fn": $.fn.dataTableExt.oApi.clearSearch,
            "sName": 'whatever'
        } );
    }
    </script> 

@endsection