@extends('layouts.app')
@section('title', 'Staff Directory')
@section('page-title', 'Staff Directory & Contacts')

@section('content')
@php $isAdmin = auth()->user()->role === 'admin'; @endphp

<div class="space-y-6">

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
    @endif

    {{-- Header --}}
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <p class="text-sm text-gray-500">{{ $totalStaff }} staff members</p>
        </div>
        <div class="flex gap-3">
            <form method="GET" class="flex gap-2">
                <input type="text" name="search" value="{{ $search }}" placeholder="Search by name, role..."
                       class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48">
                <button type="submit" class="px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                    <i class="fas fa-search text-gray-500"></i>
                </button>
            </form>
            @if($isAdmin)
            <button onclick="document.getElementById('addStaffModal').classList.remove('hidden')"
                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium">
                <i class="fas fa-plus mr-1"></i> Add Staff
            </button>
            @endif
        </div>
    </div>

    {{-- School Contact Card --}}
    <div class="bg-gradient-to-r from-primary-700 to-primary-800 rounded-xl shadow-sm p-6 text-white">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h3 class="text-lg font-bold">{{ $schoolSettings['school_name'] ?? 'School Name' }}</h3>
                <p class="text-primary-200 text-sm mt-1">{{ $schoolSettings['school_address'] ?? '' }}</p>
            </div>
            <div class="flex flex-wrap gap-6">
                @if(!empty($schoolSettings['school_phone']))
                <div class="flex items-center gap-2">
                    <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-phone text-white"></i>
                    </div>
                    <div>
                        <p class="text-xs text-primary-200">Phone</p>
                        <p class="font-semibold">{{ $schoolSettings['school_phone'] }}</p>
                    </div>
                </div>
                @endif
                @if(!empty($schoolSettings['school_email']))
                <div class="flex items-center gap-2">
                    <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-envelope text-white"></i>
                    </div>
                    <div>
                        <p class="text-xs text-primary-200">Email</p>
                        <p class="font-semibold">{{ $schoolSettings['school_email'] }}</p>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Staff grouped by category --}}
    @forelse($orderedStaff as $category => $members)
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center gap-3">
            <div class="w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                <i class="fas {{ \App\Models\StaffDirectory::categoryIcon($category) }} text-primary-600 text-sm"></i>
            </div>
            <div>
                <h3 class="font-bold text-gray-800">{{ \App\Models\StaffDirectory::categoryLabel($category) }}</h3>
                <p class="text-xs text-gray-400">{{ $members->count() }} {{ $members->count() === 1 ? 'member' : 'members' }}</p>
            </div>
        </div>

        <div class="divide-y divide-gray-50">
            @foreach($members as $staff)
            <div class="px-6 py-4 flex items-center gap-4 hover:bg-gray-50 transition">
                {{-- Avatar --}}
                <div class="w-12 h-12 bg-{{ ['primary','blue','green','purple','pink','yellow'][($staff->id ?? 0) % 6] }}-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <span class="text-{{ ['primary','blue','green','purple','pink','yellow'][($staff->id ?? 0) % 6] }}-600 font-bold text-sm">
                        {{ strtoupper(substr($staff->name, 0, 1)) }}{{ strtoupper(substr(explode(' ', $staff->name)[1] ?? '', 0, 1)) }}
                    </span>
                </div>

                {{-- Info --}}
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <p class="font-semibold text-gray-800 text-sm">{{ $staff->name }}</p>
                        @if($staff->department)
                        <span class="text-[10px] px-1.5 py-0.5 bg-blue-50 text-blue-600 rounded font-medium">{{ $staff->department }}</span>
                        @endif
                    </div>
                    <p class="text-xs text-gray-500 mt-0.5">{{ $staff->designation }}</p>
                    @if($staff->qualification)
                    <p class="text-[11px] text-gray-400 mt-0.5">{{ $staff->qualification }}</p>
                    @endif
                </div>

                {{-- Contact --}}
                <div class="flex items-center gap-3 flex-shrink-0">
                    @if($staff->show_phone && $staff->phone)
                    <a href="tel:{{ $staff->phone }}" class="flex items-center gap-1.5 px-3 py-1.5 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 text-xs font-medium transition">
                        <i class="fas fa-phone text-[10px]"></i> {{ $staff->phone }}
                    </a>
                    @endif
                    @if($staff->show_email && $staff->email)
                    <a href="mailto:{{ $staff->email }}" class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 text-xs font-medium transition">
                        <i class="fas fa-envelope text-[10px]"></i> Email
                    </a>
                    @endif
                    @if($isAdmin)
                    <form method="POST" action="{{ route('staff-directory.destroy', $staff) }}" onsubmit="return confirm('Remove {{ $staff->name }} from directory?')">
                        @csrf @method('DELETE')
                        <button class="text-gray-300 hover:text-red-500 text-sm"><i class="fas fa-trash"></i></button>
                    </form>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @empty
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-12 text-center">
        <i class="fas fa-users text-4xl text-gray-300 mb-3 block"></i>
        <p class="text-gray-500">No staff members in directory yet.</p>
        @if($isAdmin)
        <p class="text-sm text-gray-400 mt-1">Click "Add Staff" to start building the directory.</p>
        @endif
    </div>
    @endforelse
</div>

{{-- Add Staff Modal (Admin only) --}}
@if($isAdmin)
<div id="addStaffModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-lg font-bold text-gray-800">Add Staff Member</h3>
            <button onclick="document.getElementById('addStaffModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('staff-directory.store') }}" class="p-6 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
                    <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Designation *</label>
                    <input type="text" name="designation" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" placeholder="e.g. HOD - Mathematics">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Department</label>
                    <input type="text" name="department" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" placeholder="e.g. Mathematics">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Qualification</label>
                    <input type="text" name="qualification" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" placeholder="e.g. M.Sc Mathematics, B.Ed">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                    <input type="text" name="phone" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" name="email" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Category *</label>
                    <select name="category" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        <option value="management">Management</option>
                        <option value="administration">Administration</option>
                        <option value="academic">Academic Leadership</option>
                        <option value="department_head">Department Head</option>
                        <option value="teaching" selected>Teaching Staff</option>
                        <option value="support">Support Staff</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Hierarchy Order *</label>
                    <input type="number" name="hierarchy_order" value="50" min="1" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <p class="text-[10px] text-gray-400 mt-0.5">Lower = higher rank (1=top)</p>
                </div>
            </div>
            <div class="flex gap-4">
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_phone" value="1" checked class="rounded"> Show Phone
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" name="show_email" value="1" checked class="rounded"> Show Email
                </label>
            </div>
            <div class="pt-3 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('addStaffModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancel</button>
                <button type="submit" class="px-5 py-2 bg-primary-700 text-white rounded-lg hover:bg-primary-800 text-sm font-medium">
                    <i class="fas fa-plus mr-1"></i> Add to Directory
                </button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection