@extends('Componentes.app')

@section('title', 'Detalhes dos Agendamentos')

@section('detalhesD0')
<div class="container py-5">
    <!-- Título -->
    <div class="text-center mb-4">
        <h2 class="fw-bold text-dark">
            Agendamentos para <span style="color: #0a496f;">{{ $client->name }}</span>
        </h2>
        <p class="text-muted">Visualize os horários agendados para cada dia da semana</p>
    </div>

    <!-- Botão Voltar -->
    <div class="mb-4">
        <a href="{{ route('d0.clients')}}" class="btn btn shadow-sm text-white" style="background-color: #0a496f;">
            <i class="bi bi-arrow-left me-2 text-white"></i>Voltar
        </a>
    </div>

    <!-- Calendário de Agendamentos -->
<div class="d-flex justify-content-center">
    <div class="card shadow-lg border-0 rounded-3 w-100" style="max-width: 1200px;">
        <div class="card-body p-4">
            <div class="row g-3 justify-content-center">
                @foreach ($agenda as $dia => $horarios)
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="calendar-day card h-100 border-0 shadow-sm">
                            <div class="card-header  text-white text-center rounded-top" style="background-color: #0a496f;">
                                <h5 class="fw-bold mb-0">{{ $dia }}</h5>
                            </div>
                            <div class="card-body">
                                @if ($horarios->isNotEmpty())
                                    <ul class="list-group list-group-flush">
                                       @foreach ($horarios as $hora)
                                        @if($hora['active']==1)
                                                    <li class="list-group-item list-group-item-secondary text-center mb-1  rounded d-flex justify-content-between align-items-center">
                                                        <span><i class="bi bi-clock me-2"></i>{{ $hora['hora'] }}</span>
                                                        <a href="{{ route('d0.update', ['id' => $hora['id'], 'status'=>0]) }}" class="btn btn-sm btn-success">
                                                            
                                                           <i class="bi bi-check-lg text-white " title="Ativo"></i>
                                                           
                                                        </a>
                                                      
                                                    </li>
                                                  @else
                                                  <li class="list-group-item list-group-item-secondary text-center mb-1 rounded d-flex justify-content-between align-items-center">
                                                        <span><i class="bi bi-clock "></i>{{ $hora['hora'] }}</span>
                                                        <a href="{{ route('d0.update', ['id' => $hora['id'], 'status'=>1]) }}" class="btn btn-sm btn-secondary" style="width: 25%">
                                                                          
                                                         <i class="bi bi-slash-circle text-white" title="Inativo"></i>
                                                           
                                                        </a>
                                                      
                                                    </li>
                                                    @endif

                                                @endforeach

                                    </ul>
                                @else
                                    <p class="text-muted text-center mt-3">
                                        <i class="bi bi-calendar-x me-2"></i>Sem agendamentos
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
</div>

@endsection