@extends('layouts.teacher.app')

@section('content')
<style>
    .appl-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;
    }
    
    .table-custom tbody tr:hover {
        background-color: #f8f9fa;
        transition: background-color 0.2s ease;
    }
    
    .info-box {
        background-color: #f8f9fa;
        border-left: 4px solid #0d6efd;
        padding: 1rem;
        border-radius: 6px;
        margin-bottom: 1rem;
    }
    
    .btn-action {
        padding: 0.4rem 0.8rem;
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.85rem;
        transition: all 0.2s ease;
    }
    
    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .popup-form {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 30px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        border-radius: 12px;
        z-index: 1000;
        max-width: 700px;
        width: 90%;
    }
    
    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
</style>

<div class="pagetitle">
    <h1>Kehadiran Harian</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Utama</a></li>
            <li class="breadcrumb-item active">Rekod Kehadiran</li>
            <li class="breadcrumb-item active">Senarai Tidak Hadir</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-12">
            @include('errors')
            @include('layouts.messages')
            
            <div class="card appl-card">
                <div class="card-body p-4">
                    <h5 class="card-title mb-4">
                        <i class="bi bi-person-x me-2"></i>Senarai Pelajar Tidak Hadir - {{$kelas}}
                    </h5>
                    
                    <div class="row mb-3">
                        <div class="col-md-6 mb-2">
                            <div class="info-box">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-people me-3" style="font-size: 1.5rem; color: #0d6efd;"></i>
                                    <div>
                                        <small class="text-muted d-block">Kelas</small>
                                        <strong>{{ $kelas }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-2">
                            <div class="info-box">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-check-circle me-3" style="font-size: 1.5rem; color: #0d6efd;"></i>
                                    <div>
                                        <small class="text-muted d-block">Jumlah Kehadiran</small>
                                        <strong>{{ $attendanceCounts }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover table-custom">
                            <thead>
                                <tr>
                                    <th style="width: 8%" class="text-center">Bil.</th>
                                    <th style="width: 15%" class="text-center">ID Pelajar</th>
                                    <th style="width: 35%">Nama Pelajar</th>
                                    <th style="width: 22%" class="text-center">Tindakan</th>
                                    <th style="width: 20%" class="text-center">Notifikasi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($studentsNotInAttendance as $stud)
                                    <tr>
                                        <td class="text-center text-muted">{{ $loop->iteration }}.</td>
                                        <td class="text-center">{{ $stud->student_id }}</td>
                                        <td><strong>{{ $stud->student_name }}</strong></td>
                                        <td class="text-center">
                                            <button class="btn btn-link btn-action text-decoration-none edit-btn" data-student-id="{{ $stud->student_id }}">
                                                <i class="bi bi-pencil-square me-1"></i>Kemaskini Status
                                            </button>
                                        </td>
                                        <td class="text-center">
                                            <form action="{{ route('teacher.sendabsentemail') }}" method="POST" onsubmit="return confirm('Adakah anda pasti mahu menghantar notifikasi emel kepada penjaga?');">
                                                @csrf
                                                <input type="hidden" name="student_id" value="{{ $stud->student_id }}">
                                                <input type="hidden" name="kod_pusat" value="{{ $stud->kod_pusat }}">
                                                <input type="hidden" name="date" value="{{ $date }}">
                                                <button type="submit" class="btn btn-sm btn-primary btn-action">
                                                    <i class="bi bi-envelope me-1"></i>Hantar
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    
                                    <!-- Popup Form for each student -->
                                    <div id="popup-form-{{ $stud->student_id }}" class="popup-form">
                                        <div class="popup-form-header mb-3">
                                            <h5 class="text-center mb-0">
                                                <i class="bi bi-pencil-square me-2"></i>Kemaskini Kehadiran Pelajar
                                            </h5>
                                        </div>
                                        <hr>
                                        <div class="popup-form-body">
                                            <form action="{{ route('teacher.editdailyatt') }}" method="POST">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-6 mb-3">
                                                        <label for="student_id" class="form-label">ID Pelajar:</label>
                                                        <input type="text" id="student_id" name="student_id" class="form-control" value="{{ $stud->student_id }}" readonly>
                                                        <input type="hidden" name="kod_pusat" value="{{ $stud->kod_pusat}}">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label for="student_name" class="form-label">Nama Pelajar:</label>
                                                        <input type="text" id="student_name" name="student_name" class="form-control" value="{{ $stud->student_name }}" readonly>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 mb-3">
                                                        <label for="att_date" class="form-label">Tarikh Kehadiran:</label>
                                                        <input type="text" id="att_date" name="att_date" class="form-control" value="{{ $date }}" readonly>
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label for="att_status" class="form-label">Kemaskini Rekod Sebagai:</label>
                                                        <select id="att_status" name="att_status" class="form-control" readonly>
                                                            <option value="">Sila Pilih</option>
                                                            <option value="attend" selected>Hadir</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 mb-3">
                                                        <label for="att_remark" class="form-label">Catatan:</label>
                                                        <input type="text" id="att_remark" name="att_remark" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="text-end">
                                                            <button type="button" class="close-btn btn btn-secondary me-2">
                                                                <i class="bi bi-x-circle me-1"></i>Tutup
                                                            </button>
                                                            <button type="submit" class="update-btn btn btn-primary">
                                                                <i class="bi bi-check-circle me-1"></i>Kemaskini Rekod
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                @empty
                                    <tr>
                                        <td colspan="5" 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 pelajar tidak hadir ditemui untuk kelas ini.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Overlay for popup -->
<div class="popup-overlay"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.edit-btn').click(function() {
            var studentId = $(this).data('student-id');
            var popupForm = $('#popup-form-' + studentId);
            var overlay = $('.popup-overlay');

            popupForm.show();
            overlay.show();

            popupForm.find('.close-btn').click(function() {
                popupForm.hide();
                overlay.hide();
            });

            overlay.click(function() {
                popupForm.hide();
                overlay.hide();
            });
        });
    });
</script>
@endsection