@extends('layouts.signed')
@section('title', 'Lista de disponibilidad')
@section('content')

<style>
    a {
        color: #e4e4e4;
        text-decoration: none;
    }

    a:hover {
        color: yellow;
    }
</style>
<div class="container p-2">
    <div class="container mt-2 d-flex justify-content-center">
        <h1 class="display-1">Turnos</h1>
    </div>
    <div class="row">
        <div class="col-md-4 container text-center mt-3 d-grid gap-2">
            <a href="{{ route('availability_create') }}" class="btn btn-pink">Crear turno</a>
        </div>
    </div>
    <div class="mt-4">
        <table id="table" class="text-center table table-hover table-pink">
            <thead>
                <th>Día</th>
                <th>Hora de inicio</th>
                <th>Hora de cierre</th>
                <th>Capacidad de turno</th>
                <th>Acciones</th>
            </thead>
            <tbody>
                @foreach($availabilities as $availability)
                <tr>
                    <td>{{ $availability->day }}</td>
                    <td>{{ date('h:i A' ,strtotime($availability->start_time)) }}</td>
                    <td>{{ date('h:i A' ,strtotime($availability->end_time)) }}</td>
                    <td>{{ $availability->max_donor }}</td>
                    <th>
                        <div class="btn-group dropend">
                            <butto type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                Comandos
                            </butto>
                            <ul class="dropdown-menu" style="background-color:transparent !important; border: none;">
                                <li><a href="{{ route('availability_edit', $availability->id) }}" title="Editar" class="btn btn-warning w-100"><i class="fas fa-edit"></i></a></li>
                                <li><a href="{{ route('availability_delete', $availability->id) }}" title="Eliminar" class="btn btn-danger w-100"><i class="fas fa-trash-alt"></i></a></li>
                            </ul>
                        </div>
                    </th>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#table').DataTable();
    });
</script>
@endsection