@extends('admin.layouts.master')

@section('content')
    @php use App\Helpers\VideoHelper; @endphp
    <h5 class="text-muted page-title-header mb-4">Vídeos</h5>
    <div class="col-12">
        <a href="{{ route('videos.create') }}" class="btn btn-primary mb-4">
            <i class="bi bi-plus-circle-fill"></i>
            Novo registro</a>
        @if (session()->has('success'))
            <div class="toast-container position-fixed bottom-0 end-0 p-3">
                <div id="successToast" class="toast align-items-center text-bg-success border-0" role="alert"
                    aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">
                            {{ session('success') }}
                        </div>
                        <button type="button" class="btn-close btn-close-white m-auto me-2" data-bs-dismiss="toast"
                            aria-label="Close"></button>
                    </div>
                </div>
            </div>
            @push('scripts')
                @include('admin.scripts.toast')
            @endpush
        @endif
        @if (session()->has('error'))
            <div class="toast-container position-fixed bottom-0 end-0 p-3">
                <div id="successToast" class="toast align-items-center text-bg-danger border-0" role="alert"
                    aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">
                            {{ session('error') }}
                        </div>
                        <button type="button" class="btn-close btn-close-white m-auto me-2" data-bs-dismiss="toast"
                            aria-label="Close"></button>
                    </div>
                </div>
            </div>
            @push('scripts')
                @include('admin.scripts.toast')
            @endpush
        @endif
        <div class="card mb-4 shadow-sm">
            <div class="card-title">
                <div class="card-body">
                    <table class="table table-striped table-hover align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th scope="col">id</th>
                                <th scope="col">Titúlo</th>
                                <th scope="col">Legenda</th>
                                <th scope="col">Url</th>
                                <th scope="col">Vídeo</th>
                                <th scope="col">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($videos as $video)
                                <tr>
                                    <th scope="row">{{ $video->id }}</th>
                                    <td>{{ $video->title }}</td>
                                    <td>{{ $video->caption }}</td>
                                    <td>{{ $video->url }}</td>
                                    <td>
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal">
                                            Veja o vídeo
                                        </button>
                                        <!-- Modal -->
                                        <div class="modal fade" id="exampleModal" tabindex="-1"
                                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog xl">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="exampleModalLabel">Vídeo
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        @if (!empty($video->video))
                                                            <video id="player-local" playsinline controls
                                                                style="max-width: 100%; border-radius: 12px;">
                                                                <source src="{{ asset('assets/videos/' . $video->video) }}"
                                                                    type="video/mp4" />
                                                            </video>
                                                        @elseif (!empty($video->url))
                                                            <div class="plyr__video-embed" id="player-embed"
                                                                style="aspect-ratio: 16/9;">
                                                                <iframe
                                                                    src="{{ VideoHelper::youtubeToEmbed($video->url) }}?iv_load_policy=3&modestbranding=1"
                                                                    allowfullscreen allow="autoplay; encrypted-media">
                                                                </iframe>
                                                            </div>
                                                        @else
                                                            <p class="text-danger">Nenhum vídeo disponível.</p>
                                                        @endif
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Fechar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <div class="col-4">
                                                <a href="{{ route('videos.edit', $video->id) }}" class="btn btn-primary">
                                                    <i class="bi bi-pencil-square"></i>
                                                </a>
                                            </div>
                                            <div class="col-4">
                                                <form method="POST" action="{{ route('videos.destroy', $video->id) }}">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">
                                                        <i class="bi bi-x-square"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $videos->links() }}
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        @include('admin.scripts.video')
    @endpush
@endsection