@extends('layouts.app')

@section('title', 'Member Verification - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">SECURE CHECK</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Membership <span style="color: var(--gold-light);">Verification</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Verification View -->
<section class="section-pad" style="background: var(--white);">
    <div class="container" style="max-width: 700px;">
        @if($member)
        <!-- Verification Card Display -->
        <div style="background: var(--off-white); border-radius: var(--radius); border: 2px solid var(--gray-200); box-shadow: var(--shadow-md); padding: 40px; text-align: center; position: relative; overflow: hidden;">
            <div style="position: absolute; top: 20px; right: 20px;">
                @if($member->status === 'active')
                    <span class="badge" style="background: #27ae60; color: white;"><i class="fas fa-check-circle"></i> VERIFIED</span>
                @else
                    <span class="badge" style="background: var(--red); color: white;"><i class="fas fa-exclamation-triangle"></i> PENDING/EXPIRED</span>
                @endif
            </div>

            <!-- Profile Info Header -->
            <div style="width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--red)); color: white; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; font-weight: 700; margin: 20px auto; box-shadow: 0 4px 15px rgba(0,0,0,0.12); border: 4px solid white;">
                {{ substr($member->first_name, 0, 1) }}
            </div>

            <h2 style="font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: var(--blue); margin-bottom: 6px;">{{ $member->full_name }}</h2>
            <div style="font-family: 'Oswald', sans-serif; font-size: 1.15rem; color: var(--red); font-weight: 600; margin-bottom: 24px;">{{ $member->member_id }}</div>

            <!-- Profile Specifications Grid -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; padding: 24px; background: white; border-radius: 8px; border: 1px solid var(--gray-200); margin-bottom: 30px;">
                <div>
                    <span style="font-size: 0.72rem; color: var(--gray-500); text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 2px;">Belt Rank</span>
                    <strong style="color: var(--blue); font-size: 0.95rem;">{{ $member->belt_rank }}</strong>
                </div>
                <div>
                    <span style="font-size: 0.72rem; color: var(--gray-500); text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 2px;">Gender</span>
                    <strong style="color: var(--blue); font-size: 0.95rem;">{{ $member->gender }}</strong>
                </div>
                <div>
                    <span style="font-size: 0.72rem; color: var(--gray-500); text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 2px; border-top: 1px solid var(--gray-100); padding-top: 8px; margin-top: 8px;">District</span>
                    <strong style="color: var(--blue); font-size: 0.95rem; display: block; border-top: 1px solid var(--gray-100); padding-top: 8px; margin-top: 8px;">{{ $member->district->name }}</strong>
                </div>
                <div>
                    <span style="font-size: 0.72rem; color: var(--gray-500); text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 2px; border-top: 1px solid var(--gray-100); padding-top: 8px; margin-top: 8px;">Dojang / Club</span>
                    <strong style="color: var(--blue); font-size: 0.95rem; display: block; border-top: 1px solid var(--gray-100); padding-top: 8px; margin-top: 8px;">{{ $member->club ? $member->club->name : 'N/A' }}</strong>
                </div>
            </div>

            <!-- Action buttons -->
            <div style="display: flex; gap: 16px; justify-content: center;">
                <a href="{{ route('home') }}" class="btn btn-outline" style="border-color: var(--blue); color: var(--blue);"><i class="fas fa-home"></i> Home</a>
                <button onclick="window.print()" class="btn btn-blue"><i class="fas fa-print"></i> Print Details</button>
            </div>
        </div>
        @else
        <!-- Enter ID Search Form -->
        <div style="background: var(--off-white); border-radius: var(--radius); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); padding: 40px; text-align: center;">
            <div style="font-size: 3.5rem; color: var(--blue); margin-bottom: 16px;"><i class="fas fa-shield-alt"></i></div>
            <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.4rem; color: var(--blue); margin-bottom: 12px;">Secure Member Database</h3>
            <p style="font-size: 0.88rem; color: var(--gray-500); line-height: 1.5; margin-bottom: 30px;">Input the official LPTA membership registration ID (e.g. LPTA-00001) to verify the authenticity of an athlete's certificate, belt promotion level, and current registration status.</p>

            <form onsubmit="this.action = '/verify/' + document.getElementById('search_member_id').value; return true;" method="GET" style="display: flex; gap: 12px;">
                <input type="text" id="search_member_id" placeholder="LPTA-XXXXX" required style="flex: 1; padding: 12px 18px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 1rem; font-family: 'Oswald', sans-serif; text-transform: uppercase;">
                <button type="submit" class="btn btn-blue" style="padding: 12px 28px;">Verify</button>
            </form>
        </div>
        @endif
    </div>
</section>

@endsection
