@extends('admin.layouts.app')

@section('title', 'Student Details')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.students.index') }}">Students</a></li>
                        <li class="breadcrumb-item active">Student Details</li>
                    </ol>
                </div>
                <h4 class="page-title">Student Details</h4>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="text-center">
                        @if($student->profile_picture)
                            <img src="{{ $student->profile_picture_url }}" class="rounded-circle img-thumbnail mb-3" 
                                 style="width: 120px; height: 120px; object-fit: cover;" 
                                 onerror="this.style.display='none';">
                        @else
                            <div class="d-flex align-items-center justify-content-center bg-light border rounded-circle mx-auto mb-3" 
                                 style="width: 120px; height: 120px;">
                                <i class="mdi mdi-account text-muted" style="font-size: 48px;"></i>
                            </div>
                        @endif
                        <h4 class="mb-1">{{ $student->name }}</h4>
                        <p class="text-muted">Student ID: #{{ $student->id }}</p>
                        
                        @if($student->status === 'active')
                            <span class="badge bg-success p-2 mb-3">
                                <i class="mdi mdi-check"></i> Active
                            </span>
                        @elseif($student->status === 'pending')
                            <span class="badge bg-warning p-2 mb-3">
                                <i class="mdi mdi-clock"></i> Pending
                            </span>
                        @else
                            <span class="badge bg-danger p-2 mb-3">
                                <i class="mdi mdi-block-helper"></i> Blocked
                            </span>
                        @endif
                    </div>

                    <hr>

                    <div class="text-start">
                        <h5 class="font-16 text-uppercase">Contact Information</h5>
                        <div class="mb-3">
                            <p class="text-muted mb-1">Email Address</p>
                            <p class="mb-0">{{ $student->email }}</p>
                            @if($student->email_verified_at)
                                <small class="text-success"><i class="mdi mdi-check-circle"></i> Email Verified</small>
                            @else
                                <small class="text-warning"><i class="mdi mdi-alert-circle"></i> Email Not Verified</small>
                            @endif
                        </div>

                        @if($student->phone)
                            <div class="mb-3">
                                <p class="text-muted mb-1">Phone Number</p>
                                <p class="mb-0">{{ $student->country_code }} {{ $student->phone }}</p>
                                @if($student->phone_verified_at)
                                    <small class="text-success"><i class="mdi mdi-check-circle"></i> Phone Verified</small>
                                @else
                                    <small class="text-warning"><i class="mdi mdi-alert-circle"></i> Phone Not Verified</small>
                                @endif
                            </div>
                        @endif
                    </div>

                    <hr>

                    <div class="text-start">
                        <h5 class="font-16 text-uppercase">Account Information</h5>
                        <div class="mb-3">
                            <p class="text-muted mb-1">Created</p>
                            <p class="mb-0">{{ $student->created_at->format('d M Y, g:i A') }}</p>
                        </div>
                        <div class="mb-3">
                            <p class="text-muted mb-1">Last Updated</p>
                            <p class="mb-0">{{ $student->updated_at->format('d M Y, g:i A') }}</p>
                        </div>
                        @if($student->createdBy)
                            <div class="mb-3">
                                <p class="text-muted mb-1">Created By</p>
                                <p class="mb-0">{{ $student->createdBy->name }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8 col-xl-9">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="header-title">Student Information</h4>
                        <div>
                            <a href="{{ route('admin.students.edit', $student->id) }}" class="btn btn-primary btn-sm">
                                <i class="mdi mdi-pencil"></i> Edit Student
                            </a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Full Name</label>
                                <p class="form-control-plaintext">{{ $student->name }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Email Address</label>
                                <p class="form-control-plaintext">{{ $student->email }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Phone Number</label>
                                <p class="form-control-plaintext">{{ $student->country_code }} {{ $student->phone }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <p class="form-control-plaintext">
                                    @if($student->status === 'active')
                                        <span class="badge bg-success">Active</span>
                                    @elseif($student->status === 'pending')
                                        <span class="badge bg-warning">Pending</span>
                                    @else
                                        <span class="badge bg-danger">Blocked</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection