@extends('layouts.app')

@section('content')
<div>
    <!-- Page Header -->
    <div class="panelHeader">
        <h3 class="panelHeaderTitle">Show Team</h3>
        <a href="{{ route('admin.teams') }}" class="panelHeaderBtn">
            <i class="fa-solid fa-list-check"></i>
            All Team
        </a>
    </div>

    <!-- Form -->
    <div class="rounded p-5">
        <div class="mx-auto px-4 py-8">
            <div class="flex items-start flex-col gap-8 md:flex-row">
                <div class="relative aspect-[3/4] w-full md:max-w-80 rounded-lg overflow-hidden">
                    @if (!empty($info->image))
                    <img src="{{ asset($info->image) }}" alt="Team Image" class="object-cover h-full w-full">
                    @endif
                </div>

                <div class="space-y-6">
                    <div>
                        <h1 class="text-3xl font-bold">{{$info->name}}</h1>
                        <p class="text-lg text-muted-foreground">
                            {{!empty($info->designation) ? $info->designation : ''}}</p>
                    </div>

                    @if (!empty($info->description))
                    <p class="text-muted-foreground">
                        {!! $info->description !!}</p>
                    </p>

                    @endif

                    <div class="space-y-4">
                        <h2 class="text-2xl font-semibold">More details</h2>
                        <div class="grid gap-3">
                            <div class="grid grid-cols-2 gap-4">
                                <span class="text-muted-foreground">Phone:</span>
                                <span> {{!empty($info->phone) ? $info->phone : 'N/A'}}</p></span>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <span class="text-muted-foreground">Email:</span>
                                <span> {{!empty($info->email) ? $info->email : 'N/A'}}</p></span>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <span class="text-muted-foreground">Department:</span>
                                <span> {{!empty($info->department) ? $info->department : 'N/A'}}</p></span>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <span class="text-muted-foreground">Joining Date:</span>
                                <span> {{!empty($info->joining_date) ? $info->joining_date : 'N/A'}}</p></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection