@extends('layouts.app')
@section('title', 'My Profile')
@section('content')

<div class="mb-4">
    <h4 class="page-title">My Profile</h4>
    <p class="page-subtitle">This is how you appear to students in their assessment history.</p>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0 small">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

<form method="POST" action="{{ route('ci.profile.update') }}" enctype="multipart/form-data">
    @csrf @method('PUT')

    <div class="row g-4">
        {{-- ── Identity + stats ───────────────────────────────────────── --}}
        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-body text-center">
                    @if($profile?->photo_path)
                    <img src="{{ asset('storage/' . $profile->photo_path) }}" id="photoPreview"
                         class="ci-photo mx-auto mb-3 d-block" alt="">
                    <span id="photoPlaceholder" class="d-none"></span>
                    @else
                    <span id="photoPlaceholder" class="ci-photo ci-photo-placeholder mx-auto mb-3">
                        {{ strtoupper(mb_substr($user->name, 0, 1)) }}
                    </span>
                    <img id="photoPreview" class="ci-photo mx-auto mb-3 d-none" alt="">
                    @endif

                    <h6 class="fw-bold mb-0">{{ $user->name }}</h6>
                    <p class="text-muted small mb-1">{{ $profile?->position ?: 'Clinical Instructor' }}</p>
                    @if($profile?->department)
                    <p class="text-muted small mb-2"><i class="bi bi-hospital me-1"></i>{{ $profile->department }}</p>
                    @endif

                    <label class="btn btn-sm btn-outline-secondary w-100 mt-2">
                        <i class="bi bi-camera me-1"></i>Change photo
                        <input type="file" name="photo" id="photoInput" class="d-none" accept="image/*">
                    </label>
                    @error('photo')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    <div class="form-text mt-2">JPG or PNG, max 2 MB.</div>
                </div>
            </div>

            <div class="card">
                <div class="card-header bg-transparent fw-semibold">My activity</div>
                <ul class="list-group list-group-flush small">
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">Assigned students</span>
                        <strong>{{ $stats['students'] }}</strong>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">Assessments given</span>
                        <strong>{{ $stats['assessments'] }}</strong>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">Students assessed</span>
                        <strong>{{ $stats['students_assessed'] }}</strong>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="text-muted">Reports checked</span>
                        <strong>{{ $stats['reports'] }}</strong>
                    </li>
                </ul>
            </div>
        </div>

        {{-- ── Details ────────────────────────────────────────────────── --}}
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header bg-transparent fw-semibold">
                    <i class="bi bi-person-badge me-2 text-primary"></i>Personal information
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-3">
                        <div class="col-sm-6">
                            <label class="form-label">Full name</label>
                            <input type="text" class="form-control" value="{{ $user->name }}" disabled>
                            <div class="form-text">Managed by the administrator.</div>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label">Email</label>
                            <input type="text" class="form-control" value="{{ $user->email }}" disabled>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-sm-6">
                            <label class="form-label" for="phone">Phone</label>
                            <input type="text" id="phone" name="phone"
                                   class="form-control @error('phone') is-invalid @enderror"
                                   value="{{ old('phone', $profile?->phone) }}" placeholder="012-3456789">
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label" for="position">Position / designation</label>
                            <input type="text" id="position" name="position"
                                   class="form-control @error('position') is-invalid @enderror"
                                   value="{{ old('position', $profile?->position) }}" placeholder="Staff Nurse, Sister">
                            @error('position')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header bg-transparent fw-semibold">
                    <i class="bi bi-hospital me-2 text-primary"></i>Clinical details
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label" for="department">Department / ward / unit</label>
                        <input type="text" id="department" name="department"
                               class="form-control @error('department') is-invalid @enderror"
                               value="{{ old('department', $profile?->department) }}" placeholder="Medical Ward 4B, ICU">
                        @error('department')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div>
                        <label class="form-label" for="bio">Bio / introduction</label>
                        <textarea id="bio" name="bio" rows="3" maxlength="500"
                                  class="form-control @error('bio') is-invalid @enderror"
                                  placeholder="Brief introduction for students…">{{ old('bio', $profile?->bio) }}</textarea>
                        <div class="d-flex justify-content-between">
                            <div class="form-text">Visible to students in their assessment history.</div>
                            <div class="form-text"><span id="bioCount">0</span>/500</div>
                        </div>
                        @error('bio')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-check-lg me-1"></i>Save profile
                </button>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
    document.getElementById('photoInput')?.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = e => {
            const preview = document.getElementById('photoPreview');
            const placeholder = document.getElementById('photoPlaceholder');
            preview.src = e.target.result;
            preview.classList.remove('d-none');
            placeholder?.classList.add('d-none');
        };
        reader.readAsDataURL(file);
    });

    const bio = document.getElementById('bio');
    const count = document.getElementById('bioCount');
    const sync = () => { if (count && bio) count.textContent = bio.value.length; };
    bio?.addEventListener('input', sync);
    sync();
</script>
@endpush
@endsection