@extends('layouts.index')

@section('page_title')
    All Brokers
@endsection

@section('news_active')
    nav-item active
@endsection

@section('pg_name')
    All Brokers Details
@endsection

@section('headaddons')
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
@endsection

@section('content')

@if (count($errors) > 0)
    <div class="col-12 mb-3" id="div__Error">
        @foreach ($errors->all() as $error)
        <div class="alert alert-danger">
            {{ $error }}
        </div>
        @endforeach
    </div>
@endif

@if (session('success'))
    <div class="col-12 alert alert-success mb-3">
        {{ session('success') }}
    </div>
@endif

<div class="container-fluid">
    <div class="d-flex flex-row flex-nowrap overflow-auto">
    
    @foreach ($news as $item)
    <div class="card shadow-sm mx-3">
        @if ($item->newsPicture)
        <img src="{{ env('APP_URL') . '/storage/news_photos/' . basename($item->newsPicture) }}" 
             class="card-img-top" alt="News Image" style="object-fit: cover; height: 200px;">
        @endif

        

        <div class="card-body">
    <h5 class="card-title">{{ $item->newsTitle }}</h5>
    
    <div class='card-body-details'>
        <span class="card-text my-2" style="width:70%">
            {{ Str::limit($item->newsContent, 100, '...') }}
        </span>
        
    </div>

    @foreach ($item->comments as $comment)

    <hr>


   
    
        <div class="comment d-flex  d-flex align-items-center justify-content-between">
        <small style="color:red;font-weight:bold">{{$comment->authorName}} - {{ \Carbon\Carbon::parse($comment->created_at)->format('d F Y') }} :</small>

        <small class="card-text" >
    {{ Str::limit($comment->authorContent, 100) }}
    <a href="#" class="more-link" data-toggle="modal" data-target="#commentModal" data-content="{!! $comment->authorContent !!}" >more...</a>
</small>

<!-- Delete Button -->
<form method="POST" action="{{ route('comments.destroy', $comment->id) }}">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-danger">X</button>
</form>
            
        </div>

        <hr>

    @endforeach



    



    



    <!-- Modal for Deletion -->
    <div class="modal fade" id="deleteConfirmModal{{ $item->id }}" tabindex="-1" aria-labelledby="deleteConfirmModalLabel{{ $item->id }}" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmModalLabel{{ $item->id }}">Delete News</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="deleteNewsForm{{ $item->id }}" action="{{ route('news.destroy', $item->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body">
                        Are you sure you want to delete this news item?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




<!-- Modal for Deletion Comment -->
<div class="modal fade" id="deleteCommentModal" tabindex="-1" aria-labelledby="deleteCommentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteCommentModalLabel">Delete Comment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="deleteCommentForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-body">
                    Are you sure you want to delete this comment?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>






    <!-- Buttons to trigger modals -->
    <button class="btn btn-primary btn-sm edit-news" data-toggle="modal" data-target="#editNewsModal" 
            data-id="{{ $item->id }}" data-title="{{ $item->newsTitle }}" 
            data-content="{{ $item->newsContent }}">
        Edit
    </button>

    <button type="button" class="btn btn-danger btn-sm delete-news" 
            data-toggle="modal" data-target="#deleteConfirmModal{{ $item->id }}"
            data-id="{{ $item->id }}" data-url="{{ route('news.destroy', $item->id) }}">
        Delete
    </button>
</div>




    </div>
    @endforeach

    </div>

    <!-- Pagination Links -->
    <div class="d-flex justify-content-center mt-3">
        {{ $news->links('pagination::bootstrap-4') }}
    </div>
</div>








<!-- Modal for displaying full comment -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="commentModalLabel">Full Comment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                
            </div>
            <div class="modal-body">
                <p id="fullCommentContent" style="color:green;"></p>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <small>{{ \Carbon\Carbon::parse($comment->created_at)->format('d F Y') }}</small>

            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<!-- <div class="modal fade" id="editNewsModal" tabindex="-1" aria-labelledby="editNewsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editNewsModalLabel">Edit News</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editNewsForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="id" id="editNewsId">
                    <div class="form-group">
                        <label for="newsTitle">Title</label>
                        <input type="text" name="newsTitle" id="editNewsTitle" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="newsContent">Content</label>

                        
                        <textarea class="form-control" id="editor" name="newsContent" required></textarea>

                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <div>
                    <small>{{ \Carbon\Carbon::parse($comment->created_at)->format('d F Y') }}</small>

                    </div>

                    <div>

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div> -->





<div class="modal fade" id="editNewsModal" tabindex="-1" aria-labelledby="editNewsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editNewsModalLabel">Edit News</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editNewsForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="id" id="editNewsId">
                    <div class="form-group">
                        <label for="newsTitle">Title</label>
                        <input type="text" name="newsTitle" id="editNewsTitle" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="newsContent">Content</label>
                        <!-- The CKEditor textarea -->
                        <textarea class="form-control" id="editor" name="newsContent" required></textarea>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <div>
                        <small>{{ \Carbon\Carbon::parse($comment->created_at)->format('d F Y') }}</small>
                    </div>
                    <div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>




@endsection

@section('scripts')
<script>




ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: [
            'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'link', 'imageUpload', '|',
            'fontSize', 'fontColor', 'alignment', '|',
            'bulletedList', 'numberedList', '|',
            'blockQuote', 'codeBlock'
        ],
        height: 600
    })
    .catch(error => {
        console.error(error);
    });



$('#deleteCommentModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var url = button.data('url'); // Get the URL from the button's data-url attribute

    // Update the form action
    var form = $(this).find('#deleteCommentForm');
    form.attr('action', url);
});









</script>
@endsection