@extends('layouts.app')

@section('content')
    <section class="section">
        <div class="section-header">
            <h3 class="page__heading" style="color: #0e25f8;">Pacientes</h3> <!-- Título con color acorde al logo -->
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="section-body">
            <div class="row">
                <div class="col-lg-12">
                    <form action="{{ route('pacientes.index') }}" method="GET">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Buscar por nombre, apellido o correo"
                                name="query">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" style="background-color: #2264f2; color: white;"
                                    type="submit">Buscar</button> <!-- Botón con color personalizado -->
                            </div>
                        </div>
                    </form>

                    <div class="card">
                        <div class="card-body">
                            <a class="btn btn-warning" href="{{ route('pacientes.create') }}"
                                style="background-color: #159e2c; color: white;">Nuevo Paciente</a> <!-- Botón en verde -->
                            <a class="btn btn-primary" href="{{ route('pacientes.index') }}"
                                style="background-color: #2330ec;">Ver todos los pacientes</a> <!-- Botón en azul oscuro -->

                            <table class="table table-striped mt-2">
                                <thead style="background-color:#2f2bec">
                                    <th style="color:#fff">Nombre</th>
                                    <th style="color:#fff;">Apellido</th>
                                    <th style="color:#fff;">E-mail</th>
                                    <th style="color:#fff;">Teléfono</th>
                                    <th style="color:#fff;">Ansiedad</th>
                                    <th style="color:#fff;">Depresión</th>
                                    <th style="color:#fff;">Estrés</th>
                                    <th style="color:#fff;" colspan="4">Acciones</th>
                                </thead>
                                <tbody>
                                    @foreach ($pacientes as $paciente)
                                        <tr>
                                            <!-- Verifica si el campo 'nombre' existe antes de mostrarlo -->
                                            <td>{{ $paciente['nombre'] ?? 'N/A' }}</td>
                                            <td>{{ $paciente['apellido'] ?? 'N/A' }}</td>
                                            <td>{{ $paciente['email'] ?? 'N/A' }}</td>
                                            <td>{{ $paciente['telefono'] ?? 'N/A' }}</td>
                                            <td>{{ $paciente['ansiedad'] ?? 'N/A' }}</td>
                                            <td>{{ $paciente['depresion'] ?? 'N/A' }}</td>
                                            <td>{{ $paciente['estres'] ?? 'N/A' }}</td>
                                            <td>

                                                <a class="btn btn-info"
                                                    href="{{ route('pacientes.show', $paciente['id']) }}"
                                                    style="background-color: #23ec48; color: white;">Recomendacion</a>
                                             
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                            <div class="pagination justify-content-end">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection