@extends('layouts.signed')
@section('title', 'Centros')
@section('content')
<div class="container p-2">
    <div class="container mt-2 d-flex justify-content-center">
        <h1 class="display-1">Centros</h1>
    </div>
    <div class="row">
        <div class="d-flex col-md-4 btn-group container text-center mt-3">
            <a href="{{ route('createCenters') }}" class="btn btn-pink">Crear centro</a>
            <a href="{{ route('admin') }}" class="btn btn-pink">Regresar</a>
        </div>
    </div>
    <div class="container mt-4">
        <table id="table" class="text-center table table-hover table-pink">
            <thead>
                <th>Centro</th>
                <th>Provincia</th>
                <th>Acciones</th>
            </thead>
            <tbody>
                @foreach($centers as $center)
                <tr>
                    <th>{{ $center->name }}</th>
                    <th>{{ $center->state->name }}</th>
                    <th>
                        <div class="btn-group">
                            <a title="Editar" class="btn btn-success w-100" href="{{ route('editCenters', $center->id) }}"><i class="fas fa-edit"></i></i></a>
                            <a title="Eliminar" class="btn btn-danger w-100" href="{{ route('destroyCenters', $center->id) }}"><i class="fas fa-trash-alt"></i></i></a>
                        </div>
                    </th>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#table').DataTable();
    });
</script>
@endsection