@extends('layouts.landing')

@section('title', 'inicio')
<style>
    body {
        background-color: #f8f9fa;
    }

    .card {
        border-left: 5px solid var(--bs-primary);
    }

    .badge {
        font-size: 14px;
        padding: 5px 10px;
    }

    img {
        max-width: 100%;
        height: auto;
    }
</style>

@section('content')
    <div class="wrapper">
        @include('layouts._partials.header')
        <!-- sidebard -->
        @include('layouts._partials.menuStudent', ['activeItem' => 'observaciones'])

        <div class="content-wrapper p-2">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-center text-primary">📌 Mis Observaciones</h3>

                        @if ($observations->isEmpty())
                            <p class="text-center text-muted">No tienes observaciones registradas.</p>
                        @else
                            @php $currentDate = null; @endphp

                            @foreach ($observations as $obs)
                                @php
                                    $formattedDate = date('d/m/Y', strtotime($obs->date));
                                    $badgeColor =
                                        [
                                            'leve' => 'success',
                                            'moderada' => 'warning',
                                            'grave' => 'danger',
                                        ][$obs->type] ?? 'secondary';

                                    // Convertir evidencias de base64 si existen
                                    $isImage = $obs->evidences && str_starts_with($obs->evidences, '/9j');
                                    $isPDF = $obs->evidences && str_starts_with($obs->evidences, 'JVBER');
                                @endphp

                                @if ($formattedDate !== $currentDate)
                                    <h5 class="mt-4 text-secondary">📅 {{ $formattedDate }}</h5>
                                    <hr>
                                    @php $currentDate = $formattedDate; @endphp
                                @endif

                                <div class="card shadow-sm mb-3">
                                    <div class="p-3 bg-info border-info rounded">
                                        <span class="badge bg-{{ $badgeColor }}">{{ ucfirst($obs->type) }}</span>
                                        <h5 class="mt-2">{{ ucfirst($obs->description) }}</h5>
                                        <p><strong>Auxiliar:</strong> {{ $obs->auxiliar->name }}
                                            {{ $obs->auxiliar->last_name }}</p>

                                        @if ($obs->evidences_base64)
                                            @if (str_contains($obs->evidences_base64, 'image/'))
                                                <div class="mt-3">
                                                    <a href="{{ $obs->evidences_base64 }}" download="evidencia.jpg"
                                                        class="btn btn-success btn-sm mt-2">
                                                        ver evidencia
                                                    </a>
                                                </div>
                                            @elseif (str_contains($obs->evidences_base64, 'application/pdf'))
                                                <a href="{{ $obs->evidences_base64 }}" download="evidencia.pdf"
                                                    class="btn btn-success btn-sm">ver evidencia</a>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- componetes -->
        <x-alert-request :errors="$errors" />
        @include('layouts._partials.footer')
    </div>

@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script></script>
@endpush