@extends('layouts.signed')
@section('title', 'Citas')

@section('content')

@if($centers >= 1)

<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">
        <div class="col-md-4 container text-center mt-3 d-grid gap-2">
            <a href="{{ route('appointments-create') }}" class="btn btn-pink">Agendar</a>
        </div>
    </div>
    @if(!empty($appointment_active))
    <div class="row">
        <div class="col-md-4 container text-center mt-3 d-grid gap-2">
            <a href="{{ route('appointments-update', $appointment_active->id ) }}" class="btn btn-warning">Cancelar</a>
        </div>
    </div>
    @endif
    <div class="container mt-4 d-flex justify-content-center">
        <table id="table" class="text-center table table-hover table-pink">
            <thead>
                <th>Centro</th>
                <th>Fecha</th>
                <th>Hora</th>
                <th>Estado</th>
            </thead>
            <tbody>
                @if(!empty($appointments))
                @foreach($appointments as $appointment)
                <tr>
                    <th>{{ $appointment->center->name }}</th>
                    <th>{{ $appointment->date }}</th>
                    <th>{{ $appointment->hour }}</th>
                    <th>{{ $appointment->status }}</th>
                </tr>
                @endforeach
                @endif
            </tbody>
        </table>
    </div>
    <div class="row d-flex justify-content-center">
        <div class="col-md-6">
            @if(!empty(session('errorSchedule')))
            <div class="notifications mt-2 alert alert-danger">
                {{ session('errorSchedule') }}
            </div>
            @endif
            @if(!empty(session('successSchedule')))
            <div class="notifications mt-2 alert alert-success">
                {{ session('successSchedule') }}
            </div>
            @endif
            @if(!empty(session('successCancel')))
            <div class="notifications mt-2 alert alert-warning">
                {{ session('successCancel') }}
            </div>
            @endif
        </div>
    </div>
</div>
@else

<div class="container">
    <div class="row text-center justify-content-center mt-5">
        <h1>Aviso</h1>
        <div class="justify-content-between col-md-4 col-md-6">
            <p class="text-start">
                Saludos <strong>{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</strong>, apreciamos mucho que tomaras la decisión de registrarte en nuestra web.
            </p>
            <p class="text-start">
                De momento los centros no se encuentran habilitados para recibir
                citas, cuando estos se encuentren hábiles le notificaremos vía
                correo electrónico para que pueda agendar su cita, esperamos que
                tenga un excelente día.
            </p>

            <div class="d-grid gap-2">
                <a href="{{ route('dashboard') }}" class="btn btn-pink">Ir al perfil</a>
            </div>
        </div>
    </div>
</div>

@endif

@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#table').DataTable();
        setTimeout(function(){$(".notifications").fadeOut()}, 4000);
    });
</script>
@endsection