@extends('admin.layouts.master')

@section('content')
    <h5 class="text-muted page-title-header mb-4">Audios</h5>
    <div class="col-12">
        <a href="{{ route('audios.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">Audio</th>
                                <th scope="col">Data</th>
                                <th scope="col">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($audios as $audio)
                                <tr>
                                    <th scope="row">{{ $audio->id }}</th>
                                    <td>{{ $audio->title }}</td>
                                    <td>
                                        <audio src="assets/audios/{{ $audio->audio }}" controls>
                                        </audio>
                                    </td>
                                    <td>{{ $audio->data }}</td>
                                    <td>
                                        <div class="d-flex">
                                            <div class="col-4">
                                                <a href="{{ route('audios.edit', $audio->id) }}" class="btn btn-primary">
                                                    <i class="bi bi-pencil-square"></i>
                                                </a>
                                            </div>
                                            <div class="col-4">
                                                <form method="POST" action="{{ route('audios.destroy', $audio->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>
                    {{ $audios->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection