{% extends "base.html" %}

{% block title %}{{ gettext('Student Details') }} - {{ student.full_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('list_students') }}">{{ gettext('Students') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ student.full_name }}</li>
                </ol>
            </nav>
            
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="page-title mb-0">{{ student.full_name }}</h1>
                <div class="btn-group" role="group">
                    <a href="{{ url_for('edit_student', student_id=student.id) }}" class="btn btn-warning">
                        <i class="bi bi-pencil"></i> {{ gettext('Edit') }}
                    </a>
                    <a href="{{ url_for('delete_student', student_id=student.id) }}" class="btn btn-danger" 
                       onclick="return confirm('{{ gettext('Are you sure you want to delete this student?') }}')">
                        <i class="bi bi-trash"></i> {{ gettext('Delete') }}
                    </a>
                </div>
            </div>
            
            <div class="row">
                <!-- Student Information Card -->
                <div class="col-12 col-lg-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">{{ gettext('Student Information') }}</h5>
                        </div>
                        <div class="card-body">
                            <dl class="row mb-0">
                                <dt class="col-sm-4">{{ gettext('ID') }}:</dt>
                                <dd class="col-sm-8">{{ student.id }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('CIAL Code') }}:</dt>
                                <dd class="col-sm-8">{{ student.cial_code }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('NIF/NIE/Passport') }}:</dt>
                                <dd class="col-sm-8">{{ student.nif_nie_passport or '-' }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Registration Number') }}:</dt>
                                <dd class="col-sm-8">{{ student.registration_number or '-' }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('File Number') }}:</dt>
                                <dd class="col-sm-8">{{ student.file_number or '-' }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Order Number') }}:</dt>
                                <dd class="col-sm-8">{{ student.order_number or '-' }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Full Name') }}:</dt>
                                <dd class="col-sm-8">{{ student.full_name }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('First Name') }}:</dt>
                                <dd class="col-sm-8">{{ student.first_name }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Last Name') }}:</dt>
                                <dd class="col-sm-8">{{ student.last_name }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Birth Date') }}:</dt>
                                <dd class="col-sm-8">{{ student.birth_date or '-' }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Gender') }}:</dt>
                                <dd class="col-sm-8">{{ student.gender or '-' }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Study Group') }}:</dt>
                                <dd class="col-sm-8">{{ student.study_group or '-' }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Created') }}:</dt>
                                <dd class="col-sm-8">{{ student.created_at }}</dd>
                                
                                <dt class="col-sm-4">{{ gettext('Updated') }}:</dt>
                                <dd class="col-sm-8">{{ student.updated_at }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                
                <!-- Assigned Devices Card -->
                <div class="col-12 col-lg-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">{{ gettext('Assigned Devices') }}</h5>
                        </div>
                        <div class="card-body">
                            
                            <!-- Assigned Tablets -->
                            <h6>{{ gettext('Tablets') }}</h6>
                            {% if assigned_tablets %}
                            <ul class="list-group list-group-flush mb-3">
                                {% for tablet in assigned_tablets %}
                                <li class="list-group-item">
                                    <strong>{{ tablet.brand }} {{ tablet.model }}</strong><br>
                                    <small class="text-muted">{{ gettext('Serial:') }} {{ tablet.serial_number }}</small><br>
                                    <small class="text-muted">{{ gettext('Status:') }} {{ tablet.status }}</small>
                                </li>
                                {% endfor %}
                            </ul>
                            {% else %}
                            <p class="text-muted">{{ gettext('No tablets assigned') }}</p>
                            {% endif %}
                            
                            <!-- Assigned Non-Loanable Devices -->
                            <h6>{{ gettext('Other Devices') }}</h6>
                            {% if assigned_devices %}
                            <ul class="list-group list-group-flush">
                                {% for device in assigned_devices %}
                                <li class="list-group-item">
                                    <strong>{{ device.brand }} {{ device.model }}</strong><br>
                                    <small class="text-muted">{{ gettext('Type:') }} {{ device.device_type }}</small><br>
                                    <small class="text-muted">{{ gettext('Serial:') }} {{ device.serial_number }}</small>
                                </li>
                                {% endfor %}
                            </ul>
                            {% else %}
                            <p class="text-muted">{{ gettext('No other devices assigned') }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Loan History Card -->
            <div class="col-12 mb-4">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">{{ gettext('Loan History') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ gettext('ID') }}</th>
                                        <th>{{ gettext('Tablet') }}</th>
                                        <th>{{ gettext('Loan Date') }}</th>
                                        <th>{{ gettext('Return Date') }}</th>
                                        <th>{{ gettext('Status') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if loans %}
                                        {% for loan in loans %}
                                        <tr>
                                            <td>{{ loan.id }}</td>
                                            <td>{{ loan.brand }} {{ loan.model }} ({{ loan.serial_number }})</td>
                                            <td>{{ loan.loan_date }}</td>
                                            <td>{{ loan.return_date or '-' }}</td>
                                            <td>
                                                <span class="badge bg-{{ 'success' if loan.status == 'returned' else 'primary' }}">
                                                    {{ loan.status }}
                                                </span>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    {% else %}
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">
                                                {{ gettext('No loan history') }}
                                            </td>
                                        </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <a href="{{ url_for('list_students') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> {{ gettext('Back to Students') }}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}