@extends('layouts.app')

@section('title')
    {{ __('messages_303.Post details') }}
@endsection

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_303.Posts') => route('admin.posts.index'),
                __('messages_303.Post details') => 'active',
            ],
        ])

        <!-- Basic Bootstrap Table -->
        <div class="card text-center">
            <div class="card-header py-2">
                <ul class="nav nav-pills card-header-pills" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a style="font: 50px" class="nav-link {{ request('tab') == null || request('tab') == 'description' ? 'active' : '' }}" href="{{ request()->fullUrlWithQuery(['tab' => 'description']) }}">
                            {{ __('messages_303.Description') }}
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ request('tab') == 'media' ? 'active' : '' }}" href="{{ request()->fullUrlWithQuery(['tab' => 'media']) }}">
                            {{ __('messages_303.media') }}
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ request('tab') == 'video' ? 'active' : '' }}" href="{{ request()->fullUrlWithQuery(['tab' => 'video']) }}">
                            {{ __('messages_303.video') }}
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ request('tab') == 'comments' ? 'active' : '' }}" href="{{ request()->fullUrlWithQuery(['tab' => 'comments']) }}">
                            {{ __('messages_303.Comments') }}
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body pt-3">
                <div class="tab-content p-0">
                    <div class="tab-pane fade {{ request('tab') == null || request('tab') == 'description' ? 'show active' : '' }}" id="navs-pills-tab-home" role="tabpanel">
                        <p class="card-text" style="text-align: right; font-size: 24px;">
                            <p class="card-text" style="text-align: right; font-size: 20px;">
                                {{ __('messages_303.Description') }} :
                                {{ $post->description }}
                        </p><hr>
                        @foreach($post->topics as $topic)
                        <div class="col-auto mb-3">
                            <div class="text-start">
                                <span class="badge bg-primary" style="font-size: 19px;">{{ $topic->name }}</span>
                            </div>
                        </div>
                    @endforeach
                    </div>

                    <div class="tab-pane fade {{ request('tab') == 'media' ? 'show active' : '' }}" id="navs-pills-tab-image" role="tabpanel">
                        <div class="row">
                            @foreach($post->posts_media_image as $media)
                                <div class="col-md-4 mb-3">
                                    <div class="card h-100">
                                        <img class="card-img-top" src="{{ asset($media->path) }}" alt="Posts image" style="width: 420; height: 400px;">
                                        <div class="card-body">
                                            @can('delete_image')
                                            <a data-url="{{ route('admin.posts.delete.image', $media->id) }}"
                                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="delete"
                                                data-message="{{ __('messages.Are you sure you want to delete? You cannot undo it') }}"
                                                class="btn btn-danger waves-effect waves-light btn-action"
                                                href="javascript:void(0);">
                                       {{ __('messages_303.image delete') }} <i
                                                class="ti ti-trash "></i>
                                            </a>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <div class="tab-pane fade {{ request('tab') == 'video' ? 'show active' : '' }}" id="navs-pills-tab-video" role="tabpanel">
                        @foreach($post->posts_media_video as $video)
                        <div class="col-md-6 col-lg-4 mb-3">
                            <div class="card h-100">
                                <video class="card-img-top" controls>
                                    <source src="{{ asset($video->path) }}" type="video/mp4">
                                </video>
                            <div class="card-body">
                                    @can('delete_video')
                                    <a data-url="{{ route('admin.posts.delete.video', $media->id) }}"
                                        data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                        data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="delete"
                                        data-message="{{ __('messages.Are you sure you want to delete? You cannot undo it') }}"
                                        class="btn btn-danger waves-effect waves-light btn-action"
                                        href="javascript:void(0);">
                                      {{ __('messages_303.video delete') }} <i
                                        class="ti ti-trash "></i>
                                    </a>
                                     @endcan
                              </div>
                            </div>
                          </div>

                        @endforeach
                    </div>
                    <div class="tab-pane fade {{ request('tab') == 'comments' ? 'show active' : '' }}" id="navs-pills-tab-comments" role="tabpanel">
                        @foreach($comments as $comment)
                            <div class="cardMaster border p-3 rounded mt-5">
                                <div class="d-flex justify-content-between flex-sm-row flex-column">
                                    <div class="card-information">
                                        @if ($comment->user->image !== null)
                                            <img class="mb-3 img-fluid" src="{{ asset($comment->user->image) }}" alt="User Image">
                                        @endif
                                        <h6 class="mb-2 pt-1">{{ $comment->user->name }}</h6>
                                        <h6 class="mb-2 pt-1">{{ $comment->comment }}</h6>
                                        @if ($comment->file !== null)
                                        <img class="mb-3 img-fluid" src="{{ asset($comment->file) }}" alt="User Image" width="100" height="100">
                                    @endif


                                    </div>
                                    <div class="d-flex flex-column text-start text-lg-end">
                                        <div class="d-flex order-sm-0 order-1 mt-3">
                                            @can('delete_comments')
                                            <a data-url="{{ route('admin.posts.delete.comment', $comment->id) }}"
                                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="delete"
                                                data-message="{{ __('messages.Are you sure you want to delete? You cannot undo it') }}"
                                                class="btn btn-danger waves-effect waves-light btn-action" href="javascript:void(0);">
                                                 {{ __('messages_303.Comment delete') }}<i
                                                 class="ti ti-trash "></i> </a>

                                            @endcan
                                        </div>
                                        <small class="mt-sm-auto mt-2 order-sm-1 order-0">{{ $comment->created_at }}</small>
                                    </div>
                                </div>
                            </div>
                            @foreach ($comment->reply_comment as $r_comment)
                            <div class="cardMaster border p-3 rounded  " style="border: 1px solid #29a555 !important;width: 80%;margin:10px 30px 3px 0px">
                                <div class="d-flex justify-content-between flex-sm-row flex-column">
                                    <div class="card-information">
                                        @if ($comment->user->image !== null)
                                            <img class="mb-3 img-fluid" src="{{ asset($r_comment->user->image) }}" alt="User Image">
                                        @endif
                                        <h6 class="mb-2 pt-1">{{ $r_comment->user->name }}</h6>
                                        <h6 class="mb-2 pt-1">{{ $r_comment->comment }}</h6>
                                        @if ($comment->file !== null)
                                        <img class="mb-3 img-fluid" src="{{ asset($r_comment->file) }}" alt="User Image" width="100" height="100">
                                    @endif
                                    </div>
                                    <div class="d-flex flex-column text-start text-lg-end">
                                        <div class="d-flex order-sm-0 order-1 mt-3 ">
                                            @can('delete_comments')
                                            <a data-url="{{ route('admin.posts.delete.comment', $r_comment->id) }}"
                                                data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                                data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="delete"
                                                data-message="{{ __('messages.Are you sure you want to delete? You cannot undo it') }}"
                                                class="btn btn-danger waves-effect waves-light btn-action" href="javascript:void(0);">
                                                 {{ __('messages_303.Comment delete') }}<i
                                                 class="ti ti-trash "></i></a>
                                            @endcan
                                        </div>
                                        <small class="mt-sm-auto mt-2 order-sm-1 order-0">{{ $r_comment->created_at }}</small>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                        @endforeach
                        <div class="m-3">
                            {{ $comments->appends(Request::except(['_token']))->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection