@extends('back.layout')

@section('title')
{{ __('a50') }} - {{ __('n1') }}
@endsection

@section('css')
    <style>
        .pagination li {
            display: inline-block;
            margin: 0 2px;
            padding: 5px;
            border-radius: 2px;
            background: #0d6efd;
        }

        .pagination li a {
            text-decoration: none;
            font-weight: bold;
            color: #fff;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <div class="d-flex justify-content-between" style="flex-direction: row-reverse;">
            <div>
                <h1 class="page-title fw-bold dir">{{ __('a50') }}</h1>
            </div>

            <div>
                <a href="" data-bs-toggle="modal" data-bs-target="#deleteAllTasks" class="btn btn-danger fw-bold fs-6">
                    <i class="fa-solid fa-trash"></i>
                </a>
                
                <a href="" data-bs-toggle="modal" data-bs-target="#newComment" class="btn btn-primary fw-bold fs-6">
                    <i class="fa-solid fa-plus"></i>
                </a>

                <a href="" data-bs-toggle="modal" data-bs-target="#fromExcel" class="btn btn-success fw-bold fs-6">
                    <i class="fa-solid fa-file-excel"></i>
                </a>

                @if (count($comments) > 2)
                    <a href="" data-bs-toggle="modal" data-bs-target="#deleteAll" class="btn btn-danger fw-bold fs-6">
                        <i class="fa-solid fa-trash-can"></i>
                    </a>
                @endif
            </div>
        </div>

        <div class="page-content dir" style="overflow-x: scroll;">

            {{-- All Comments --}}
            @if (count($comments) > 0)
                <div id="comments" style="width: 100vh;">
                    <input class="search form-control text-center fw-bold mb-2 shadow-none" placeholder="{{ __('b2') }}" />
                    <table class="table w-100">
                        <thead>
                            <tr>
                                <th class="fs-6 fw-bold text-center sort" data-sort="id">#</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="comment">{{ __('b3') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="status">{{ __('b4') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="task">{{ __('b5') }}</th>
                                <th class="fs-6 fw-bold text-center"></th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($comments as $comment)
                                <tr>
                                    <td class="fs-6 fw-bold text-center id">{{ $comment->id }}</td>
                                    <td class="fs-6 fw-bold text-center comment">{{ $comment->comment }}</td>
                                    <td class="fs-6 fw-bold text-center status">
                                        @if ($comment->status == 1)
                                        {{ __('b6') }}
                                        @else
                                        {{ __('b7') }}
                                        @endif
                                    </td>
                                    <td class="fs-6 fw-bold text-center task">
                                        <a href="https://cryptotasky.com/tasks/{{ $comment->task_id }}">
                                            {{ $comment->task_id }}
                                        </a>
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('commentShow', $comment->id) }}" class="btn btn-success fs-6">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <form class="d-inline-block" action="{{ route('deleteComment') }}" method="POST">
                                            @csrf
                                            @method('DELETE')

                                            <input type="hidden" name="id" value="{{ $comment->id }}">

                                            <button class="btn btn-danger">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <ul class="pagination"></ul>
                </div>
            @else
                <p class="fw-bold text-center text-dark fs-4">
                {{ __('b8') }}
                </p>
            @endif

        </div>
    </div>

    {{-- Modals --}}

    {{-- New Comment --}}
    <div class="modal fade" id="newComment" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h5 class="modal-title fw-bold fs-6" id="staticBackdropLabel">{{ __('b9') }}</h5>
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('storeComment') }}" method="POST">

                        @csrf
                        @method('POST')

                        <div class="mb-3 dir">
                            <label for="task_id" class="mb-1 fw-bold text-dark">{{ __('b10') }}</label>
                            <select class="form-select fw-bold" id="task_id" name="task_id" required>
                              @foreach (\App\Models\Task::where('status', '=', 1)->where('type', '!=', '1')->get() as $task)
                                  <option value="{{ $task->id }}">{{ $task->title }} || {{ $task->description }} || 
                                  @if ($task->type == 1)
                                  {{ __('b11') }}
                                  @elseif ($task->type == 2)
                                  {{ __('b12') }}
                                  @elseif ($task->type == 3)
                                  {{ __('b13') }}
                                  @endif
                                  </option>
                              @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3 dir">
                            <label for="comment" class="mb-1 fw-bold text-dark">{{ __('b14') }}</label>
                            <textarea name="comment" id="comment" class="form-control shadow-none fw-bold text-dark" rows="5" required></textarea>
                        </div>

                        <button type="button" class="btn btn-secondary shadow-none fw-bold fs-6" data-bs-dismiss="modal">{{ __('b15') }}</button>
                        <button class="btn btn-primary fw-bold fs-6 shadow-none" type="submit">{{ __('b16') }}</button>

                    </form>

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

    {{-- Upload From Excel --}}
    <div class="modal fade" id="fromExcel" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h5 class="modal-title fw-bold fs-6" id="staticBackdropLabel">{{ __('b17') }}</h5>
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('importComments') }}" method="POST" enctype="multipart/form-data">

                        @csrf
                        @method('POST')

                        <div class="mb-3 dir">
                            <label for="task_id" class="mb-1 fw-bold text-dark">{{ __('b18') }}</label>
                            <select class="form-select fw-bold" id="task_id" name="task_id" required>
                              @foreach (\App\Models\Task::where('status', '=', 1)->where('type', '!=', '1')->get() as $task)
                                  <option value="{{ $task->id }}">{{ $task->title }} || {{ $task->description }} || 
                                  @if ($task->type == 1)
                                  {{ __('b19') }}
                                  @elseif ($task->type == 2)
                                  {{ __('b20') }}
                                  @elseif ($task->type == 3)
                                  {{ __('b21') }}
                                  @endif
                                  </option>
                              @endforeach
                            </select>
                        </div>
                        <div class="mb-3 dir">
                            <label for="file" class="mb-1 fw-bold text-dark">{{ __('b22') }} <span class="text-danger">*</span></label>
                            <input type="file" name="file" id="file" class="form-control shadow-none fw-bold text-dark" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
                        </div>

                        <button type="button" class="btn btn-secondary shadow-none fw-bold fs-6" data-bs-dismiss="modal">{{ __('b23') }}</button>
                        <button class="btn btn-primary fw-bold fs-6 shadow-none submitForm" type="submit">{{ __('b24') }}</button>

                    </form>

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

    {{-- Delete All Comments --}}
    <div class="modal fade" id="deleteAll" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('b25') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('deleteAllComments') }}" method="POST">

                        @csrf
                        @method('DELETE')

                        <p class="fw-bold text-dark fs-6">
                            <span class="text-danger">*</span>
                            {{ __('b26') }}
                        </p>

                        <button type="submit" class="btn btn-danger submitForm">{{ __('b27') }}</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('b28') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Delete All Task Comments --}}
    <div class="modal fade" id="deleteAllTasks" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('b25') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('deleteAllTaskComments') }}" method="POST">

                        @csrf
                        @method('DELETE')

                        <p class="fw-bold text-dark fs-6">
                            <span class="text-danger">*</span>
                            {{ __('b26') }}
                        </p>

                        <div class="mb-3 dir">
                            <label for="task_id" class="mb-1 fw-bold text-dark">{{ __('b18') }}</label>
                            <select class="form-select fw-bold" id="task_id" name="task_id" required>
                              @foreach (\App\Models\Task::where('status', '=', 1)->where('type', '!=', '1')->get() as $task)
                                  <option value="{{ $task->id }}">{{ $task->title }} || {{ $task->description }} || 
                                  @if ($task->type == 1)
                                  {{ __('b19') }}
                                  @elseif ($task->type == 2)
                                  {{ __('b20') }}
                                  @elseif ($task->type == 3)
                                  {{ __('b21') }}
                                  @endif
                                  </option>
                              @endforeach
                            </select>
                        </div>

                        <button type="submit" class="btn btn-danger submitForm">{{ __('b27') }}</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('b28') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('jss')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"
        integrity="sha512-MT5YyrGWqMGkIbwkVUZEWGrRDjlNx8loukEdFyzLo4s8INKVxnDQy2eFcpmnWGrFwJ+X8mRTQOJpWCayXz7+Og=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>
    <script>
        var options = {
            valueNames: ['id', 'comment', 'status', 'task'],
            page: 50,
            pagination: true,
            plugins: [
                ListPagination({})
            ],
        };

        var userList = new List('comments', options);
    </script>
@endsection