@extends('layouts.admin.admin')

@section('content')

<style>
    .btn-sm, .btn-group-sm > .btn {
        font-size: 12px;
    }
</style>

<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Manage Page</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">All Pages</li>
        </ol>
    </div>
    <div>
        <button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    <p>{{ $message }}</p>
                </div>
            @endif
            <div class="my-2">
                <a class="btn btn-primary" href="{{ route('pages.create') }}"> Add New</a>
            </div>
            <div class="card"> 
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="example23" class="display table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th width="40%">Name</th>
                                    <th width="15%">Status</th>
                                    <th width="15%">Add Date</th>
                                    <th width="15%">Update Date</th>
                                    <th width="15%">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($pages as $page)
                                <tr>
                                    <td> {{ $page->page_name }} </td>
                                    <td>
                                        @if ($page->status === 1)
                                            <span class="label label-success">Publish</span>
                                        @else
                                            <span class="label label-warning">Draft</span>
                                        @endif 
                                    </td>
                                    <td> {{ $page->created_at }} </td>
                                    <td> {{ $page->updated_at }} </td>
                                    <td>
                                    <form action="{{ route('pages.destroy',$page->id) }}" method="POST">
                                        <a class="btn btn-primary btn-sm" href="{{ route('pages.edit',$page->id) }}"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                    </form>   
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>    
                </div>    
            </div>    
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#myTable').DataTable();
        $(document).ready(function() {
            var table = $('#example').DataTable({
                "columnDefs": [{
                    "visible": false,
                    "targets": 2
                }],
                "order": [
                    [2, 'asc']
                ],
                "displayLength": 25,
                "drawCallback": function(settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;
                    api.column(2, {
                        page: 'current'
                    }).data().each(function(group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group + '</td></tr>');
                            last = group;
                        }
                    });
                }
            });
            // Order by the grouping
            $('#example tbody').on('click', 'tr.group', function() {
                var currentOrder = table.order()[0];
                if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
                    table.order([2, 'desc']).draw();
                } else {
                    table.order([2, 'asc']).draw();
                }
            });
        });
    });
    $('#example23').DataTable({
        dom: 'Bfrtip'
    });
    </script>


@endsection