@extends('adminlte::page')

@section('title', 'CRUD con Laravel 10')

@section('content_header')
    <h1>BLOG</h1>
@stop

@section('content')
   <a href="Headers/create" class="btn btn-primary mb-3">CREAR</a>

<table id="headers" class="table table-striped table-bordered shadow-lg mt-4" style="width:100%">
<thead class="bg-primary text-white">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Código</th>
            <th scope="col">Titulo</th>
            <th scope="col">Imagen</th>
            <th scope="col">Acciones</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($headers as $header)
        <tr>
            <td>{{$header->id}}</td>
            <td>{{$header->codigo}}</td>
            <td>{{$header->titulo}}</td>
            <td>{{$header->img}}</td>
            <td>
                <form action="{{ route ('Headers.destroy',$header->id)}}" method="POST">
                <a href="/Headers/{{ $header->id}}/edit" class="btn btn-info">Editar</a>
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Borrar</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap5.min.css" rel="stylesheet">
@stop

@section('js')
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function() {
    $('#headers').DataTable({
        "lengthMenu": [[5,10, 50, -1], [5, 10, 50, "All"]]
    });
} );

</script>

@stop
