@extends('layouts.backend.app')


@push('header')
    <link rel="stylesheet" href="{{ asset('backend') }}/vendors/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/vendors/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
@endpush

@section('content')



<div class="breadcrumbs">
    <div class="col-sm-4">
        <div class="page-header float-left">
            <div class="page-title">
                <h1>Dashboard</h1>
            </div>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="page-header float-right">
            <div class="page-title">
                <ol class="breadcrumb text-right">
                    <li><a href="#">Dashboard</a></li>
                    <li class="active">Mazagine Post</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content mt-3">
    <div class="animated fadeIn">
        <div class="row">

            @if ($errors->any())
                        @foreach ($errors->all() as $error)
                            <li></li>
                            <div class="col-sm-12">
                                <div class="alert  alert-danger alert-dismissible fade show" role="alert">
                                    <span class="badge badge-pill badge-danger">Error</span> {{ $error }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                            </div>
                        @endforeach
            @endif



            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <strong class="card-title">Post Table</strong>
                    <a class="btn btn-primary pull-right" href="{{ route('user.post.create') }}"> <i class="fa fa-plus"></i> Create Post</a>
                    </div>
                    <div class="card-body">
                        <table id="bootstrap-data-table-export" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Title</th>  
                                    <th>Slug</th>
                                    <th>Views & Likes</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($posts as $key => $post)
                                <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $post->title }}</td>
                                <td>{{ $post->slug }}</td>
                                    <td><button class="btn btn-danger" type="button"><i class="fa fa-eye"></i> {{$post->likedUsers->count()}}</button> 
                                        <button class="btn btn-info" type="button"><i class="fa fa-heart"></i> {{$post->view_count}}</button></td>
                                    <td>{{ $post->created_at }}</td>
                                    <td>
                                    <a class="btn btn-info" href="{{ route('user.post.show', $post->id) }}">
                                           <i class="fa fa-eye"></i>
                                    </a>

                                    <a class="btn btn-success" href="{{ route('user.post.edit', $post->id) }}">
                                        <i class="fa fa-pencil"></i>
                                 </a>
                                        <button type="button" class="btn btn-danger mb-1" data-toggle="modal" data-target="#deleteModel-{{ $post->id }}">
                                            <i class="fa fa-trash-o"></i>
                                        </button>
                                        
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>
    </div><!-- .animated -->


    <div class="animated">
        @foreach ($posts as $post)
            <div class="modal fade" id="deleteModel-{{ $post->id }}" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-backdrop="static">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticModalLabel">Delete Post</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>
                                Are you Sure you want to delete
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" onclick="event.preventDefault(); document.getElementById('deletepost-{{$post->id}}').submit();">Confirm</button>
                        <form method="POST" action="{{ route('user.post.destroy', $post->id)}}" style="display: none" id="deletepost-{{$post->id}}">
                            @csrf
                            @method('DELETE')
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>



</div><!-- .content -->



@endsection

@push('footer')


    <script src="{{ asset('backend') }}/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/jszip/dist/jszip.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/pdfmake/build/vfs_fonts.js"></script>
    <script src="{{ asset('backend') }}/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/datatables.net-buttons/js/buttons.colVis.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('backend') }}/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('backend') }}/assets/js/init-scripts/data-table/datatables-init.js"></script>
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
        {!! Toastr::message() !!}
@endpush