@extends('layouts.app')
@section('title', $family->family_code)
@section('page_title', 'Family ' . $family->family_code)
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('families.index') }}">Families</a></li>
    <li class="breadcrumb-item active">{{ $family->family_code }}</li>
@endsection
@section('page_actions')
    @can('students.create')
        <a href="{{ route('students.create', ['family_id' => $family->id]) }}" class="btn btn-outline-primary"><i class="bi bi-person-plus me-1"></i>Add Student</a>
    @endcan
    @can('update', $family)
        <form method="POST" action="{{ route('families.create-login', $family) }}" class="d-inline" data-confirm="{{ $family->portalUser ? 'Reset the parent login password?' : 'Create a parent-portal login for this family?' }}">
            @csrf
            <button class="btn btn-outline-secondary"><i class="bi bi-key me-1"></i>{{ $family->portalUser ? 'Reset Parent Login' : 'Create Parent Login' }}</button>
        </form>
        <a href="{{ route('families.edit', $family) }}" class="btn btn-primary"><i class="bi bi-pencil me-1"></i>Edit</a>
    @endcan
@endsection

@section('content')
    <div class="row g-3">
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-people me-1"></i>Family Details</div>
                <div class="card-body">
                    <dl class="row mb-0 small">
                        <dt class="col-5 text-muted">Family Code</dt><dd class="col-7">{{ $family->family_code }}</dd>
                        <dt class="col-5 text-muted">Father</dt><dd class="col-7">{{ $family->father_name ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Father CNIC</dt><dd class="col-7">{{ $family->father_cnic ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Father Mobile</dt><dd class="col-7">{{ $family->father_mobile ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Occupation</dt><dd class="col-7">{{ $family->father_occupation ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Mother</dt><dd class="col-7">{{ $family->mother_name ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Mother Mobile</dt><dd class="col-7">{{ $family->mother_mobile ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Guardian</dt><dd class="col-7">{{ $family->guardian_name ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Email</dt><dd class="col-7">{{ $family->email ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Emergency</dt><dd class="col-7">{{ $family->emergency_contact ?: '—' }}</dd>
                        <dt class="col-5 text-muted">Address</dt><dd class="col-7">{{ $family->address ?: '—' }}</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-mortarboard me-1"></i>Students ({{ $family->students->count() }})</div>
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0">
                        <thead><tr><th>Student</th><th>Class</th><th>Status</th><th></th></tr></thead>
                        <tbody>
                            @forelse($family->students as $student)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="sms-avatar sm">{{ $student->initials }}</span>
                                            <div>
                                                <a href="{{ route('students.show', $student) }}" class="fw-semibold text-decoration-none">{{ $student->name }}</a>
                                                <div class="small text-muted">{{ $student->admission_number }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="small">{{ $student->schoolClass?->name ?? '—' }}{{ $student->section ? ' / '.$student->section->name : '' }}</td>
                                    <td><span class="badge bg-soft-{{ $student->status_color }} text-capitalize">{{ str_replace('_',' ',$student->status) }}</span></td>
                                    <td class="text-end"><a href="{{ route('students.show', $student) }}" class="btn btn-sm btn-light border">Profile <i class="bi bi-arrow-right"></i></a></td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted py-4">No students linked yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
