@extends('layout.master')
@section('css')
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    {{-- <link rel = "stylesheet"
          href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> --}}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css"
        crossorigin="anonymous">
    <link href="{{ asset('css/fileinput.css') }}" rel="stylesheet" />
    <style>
        .dropdown.bootstrap-select>.btn,
        .dropdown.bootstrap-select>.btn:hover,
        .dropdown.bootstrap-select>.btn:active,
        .dropdown.bootstrap-select>.btn:visited,
        .dropdown.bootstrap-select>.btn:focus {
            background-color: transparent;
            color: #495057;
            text-transform: none;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        }

        .file-drop-zone,
        .file-preview {
            border: none !important;
        }

        .btn.btn-sm,
        .btn-group-sm>.btn,
        .btn-group-sm .btn {
            padding: 0.40625rem 1.25rem !important;
            font-size: 0.6875rem !important;
            ;
            line-height: 1.5 !important;
            ;
            border-radius: 0.2rem !important;
            ;
        }

    </style>
@stop
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="card">
                        <div class="card-header card-header-warning">
                            <ul data-tabs="tabs" class="nav nav-tabs pull-right">
                                <li class="nav-item">
                                    <a class="nav-link active" href="{{ route('Communities') }}">
                                        <i class="material-icons">arrow_back</i> Back
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                            </ul>
                            <h4 class="card-title">Community Details</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">

                                <div class="col-md-8 col-sm-12">


                                    <div class="d-flex">
                                        <label class="col-sm-3 col-form-label"> Title</label>

                                        <div class="col-sm-8 form-group bmd-form-group">
                                            {{ $post->title }}
                                        </div>

                                    </div>


                                    <div class="d-flex">
                                        <label class="col-sm-3 mt-0 col-form-label"> Description</label>
                                        <div class="col-sm-8 form-group bmd-form-group">
                                            {{ $post->description }}
                                        </div>

                                    </div>
                                    
                                    <div class="d-flex">
                                        <label class="col-sm-3 mt-0 col-form-label">Community Type</label>
                                        <div class="col-sm-8 form-group bmd-form-group">
                                            {{ $post->community_type_string }}
                                        </div>

                                    </div>

                                    <div class="d-flex">
                                        <label class="col-sm-3 col-form-label">Likes</label>

                                        <div class="col-sm-8 form-group bmd-form-group">
                                            {{ $post->total_likes }}
                                        </div>

                                    </div>

                                    <div class="d-flex">
                                        <label class="col-sm-3 col-form-label"> Media Type</label>

                                        <div class="col-sm-8 form-group bmd-form-group">
                                            {{ $post->media_type }}
                                        </div>

                                    </div>

                                    <div class="d-flex">
                                        <label class="col-sm-3 col-form-label"> Status</label>

                                        <div class="col-sm-8 form-group bmd-form-group">
                                            @if ($post->status == 1)
                                                <div class="text-success"><b>{{ 'Active' }}</b></div>
                                            @else
                                                <div class="text-danger"><b>{{ 'Deactive' }} </b></div>
                                            @endif
                                        </div>

                                    </div>
                                    <div class="d-flex">
                                        <label class="col-sm-3 col-form-label"> Created at</label>

                                        <div class="col-sm-8 form-group bmd-form-group">
                                            {{ date(config('app.date_format_date_time'), strtotime($post->created_at)) }}
                                        </div>

                                    </div>
                                    
                                    @if ($post->media_type == 'video')
                                        <div class="d-flex">
                                            <label class="col-sm-3 col-form-label"> Video Link</label>

                                            <div class="col-sm-8 form-group bmd-form-group">
                                                <a href="{{ $post->attachment }}"
                                                    target="_blank">{{ $post->attachment }}</a>
                                            </div>


                                        </div>
                                    @endif

                                </div>


                                <div class="col-md-4 col-sm-12">
                                    @if ($post->media_type != 'video')
                                        <label class="col-form-label" style='margin-left: 10px;'>Post Media</label>
                                        <div class="file-field input-field">
                                            <div class="file-path-wrapper" style="height: 380px;">
                                                @if ($post->attachment == '')
                                                    <img src="{{ asset('images') . '/preview.png' }}"
                                                        style="width:150px; height:150px;">
                                                @else

                                                    <div class="form-group bmd-form-group custom-file">
                                                        <input id='attachment' name='attachment' type='file' class='file'
                                                            data-show-upload="false">
                                                    </div>


                                                @endif

                                            </div>
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="card">
                                <div class="card-header card-header-warning">
                                    <h4 class="card-title text-white">{{ 'Comments ' }}</h4>
                                </div>

                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table" id="CommentList" width="100%">
                                            <thead class=" text-info">
                                                <tr>

                                                    <th width="30%">Comments</th>
                                                    <th width="20%">Added By</th>
                                                    <th width="30%">Added Date</th>
                                                    <th width="20%">Actions</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="card">
                                <div class="card-header card-header-warning">
                                    <h4 class="card-title text-white">Report Abuse User List</h4>
                                </div>

                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table" id="ReportAbusePostListTable" width="100%">
                                            <thead class=" text-info">
                                                <tr>
                                                    <th width="20%">Reported By</th>
                                                    <th width="30%">Reported On</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- Delete Confirmation START -->
            <div class="modal fade" id="deleteAlertModelComment" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
                            <button type="button" class="close closeModalCommunity" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Are you sure want to delete this Comment? if you remove this Comment, All details of this
                            Comment will be removed. It is not revertable
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary closeModalCommunity"
                                data-dismiss="modal">cancel</button>
                            <a href="#" id="deleteLink" class="btn btn-info">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Delete Confirmation END -->
        </div>

    </div>
    {{-- <div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header card-header-warning" >
                        <h4 class="card-title text-white">{{'Comments '}}</h4>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table"  id="CommentList" width="100%">
                                <thead class=" text-info">
                                <tr>
                                    
                                    <th width="30%">Comments</th>
                                    <th width="20%">Added By</th>
                                    <th width="30%">Added Date</th>
                                    <th width="20%">Actions</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div> --}}
@stop
@section('script')
    <script>
        var community_url = "{{ route('Communities') }}";
        var post_id = "{{ $post->id }}";
    </script>
    <script src="{{ asset('js/communities/view.js') }}" type="text/javascript"></script>
    <script>
        var Communities_url = "{{ route('Communities') }}";
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ asset('js/image/fileinput.js') }}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </script>
    <script>
        @if ($post->media_type == 'image')
            $("#attachment").fileinput({
            initialPreview : "{{ $post->full_image_path }}",
            initialPreviewAsData: true,
            showUpload: false,
            showRemove:false,
            showBrowse:false,
            showCaption:false,
            showPreview:true,
            initialPreviewShowDelete:false,
            maxFileCount: 1,
            showUploadStats:true,
            removeFromPreviewOnError: true,
            overwriteInitial: true,
            allowedFileExtensions: ['jpg', 'jpeg', 'png'],
            allowedPreviewTypes: ['image'],
            maxFilePreviewSize: 2048,
            });
        @elseif($post->media_type=="audio")
        
            $("#attachment").fileinput({
        
            initialPreview : "{{ $post->full_image_path }}",
            initialPreviewAsData: true,
            showUpload: false,
            showPreview:true,
            showBrowse:false,
            showCaption:false,
            showUploadStats:true,
            showRemove: false,
            removeFromPreviewOnError: true,
            overwriteInitial: true,
            initialPreviewShowDelete:false,
            showDrag:false,
            allowedFileExtensions: ['mp3', 'mp4'],
            allowedPreviewTypes: ['audio'],
            initialPreviewConfig: [
        
            {
            type:'audio',
            showDrag:false,
            initialPreviewAsData: true,
            filetype: "audio/mp4",
            caption: '',
            width: '100px',
            url: "{{ $post->full_image_path }}",
            extra: {
            '_token': '{{ csrf_token() }}'
            },
            },
        
            ],
            });
        @elseif ($post->media_type=="pdf")
            $("#attachment").fileinput({
            initialPreview : "{{ $post->full_image_path }}",
            initialPreviewAsData: true,
            showUpload: false,
            showBrowse:false,
            showCaption:false,
            showPreview:true,
            showUploadStats:true,
            showRemove: false,
            removeFromPreviewOnError: true,
            overwriteInitial: true,
            initialPreviewShowDelete:false,
            showDrag:false,
            allowedFileExtensions: ['pdf'],
            allowedPreviewTypes: ['pdf'],
            initialPreviewConfig: [
        
            {
            type:'pdf',
            showDrag:false,
            initialPreviewAsData: true,
            filetype: "pdf",
            caption: '',
            width: '100px',
            url: "{{ $post->full_image_path }}",
            extra: {
            '_token': '{{ csrf_token() }}'
            },
            },
        
            ],
            });
        @endif
    </script>
@stop