@extends('layouts.main')

@section('title','Kartu Ujian Semester')
@section('header','Kartu Ujian Semester')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Kartu Ujian Semester</li>
@endsection

@section('content')

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

<div class="card card-primary">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-id-card"></i> Daftar Kartu Ujian Semester</h3>
    </div>
    <div class="card-body">
        @if(isset($message))
        <div class="alert alert-warning">
            <i class="fas fa-info-circle"></i> {{ $message }}
        </div>
        @elseif($ujian_list->isEmpty())
        <div class="alert alert-info text-center">
            <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
            <h5>Belum Ada Ujian Semester yang Tersedia</h5>
            <p class="mb-0">Saat ini belum ada jadwal ujian semester yang aktif untuk jenis sekolah Anda.</p>
        </div>
        @else
        <div class="row">
            @foreach($ujian_list as $ujian)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card border-primary h-100 shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-calendar-alt"></i>
                            {{ $ujian->jenis_ujian }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td width="40%"><strong>Semester</strong></td>
                                <td>:
                                    <span class="badge badge-info">{{ $ujian->semester }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Jenis Sekolah</strong></td>
                                <td>: {{ $ujian->jenis_sekolah->jenis_sekolah ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td><strong>Tahun Ajaran</strong></td>
                                <td>: {{ $ujian->tahun_ajaran->tahun_ajaran ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td><strong>Periode Ujian</strong></td>
                                <td>:
                                    <div class="text-muted small">
                                        {{ date('d M Y', strtotime($ujian->tanggal_mulai)) }}
                                        <br>
                                        s/d
                                        <br>
                                        {{ date('d M Y', strtotime($ujian->tanggal_selesai)) }}
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Status</strong></td>
                                <td>:
                                    <span class="badge badge-success">{{ $ujian->status_aktif }}</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="card-footer bg-light">
                        <div class="btn-group w-100" role="group">
                            <a href="/kartu-ujian-semester/{{ $ujian->id }}"
                               class="btn btn-primary btn-sm btn-check-tagihan" data-id="{{ $ujian->id }}">
                                <i class="fas fa-eye"></i> Lihat Kartu
                            </a>
                            <a href="/kartu-ujian-semester/{{ $ujian->id }}/pdf"
                               class="btn btn-success btn-sm btn-check-tagihan" data-id="{{ $ujian->id }}">
                                <i class="fas fa-download"></i> Download PDF
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>

@endsection

@push('custom-scripts')
<script>
$(document).ready(function(){
    // Auto close alerts after 5 seconds
    setTimeout(function() {
        $('.alert').fadeOut('slow');
    }, 5000);

    // Cek tagihan sebelum buka kartu ujian
    $(document).on('click', '.btn-check-tagihan', function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        var id = $(this).data('id');
        var btn = $(this);
        var originalText = btn.html();

        // Show loading state (optional)
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Cek...');

        $.ajax({
            url: '/web_api/kartu-ujian-semester/' + id,
            method: 'GET',
            success: function(response) {
                btn.prop('disabled', false).html(originalText);
                if(response.status) {
                    // Jika status true (boleh akses - wait, getKartuData returns status=true if success/valid, but checkTunggakan logic returns false status if tunggakan exists)
                    // Let's re-verify getKartuData logic
                    // If checkTunggakan returns true (has tunggakan), getKartuData returns status=false and message.
                    // If all good, getKartuData returns status=true.
                    
                    // So if response.status is true, it means NO tunggakan (or allowed).
                    // However, getKartuData return structure needs to be checked.
                    // In my edit step 137:
                    // $result["status"] = true; ... return response()->json($result);
                    // If tunggakan: $result["status"] = false; ... return response()->json($result);
                    
                    // So if response.status === true, we proceed.
                    window.location.href = href;
                } else {
                    // Show error
                    if(typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Mohon Maaf',
                            text: response.message,
                            confirmButtonText: 'OK'
                        });
                    } else {
                        alert(response.message);
                    }
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false).html(originalText);
                var msg = 'Terjadi kesalahan saat memverifikasi status pembayaran.';
                if(xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                if(typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: msg
                    });
                } else {
                    alert(msg);
                }
            }
        });
    });
});
</script>
@endpush