@extends('template.index')

@section('content')
    <div class="content">
        <div class="container mt-3">
            @if (session('alert'))
                <div class="alert alert-{{ session('alert.type') }}" 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

            <div class="d-flex align-items-center justify-content-between mb-3">
                <h1 class="mt-2">Vídeos</h1>
                <a class="btn btn-sm btn-primary" href="{{ route('videos.create') }}">
                    <span class="font-weight-bold"><i class="fa-solid fa-plus mr-2"></i>Cadastrar</span>
                </a>
            </div>

            <div class="row">
                <div class="col">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Título</th>
                                    <th scope="col">URL ID</th>
                                    <th scope="col">Provedor</th>
                                    <th scope="col">Data de publicação</th>
                                    <th scope="col">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($videos as $video)
                                    <tr>
                                        <th scope="row">{{ $video->id }}</th>
                                        <td title="{{ $video->title }}">{{ truncate($video->title) }}</td>
                                        <td>{{ $video->url_id }}</td>
                                        <td>{{ $video->provider->name }}</td>
                                        <td>{{ date('d/m/Y H:i', strtotime($video->published_at)) }}</td>
                                        <td>
                                            <div class="d-flex">
                                                <a class="btn btn-sm btn-primary mr-2 d-flex align-items-baseline"
                                                   href="{{ route('videos.edit', ['video' => $video->id]) }}">
                                                    <i class="fa-solid fa-pen-to-square mr-2"></i>Editar
                                                </a>
                                                <form class="video"
                                                      action="{{ route('videos.destroy', ['video' => $video->id]) }}"
                                                      method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="btn btn-sm btn-danger d-flex align-items-baseline">
                                                        <i class="fa-solid fa-trash mr-2"></i>Excluir
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

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

@section('js')
    <script>
        document.querySelectorAll('.video').forEach((video) => {
            video.addEventListener('submit', (e) => {
                e.preventDefault();

                Swal.fire({
                    title: 'Confirmar exclusão do vídeo?',
                    showCancelButton: true,
                    cancelButtonText: 'Não',
                    confirmButtonText: 'Sim',
                }).then((result) => {
                    if (result.isConfirmed) {
                        video.submit();
                    }
                })
            })
        });
    </script>
@endsection