@extends('layouts.admin')

@section('title', $student->user->name)
@section('page-title', trans('admin.Student details'))

@section('content')

<style>
  #dpage-student-show .std-hero{ display:flex; align-items:center; gap:20px; padding:22px; margin-bottom:16px; flex-wrap:wrap; }
  #dpage-student-show .std-avatar{ width:76px; height:76px; border-radius:50%; flex-shrink:0; background:var(--ph-bg); color:var(--ph-icon); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  #dpage-student-show .std-avatar img{ width:100%; height:100%; object-fit:cover; }
  #dpage-student-show .std-avatar svg{ width:44%; height:44%; }
  #dpage-student-show .std-info{ flex:1; min-width:200px; }
  #dpage-student-show .std-info h2{ font-size:20px; margin-bottom:4px; }
  #dpage-student-show .std-info .sub{ font-size:13px; color:var(--text-muted); }
  #dpage-student-show .std-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
  #dpage-student-show .back-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-faint); text-decoration:none; margin-bottom:14px; }
  #dpage-student-show .back-link:hover{ color:var(--primary); }
  #dpage-student-show .back-link svg{ width:14px; height:14px; }
  #dpage-student-show .settings-card{ margin-bottom:16px; }
</style>

<section class="dpage active" id="dpage-student-show">
    <a href="{{ route('dashboard.students.index') }}" class="back-link">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
        {{ trans('admin.Students') }}
    </a>

    <div class="card std-hero">
        <div class="std-avatar">
            @if($student->user->getImage())
                <img src="{{ $student->user->getImage() }}" alt="{{ $student->user->name }}">
            @else
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>
            @endif
        </div>
        <div class="std-info">
            <div class="std-top">
                <h2>{{ $student->user->name }}</h2>
                <span class="pill {{ $student->status === 'active' ? 'pill-green' : 'pill-muted' }}">{{ trans('admin.' . ucfirst($student->status)) }}</span>
            </div>
            <div class="sub">{{ $student->user->email }} · {{ trans('admin.Joined') }} {{ $student->created_at }}</div>
        </div>
    </div>

    <div class="stat-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:16px;">
        <div class="stat-card"><div class="stat-val">{{ $courses->count() }}</div><div class="stat-label">{{ trans('admin.Enrolled courses') }}</div></div>
        <div class="stat-card"><div class="stat-val">{{ trans('admin.currency') }} {{ number_format($totalSpent) }}</div><div class="stat-label">{{ trans('admin.Total spent') }}</div></div>
        <div class="stat-card"><div class="stat-val">{{ $paymentsCount }}</div><div class="stat-label">{{ trans('admin.Payments') }}</div></div>
    </div>

    <div class="card settings-card">
        <div class="section-sub-head">
            <div><h3>{{ trans('admin.Student details') }}</h3></div>
        </div>
        <div class="card-pad">
            <div class="form-grid">
                <div class="field">
                    <label>{{ trans('admin.Phone') }}</label>
                    <div>{{ $student->user->phone ?: '—' }}</div>
                </div>
                <div class="field">
                    <label>{{ trans('admin.Age') }}</label>
                    <div>{{ $student->age ?: '—' }}</div>
                </div>
                <div class="field">
                    <label>{{ trans('admin.Country') }}</label>
                    <div>{{ $student->country ?: '—' }}</div>
                </div>
                <div class="field">
                    <label>{{ trans('admin.Gender') }}</label>
                    <div>{{ $student->gender ? trans('admin.' . ucfirst($student->gender)) : '—' }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card settings-card">
        <div class="section-sub-head">
            <div><h3>{{ trans('admin.Enrolled courses') }}</h3></div>
        </div>
        <div class="table-wrap">
            @if($courses->isNotEmpty())
                <table class="dtable" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ trans('admin.Course') }}</th>
                            <th>{{ trans('admin.Category') }}</th>
                            <th>{{ trans('admin.Enrolled on') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($courses as $course)
                            <tr>
                                <td>{{ $course->title }}</td>
                                <td>{{ optional($course->category)->name ?? '—' }}</td>
                                <td>{{ optional($course->pivot->created_at)->format('Y-m-d') ?? '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="card-pad" style="text-align:center;color:var(--text-faint);">{{ trans('admin.No courses yet') }}</div>
            @endif
        </div>
    </div>

    <div class="card settings-card">
        <div class="section-sub-head">
            <div><h3>{{ trans('admin.Points history') }}</h3></div>
        </div>
        <div class="table-wrap" id="studentPointsList" style="padding:18px;">—</div>
        <div class="table-foot" id="studentPointsPager" style="display:none;padding:0 18px 18px;"></div>
    </div>
</section>

@endsection

@section('script')
<script>
    var studentId = {{ $student->id }};

    function loadStudentPoints(page){
        $('#studentPointsList').text('…');
        $('#studentPointsPager').hide().html('');

        $.get("{{ url('dashboard/students') }}/" + studentId + "/points", { page: page || 1 }, function(res){
            if (!res.data || !res.data.length) {
                $('#studentPointsList').text("{{ trans('admin.No points yet') }}");
                return;
            }

            var esc = function(s){ return $('<div>').text(s == null ? '' : s).html(); };
            var rows = res.data.map(function(tx){
                return '<tr>' +
                    '<td>' + esc(tx.reason) + (tx.source ? ' <span style="color:var(--text-faint);font-size:12px;">— ' + esc(tx.source) + '</span>' : '') + '</td>' +
                    '<td style="font-family:var(--font-mono);white-space:nowrap;">' + esc(tx.created_at) + '</td>' +
                    '<td style="font-family:var(--font-mono);color:var(--gold-ink);font-weight:700;">+' + tx.points + '</td>' +
                '</tr>';
            }).join('');

            $('#studentPointsList').html(
                '<table class="dtable" style="width:100%"><thead><tr>' +
                '<th>{{ trans('admin.Action') }}</th><th>{{ trans('admin.Date') }}</th><th>{{ trans('admin.Points') }}</th>' +
                '</tr></thead><tbody>' + rows + '</tbody></table>'
            );

            if (res.last_page > 1) {
                var pager = '<ul class="pagination">';
                pager += '<li class="page-item ' + (res.current_page <= 1 ? 'disabled' : '') + '"><a class="page-link" href="#" data-page="' + (res.current_page - 1) + '">&lsaquo;</a></li>';
                for (var p = 1; p <= res.last_page; p++) {
                    pager += '<li class="page-item ' + (p === res.current_page ? 'active' : '') + '"><a class="page-link" href="#" data-page="' + p + '">' + p + '</a></li>';
                }
                pager += '<li class="page-item ' + (res.current_page >= res.last_page ? 'disabled' : '') + '"><a class="page-link" href="#" data-page="' + (res.current_page + 1) + '">&rsaquo;</a></li>';
                pager += '</ul>';
                $('#studentPointsPager').html(pager).show();
            }
        }).fail(function(){
            $('#studentPointsList').text("{{ trans('admin.faild') }}");
        });
    }

    $(document).on('click', '#studentPointsPager .page-link', function(e){
        e.preventDefault();
        if ($(this).closest('.page-item').hasClass('disabled')) return;
        loadStudentPoints($(this).data('page'));
    });

    loadStudentPoints(1);
</script>
@endsection