@extends('layouts.app')
@section('content')
    <div class="card">
        <div class="card-body">
            <nav class="navbar navbar-expand-lg bg-light">
                <div class="container-fluid justify-content-start">

                    <div class="d-flex navbar-item">
                        <button class="btn btn-sm btn-primary" type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#modalManager">{{ __('applabels.Add') }}</button>
                    </div>

                </div>
            </nav>

            <div class="mt-4">
                <h5 class="text-secondary">{{ __('applabels.PageTitle') }}</h5>
                @if (sizeof($manager) > 0)
                    <ol class="list-group list-group-numbered">
                        @foreach ($manager as $item)
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">

                                    {{ $item->comment }}
                                </div>
                                <span class="badge bg-danger rounded-pill me-2">
                                    <a class="text-white" href="javascript:void(0)"
                                        onclick="deleteManager({{ $item->id }})">
                                        {{ __('applabels.Delete') }}
                                    </a>
                                </span>

                                <span class="badge bg-primary rounded-pill ">
                                    <small>{{ \Carbon\Carbon::parse($item['created_at'])->format('d/m/Y H:i:s') }}</small>
                                </span>
                            </li>
                        @endforeach
                    </ol>
                @else
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">
                            {{ __('applabels.NoDataFound') }}
                            </div>
                        </div>
                    </li>
                @endif
            </div>

        </div>
    </div>

    <div class="modal fade" id="modalManager" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">{{ __('applabels.Add') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('applabels.Close') }}"></button>
                </div>
                <div class="modal-body">
                    <!-- div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">Video ID</label>
                        <input type="text" class="form-control" placeholder="(opicional)" id="video_id">
                    </div -->
                    <div class="mb-3">
                        <input type="hidden" class="form-control" name="pages_id" id="pages_id" value="{{ $pageID }}">
                    </div>
                    <div class="mb-3">
                        <!-- label for="exampleFormControlTextarea1" class="form-label">Comentário</label -->
                        <textarea class="form-control" rows="3" id="comment"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('applabels.Close') }}</button>
                    <button type="button" class="btn btn-primary" onclick="saveComment()">{{ __('applabels.Save') }}</button>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            const modalComment = new bootstrap.Modal('#modalManager')

            function saveComment() {

                const comment = document.getElementById('comment').value
                const video_id = ''

                if (!comment || comment.length <= 3) {
                    alert("{{ __('applabels.ErrorWarning') }}");
                    return
                }

                const data = {
                    comment
                }
               if (video_id) {
                    data.video_id = video_id
                }
                data.pages_id = document.getElementById('pages_id').value;
                /*d = new Date();
                data.created_at = d.toLocaleString();*/

                $.ajax({
                    url: "{!! url('/manager-comment') !!}",
                    type: "post",
                    data: data,
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        modalComment.hide()
                        location.reload()
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            }

            function deleteManager(id) {
                if (confirm("{{ __('applabels.ConfirmDelete') }}")) {
                    $.ajax({
                        url: "{!! url('/manager-comment') !!}/" + id,
                        type: "delete",
                        datatype: "json",
                        success: function(response) {
                            console.log(response, ' Resposta AJAX')
                            location.reload()
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error(textStatus, errorThrown);
                        }
                    });
                }
            }
        </script>
    @endpush
@endsection