@extends('adminlte::page')

@section('title', 'Dispositivos')


@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('licencia.create') }}"><i
            class="bi bi-plus-lg"></i><span @popper(Añadir nueva licencia )> Nueva licencia</span></a>
    <h1 class="bi bi-clipboard2">Listado de licencias</h1>

@stop

@section('content')

    @include('alerts.alert')
    @include('popper::assets')
    <div class="card card-outline card-primary">
        <div class="card-body">

            <table class="table table-striped" id="tablicencias">
                <thead>
                    <tr>
                        <th>Tipo licencia</th>
                        <th>Nombre</th>
                        <th>Vence</th>
                        <th>Volumen</th>
                        <th>Instalada</th>
                        <th>Disponible</th>
                        <th>Estado</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($licencias as $licencia)
                        <tr>
                            <td>{{ $licencia->tipolicencia->name }}</td>
                            <td>{{ $licencia->name }}</td>
                            <td>{{ \Carbon\Carbon::parse($licencia->fecha_vencimiento)->format('d M Y') }}</td>
                            <td class="text-center">
                                @if (!is_null($licencia->cantidad))
                                    {{ $licencia->cantidad }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="text-center" >  <span class="badge badge-success">{{ $licencia->instaladas }}</span></td>
                            <td class="text-center ">
                                @if (!is_null($licencia->cantidad))
                                @if($licencia->cantidad - $licencia->instaladas <= 0)  <span class="badge badge-danger">{{ $licencia->cantidad - $licencia->instaladas }}</span> @else <span class="badge badge-success">{{ $licencia->cantidad - $licencia->instaladas }}</span>  @endif
                                @else
                                    N/A
                                @endif

                            </td>
                            <td class="text-center">
                                @if ($licencia->active == true)
                                    <span class="badge badge-success">Activa</span>
                                @else
                                    <span class="badge badge-danger"> Inactiva
                                @endif
                            </td>


                            <td class="text-center">
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    @include('popper::assets')
                                    <a class="btn btn-primary" href="{{ route('licencia.show', $licencia) }}" style="width: 130px" @popper(Detalles de licencia)><i
                                            class="bi bi-card-list"></i> <span> Detalles</span></a>
                                    <a class="btn btn-warning" href="{{ route('licencia.edit', $licencia) }}" style="width: 130px" @popper(Modificar el licencia )><i
                                            class="bi bi-pencil-square"></i> <span> Editar</span></a>

                                </div>
                            </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>
        $('#tablicencias').DataTable({
            "order": [
                [1, "desc"]
            ],
            responsive: true,
            autowidth: true,

            "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