@section('title', $titleContent)
@include('admin/includes/header')
@section('head')
@endsection

<main class="flex-shrink-0">
    <div class="container">
        <div class="row align-items-center mb-3">
        <div class="col-md-12 d-flex justify-content-between align-items-center">
        
        <div>
            <h4 class="mb-2">{{ $titleContent }}</h4>
            <hr class="mt-0 mb-2">
            
            @isset($s)
            <div class="mt-2">
                    <h5 class="mb-0">Buscando por: {{ $s }}</h5>
            </div>
            @endif
        </div>
        

        <div class="ms-auto" style="max-width: 250px;">
            <div class="input-group">
                <input type="text" class="form-control" id="pSea"
                    placeholder="Buscar por nome..."
                    autocomplete="off">
                <button class="btn btn-outline-secondary" type="button" id="sea">Buscar</button>
            </div>
        </div>
        
        </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-12 mb-6">
                <table class="table align-middle table-hover">
                    <thead>
                    <tr>
                        <th class="d-none" scope="col">#</th>
                        <th scope="col">Nome</th>
                        <th scope="col" class="text-center">Qtd. áudios</th>
                        <th class="pe-1 text-end" scope="col">Ação</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($allContents as $cont)
                    <tr>
                        <th class="d-none" scope="row">{{ $cont->id }}</th>
                        <td><span class="fw-semibold text-dark">{{ $cont->name }}</span></td>
                        <td class="text-center">{{ $cont->total }}</td>
                        <td class="pe-1 text-end">
                            <a href="" class="btn btn-secondary btn-sm"><i class="bi bi-pencil-square align-top"></i></a>
                            {{-- <button type="button" class="btn btn-danger btn-sm"><i class="bi bi-x align-top"></i></button> --}}
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>


        </div>
        {{ $allContents->links('vendor.pagination.default') }}
    </div>
</main>

@include('admin/includes/footer')


<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" /></script>

<script>

    $("#pSea").on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            var searchValue = encodeURIComponent(this.value); // codifica caracteres especiais
            var url = "{{ route('admin.contents-add', [$type]) }}" + "?search=" + searchValue;
            window.location.href = url;
        }
    });


    $('#sea').on('click', function() {
        var searchValue = encodeURIComponent($('#pSea').val());
        var url = "{{ route('admin.contents-add', [$type]) }}" + "?search=" + searchValue;
        window.location.href = url;
    });

</script>