@extends('adminlte::page')

@section('title', 'Campañas')

@include('popper::assets')

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap4.min.css">
@stop


@section('content_header')
<a class="btn btn-primary btn -sm float-right" href="{{ route('publicidad.create') }}"><i class="bi bi-plus-lg"></i><span @popper(Añadir nueva campaña de publicidad )> Agregar nueva campaña</span></a>
<h1 class="bi bi-clipboard2">Campañas informativas</h1>

@stop

@section('content')
@include('popper::assets')

@include('alerts.alert')


<div class="card card-outline card-primary"> 
    <div class="card-body">
        <table class="table table-striped" id="tabdispositivos">
            <thead>
                <tr>
                    <th>Nro</th>
                    <th>Titulo</th>
                    <th>Descripción</th>
                    <th>Imagen</th>
                    <th>Estado</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($campanas as $campana)
                <tr>
                    <td>{{ $campana->id}}</td>
                    <td>{{ $campana->titulo}}</td>
                    <td>{{ $campana->descripcion}}</td>
                    <td><img src="{!! Config::get('app.URL') !!}/{{ $campana->imagen }}" width="50px" height="50px"></td>
                    <td>@if( $campana->estado == 'Publicado' ) <label  class= "badge badge-success">Publicado</label> @else <label class= "badge badge-warning"> Pendiente @endif</label></td>
                  
                        <td  class="text-center" style="width: 220px;">
                            <form action = "{{ route('publicidad.destroy', $campana->id) }}" method="POST">
                                @csrf
                                @method('delete')
                                <div class="btn-group" role="group" aria-label="Basic example">
                                <a @popper(Modificar campaña) class="text-center btn btn-warning btn-sm " href="{{ route('publicidad.edit', $campana->id) }}"><i class="bi bi-pencil-square"></i> Editar</a>
                                <button @popper(Se eliminará la campaña) class="btn btn-danger btn-sm " type="submit"><i class="bi bi-trash3"></i> Eliminar</button> 
                                </div>
                            </form>
                        </td>

                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@stop




@section('js')
    <script>
        console.log('Hi!');
    </script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap4.min.js"></script>
    <script>
        $('#tabdispositivos').DataTable({
            responsive: true,
            autowidth: false,
            "language": {
                "lengthMenu": "Mostrar  _MENU_ registos por página",
                "zeroRecords": "Nada encontrado - disculpa",
                "info": "Mostrando la página _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(Filtrado de  _MAX_ registros totales )",
                "search": "Buscar",
                'paginate': {
                    'next': 'Siguiente',
                    'previous': 'Anterior'
                }
            }
        });
    </script>
@stop