@extends('master')

@section('title')
    {{ $title }}
@endsection

@section('content')
    <div class="container mx-auto p-6">
        <!-- Page Heading -->
        <h1 class="text-4xl font-bold text-center text-gray-800 mb-10">Member Details: {{ $member->full_name }}</h1>

        <!-- Card Container -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">

                <!-- Personal Information Section -->
                <div class="space-y-6 mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800">Personal Information</h2>
                    <table class="table-auto w-full text-gray-600">
                        <tr>
                            <th class="text-left py-2 px-4">ID</th>
                            <td class="py-2 px-4">{{ $member->id }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Full Name</th>
                            <td class="py-2 px-4">{{ $member->full_name }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Position</th>
                            <td class="py-2 px-4">{{ $member->position }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Education</th>
                            <td class="py-2 px-4">{{ $member->education }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Specialization</th>
                            <td class="py-2 px-4">{{ $member->specialization }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Interest</th>
                            <td class="py-2 px-4">{{ $member->interest }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Email</th>
                            <td class="py-2 px-4">{{ $member->email }}</td>
                        </tr>
                    </table>
                </div>

                <!-- Links Section -->
                <div class="space-y-6 mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800">Links</h2>
                    <table class="table-auto w-full text-gray-600">
                        <tr>
                            <th class="text-left py-2 px-4">Link 1</th>
                            <td class="py-2 px-4">{{ $member->link1 }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Link 2</th>
                            <td class="py-2 px-4">{{ $member->link2 }}</td>
                        </tr>
                    </table>
                </div>

                <!-- Description Section -->
                <div class="space-y-6 mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800">Description</h2>
                    <div class="prose text-gray-600">
                        {!! $member->description !!}
                    </div>
                </div>

                <!-- Experience Section -->
                <div class="space-y-6 mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800">Experience</h2>
                    <table class="table-auto w-full text-gray-600">
                        <tr>
                            <th class="text-left py-2 px-4">Experience</th>
                            <td class="py-2 px-4">{{ $member->experience }}</td>
                        </tr>
                    </table>
                </div>

                <!-- Thumbnail Section -->
                <div class="space-y-6 mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800">Thumbnail</h2>
                    <table class="table-auto w-full text-gray-600">
                        <tr>
                            <th class="text-left py-2 px-4">Thumbnail</th>
                            <td class="py-2 px-4">
                                @if ($member->thumbnail)
                                    <img src="{{ asset('memberthumbnail/' . $member->thumbnail) }}" alt="Thumbnail" class="max-w-xs">
                                @else
                                    No Thumbnail Available
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- Status Section -->
                <div class="space-y-6 mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800">Status</h2>
                    <table class="table-auto w-full text-gray-600">
                        <tr>
                            <th class="text-left py-2 px-4">Status</th>
                            <td class="py-2 px-4">{{ $member->status == 1 ? 'Active' : 'Inactive' }}</td>
                        </tr>
                    </table>
                </div>

                <!-- Additional Information Section -->
                <div class="space-y-6 mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800">Additional Details</h2>
                    <table class="table-auto w-full text-gray-600">
                        <tr>
                            <th class="text-left py-2 px-4">Priority</th>
                            <td class="py-2 px-4">{{ $member->priority }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Type</th>
                            <td class="py-2 px-4">{{ $member->type }}</td>
                        </tr>
                        <tr>
                            <th class="text-left py-2 px-4">Section</th>
                            <td class="py-2 px-4">{{ $member->section }}</td>
                        </tr>
                    </table>
                </div>

                <!-- Back Button -->
                <div class="mt-6 text-center">
                    <a href="{{ route('members.index') }}" class="btn btn-secondary px-6 py-3 rounded bg-blue-500 text-white hover:bg-blue-600">Back to List</a>
                </div>
            </div>
        </div>
    </div>
@endsection