@extends('layouts.institution')

@section('content')
<div class="container-fluid px-4 py-4">
    <!-- Top Header & Back Button -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">শিক্ষার্থীর বিস্তারিত প্রোফাইল</h4>
            <p class="text-muted small mb-0">শিক্ষার্থীর একাডেমিক ইতিহাস, ব্যক্তিগত তথ্য, বিষয় ও অন্যান্য রেকর্ড।</p>
        </div>
        <a href="{{ route('institution.students.index') }}" class="btn btn-light rounded-pill px-4 shadow-sm border">
            <i class="fa-solid fa-arrow-left me-2"></i> তালিকায় ফিরে যান
        </a>
    </div>

    <div class="row g-4">
        <!-- Left Side: Profile Summary Card -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 text-center p-4">
                <div class="position-relative d-inline-block mx-auto mb-3">
                    <img src="{{ $student->photo ? asset('storage/' . $student->photo) : asset('assets/img/default-user.png') }}" alt="Photo" class="rounded-circle shadow border" width="120" height="120" style="object-fit: cover;">
                </div>
                <h4 class="fw-bold text-dark mb-1">{{ $student->name_bangla }}</h4>
                <p class="text-muted small mb-2">{{ $student->name_english ?? 'N/A' }}</p>
                <div class="mb-3">
                    <span class="badge bg-primary font-monospace px-3 py-2 fs-6">ID: {{ $student->unique_id }}</span>
                </div>

                <hr class="my-3">

                <!-- Current Class Enrollment Summary -->
                <div class="bg-light p-3 rounded-3 text-start mb-3">
                    <h6 class="fw-bold text-primary mb-2"><i class="fa-solid fa-graduation-cap me-2"></i> বর্তমান ক্লাস বিবরণ</h6>
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-muted">শিক্ষাবর্ষ:</span>
                        <span class="fw-bold text-dark">{{ $student->currentEnrollment?->academicSession?->name ?? 'N/A' }}</span>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-muted">শ্রেণি:</span>
                        <span class="fw-bold text-dark">{{ $student->currentEnrollment?->institutionClass?->name ?? 'N/A' }}</span>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-muted">সেকশন:</span>
                        <span class="fw-bold text-dark">{{ $student->currentEnrollment?->section?->name ?? 'N/A' }}</span>
                    </div>
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-muted">গ্রুপ:</span>
                        <span class="fw-bold text-dark">{{ $student->currentEnrollment?->group?->name ?? 'N/A' }}</span>
                    </div>
                    <div class="d-flex justify-content-between small">
                        <span class="text-muted">রোল নম্বর:</span>
                        <span class="badge bg-secondary font-monospace">{{ $student->currentEnrollment?->roll_number ?? 'N/A' }}</span>
                    </div>
                </div>

                <div class="text-start small">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">লিঙ্গ:</span>
                        <span class="text-capitalize fw-semibold">{{ $student->gender }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">মোবাইল নম্বর:</span>
                        <span class="fw-semibold">{{ $student->phone_number ?? 'N/A' }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">রক্তের গ্রুপ:</span>
                        <span class="badge bg-danger">{{ strtoupper($student->blood_group ?? 'N/A') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Side: Detailed Tabs -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <!-- Nav Tabs -->
                    <ul class="nav nav-tabs card-header-tabs gap-2 border-0" id="studentTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active rounded-pill px-4 fw-semibold" id="academic-tab" data-bs-toggle="tab" data-bs-target="#academic" type="button" role="tab">
                                <i class="fa-solid fa-clock-rotate-left me-1"></i> একাডেমিক ইতিহাস
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link rounded-pill px-4 fw-semibold" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab">
                                <i class="fa-solid fa-user me-1"></i> ব্যক্তিগত তথ্য
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link rounded-pill px-4 fw-semibold" id="subjects-tab" data-bs-toggle="tab" data-bs-target="#subjects" type="button" role="tab">
                                <i class="fa-solid fa-book me-1"></i> বিষয়সমূহ
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link rounded-pill px-4 fw-semibold" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments" type="button" role="tab">
                                <i class="fa-solid fa-credit-card me-1"></i> পেমেন্ট
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card-body p-4">
                    <div class="tab-content" id="studentTabContent">
                        
                        <!-- Tab 1: Academic History & Enrollments -->
                        <div class="tab-pane fade show active" id="academic" role="tabpanel">
                            <h6 class="fw-bold text-primary mb-3"><i class="fa-solid fa-timeline me-2"></i> অতীত ও বর্তমান সকল শিক্ষাবর্ষের এনরোলমেন্ট ইতিহাস</h6>
                            
                            <div class="table-responsive">
                                <table class="table table-hover align-middle border text-center small">
                                    <thead class="bg-light text-secondary">
                                        <tr>
                                            <th>শিক্ষাবর্ষ (Session)</th>
                                            <th>শ্রেণি (Class)</th>
                                            <th>সেকশন</th>
                                            <th>গ্রুপ</th>
                                            <th>শিফট</th>
                                            <th>রোল</th>
                                            <th>স্ট্যাটাস</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($student->enrollments as $enrollment)
                                        <tr class="{{ $enrollment->status == 'active' ? 'table-success-subtle fw-semibold' : '' }}">
                                            <td>
                                                <span class="fw-bold">{{ $enrollment->academicSession?->name ?? 'N/A' }}</span>
                                            </td>
                                            <td>{{ $enrollment->institutionClass?->name ?? 'N/A' }}</td>
                                            <td>{{ $enrollment->section?->name ?? 'N/A' }}</td>
                                            <td>{{ $enrollment->group?->name ?? 'N/A' }}</td>
                                            <td>{{ $enrollment->shift?->name ?? 'N/A' }}</td>
                                            <td>
                                                <span class="badge bg-light text-dark border font-monospace">
                                                    {{ $enrollment->roll_number ?? 'N/A' }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($enrollment->status == 'active')
                                                    <span class="badge bg-success">Current / Active</span>
                                                @elseif($enrollment->status == 'passed_out')
                                                    <span class="badge bg-primary">Passed Out</span>
                                                @elseif($enrollment->status == 'transferred')
                                                    <span class="badge bg-warning text-dark">Transferred</span>
                                                @else
                                                    <span class="badge bg-secondary">{{ ucfirst($enrollment->status) }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-4 text-muted">কোনো ক্লাস এনরোলমেন্টের ইতিহাস পাওয়া যায়নি।</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tab 2: Personal & Family Info -->
                        <div class="tab-pane fade" id="info" role="tabpanel">
                            <h6 class="fw-bold text-primary mb-3"><i class="fa-solid fa-user-circle me-2"></i> ব্যক্তিগত ও পারিবারিক বিবরণ</h6>
                            <div class="row g-3 small mb-4">
                                <div class="col-md-6"><strong>জন্মতারিখ:</strong> {{ $student->date_of_birth ? $student->date_of_birth->format('d M, Y') : 'N/A' }}</div>
                                <div class="col-md-6"><strong>জন্ম নিবন্ধন নম্বর:</strong> {{ $student->birth_regi_number ?? 'N/A' }}</div>
                                <div class="col-md-6"><strong>পিতার নাম (বাংলা):</strong> {{ $student->f_name_bangla ?? 'N/A' }}</div>
                                <div class="col-md-6"><strong>পিতার এনআইডি:</strong> {{ $student->f_nid ?? 'N/A' }}</div>
                                <div class="col-md-6"><strong>মাতার নাম (বাংলা):</strong> {{ $student->m_name_bangla ?? 'N/A' }}</div>
                                <div class="col-md-6"><strong>মাতার এনআইডি:</strong> {{ $student->m_nid ?? 'N/A' }}</div>
                            </div>

                            <h6 class="fw-bold text-primary mb-3"><i class="fa-solid fa-map-marker-alt me-2"></i> ঠিকানা ও অভিভাবক</h6>
                            <div class="row g-3 small">
                                <div class="col-12"><strong>বর্তমান ঠিকানা:</strong> {{ $student->present_village }}, {{ $student->present_post }}, {{ $student->present_thana }}, {{ $student->present_dist }}</div>
                                <div class="col-12"><strong>স্থায়ী ঠিকানা:</strong> {{ $student->permanent_village }}, {{ $student->permanent_post }}, {{ $student->permanent_thana }}, {{ $student->permanent_dist }}</div>
                                <div class="col-md-4 mt-2"><strong>অভিভাবক:</strong> <span class="text-capitalize">{{ $student->guardian }}</span></div>
                                <div class="col-md-4 mt-2"><strong>অভিভাবকের নাম:</strong> {{ $student->guardian_name_bangla ?? 'N/A' }}</div>
                                <div class="col-md-4 mt-2"><strong>মোবাইল:</strong> {{ $student->guardian_mobile_no ?? 'N/A' }}</div>
                            </div>
                        </div>

                        <!-- Tab 3: Subjects -->
                        <div class="tab-pane fade" id="subjects" role="tabpanel">
                            <h6 class="fw-bold text-primary mb-3"><i class="fa-solid fa-book me-2"></i> বর্তমান ক্লাসের বিষয়সমূহ</h6>
                            <p class="text-muted small">বর্তমান শ্রেণীতে যুক্ত বিষয়সমূহ প্রদর্শিত হচ্ছে।</p>
                        </div>

                        <!-- Tab 4: Payments -->
                        <div class="tab-pane fade" id="payments" role="tabpanel">
                            <h6 class="fw-bold text-primary mb-3"><i class="fa-solid fa-credit-card me-2"></i> ফি ও পেমেন্ট হিস্ট্রি</h6>
                            <p class="text-muted small">শিক্ষার্থীর ফি পরিষদের ইতিহাস।</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection