@extends('layouts.app')

@section('content')
<div class="page-heading">
    <h3>Absensi Guru</h3>
    <p class="text-subtitle text-muted">Masukkan nomor RFID untuk melihat jadwal hari ini.</p>

    <script>
        // Menampilkan alert jika ada session message
        @if(session('success'))
            Swal.fire({
                position: 'top-center',
                icon: 'success',
                title: "{{ session('success') }}",
                showConfirmButton: false,
                timer: 1500
            });
        @endif

        @if(session('error'))
            Swal.fire({
                position: 'top-center',
                icon: 'error',
                title: "{{ session('error') }}",
                showConfirmButton: false,
                timer: 3500
            });
        @endif
    </script>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="section">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false" tabindex="-1">Masuk</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Keluar</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div class="m-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <form id="rfidForm">
                                        <div class="input-group mb-3">
                                            <label class="form-label col-12" for="checkRfid">Masukkan RFID</label>
                                            <input type="text" id="checkRfid" class="form-control" name="rfid" placeholder="Tempelkan kartu anda" aria-describedby="button-addon2" required>
                                            <button type="submit" class="btn btn-outline-secondary" type="button" id="button-addon2">Periksa</button>
                                        </div>
                                    </form>
                                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                    <script>
                                        document.addEventListener("DOMContentLoaded", function() {
                                            document.getElementById("checkRfid").focus();
                                        });
                                        
                                        $(document).ready(function() {
                                            $('#rfidForm').on('submit', function(e) {
                                                e.preventDefault(); 
                                                var rfid = $('#checkRfid').val();
    
                                                $.ajax({
                                                    url: '/cek-jadwal',
                                                    type: 'POST',
                                                    data: { 
                                                        rfid: rfid,
                                                        _token: '{{ csrf_token() }}'
                                                    },
                                                    success: function(response) {
                                                        if (response.success) {
                                                            console.log(response);
                                                            
                                                            // Menampilkan nama pelajaran dan kelas dalam bentuk list
                                                            var resultHtml = '';
                                                            if (response.jadwal.length > 0) {
                                                                $('#nama_guru_show').val(response.jadwal[0].nama_guru);
                                                                $('#nama_guru_show1').val(response.jadwal[0].nama_guru);
                                                                resultHtml += '<ul>';
                                                                response.jadwal.forEach(function(jadwalItem) {
    
                                                                    var jamMulai = jadwalItem.jam_mulai.substring(0, 5);
                                                                    var jamSelesai = jadwalItem.jam_selesai.substring(0, 5);
                                                                    
                                                                    resultHtml += `
                                                                    <div class="form-check btn btn-info mt-3">
                                                                    <input class="form-check-input jadwal-checkbox" type="checkbox" name="jadwal[]" value="${jadwalItem.id}" id="jadwal_${jadwalItem.id}">
                                                                    <label class="form-check-label" for="jadwal_${jadwalItem.id}">
                                                                    ${jadwalItem.nama_kelas} - ${jadwalItem.mata_pelajaran} (${jamMulai} - ${jamSelesai})
                                                                    </label>
                                                                    </div>
                                                                    `;
                                                                });
                                                                resultHtml += '</ul>';
                                                            } else {
                                                                resultHtml = '<p>Tidak ada jadwal yang tersedia.</p>';
                                                            }
                                                            $('#result').html(resultHtml);

                                                            $('#modalAbsenMasuk').modal('show');
                                                        } else {
                                                            console.log('else banget');
                                                            // Tampilkan pesan jika tidak ditemukan
                                                            $('#nama_guru_show').val("Data tidak ditemukan!");
                                                            $('#result').html('<p>Data tidak ditemukan!</p>');
                                                        }
                                                    },
                                                    error: function(xhr, status, error) {
                                                        console.error(xhr.responseText); // Log error ke konsol
                                                        $('#nama_guru_show').val("Terjadi kesalahan!");
                                                        $('#result').html('<p>Terjadi kesalahan!</p>');
                                                    }
                                                });
                                            });
                                        });
                                    </script>
                                    <div id="alertMessage" class="mt-3"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="modal fade" id="modalAbsenMasuk" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <form id="presensiGuru" method="POST" action="{{ route('presensi_guru.store') }}">
                                                @csrf
                                                    <div class="mb-3">
                                                        <input type="text" class="form-control" id="nama_guru_show" disabled>
                                                    </div>
                                                    <div class="text-center">
                                                        <span class="text-center">Jadwal</span>
                                                    </div>
                                                    <div class="mb-3">
                                                        <input type="hidden" class="form-control" id="jenis" name="jenis" value="masuk">
                                                        <div id="result"></div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-primary col-12">Submit</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="m-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <form id="rfidFormOut">
                                        <div class="input-group mb-3">
                                            <label class="form-label col-12" for="checkRfid">Masukkan RFID</label>
                                            <input type="text" id="checkRfidOut" class="form-control" name="rfid" placeholder="Tempelkan kartu anda" aria-describedby="button-addon2" required>
                                            <button type="submit" class="btn btn-outline-secondary" type="button" id="button-addon2">Periksa</button>
                                        </div>
                                    </form>
                                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                    <script>
                                        // Ketika tab dengan id="profile" diklik, fokus ke input checkRfidOut
                                        $('#home-tab').on('click', function() {
                                            setTimeout(function() {
                                                $('#checkRfid').focus();
                                            }, 100); // Delay kecil untuk memastikan elemen terlihat sebelum fokus
                                        });
                                        
                                        $('#profile-tab').on('click', function() {
                                            setTimeout(function() {
                                                $('#checkRfidOut').focus();
                                            }, 100); // Delay kecil untuk memastikan elemen terlihat sebelum fokus
                                        });
                                        
                                        document.addEventListener("DOMContentLoaded", function() {
                                            document.getElementById("checkRfid").focus();
                                        });
                                        
                                        $(document).ready(function() {
                                            $('#rfidFormOut').on('submit', function(e) {
                                                e.preventDefault(); 
                                                var rfid = $('#checkRfidOut').val();
    
                                                $.ajax({
                                                    url: '/cek-jadwal-keluar',
                                                    type: 'POST',
                                                    data: { 
                                                        rfid: rfid,
                                                        _token: '{{ csrf_token() }}'
                                                    },
                                                    success: function(response) {
                                                        if (response.success) {
                                                            console.log(response);
                                                            
                                                            // Menampilkan nama pelajaran dan kelas dalam bentuk list
                                                            var resultHtml = '';
                                                            if (response.jadwal.length > 0) {
                                                                $('#nama_guru_out_show').val(response.jadwal[0].nama_guru);
                                                                resultHtml += '<ul>';
                                                                response.jadwal.forEach(function(jadwalItem) {
    
                                                                    var jamMulai = jadwalItem.jam_mulai.substring(0, 5);
                                                                    var jamSelesai = jadwalItem.jam_selesai.substring(0, 5);
                                                                    
                                                                    resultHtml += `
                                                                    <div class="form-check btn btn-info mt-3">
                                                                    <input class="form-check-input jadwal-checkbox" type="checkbox" name="jadwal[]" value="${jadwalItem.id}" id="jadwal_${jadwalItem.id}">
                                                                    <label class="form-check-label" for="jadwal_${jadwalItem.id}">
                                                                    ${jadwalItem.nama_kelas} - ${jadwalItem.mata_pelajaran} (${jamMulai} - ${jamSelesai})
                                                                    </label>
                                                                    </div>
                                                                    `;
                                                                });
                                                                resultHtml += '</ul>';
                                                                $('#modalAbsenKeluar').modal('show');
                                                            } else {
                                                                resultHtml = '<p>Tidak ada jadwal yang tersedia.</p>';
                                                            }
                                                            $('#result_out').html(resultHtml);
                                                            console.log(resultHtml);
                                                        } else {
                                                            console.log('else banget');
                                                            // Tampilkan pesan jika tidak ditemukan
                                                            $('#nama_guru_out_show').val("Data tidak ditemukan!");
                                                            $('#result_out').html('<p>Data tidak ditemukan!</p>');
                                                        }
                                                    },
                                                    error: function(xhr, status, error) {
                                                        console.error(xhr.responseText); // Log error ke konsol
                                                        $('#nama_guru_out_show').val("Terjadi kesalahan!");
                                                        $('#result_out').html('<p>Terjadi kesalahan!</p>');
                                                    }
                                                });
                                            });
                                        });
                                    </script>
                                    <div id="alertMessage" class="mt-3"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="modal fade" id="modalAbsenKeluar" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <form id="presensiGuru" method="POST" action="{{ route('presensi_guru.store') }}">
                                                @csrf
                                                    <div class="mb-3">
                                                        <input type="text" class="form-control" id="nama_guru_out_show" disabled>
                                                        <input type="hidden" class="form-control" id="jenis" name="jenis" value="keluar">
                                                    </div>
                                                    <div class="text-center">
                                                        <span class="text-center">Jadwal</span>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div id="result_out"></div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-primary">Submit</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h4 class="text-center mt-3">Periode : {{$latestPeriod->periode_awal}} - {{$latestPeriod->periode_akhir}}</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-center" style="font-size:12px;">
                        <thead>
                            <tr>
                                <th rowspan="2" width="700px">Jam</th>
                                @foreach($hari as $h)
                                    <th colspan="{{ $kelas->count() }}">{{ $h->hari }}</th>
                                @endforeach
                            </tr>
                            <tr>
                                @foreach($hari as $h)
                                    @foreach($kelas as $k)
                                        <th>{{ $k->nama_kelas }}</th>
                                    @endforeach
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($jamBelajar as $jam)
                                <tr>
                                    <td>{{ substr($jam->jam_mulai, 0, 5) }} - {{ substr($jam->jam_selesai, 0, 5) }}</td>
                                    @foreach($hari as $h)
                                        @foreach($kelas as $k)
                                            @php
                                                $jadwalKelas = $jadwal->where('id_hari', $h->id)
                                                                        ->where('id_kelas', $k->id)
                                                                        ->where('id_jam', $jam->id)
                                                                        ->first();

                                                
                                                $modalEditId = "modalEditJadwal_{$h->id}_{$k->id}_{$jam->id}";
                                            @endphp
                                            <td>
                                                @if($jadwalKelas)
                                                    <a href="#" data-bs-toggle="modal" data-bs-target="#{{ $modalEditId }}" style="text-decoration: none; color: inherit;">
                                                                                                                {{ $jadwalKelas->mapel->kode ?? '-'}} - ({{ $jadwalKelas->guru->kode ?? '-' }})
                                                                                                            </a>

                                                    <!-- Modal Edit Jadwal -->
                                                    <div class="modal fade" id="{{ $modalEditId }}" tabindex="-1" aria-labelledby="modalEditJadwalLabel" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="modalEditJadwalLabel">Detail Presensi : {{ $jadwalKelas->guru->nama_guru ?? '-' }}</h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body text-start" style="font-size:15px;">
                                                                    <div class="mb-3 row">
                                                                        <div class="col-4">Mapel</div>
                                                                        <div class="col-8 mb-3">: {{ $jadwalKelas->mapel->kode ?? '-'}} - {{ $jadwalKelas->mapel->mata_pelajaran ?? '-'}}</div>
                                                                        <div class="col-4">Jam in</div>
                                                                        <div class="col-8">: {{ $jadwalKelas->jam_in ?? '-'}}</div>
                                                                        <div class="col-4">Status in</div>
                                                                        <div class="col-8 mb-3">: {{ $jadwalKelas->status_in ?? '-'}}</div>
                                                                        <div class="col-4">Jam Out</div>
                                                                        <div class="col-8">: {{ $jadwalKelas->jam_out ?? '-'}}</div>
                                                                        <div class="col-4">Status in</div>
                                                                        <div class="col-8">: {{ $jadwalKelas->status_out ?? '-'}}</div>
                                                                        
                                                                    </div>
                                                                        
                                                                </div>                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                @else
                                                 -
                                                @endif
                                            </td>
                                        @endforeach
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
                <div class="row mt-4 mb-2">
                    <div class="col-2"><h5>Kode</h5></div>
                    <div class="col-8"><h5>Nama Guru</h5></div>
                </div>
                <div class="row">
                    @foreach($guru as $g)
                        <div class="col-2">{{ $g->kode}}</div>
                        <div class="col-10">{{ $g->nama_guru}}</div>
                    @endforeach
                </div>
                
            </div>

        </div>
    </div>

</div>

@endsection