@extends('layouts.app')

@section('title', 'Laporan Pulang')
@section('content')
    <div class="main-content">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-end">
                    <div class="col-lg-8">
                        <div class="page-header-title">
                            <i class="ik ik-clock bg-blue"></i>
                            <div class="d-inline">
                                <h5>Laporan Pulang</h5>
                                <span>Rekap Jam Masuk & Jam Pulang Siswa</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <nav class="breadcrumb-container" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Laporan Pulang</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <div class="card">
                <!-- Filter Form -->
                <div class="card">
                    <form method="GET" action="{{ route('laporanpulang.index') }}">
                        <div class="card-header d-flex justify-content-between">
                            <div class="row" style="width: 70%;">
                                <!-- Tahun Ajaran & Semester -->
                                <div class="col-sm-4">
                                    <select name="tahun_ajaran_semester" id="filterTahunAjaranSemester"
                                        class="form-control">
                                        <option value="">-- Pilih Tahun Ajaran --</option>
                                        @foreach ($tahunAjaranList as $ta)
                                            <option value="{{ $ta->id }}_ganjil" {{ request()->get('tahun_ajaran_semester') == $ta->id . '_ganjil' ? 'selected' : '' }}>
                                                {{ $ta->tahun }} - Ganjil
                                            </option>
                                            <option value="{{ $ta->id }}_genap" {{ request()->get('tahun_ajaran_semester') == $ta->id . '_genap' ? 'selected' : '' }}>
                                                {{ $ta->tahun }} - Genap
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Datepicker -->
                                <div class="col-sm-4">
                                    <input type="text" name="tanggal" id="datepicker" class="form-control"
                                        placeholder="Pilih Tanggal" value="{{ $selectedDate }}">
                                </div>
                                @if($role == 'admin')
                                    <!-- Filter Kelas untuk Admin -->
                                    <div class="col-sm-4">
                                        <select name="kelas" id="filterKelas" class="form-control">
                                            <option value="">-- Pilih Kelas --</option>
                                            @foreach ($kelasList as $kelas)
                                                <option value="{{ $kelas->id }}" {{ request()->get('kelas') == $kelas->id ? 'selected' : '' }}>
                                                    {{ $kelas->nama_kelas }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif
                            </div>
                          
                        </div>
                    </form>
                </div>

                <!-- Tabel Laporan Pulang -->
                <div class="card">
                    <div class="table-responsive">
                        <table id="data_table" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>No Induk</th>
                                    <th>Nama</th>
                                    <th>Jam Masuk</th>
                                    <th>Jam Pulang</th>
                                    <th>Keterangan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($laporan as $index => $data)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $data->no_induk }}</td>
                                        <td>{{ $data->nama }}</td>
                                        <td>
                                            @if($data->tanggal)
                                                {{ \Carbon\Carbon::parse($data->tanggal)->format('H:i') }}
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>
                                            @if($data->jam_pulang)
                                                {{ \Carbon\Carbon::parse($data->jam_pulang)->format('H:i') }}
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>{{ $data->keterangan }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            // Auto-submit form ketika filter berubah
            $('#filterTahunAjaranSemester, #filterKelas').on('change', function () {
                $(this).closest('form').submit();
            });

            // Inisialisasi Datepicker dengan jQuery UI
            $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: new Date("{{ $startDate }}"),
                maxDate: new Date("{{ $endDate }}"),
                onSelect: function (dateText, inst) {
                    $(this).closest('form').submit();
                }
            });

            // Inisialisasi DataTable
            if ($.fn.DataTable.isDataTable('#data_table')) {
                $('#data_table').DataTable().destroy();
            }
            $('#data_table').DataTable({
                paging: false,
                searching: true,
                ordering: true,
                order: [[2, 'asc']], // kolom 2 (Nama) secara ascending
                autoWidth: true
            });
        });
    </script>

    <style>
        .table-responsive {
            overflow-x: auto;
            white-space: nowrap;
            max-width: 100%;
            margin-top: -8px;
            padding: 0 16px;
        }

        #data_table {
            font-size: 11px;
        }

        #data_table td {
            font-size: 11px;
        }

        #data_table th:nth-child(n+4),
        #data_table td:nth-child(n+4) {
            text-align: center !important;
        }

        .bg-danger {
            background-color: #ff6978 !important;
            color: #fff;
        }

        .bg-warning {
            background-color: #fdff69 !important;
            color: #000;
        }

        .bg-primary {
            background-color: #7bff69 !important;
            color: #000;
        }

        .bg-biru {
            background-color: #ffffff !important;
            color: #000;
        }

        .dataTables_filter {
            display: none;
        }

        #pencarian_custom {
            margin-left: -10px;
            width: 100%;
            margin-top: 16px;
            margin-bottom: 16px;
        }
    </style>
@endsection