@extends('admin.layouts.app')
@section('title', 'Educator Profile')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">Educators</a></li>
    <li class="breadcrumb-item active">{{ $educator->name }}</li>
@endsection
@section('content')
    <div class="page-header">
        <div class="d-flex align-items-center gap-3">
            <div
                style="width:56px;height:56px;border-radius:14px;background:#dbeafe;color:#1d4ed8;font-weight:700;font-size:1.2rem;display:flex;align-items:center;justify-content:center">
                {{ strtoupper(substr($educator->name, 0, 2)) }}
            </div>
            <div>
                <h1 class="page-title mb-0">{{ $educator->name }}</h1>
                <p class="page-subtitle mb-0">{{ $educator->designation?->name ?? '—' }} | {{ $educator->department?->name ?? '—' }}</p>
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.employees.edit', $educator->id) }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-pencil me-1"></i>Edit
            </a>
            <button class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#promoteModal">
                <i class="bi bi-arrow-up-circle me-1"></i>Promote
            </button>
        </div>
    </div>

    <div class="row g-3">
        <!-- PERSONAL INFO -->
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header">Personal Information</div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach ([['Date of Birth', $educator->date_of_birth?->format('d M Y')], ['Gender', ucfirst($educator->gender ?? '—')], ['Email', $educator->email ?? '—'], ['Phone', $educator->phone ?? '—'], ['Address', $educator->address ?? '—'], ['Qualification', $educator->qualification ?? '—'], ['Experience (Years)', $educator->experience_years ?? '—']] as [$label, $value])
                            <div class="col-md-6">
                                <div style="font-size:0.73rem;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em">
                                    {{ $label }}</div>
                                <div style="font-size:0.9rem;font-weight:500;color:#1e293b;margin-top:2px">
                                    {{ $value }}</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- PROFESSIONAL QUALIFICATIONS -->
            <div class="card mb-3">
                <div class="card-header">Professional Qualifications</div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach (json_decode($educator->professional_qualifications) as $qualification)
                            <div class="col-md-6">
                                <div style="font-size:0.73rem;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em">
                                    {{ $qualification->name }}</div>
                                <div style="font-size:0.9rem;font-weight:500;color:#1e293b;margin-top:2px">
                                    {{ $qualification->institution }} ({{ $qualification->year_of_passing }})
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- ATTENDANCE -->
            <div class="card">
                <div class="card-header">Attendance Summary</div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Class</th>
                                <th>Total Classes</th>
                                <th>Classes Attended</th>
                                <th>Classes Absent</th>
                                <th>% Attendance</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- @forelse($attendance as $row)
                                <tr>
                                    <td style="font-size:0.86rem">{{ $row->class_name }}</td>
                                    <td>{{ $row->total }}</td>
                                    <td style="color:#16a34a;font-weight:500">{{ $row->attended }}</td>
                                    <td style="color:#dc2626">{{ $row->absent }}</td>
                                    <td>
                                        <span
                                            style="font-weight:600;color:{{ $row->pct >= 75 ? '#16a34a' : '#dc2626' }}">{{ $row->pct }}%</span>
                                        @if ($row->pct < 75)
                                            <i class="bi bi-exclamation-triangle-fill text-danger ms-1"
                                                style="font-size:0.75rem"></i>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-3 text-muted">No attendance records</td>
                                </tr>
                            @endforelse --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- SIDEBAR -->
        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header">Status</div>
                <div class="card-body">
                    <span class="badge badge-soft-{{ $educator->status === 'active' ? 'success' : 'danger' }} px-3 py-2"
                        style="font-size:0.88rem">
                        {{ ucfirst($educator->status) }}
                    </span>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Fee Payments</span>
                    <a href="{{ route('admin.accounting.payments') }}?employee_id={{ $educator->id }}"
                        class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body p-0">
                    {{-- @forelse($educator->payments->take(5) as $p)
                        <div class="d-flex justify-content-between p-3 {{ !$loop->last ? 'border-bottom' : '' }}">
                            <div style="font-size:0.83rem">{{ $p->feeGroup?->name ?? 'Payment' }}<br><span
                                    style="font-size:0.73rem;color:#64748b">{{ $p->payment_date->format('d M Y') }}</span>
                            </div>
                            <div class="text-end">
                                <div style="font-weight:600">₹{{ number_format($p->net_amount) }}</div>
                                <span
                                    class="badge badge-soft-{{ $p->status === 'paid' ? 'success' : 'danger' }}">{{ ucfirst($p->status) }}</span>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-3 text-muted" style="font-size:0.83rem">No payments</div>
                    @endforelse --}}
                </div>
            </div>

            @if ($educator->application)
                <div class="card">
                    <div class="card-header">Application</div>
                    <div class="card-body">
                        <a href="{{ route('admin.applications.show', $educator->application->id) }}"
                            class="btn btn-sm btn-outline-info w-100">
                            <i class="bi bi-file-earmark-person me-1"></i>View Application
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- PROMOTE MODAL -->
    <div class="modal fade" id="promoteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content" style="border-radius:14px;border:none">
                <div class="modal-header">
                    <h5 class="modal-title fw-600">Promote Educator</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action="">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-info py-2 px-3" style="font-size:0.83rem">
                            Currently: <strong>{{ $educator->designation }}</strong>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Promote to Designation</label>
                            <input type="text" name="to_designation" class="form-control"
                                value="{{ $educator->designation }}" required>
                        </div>
                        <div class="mb-1">
                            <label class="form-label">Remarks</label>
                            <input type="text" name="remarks" class="form-control" placeholder="Optional">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Promote</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection