@extends('layouts.teacher.app')

@section('content')
<style>
    .result-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    
    .table-custom {
        border-radius: 8px;
        overflow: hidden;
    }
    
    .table-custom thead {
        background-color: #f8f9fa;
    }
    
    .table-custom th {
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        border-bottom: 2px solid #dee2e6;
    }
    
    .badge-custom {
        padding: 0.4rem 0.8rem;
        border-radius: 6px;
        font-weight: 500;
    }
</style>

<div class="pagetitle">
    <h1>Senarai Keluar Berjaya Dimuat Naik</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Utama</a></li>
            <li class="breadcrumb-item"><a href="{{ route('outing.uploadlist') }}">Muatnaik Senarai</a></li>
            <li class="breadcrumb-item active">Hasil</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-12">
            <div class="card result-card">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>Permohonan Berjaya Diproses
                        </h5>
                        <span class="badge bg-success badge-custom">
                            {{ is_countable($uploadedOutings) ? count($uploadedOutings) : $uploadedOutings->total() }} rekod
                        </span>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover table-custom">
                            <thead>
                                <tr>
                                    <th style="width: 5%">#</th>
                                    <th style="width: 15%">ID Keluar</th>
                                    <th style="width: 20%">Nama Pelajar</th>
                                    <th style="width: 12%">ID Pelajar</th>
                                    <th style="width: 15%">Tarikh Keluar</th>
                                    <th style="width: 15%">Tarikh Masuk</th>
                                    <th style="width: 13%">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($uploadedOutings as $index => $outing)
                                    <tr>
                                        <td class="text-muted">
                                            @if(is_countable($uploadedOutings))
                                                {{ $index + 1 }}
                                            @else
                                                {{ ($uploadedOutings->currentPage() - 1) * $uploadedOutings->perPage() + $index + 1 }}
                                            @endif
                                        </td>
                                        <td><small class="font-monospace">{{ $outing->id }}</small></td>
                                        <td><strong>{{ $outing->user_name }}</strong></td>
                                        <td>{{ $outing->user_id }}</td>
                                        <td>
                                            <small class="text-muted">
                                                {{ \Carbon\Carbon::parse($outing->start_date . ' ' . $outing->start_time)->format('d M Y') }}<br>
                                                <span class="badge bg-light text-dark">
                                                    {{ \Carbon\Carbon::parse($outing->start_date . ' ' . $outing->start_time)->format('h:i A') }}
                                                </span>
                                            </small>
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ \Carbon\Carbon::parse($outing->end_date . ' ' . $outing->end_time)->format('d M Y') }}<br>
                                                <span class="badge bg-light text-dark">
                                                    {{ \Carbon\Carbon::parse($outing->end_date . ' ' . $outing->end_time)->format('h:i A') }}
                                                </span>
                                            </small>
                                        </td>
                                        <td>
                                            <span class="badge bg-success badge-custom">{{ $outing->appl_status }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-muted">
                                            <i class="bi bi-inbox" style="font-size: 2rem;"></i>
                                            <p class="mt-2 mb-0">Tiada rekod untuk dipaparkan</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if(!is_countable($uploadedOutings) && $uploadedOutings->hasPages())
                        <div class="mt-4">
                            {{ $uploadedOutings->links() }}
                        </div>
                    @endif

                    <div class="d-flex gap-2 justify-content-center mt-4">
                        <a href="{{ route('outing.uploadlist') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-2"></i>Kembali ke Muatnaik
                        </a>
                        <a href="{{ route('outing.listapp') }}" class="btn btn-primary">
                            <i class="bi bi-list-ul me-2"></i>Lihat Semua Permohonan
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection