@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1">
                        <i class="fas fa-user-graduate text-primary me-2"></i>{{ $intern->name }}
                    </h2>
                    <p class="text-muted mb-0">
                        <i class="fas fa-calendar-alt me-1"></i>Bergabung sejak {{ $intern->created_at->format('d M Y') }}
                    </p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('interns.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                    <a href="{{ route('interns.edit', $intern) }}" class="btn btn-primary">
                        <i class="fas fa-edit me-2"></i>Edit Data
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-user-circle text-primary me-2"></i>Informasi Pribadi
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle">
                            <tr>
                                <th class="text-muted" width="200">
                                    <i class="fas fa-user me-2"></i>Nama Lengkap
                                </th>
                                <td class="fw-semibold">{{ $intern->name }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">
                                    <i class="fab fa-whatsapp me-2"></i>WhatsApp
                                </th>
                                <td>
                                    <a href="https://wa.me/{{ preg_replace('/^0/', '62', $intern->whatsapp) }}" 
                                        class="btn btn-success btn-sm" target="_blank">
                                        <i class="fab fa-whatsapp me-2"></i>{{ $intern->whatsapp }}
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-muted">
                                    <i class="fas fa-envelope me-2"></i>Email
                                </th>
                                <td>
                                    <a href="mailto:{{ $intern->email }}" class="text-decoration-none">
                                        {{ $intern->email }}
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-muted">
                                    <i class="fas fa-map-marker-alt me-2"></i>Alamat
                                </th>
                                <td>{{ $intern->address }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-graduation-cap text-primary me-2"></i>Informasi Akademik
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle">
                            <tr>
                                <th class="text-muted" width="200">
                                    <i class="fas fa-university me-2"></i>Universitas
                                </th>
                                <td class="fw-semibold">{{ $intern->university }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">
                                    <i class="fas fa-book me-2"></i>Jurusan
                                </th>
                                <td>{{ $intern->major }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle text-primary me-2"></i>Status Magang
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-4 text-center">
                        <span class="badge bg-{{ $intern->status === 'active' ? 'success' : 'secondary' }} p-2 px-4 rounded-pill fs-6">
                            <i class="fas fa-circle me-2"></i>{{ ucfirst($intern->status) }}
                        </span>
                    </div>
                    <div class="d-flex flex-column gap-3">
                        <div>
                            <p class="text-muted mb-1"><i class="fas fa-building me-2"></i>Bidang</p>
                            <p class="fw-semibold mb-0">{{ $intern->session->department->name }}</p>
                        </div>
                        <div>
                            <p class="text-muted mb-1"><i class="fas fa-layer-group me-2"></i>Sesi</p>
                            <p class="fw-semibold mb-0">{{ $intern->session->name }}</p>
                        </div>
                        <div>
                            <p class="text-muted mb-2"><i class="fas fa-calendar-alt me-2"></i>Periode</p>
                            <div class="bg-light p-3 rounded">
                                <div class="mb-2">
                                    <small class="text-muted">Mulai:</small>
                                    <div class="fw-semibold">{{ $intern->start_date->format('d M Y') }}</div>
                                </div>
                                <div class="mb-2">
                                    <small class="text-muted">Selesai:</small>
                                    <div class="fw-semibold">{{ $intern->end_date->format('d M Y') }}</div>
                                </div>
                                <div>
                                    <small class="text-muted">Durasi:</small>
                                    <div class="fw-semibold">{{ $intern->start_date->diffInWeeks($intern->end_date) }} minggu</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .card {
        border: none;
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .table th {
        font-weight: 500;
    }
</style>
@endpush
@endsection