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

    <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-2 gap-4">

        <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-3 gap-4">
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Nombre</strong>

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

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

                    <strong>Apellido Paterno</strong>

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

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

                    <strong>Apellido Materno</strong>

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

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

                    <strong>Correo electrónico</strong>

                    <p>{{ $persona->correo }}</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>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 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-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-1 gap-4">
                <div class="rounded-lg bg-gray-100 py-1 px-2">

                    <strong>Observaciones</strong>

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

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

    <div class="tab-wrapper max-h-full" x-data="{ activeTab: 0 }">
        <div class="flex py-6 space-x-10 items-center border-b-2 border-gray-500 mb-6 flex-wrap">

            <label @click="activeTab = 0" class="tab-control text-lg cursor-pointer text-gray-700"
                :class="{ 'active  bg-red-400 rounded-full px-3 py-1 text-gray-500 no-underline': activeTab === 0 }">Datos Generales
            </label>


            <label @click="activeTab = 1" class="tab-control text-lg cursor-pointer text-gray-700"
                :class="{ 'active  bg-red-400 rounded-full px-3 py-1 text-gray-500 no-underline': activeTab === 1 }">Vacunas
            </label>

            {{-- <label @click="activeTab = 2" class="tab-control text-lg cursor-pointer text-gray-700"
                :class="{ 'active  bg-red-400 rounded-full px-3 py-1 text-gray-500 no-underline': activeTab === 2 }">Evidencias
                Chromebooks
            </label>

            <label @click="activeTab = 3" class="tab-control text-lg cursor-pointer text-gray-700"
                :class="{ 'active  bg-red-400 rounded-full px-3 py-1 text-gray-500 no-underline': activeTab === 3 }">
                Galería de evidencias
            </label> --}}

        </div>
        <div class="p-4">
            <div class="tab-panel" :class="{ 'active': activeTab === 0 }"
                x-show.transition.in.opacity.duration.800="activeTab === 0">
                @livewire('persona-generales', ['persona' => $persona])
            </div>

            <div x-cloak class="tab-panel" :class="{ 'active': activeTab === 1 }"
                x-show.transition.in.opacity.duration.800="activeTab === 1">
                @livewire('persona-vacunas', ['persona' => $persona])
            </div>

            {{-- <div x-cloak class="tab-panel" :class="{ 'active': activeTab === 2 }"
                x-show.transition.in.opacity.duration.800="activeTab === 2">
                @livewire('escuela.datos-etapas2', ['escuela' => $escuela])
            </div>

            <div x-cloak class="tab-panel" :class="{ 'active': activeTab === 3 }"
                x-show.transition.in.opacity.duration.800="activeTab === 3">
                @livewire('escuela.galeria-etapa3', ['escuela' => $escuela])
            </div> --}}

        </div>





    </div>
</div>


@endsection