@extends('layouts.admin')

@section('content')
<section>
    <div class="container-fluid">

        <!-- Start: Breadcrumb -->
        <nav class="breadcrumb-nav" aria-label="breadcrumb">
            <h4 class="breadcrumb-heading">{{ $pub_details->title }}</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('pub_index') }}">Blog Listing</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
        <!-- End: Breadcrumb -->
        
        <form method="POST" action="{{ route('pub_update', encrypt($pub_details->id)) }}" enctype="multipart/form-data">
            @method('PUT')
            @csrf
            <div class="row g-4">
                <div class="col-xl-9 col-lg-8">
                    <div class="row row-cols-1 g-4">
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row row-cols-1 g-4">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Blog Title *</label>
                                                <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" placeholder="Write some title here..." value="{{ $pub_details->title }}" required>
        
                                                @error('title')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
        
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Excerpt</label>
                                                <textarea name="excerpt" class="form-control @error('excerpt') is-invalid @enderror" rows="3" placeholder="Add a summary of the post to appear on your home page or blog.">{{ $pub_details->excerpt }}</textarea>
        
                                                @error('excerpt')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="meta_link" class="form-label">Redirection Link Only</label>
                                                <input type="text" name="meta_link" class="form-control @error('meta_link') is-invalid @enderror" placeholder="Paste the link here..." value="{{ $pub_details->meta_link }}">
                                            </div>
                                            <div class="form-text">Note: This link serves as the redirection to the article that is already published</div>
        
                                            @error('meta_link')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="title" class="form-label">Content</label>
                                        <textarea name="content" class="form-control content-editor" placeholder="Write some content here..">{!! $pub_details->content !!}</textarea>
            
                                        @error('content')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <h5 class="fw-bold">Comments ({{ $comments->total() }})</h5>
                            <div class="card p-3">
                                <div class="card-body">
                                    <div class="row g-4">
                                        @if($comments->count())
                                            @foreach ($comments as $comment)
                                                <div class="col-xl-12">
                                                    <div class="comment-item">
                                                        <div class="d-flex align-items-center mb-3">
                                                            <div class="flex-shrink-0">
                                                                <div class="profile-comment-avatar">{{ $comment->user->initials ?? 'A' }}</div>
                                                            </div>
                                                            <div class="d-grid flex-grow-1 ms-3">
                                                                <span class="profile-comment-name">{{ $comment->user->name ?? 'Anonymous' }}</span>
                                                                <span class="profile-comment-date">{{ Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</span>
                                                            </div>
                                                            <div class="dropdown dropstart">
                                                                <button class="btn btn-default" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <i class='bi bi-three-dots-vertical'></i>
                                                                </button>
                                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                                    <li><a class="dropdown-item delete-comment" href="javascript:void(0);" data-id="{{ encrypt($comment->id) }}"><i class="bi bi-trash"></i> Delete</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="comment-details">
                                                            {{ $comment->comment }}
                                                        </div>
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <span class="text-muted small d-flex align-items-center gap-2"><i class='bi bi-chat'></i> {{ $comment->replies->count() }} reply</span>
                                                            <div class="d-flex justify-content-end gap-2">
                                                                <button type="button" class="btn btn-default d-flex align-items-center gap-2 justify-content-center text-muted reply" data-id="{{ encrypt($comment->id) }}" data-reply-to="{{ $comment->user->name ?? 'Anonymous' }}"><i class="bi bi-reply"></i> Reply</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                @foreach ($comment->replies->sortByDesc('created_at') as $reply)
                                                    <div class="col-xl-12">
                                                        <div class="comment-reply-item">
                                                            <div class="d-flex align-items-center mb-3">
                                                                <div class="flex-shrink-0">
                                                                    <div class="profile-comment-avatar bg-warning">{{ $reply->user->initials }}</div>
                                                                </div>
                                                                <div class="d-grid flex-grow-1 ms-3">
                                                                    <span class="profile-comment-name">{{ $reply->user->name }} @if($reply->user->role_id == 4)<span class="badge bg-success ms-2">Author</span>@endif</span>
                                                                    <span class="profile-comment-date">{{ Carbon\Carbon::parse($reply->created_at)->diffForHumans() }}</span>
                                                                </div>
                                                                <div class="dropdown dropstart">
                                                                    <button class="btn btn-default" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                                        <i class='bi bi-three-dots-vertical'></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                                        <li><a class="dropdown-item edit-reply" href="javascript:void(0);" data-id="{{ encrypt($reply->id) }}" data-reply="{{ $reply->reply }}"><i class="bi bi-pencil"></i> Edit Reply</a></li>
                                                                        <li><a class="dropdown-item delete-reply" href="javascript:void(0);" data-id="{{ encrypt($reply->id) }}"><i class="bi bi-trash"></i> Delete</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="comment-reply-details">
                                                                {{ $reply->reply }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endforeach

                                            <div class="col-xl-12">
                                                <div class="pagination-wrapper">
                                                    {{ $comments->withQueryString()->links() }}
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">No comments yet</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="row row-cols-1 g-4">
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row row-cols-1 g-4">
                                        <div class="col">
                                            <div class="form-check form-switch">
                                                <input name="is_featured" class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" value="1" {{  ($pub_details->is_featured == 1 ? 'checked' : '') }}>
                                                <label class="form-check-label" for="flexSwitchCheckDefault">&nbsp; Is this article featured?</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row row-cols-1 g-4">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Author</label>
                                                <input type="text" name="author" class="form-control @error('author') is-invalid @enderror" value="{{ $pub_details->author }}">

                                                @error('author')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row row-cols-1 g-4">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Set Specific Date</label>
                                                <input type="date" name="date" class="form-control @error('date') is-invalid @enderror" value="{{ $pub_details->date_publication }}">
                                                @error('date')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Blog Status *</label>
                                                <select name="status" class="form-control form-select @error('status') is-invalid @enderror" required>
                                                    <option {{ $pub_details->status == "1" ? 'selected' : '' }} value="1">For Review</option>
                                                    <option {{ $pub_details->status == "0" ? 'selected' : ''}} value="0">Approved</option>
                                                </select>

                                                @error('status')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Blog Category *</label>
                                                <select name="category_id" class="form-control form-select @error('category_id') is-invalid @enderror" required>
                                                    @forelse($pub_cats as $key => $value)
                                                        <option {{ $value->id == $pub_details->category->id ? 'selected' : '' }} value="{{ $value->id }}">{{ $value->name }}</option>
                                                    @empty
                                                        <option>Empty Data</option>
                                                    @endforelse
                                                </select>

                                                @error('category_id')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        {{-- <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Label</label>
                                                <input type="text" name="label" class="form-control  @error('label') is-invalid @enderror" value="{{ $pub_details->label }}">

                                                @error('label')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div> --}}
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Location</label>
                                                <input type="text" name="location" class="form-control @error('location') is-invalid @enderror" placeholder="Type the location (optional)" value="{{ $pub_details->location }}" aria-label="File Link" aria-describedby="location">
        
                                                @error('location')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row row-cols-1 g-4">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Blog Thumbnail</label>
                                                <img src="{{ $pub_details->image_file }}" class="thumbnail-md mb-3" id="preview-img" alt="">
                                                <input type="file" name="file" class="form-control @error('file') is-invalid @enderror" accept="image/*" onchange="readURL(this);">
                                                {{-- Hidden --}}
                                                <input type="hidden" name="file_id" class="form-control" value="{{ isset($pub_details->file->id) ? $pub_details->file->id : NULL }}">
                                                <input type="hidden" name="file_name" class="form-control" value="{{ isset($pub_details->file->file_name) ? $pub_details->file->file_name : NULL }}">
                                                @error('file')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        {{-- <div class="col">
                                            <label for="title" class="form-label">File Link</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="file_link"><i class="bi bi-image"></i></span>
                                                <input type="text" name="file_link" class="form-control @error('file_link') is-invalid @enderror" placeholder="Paste the link here..." value="{{ $pub_details->file_link }}" aria-label="File Link" aria-describedby="file_link">
        
                                                @error('file_link')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="card position-fb">
                        <div class="card-body">
                            <div class="d-flex justify-content-end">
                                <a href="{{ route('pub_index') }}" class="button text-dark mx-3">Cancel Editing</a>
                                <button type="submit" class="button primary w-m-100">Publish Changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        
    </div>
</section>
@endsection

@push('modals')
	<!-- Modal -->
	<div class="modal fade" id="replyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('reply.store') }}">
                    @csrf
                    <input type="hidden" class="form-control" name="publication_comment_id" id="comment_id">
                    <div class="modal-body">
                        <div class="form-group">
							<label for="reply" class="form-label">Replying to <span id="replying_to"></span></label>
							<textarea class="form-control @error('reply')is-invalid @enderror" name="reply" rows="2" placeholder="What are your thoughts?">{{ old('reply') }}</textarea>
					
							@error('reply')
								<span class="invalid-feedback" role="alert">{{ $message }}</span>
							@enderror
						</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="button success">Respond</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="deleteReplyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('reply.delete') }}">
                    @method('DELETE')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="reply_id">
                    <div class="modal-body">
                        <p>Are you sure you want to delete your reply?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="button danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="deleteCommentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('comment.delete') }}">
                    @method('DELETE')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="del_comment_id">
                    <div class="modal-body">
                        <p>Are you sure you want to delete this comment?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="button danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
	<div class="modal fade" id="editReplyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('reply.update') }}">
					@method('PUT')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="ed_reply_id">
                    <div class="modal-body">
                        <div class="form-group">
							<label for="reply" class="form-label">Edit Reply</label>
							<textarea id="ed_reply" class="form-control @error('reply')is-invalid @enderror" name="reply" rows="6" placeholder="What are your thoughts?" maxlength="1000" required>{{ old('reply') }}</textarea>
					
							@error('reply')
								<span class="invalid-feedback" role="alert">{{ $message }}</span>
							@enderror
						</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default border" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Apply Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
<script src="https://cdn.tiny.cloud/1/zzubw4vq5fyaxdgpcaxa4zcfx43wyxc62zr3ii3a73exoddc/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript" src="{{ asset('js/editor.js') }}"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            let reader = new FileReader();

            reader.onload = function (e) {
                $('#preview-img').attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<script type="text/javascript">
    $(document).on('click', '.reply', function() {
        $('#comment_id').val($(this).data('id'));
        $('#replying_to').text($(this).data('reply-to'));
        $('#replyModal').modal('show');
    });
</script>
<script type="text/javascript">
    $(document).on('click', '.delete-reply', function() {
        $('#reply_id').val($(this).data('id'));
        $('#deleteReplyModal').modal('show');
    });
</script>
<script type="text/javascript">
    $(document).on('click', '.delete-comment', function() {
        $('#del_comment_id').val($(this).data('id'));
        $('#deleteCommentModal').modal('show');
    });
</script>
<script type="text/javascript">
    $(document).on('click', '.edit-reply', function() {
        $('#ed_reply_id').val($(this).data('id'));
        $('#ed_reply').val($(this).data('reply'));
        $('#editReplyModal').modal('show');
    });
</script>
@endpush