@extends('template.index')

@section('content')
    <div class="content">
        <div class="container mt-3">
            <div class="d-flex align-items-center justify-content-between">
                <h1>Testemunhos</h1>
                <a class="btn btn-sm btn-primary font-weight-bold" href="{{ route('testimonies.create') }}">
                    <i class="fa-solid fa-plus mr-2"></i>Criar</a>
            </div>

            @if (session('alert'))
                <div class="alert alert-{{ session('alert.type') }} mt-3 mb-3" role="alert">
                    {{ session('alert.message') }}
                    <button class="close" data-dismiss="alert" type="button" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <form class="row mb-3 align-items-center justify-content-center">
                <div class="col-8 col-sm-8 col-md-3">
                    <div class="form-group row align-items-baseline">
                        <label for="status">Status</label>
                        <div class="col">
                            <select class="form-control" id="status" name="status">
                                <option value="todos" @if (request()->status === 'todos') selected @endif>Todos</option>
                                <option value="publicado" @if (request()->status === 'publicado') selected @endif>
                                    Publicado
                                </option>
                                <option value="nao-publicado" @if (request()->status === 'nao-publicado') selected @endif>
                                    Não publicado
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-4 col-sm-4 col-md-3">
                    <button class="btn btn-sm btn-primary font-weight-bold">
                        <i class="fa-solid fa-filter mr-2"></i>Filtrar
                    </button>
                </div>
            </form>

            <div class="row">
                <div class="col p-0">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap">
                            <thead>
                                <tr>
                                    <th scope="row">Titulo</th>
                                    <th scope="row">Descrição</th>
                                    <th scope="row">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($testimonies as $testimony)
                                    <tr class="testimony" id="{{ $testimony->id }}" style="cursor: pointer;">
                                        <td>{{ truncate($testimony->title, 60) }}</td>
                                        <td>{{ truncate($testimony->description, 100) }}</td>
                                        <td>
                                            <span class="badge badge-{{ $testimony->published ? 'success' : 'danger' }} font-weight-bold">
                                                {{ $testimony->published ? 'Publicado' : 'Não publicado' }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col">
                    {{ $testimonies->links('template.paginacao') }}
                </div>
            </div>

            <div class="modal" id="loading" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content p-5">
                        <div class="modal-body text-center p-5">
                            <i class="fa-solid fa-spinner fa-spin-pulse fa-10x"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
                 role="dialog">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title"></h1>
                            <button class="close" data-dismiss="modal" type="button" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="font-size: 1rem;"></div>
                        <div class="modal-footer">
                            <form method="POST">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-secondary font-weight-bold">
                                    <i class="fa-solid fa-trash mr-2"></i>Excluir
                                </button>
                            </form>
                            <a class="btn btn-sm font-weight-bold"></a>
                            <a class="btn btn-sm btn-primary font-weight-bold">
                                <i class="fa-solid fa-pen-to-square mr-2"></i>Editar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        const modal = document.getElementById('modal');
        const modalTitle = modal.querySelector('.modal-dialog .modal-content .modal-header .modal-title');
        const modalBody = modal.querySelector('.modal-dialog .modal-content .modal-body');
        const modalButton = modal.querySelector('.modal-dialog .modal-content .modal-footer a.btn');
        const editButton = modal.querySelector('.modal-dialog .modal-content .modal-footer .btn.btn-primary');
        const destroyForm = modal.querySelector('.modal-dialog .modal-content .modal-footer form')
        const testimonies = document.querySelectorAll('.testimony');

        destroyForm.addEventListener('submit', (e) => {
            e.preventDefault();

            Swal.fire({
                title: 'Confirmar exclusão do testemunho?',
                showCancelButton: true,
                cancelButtonText: 'Não',
                confirmButtonText: 'Sim',
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#modal').modal('hide');
                    destroyForm.submit();
                }
            })
        });

        testimonies.forEach((testimony) => {
            testimony.addEventListener('click', async () => {
                $('#loading').modal('show');

                const response = await fetch(`/admin/testemunhos/${testimony.id}`, {
                    headers: {
                        Accept: 'application/json'
                    }
                });

                const data = await response.json();

                modalTitle.innerText = data.title;

                modalBody.innerText = data.description;

                modalButton.innerHTML = data.published
                    ? '<i class="fa-solid fa-x mr-2"></i>Despublicar'
                    : '<i class="fa-solid fa-check mr-2"></i>Publicar';
                modalButton.classList.toggle('btn-success', !data.published)
                modalButton.classList.toggle('btn-danger', data.published);
                modalButton.id = data.id;
                modalButton.href = `/admin/testemunhos/${data.id}/${data.published ? 'despublicar' : 'publicar'}`;

                editButton.href = `/admin/testemunhos/${data.id}/editar`;

                destroyForm.action = `/admin/testemunhos/${data.id}`

                $('#loading').modal('hide');

                $('#modal').modal();
            });
        });
    </script>
@endsection