@extends('layouts.admin')
@section('content')
<div>



    <div class="grid md:grid-cols-2 gap-4">

        <div class="bg-white p-4 rounded-lg w-full shadow-lg mb-5 text-gray-600 text-center space-y-1 ">
            <h4
        class="text-2xl tracking-widest py-1 px-6 text-white rounded-xl border-b-2 border-gray-500 font-thin mb-6  bg-red-500">
        {{ $persona->nombre }} {{ $persona->paterno }} {{ $persona->materno }}

    </h4>
            <div class="grid md:grid-cols-1 gap-4 place-items-center">
                <strong>
                    @if ($persona->status == 'ACTIVO')
                        <span
                        class="bg-green-400 py-1 px-2 rounded-full text-white">{{ $persona->status }}</span>
                    @else
                        <span
                        class="bg-red-400 py-1 px-2 rounded-full text-white"> {{ $persona->status }} </span>
                    @endif
                </strong>

                <p><img class="imagenes" src="{{ $persona->imagenUrl() }}" ></p>
            </div>
            <div class="grid md:grid-cols-1 gap-4">
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Alergías</strong>

                    <p>{{ $persona->alergias }}</p>

                </div>
            </div>
            <div class="grid md:grid-cols-2 gap-4">

                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Sexo</strong>

                    <p>{{ $persona->sexo }}</p>

                </div>
                <div class="rounded-lg bg-red-200 py-1 px-2">

                    <strong>Tipo de sangre</strong>

                    <p>{{ $persona->tipo_sangre }}</p>

                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-4">
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Institución de SS</strong>

                    <p>{{ $persona->ss }}</p>

                </div>
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>NSS</strong>

                    <p>{{ $persona->nss }}</p>

                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-4">

                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Fecha de nacimiento</strong>

                    <p>{{ $persona->fecha_nacimiento }}</p>

                </div>
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Lugar de nacimiento</strong>

                    <p>{{ $persona->lugar_nacimiento }}</p>

                </div>
            </div>
            <div class="grid md:grid-cols-1 gap-4">
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Observaciones</strong>

                    <p>{{ $persona->observaciones }}</p>

                </div>
            </div>
            <div class="grid md:grid-cols-1 gap-4">
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Esquema de vacunación</strong>

                    {{-- <p>{{ $persona->observaciones }}</p> --}}
                    <div class="space-y-1 columns-1 col-span-8" >
                        @if($persona->vacunas->count())

                            <div class="relative overflow-x-auto rounded-lg shadow-xl">

                                <table class="rounded-lg w-full">

                                    <thead class="border-b border-gray-300 bg-gray-50">

                                        <tr class="text-xs font-medium text-gray-500 uppercase text-left traling-wider">

                                            <th class="cursor-pointer px-3 py-3 hidden lg:table-cell">

                                                Vacuna


                                            </th>

                                            <th class="cursor-pointer px-3 py-3 hidden lg:table-cell">

                                                Enfermedad



                                            </th>

                                            <th class="cursor-pointer px-3 py-3 hidden lg:table-cell">

                                                Dosis



                                            </th>

                                            <th class="cursor-pointer px-3 py-3 hidden lg:table-cell">

                                                Fecha de Aplicación


                                            </th>

                                        </tr>

                                    </thead>

                                    <tbody class="divide-y divide-gray-200 flex-1 sm:flex-none ">

                                        @foreach($persona->vacunas as $vacuna)

                                            <tr class="text-sm font-medium text-gray-500 bg-white flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">

                                                <td class="px-3 py-3 w-full lg:w-auto p-3 text-gray-800 text-center lg:text-left lg:border-0 border border-b block lg:table-cell relative lg:static">

                                                    <span class="lg:hidden absolute top-0 left-0 bg-blue-300 px-2 py-1 text-xs text-white font-bold uppercase rounded-br-xl">Vacuna</span>

                                                    {{ $vacuna->vacuna }}

                                                </td>

                                                <td class="px-3 py-3 w-full lg:w-auto p-3 text-gray-800 text-center lg:text-left lg:border-0 border border-b block lg:table-cell relative lg:static">

                                                    <span class="lg:hidden absolute top-0 left-0 bg-blue-300 px-2 py-1 text-xs text-white font-bold uppercase rounded-br-xl">Enfermedad</span>

                                                    {{ $vacuna->enfermedad }}

                                                </td>

                                                <td class="px-3 py-3 w-full lg:w-auto p-3 text-gray-800 text-center lg:text-left lg:border-0 border border-b block lg:table-cell relative lg:static">

                                                    <span class="lg:hidden absolute top-0 left-0 bg-blue-300 px-2 py-1 text-xs text-white font-bold uppercase rounded-br-xl">Dosis</span>

                                                    {{ $vacuna->dosis }}

                                                </td>

                                                <td class="px-3 py-3 w-full lg:w-auto p-3 text-gray-800 text-center lg:text-left lg:border-0 border border-b block lg:table-cell relative lg:static">

                                                    <span class="lg:hidden absolute top-0 left-0 bg-blue-300 px-2 py-1 text-xs text-white font-bold uppercase rounded-br-xl">Fecha de aplicación</span>

                                                    {{ $vacuna->fecha_aplicacion }}

                                                </td>

                                            </tr>

                                        @endforeach

                                    </tbody>

                                    <tfoot class="border-gray-300 bg-gray-50">

                                        <tr>

                                            <td colspan="15" class="py-2 px-5">
                                                {{-- {{ $persona->vacunas->links()}} --}}
                                            </td>

                                        </tr>

                                    </tfoot>

                                </table>

                                <div class="h-full w-full rounded-lg bg-gray-200 bg-opacity-75 absolute top-0 left-0" wire:loading wire:target="search">

                                    <img class="mx-auto h-16" src="{{ asset('storage/img/loading.svg') }}" alt="">

                                </div>

                            </div>

                        @else
                            <div class="border-b border-gray-300 bg-white text-gray-500 text-center p-5 rounded-full text-lg">

                                No hay resultados.

                            </div>
                        @endif
                    </div>

                </div>
            </div>
        </div>

        {{-- <div class="bg-white p-4 rounded-lg w-full shadow-lg mb-5 text-gray-600 space-y-1">


            <div class="grid md:grid-cols-2 gap-4">
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Institución de SS</strong>

                    <p>{{ $persona->ss }}</p>

                </div>
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>NSS</strong>

                    <p>{{ $persona->nss }}</p>

                </div>
            </div>
            <div class="grid md:grid-cols-2 gap-4">

                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>CURP</strong>

                    <p>{{ $persona->curp }}</p>

                </div>
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>RFC</strong>

                    <p>{{ $persona->rfc }}</p>

                </div>
            </div>
            <div class="grid md:grid-cols-2 gap-4">

                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Nacionalidad</strong>

                    <p>{{ $persona->nacionalidad }}</p>

                </div>
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Estado civil</strong>

                    <p>{{ $persona->estado_civil }}</p>

                </div>
            </div>
            <div class="grid md:grid-cols-2 gap-4">

                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Fecha de nacimiento</strong>

                    <p>{{ $persona->fecha_nacimiento }}</p>

                </div>
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Lugar de nacimiento</strong>

                    <p>{{ $persona->lugar_nacimiento }}</p>

                </div>
            </div>
            <div class="grid md:grid-cols-2 gap-4">

                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Sexo</strong>

                    <p>{{ $persona->sexo }}</p>

                </div>
                <div class="rounded-lg bg-red-200 py-1 px-2">

                    <strong>Tipo de sangre</strong>

                    <p>{{ $persona->tipo_sangre }}</p>

                </div>
            </div>

        </div> --}}

    </div>

</div>
@endsection