@extends('layouts.signed')
@section('title', 'Citas del centro')
@section('content')
<div class="container p-2">
    <div class="container mt-2 d-flex justify-content-center">
        <h1 class="display-1">Citas</h1>
    </div>
    <div class="row d-flex justify-content-center">
        @if( Auth::user()->profile_id == 4 || Auth::user()->profile_id == 2)
        <div class="col-md-6">
            <div class="container text-center mt-1 d-grid gap-2">
                <a href="{{ route('users') }}" class="btn btn-pink">Ver usuarios</a>
            </div>
            @if( Auth::user()->profile_id == 2)
            <div class="container text-center mt-1 d-grid gap-2">
                <a href="{{ route('availability') }}" class="btn btn-pink">Gestión de disponibilidad</a>
            </div>
            @endif
        </div>
        @endif
    </div>

    <div class="container mt-4">
        <table id="table" class="text-center table table-hover table-pink">
            <thead>
                <th>Donante</th>
                <th>Fecha</th>
                <th>Hora</th>
                <th>Estado</th>
                <th>Acciones</th>
            </thead>
            <tbody>
                @foreach($appointments as $appointment)
                <tr>
                    <th>
                        {{ $appointment->user->first_name }}
                        {{ $appointment->user->last_name }}
                    </th>
                    <th>{{ $appointment->date }}</th>
                    <th>{{ $appointment->hour }}</th>
                    <th>{{ $appointment->status }}</th>
                    <th>

                        <div class="btn-group dropend">
                            <butto type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                Estados
                            </butto>
                            <ul class="dropdown-menu" style="background-color:transparent !important; border: none;">
                                <li><a href="{{ route('updateComplete', $appointment->id) }}" title="Donación realizada" class="btn btn-success w-100"><i class="fas fa-check-circle"></i></a></li>
                                <li><a href="{{ route('updateCanceled', $appointment->id) }}" title="No apto (temporalmente)" class="btn btn-warning w-100"><i class="fas fa-user-clock"></i></a></li>
                                <li><a href="{{ route('updatePurged', $appointment->id) }}" title="No apto (permanentemente)" class="btn btn-danger w-100"><i class="fas fa-user-times"></i></a></li>
                                <li><a href="{{ route('updateHospital', $appointment->id) }}" title="Cancelado por centro" class="btn btn-info w-100"><i class="fas fa-hospital-symbol"></i></a></li>
                                <li><a href="{{ route('updateNotCome', $appointment->id) }}" title="Donante no vino" class="btn btn-dark w-100"><i class="fas fa-user-alt-slash"></i></a></li>
                            </ul>
                        </div>
                    </th>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#table').DataTable();
    });
</script>
@endsection