@extends('layouts.app')

@section('content')
<style>
    .stat-card {
        border-left: 4px solid;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .stat-card.stat-success { border-left-color: #198754; }
    .stat-card.stat-warning { border-left-color: #ffc107; }
    .stat-card.stat-info { border-left-color: #0dcaf0; }
    .stat-card.stat-primary { border-left-color: #0d6efd; }
    .stat-card.stat-danger { border-left-color: #dc3545; }
    
    .profile-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .profile-photo-large {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border: 4px solid white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .timeline {
        position: relative;
        padding-left: 2rem;
    }
    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 1.5rem;
    }
    .timeline-marker {
        position: absolute;
        left: -2rem;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        border: 3px solid #0d6efd;
    }
    .timeline-item:first-child .timeline-marker {
        border-color: #198754;
        background: #198754;
    }
    
    .info-table th {
        width: 35%;
        background-color: #f8f9fa;
        font-weight: 600;
    }
    
    .section-title {
        border-bottom: 2px solid #0d6efd;
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
        font-weight: 600;
        color: #0d6efd;
    }
    
    .payment-badge {
        font-size: 0.85rem;
        padding: 0.35rem 0.65rem;
    }
</style>

<div class="container-fluid">
    <div class="row justify-content-start">
        @include('layouts.left-menu')
        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-10 col-xl-10 col-xxl-10">
            
            {{-- Profile Header --}}
            <div class="profile-header">
                <div class="row align-items-center">
                    <div class="col-auto">
                        @if (isset($student->photo))
                            <img src="{{asset('/storage'.$student->photo)}}" class="rounded-circle profile-photo-large" alt="Profile photo">
                        @else
                            <img src="{{asset('imgs/profile.png')}}" class="rounded-circle profile-photo-large" alt="Profile photo">
                        @endif
                    </div>
                    <div class="col">
                        <h2 class="mb-1">{{$student->first_name}} {{$student->last_name}}</h2>
                        @if($promotion_info)
                        <p class="mb-2 opacity-90">
                            <i class="bi bi-card-text me-2"></i>ID Card: <strong>{{$promotion_info->id_card_number ?? 'N/A'}}</strong>
                        </p>
                        <div class="d-flex gap-3 flex-wrap">
                            <span><i class="bi bi-book me-1"></i> {{$promotion_info->section->schoolClass->class_name ?? $promotion_info->schoolClass->class_name ?? 'N/A'}}</span>
                            <span><i class="bi bi-diagram-3 me-1"></i> {{$promotion_info->section->section_name ?? 'N/A'}}</span>
                            <span><i class="bi bi-calendar-event me-1"></i> {{$promotion_info->schoolSession->session_name ?? 'N/A'}}</span>
                        </div>
                        @else
                        <p class="mb-2 opacity-90">
                            <span class="badge bg-warning">No enrollment record found</span>
                        </p>
                        @endif
                    </div>
                    <div class="col-auto">
                        <a href="{{route('student.list.show')}}" class="btn btn-light">
                            <i class="bi bi-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>

            {{-- Statistics Cards --}}
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <div class="card stat-card stat-success h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <p class="text-muted mb-1 small">Total Paid</p>
                                    <h3 class="mb-0 text-success">Rs. {{number_format($total_paid, 2)}}</h3>
                                </div>
                                <div class="bg-success bg-opacity-10 p-3 rounded">
                                    <i class="bi bi-cash-coin fs-4 text-success"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card stat-card stat-{{ $total_balance > 0 ? 'warning' : 'success' }} h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <p class="text-muted mb-1 small">Outstanding Balance</p>
                                    <h3 class="mb-0 text-{{ $total_balance > 0 ? 'warning' : 'success' }}">Rs. {{number_format($total_balance, 2)}}</h3>
                                </div>
                                <div class="bg-{{ $total_balance > 0 ? 'warning' : 'success' }} bg-opacity-10 p-3 rounded">
                                    <i class="bi bi-exclamation-triangle fs-4 text-{{ $total_balance > 0 ? 'warning' : 'success' }}"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card stat-card stat-info h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <p class="text-muted mb-1 small">Attendance Rate</p>
                                    <h3 class="mb-0 text-info">{{$attendance_rate}}%</h3>
                                    <p class="mb-0 small text-muted">{{$total_attendance}} total</p>
                                </div>
                                <div class="bg-info bg-opacity-10 p-3 rounded">
                                    <i class="bi bi-calendar-check fs-4 text-info"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card stat-card stat-primary h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <p class="text-muted mb-1 small">Payment Type</p>
                                    <h5 class="mb-0 text-primary">
                                        @if($active_payment_profile)
                                            {{ $active_payment_profile->getPaymentTypeName() }}
                                        @else
                                            Not Set
                                        @endif
                                    </h5>
                                </div>
                                <div class="bg-primary bg-opacity-10 p-3 rounded">
                                    <i class="bi bi-credit-card fs-4 text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                {{-- Left Column --}}
                <div class="col-lg-4">
                    
                    {{-- Student Information --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="section-title">
                                <i class="bi bi-person-fill me-2"></i>Personal Information
                            </h5>
                            <table class="table table-sm info-table mb-0">
                                <tbody>
                                    <tr>
                                        <th><i class="bi bi-envelope me-1"></i> Email</th>
                                        <td>{{$student->email}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-phone me-1"></i> Phone</th>
                                        <td>{{$student->phone}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-gender-ambiguous me-1"></i> Gender</th>
                                        <td>{{$student->gender}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-cake me-1"></i> Birthday</th>
                                        <td>{{$student->birthday}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-droplet me-1"></i> Blood Type</th>
                                        <td>{{$student->blood_type}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-flag me-1"></i> Nationality</th>
                                        <td>{{$student->nationality}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-star me-1"></i> Religion</th>
                                        <td>{{$student->religion}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Address Information --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="section-title">
                                <i class="bi bi-geo-alt-fill me-2"></i>Address
                            </h5>
                            <p class="mb-2"><strong>{{$student->address}}</strong></p>
                            @if($student->address2)
                                <p class="mb-2">{{$student->address2}}</p>
                            @endif
                            <p class="mb-0 text-muted">{{$student->city}}, {{$student->zip}}</p>
                        </div>
                    </div>

                    {{-- Parents Information --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="section-title">
                                <i class="bi bi-people-fill me-2"></i>Parents' Information
                            </h5>
                            <table class="table table-sm info-table mb-0">
                                <tbody>
                                    <tr>
                                        <th><i class="bi bi-person me-1"></i> Father's Name</th>
                                        <td>{{$student->parent_info->father_name}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-phone me-1"></i> Father's Phone</th>
                                        <td>{{$student->parent_info->father_phone}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-person me-1"></i> Mother's Name</th>
                                        <td>{{$student->parent_info->mother_name}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-phone me-1"></i> Mother's Phone</th>
                                        <td>{{$student->parent_info->mother_phone}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-geo-alt me-1"></i> Address</th>
                                        <td>{{$student->parent_info->parent_address}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                {{-- Right Column --}}
                <div class="col-lg-8">
                    
                    {{-- Current Payment Profile --}}
                    @if($active_payment_profile)
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="section-title mb-0">
                                    <i class="bi bi-wallet2 me-2"></i>Current Payment Profile
                                </h5>
                                @if(auth()->user()->role == 'admin')
                                    @if($active_payment_profile->balance_remaining > 0)
                                        <a href="{{route('payments.edit', $student->id)}}" class="btn btn-sm btn-success">
                                            <i class="bi bi-cash-coin me-1"></i>Pay
                                        </a>
                                    @else
                                        <span class="badge bg-success">
                                            <i class="bi bi-check-circle me-1"></i>Fully Paid
                                        </span>
                                    @endif
                                @endif
                            </div>
                            
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="border rounded p-3 h-100">
                                        <p class="text-muted mb-1 small">Admission Fee</p>
                                        <h5 class="mb-0">Rs. {{number_format($active_payment_profile->admission_fee_amount, 2)}}</h5>
                                        <span class="badge bg-{{ $active_payment_profile->admission_fee_paid ? 'success' : 'warning' }} payment-badge mt-2">
                                            {{ $active_payment_profile->admission_fee_paid ? 'Paid' : 'Unpaid' }}
                                        </span>
                                    </div>
                                </div>
                                
                                @if($active_payment_profile->payment_type === \App\Models\StudentPaymentProfile::TYPE_MONTHLY)
                                <div class="col-md-4">
                                    <div class="border rounded p-3 h-100">
                                        <p class="text-muted mb-1 small">Monthly Fee</p>
                                        <h5 class="mb-0">Rs. {{number_format($active_payment_profile->recurring_fee_amount, 2)}}</h5>
                                        <p class="mb-0 small text-muted mt-2">Recurring</p>
                                    </div>
                                </div>
                                @elseif($active_payment_profile->payment_type === \App\Models\StudentPaymentProfile::TYPE_ANNUAL)
                                <div class="col-md-4">
                                    <div class="border rounded p-3 h-100">
                                        <p class="text-muted mb-1 small">Annual Fee</p>
                                        <h5 class="mb-0">Rs. {{number_format($active_payment_profile->recurring_fee_amount, 2)}}</h5>
                                        <p class="mb-0 small text-muted mt-2">Recurring</p>
                                    </div>
                                </div>
                                @endif
                                
                                <div class="col-md-4">
                                    <div class="border rounded p-3 h-100">
                                        <p class="text-muted mb-1 small">Current Balance</p>
                                        <h5 class="mb-0 text-{{ $active_payment_profile->calculateBalance() > 0 ? 'danger' : 'success' }}">
                                            Rs. {{number_format($active_payment_profile->calculateBalance(), 2)}}
                                        </h5>
                                        <p class="mb-0 small text-muted mt-2">Owed - Paid</p>
                                    </div>
                                </div>
                            </div>

                            @if($active_payment_profile->admission_voucher_number)
                            <div class="mt-3 p-2 bg-light rounded">
                                <small class="text-muted">
                                    <i class="bi bi-receipt me-1"></i>
                                    Voucher: <strong>{{$active_payment_profile->admission_voucher_number}}</strong>
                                    @if($active_payment_profile->admission_voucher_issued_date)
                                        | Issued: {{$active_payment_profile->admission_voucher_issued_date}}
                                    @endif
                                </small>
                            </div>
                            @endif
                        </div>
                    </div>
                    @else
                    {{-- No Payment Profile --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="section-title mb-0">
                                    <i class="bi bi-wallet2 me-2"></i>Current Payment Profile
                                </h5>
                            </div>
                            <div class="alert alert-info mb-0">
                                <i class="bi bi-info-circle me-2"></i>
                                No payment profile found for this student in the current session. 
                                @if(auth()->user()->role == 'admin')
                                    Please <a href="{{route('student.promote.form', $student->id)}}" class="alert-link">enroll the student</a> or switch to the correct session.
                                @endif
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Payment Transactions --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="section-title">
                                <i class="bi bi-receipt-cutoff me-2"></i>Payment Transactions
                            </h5>
                            
                            @if($payment_transactions->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Date</th>
                                            <th>Type</th>
                                            <th>Session</th>
                                            <th class="text-end">Amount</th>
                                            <th>Receipt</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($payment_transactions as $transaction)
                                        <tr>
                                            <td>{{$transaction->transaction_date}}</td>
                                            <td>
                                                <span class="badge bg-{{ $transaction->transaction_type === \App\Models\PaymentTransaction::TYPE_ADMISSION ? 'primary' : 'info' }} payment-badge">
                                                    {{ $transaction->getTransactionTypeName() }}
                                                </span>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $transaction->promotion->schoolSession->session_name ?? 'N/A' }}
                                                </small>
                                            </td>
                                            <td class="text-end">
                                                <strong class="text-success">Rs. {{number_format($transaction->amount_paid, 2)}}</strong>
                                            </td>
                                            <td>
                                                @if($transaction->transaction_number)
                                                    <small class="text-muted">
                                                        <i class="bi bi-file-earmark-text"></i> {{$transaction->transaction_number}}
                                                    </small>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot class="table-light">
                                        <tr>
                                            <td colspan="3" class="text-end"><strong>Total Paid:</strong></td>
                                            <td class="text-end"><strong class="text-success fs-5">Rs. {{number_format($total_paid, 2)}}</strong></td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            @else
                            <div class="text-center py-4 text-muted">
                                <i class="bi bi-inbox fs-1"></i>
                                <p class="mt-2">No payment transactions yet</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    {{-- Promotion History --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="section-title">
                                <i class="bi bi-clock-history me-2"></i>Promotion History
                            </h5>
                            
                            <div class="timeline">
                                @foreach($promotion_history as $index => $promotion)
                                <div class="timeline-item">
                                    <div class="timeline-marker"></div>
                                    <div class="card border">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="mb-1">
                                                        {{$promotion->schoolClass->class_name ?? 'N/A'}} - {{$promotion->section->section_name ?? 'N/A'}}
                                                        @if($index === 0)
                                                            <span class="badge bg-success ms-2">Current</span>
                                                        @endif
                                                    </h6>
                                                    <p class="mb-1 text-muted small">
                                                        <i class="bi bi-calendar-event me-1"></i>
                                                        Session: {{$promotion->schoolSession->session_name ?? 'N/A'}}
                                                    </p>
                                                    <p class="mb-0 text-muted small">
                                                        <i class="bi bi-card-text me-1"></i>
                                                        ID Card: {{$promotion->id_card_number ?? 'N/A'}}
                                                    </p>
                                                </div>
                                                @if($promotion->paymentProfile)
                                                <div class="text-end">
                                                    <small class="text-muted d-block">Payment Type</small>
                                                    <span class="badge bg-primary">{{$promotion->paymentProfile->getPaymentTypeName()}}</span>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Academic Information --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="section-title">
                                <i class="bi bi-mortarboard-fill me-2"></i>Academic Information
                            </h5>
                            @if($promotion_info)
                            <table class="table table-sm info-table mb-0">
                                <tbody>
                                    <tr>
                                        <th><i class="bi bi-award me-1"></i> Board Registration No.</th>
                                        <td>{{$student->academic_info->board_reg_no ?? 'Not Set'}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-book me-1"></i> Current Class</th>
                                        <td>{{$promotion_info->section->schoolClass->class_name ?? $promotion_info->schoolClass->class_name ?? 'N/A'}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-diagram-3 me-1"></i> Current Section</th>
                                        <td>{{$promotion_info->section->section_name ?? 'N/A'}}</td>
                                    </tr>
                                    <tr>
                                        <th><i class="bi bi-calendar-range me-1"></i> Current Session</th>
                                        <td>{{$promotion_info->schoolSession->session_name ?? 'N/A'}}</td>
                                    </tr>
                                </tbody>
                            </table>
                            @else
                            <div class="alert alert-warning mb-0">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                This student has no enrollment/promotion record. Please enroll the student first.
                            </div>
                            @endif
                        </div>
                    </div>

                </div>
            </div>

            @include('layouts.footer')
        </div>
    </div>
</div>
@endsection