@extends('layouts.backend.app')


@push('header')
    <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">View 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">
                        <a href="{{ route('user.post.edit', $post->id) }}" class="btn btn-primary mb-1 pull-right"> <i class="fa fa-pencil"></i> Edit Post</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>
                    </div>
                    <div class="card-body">
                        <div class="col-md-12">
                        <img src="{{ asset('storage/app/public/post/'.$post->image) }}">
                        </div>
                        <h1>{{ $post->title }}</h1>
                        <h5>{{ $post->category->name }}</h5>
                        <p>Created At: {{ $post->created_at }}</p>
                        <p>Tags: 
                            @if($post->tags())
                            @foreach ($post->tags as $tag)
                        <a href="#" class="btn btn-outline-primary btn-flat">{{ $tag->name }}</a>
                            @endforeach
                            @endif
                        </p>
                        <hr>
                        <div>
                            {!! $post->body !!}
                        </div>
                    </div>
                </div>
            </div>


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


    <div class="animated">
      
            <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>

    </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