@extends('layouts.teacher-portal')
@section('title', 'My Profile')
@section('header', 'My Profile')

@section('content')
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">

        {{-- Profile card + photo --}}
        <div class="rounded-2xl bg-white p-6 text-center shadow-sm ring-1 ring-slate-900/5">
            <span class="mx-auto flex h-24 w-24 items-center justify-center overflow-hidden rounded-full bg-primary-100 text-2xl font-bold text-primary-700">
                @if ($teacher->photo)
                    <img src="{{ $teacher->photo_url }}?v={{ filemtime(public_path('storage/' . $teacher->photo)) }}" alt="" class="h-full w-full object-cover">
                @else
                    {{ $teacher->initials }}
                @endif
            </span>
            <h2 class="mt-4 font-display text-lg font-bold text-slate-900">{{ $teacher->full_name }}</h2>
            <p class="text-sm text-slate-400">{{ $teacher->designation ?? 'Teacher' }}</p>

            <form method="POST" action="{{ route('tportal.profile.photo', $school->id) }}" enctype="multipart/form-data" class="mt-4">
                @csrf
                <label class="inline-block cursor-pointer rounded-lg bg-slate-100 px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-200">
                    {{ $teacher->photo ? 'Change Photo' : 'Upload Photo' }}
                    <input type="file" name="photo" accept="image/*" class="hidden" onchange="this.form.submit()">
                </label>
                @error('photo')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
            </form>

            <dl class="mt-6 space-y-2 border-t border-slate-100 pt-4 text-left text-sm">
                <div class="flex justify-between gap-2"><dt class="text-slate-400">Staff ID</dt><dd class="font-medium text-slate-700">{{ $teacher->employee_id }}</dd></div>
                <div class="flex justify-between gap-2"><dt class="text-slate-400">Department</dt><dd class="font-medium text-slate-700">{{ $teacher->department ?? '—' }}</dd></div>
                <div class="flex justify-between gap-2"><dt class="text-slate-400">Joined</dt><dd class="font-medium text-slate-700">{{ optional($teacher->join_date)->format('j M Y') ?? '—' }}</dd></div>
                <div class="flex justify-between gap-2"><dt class="text-slate-400">Status</dt><dd><span class="rounded-full bg-green-50 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-green-600">{{ ucfirst($teacher->employment_status) }}</span></dd></div>
                <div class="flex justify-between gap-2"><dt class="text-slate-400">Login</dt><dd class="font-medium text-slate-700">{{ $ctx->user->email }}</dd></div>
            </dl>
            <p class="mt-4 rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-relaxed text-slate-400">To change your name, contact details or other records, please contact the school administrator.</p>
        </div>

        {{-- Editable details --}}
        <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-900/5 lg:col-span-2">
            <h3 class="mb-4 font-display text-base font-semibold text-slate-900">Contact Details</h3>

            @unless ($perm['manage_profile'])
                <div class="mb-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">Profile editing is disabled by your administrator.</div>
            @endunless

            <form method="POST" action="{{ route('tportal.profile.update', $school->id) }}" class="max-w-xl space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-slate-600">Phone Number</label>
                    <input type="text" name="phone" value="{{ old('phone', $teacher->phone) }}" {{ !$perm['manage_profile'] ? 'disabled' : '' }}
                           class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:bg-slate-50 disabled:text-slate-400">
                    @error('phone')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-600">Home Address</label>
                    <textarea name="address" rows="3" {{ !$perm['manage_profile'] ? 'disabled' : '' }}
                              class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:bg-slate-50 disabled:text-slate-400">{{ old('address', $teacher->address) }}</textarea>
                    @error('address')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                </div>

                @if ($perm['manage_profile'])
                    <button type="submit" class="rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-md shadow-primary-500/20 hover:bg-primary-700">Save Changes</button>
                @endif
            </form>

            {{-- Read-only record snapshot --}}
            <div class="mt-8 grid grid-cols-1 gap-x-8 gap-y-3 border-t border-slate-100 pt-6 sm:grid-cols-2">
                <div><p class="text-xs uppercase tracking-wide text-slate-400">Qualification</p><p class="text-sm font-medium text-slate-700">{{ $teacher->qualification ?? '—' }}</p></div>
                <div><p class="text-xs uppercase tracking-wide text-slate-400">Specialization</p><p class="text-sm font-medium text-slate-700">{{ $teacher->specialization ?? '—' }}</p></div>
                <div><p class="text-xs uppercase tracking-wide text-slate-400">Experience</p><p class="text-sm font-medium text-slate-700">{{ $teacher->experience ?? '—' }}</p></div>
                <div><p class="text-xs uppercase tracking-wide text-slate-400">Employment Type</p><p class="text-sm font-medium capitalize text-slate-700">{{ str_replace('_', ' ', $teacher->employment_type ?? '—') }}</p></div>
                <div><p class="text-xs uppercase tracking-wide text-slate-400">Email</p><p class="text-sm font-medium text-slate-700">{{ $teacher->email ?? '—' }}</p></div>
                <div><p class="text-xs uppercase tracking-wide text-slate-400">Gender</p><p class="text-sm font-medium capitalize text-slate-700">{{ $teacher->gender ?? '—' }}</p></div>
                @if ($teacher->bio)
                    <div class="sm:col-span-2"><p class="text-xs uppercase tracking-wide text-slate-400">Bio</p><p class="text-sm text-slate-600">{{ $teacher->bio }}</p></div>
                @endif
            </div>
        </div>
    </div>
@endsection