<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Admin Dashboard</title>
	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'>
	
	<!-- Fonts and icons -->
	<script src="{{ asset('admin/js/plugin/webfont/webfont.min.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

	<script>
		WebFont.load({
			google: {"families":["Lato:300,400,700,900"]},
			custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../assets/css/fonts.min.css']},
			active: function() {
				sessionStorage.fonts = true;
			}
		});
	</script>

	<!-- CSS Files -->
	<link rel="stylesheet" href="{{ asset('admin/css/bootstrap.min.css') }}">
	<link rel="stylesheet" href="{{ asset('admin/css/atlantis.css') }}">
</head>

<body>
	<div class="wrapper">
	<div class="main-header">

	<!-- Logo Header -->
	<div class="logo-header" data-background-color="blue">		
		<div class="nav-toggle">
			<button class="btn btn-toggle toggle-sidebar"><i class="fas fa-bars"></i></button>
		</div>
	</div>
	<!-- End Logo Header -->

	<!-- Navbar Header -->
    @include('admin.navbar')
	<!-- End Navbar -->
	</div>

	<!-- Sidebar -->
    @include('admin.sidebar')
	<!-- End Sidebar -->

    <!-- Main Panel -->
    <div class="main-panel">
	<div class="content">
	<div class="panel-header bg-primary-gradient">
	<div class="page-inner py-5">
	<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">

	</div>	
	</div>	
	</div>	

	<div class="page-inner mt--5">
    
	<div class="row mt--2">
	<div class="col-12">
	<div class="card">
    <div class="card-header">
    <div class="card-head-row">
        <div class="card-tools">
			<a href="{{ route('download.siswa') }}" class="btn btn-info btn-border btn-round btn-sm">
				<span class="btn-label"><i class="fa fa-print"></i></span>
				Cetak
			</a>
		</div>
    </div>
    </div>
	<div class="card-body">

    <!-- Button -->
    <div class="d-flex justify-content-between align-items-center mb-4 p-3">
    <div>
        <h4 class="card-title mb-1">Manajemen Data Siswa</h4>
        <p class="card-category text-muted mb-0">Mengelola dan memperbarui informasi sesuai kebutuhan secara tertata dan menyeluruh.</p>
    </div>
    <button class="btn btn-sm btn-primary btn-round" data-toggle="modal" data-target="#addRowModal"><i class="fa fa-plus"></i> Tambah</button>
    </div>


    <!-- Add Modal -->
    <div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
		<h4 class="modal-title"><span class="fw-mediumbold">Tambah Data</span></h4>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	</div>
	<div class="modal-body">
		<p style="font-size: 0.9rem;" class="text-muted mb-3">Gunakan formulir ini untuk menambahkan entri baru. Pastikan seluruh data diisi dengan benar.</p>
		<form action="{{ route('tambah.siswa') }}" method="POST">
		@csrf
            <div class="form-group">
            <label for="user_id">Nama Siswa</label>
            <select name="user_id" class="form-control input-square" required>
                <option value="">Pilih Nama Siswa</option>
                @foreach ($users as $user)
                <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
            </div>
            
            <div class="form-group">
                <label for="sekolah_id">Pilih Sekolah</label>
                <select name="sekolah_id" id="sekolah_id" class="form-control input-square" required>
                    <option value="">Pilih Sekolah</option>
                    @foreach ($sekolahs as $sekolah)
                    <option value="{{ $sekolah->id }}">{{ $sekolah->nama }}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="form-group">
            <label for="kelas_id">Pilih Kelas</label>
            <select name="kelas_id" id="kelas_id" class="form-control input-square" required>
                <option value="">Pilih Kelas</option>
            </select>
            </div>
            
            <div class="form-group">
    <label for="tahun_ajaran_id">Pilih Tahun Ajaran</label>
    <select name="tahun_ajaran_id" id="tahun_ajaran_id" class="form-control input-square" required>
        <option value="">Pilih Tahun Ajaran</option>
        @if(isset($tahun_ajarans) && $tahun_ajarans->count() > 0)
            @foreach ($tahun_ajarans as $tahun_ajaran)
                <option value="{{ $tahun_ajaran->id }}">{{ $tahun_ajaran->nama }}</option>
            @endforeach
        @else
            <option value="">Tidak ada data tahun ajaran</option>
        @endif
    </select>
</div>
            
			<div class="modal-footer">
				<button type="submit" class="btn btn-primary">Tambah</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
			</div>
		</form>
	</div>
	</div>
	</div>
    </div>

    <!-- Modal Update-->
    <div class="modal fade" id="updateRowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
		<h4 class="modal-title"><span class="fw-mediumbold">Update Data</span></h4>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	</div>
	<div class="modal-body">
		<p style="font-size: 0.9rem;" class="text-muted mb-3">Gunakan formulir ini untuk mengupdate entri baru. Pastikan seluruh data diisi dengan benar.</p>
        <form id="formUpdateSiswa" method="POST">
        @csrf
        @method('PUT')
            <div class="form-group">
            <label for="updateNama">Nama Siswa</label>
            <select name="user_id" id="updateNama" class="form-control input-square" required>
                <option value="">Pilih Nama Siswa</option>
                @foreach ($users as $user)
                <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
            </div>
            
            <div class="form-group">
            <label for="updateSekolah">Pilih Sekolah</label>
            <select name="sekolah_id" id="updateSekolah" class="form-control input-square" required>
                <option value="">Pilih Sekolah</option>
                @foreach ($sekolahs as $sekolah)
                <option value="{{ $sekolah->id }}">{{ $sekolah->nama }}</option>
            @endforeach
            </select>
            </div>

            <div class="form-group">
            <label for="updateKelas">Pilih Kelas</label>
            <select name="kelas_id" id="updateKelas" class="form-control input-square" required>
                <option value="">Pilih Kelas</option>
            </select>
            </div>
            
            <div class="form-group">
    <label for="updateTahunAjaran">Pilih Tahun Ajaran</label>
    <select name="tahun_ajaran_id" id="updateTahunAjaran" class="form-control input-square" required>
        <option value="">Pilih Tahun Ajaran</option>
        @if(isset($tahun_ajarans) && $tahun_ajarans->count() > 0)
            @foreach ($tahun_ajarans as $tahun_ajaran)
                <option value="{{ $tahun_ajaran->id }}">{{ $tahun_ajaran->nama }}</option>
            @endforeach
        @else
            <option value="">Tidak ada data tahun ajaran</option>
        @endif
    </select>
</div>
            
			<div class="modal-footer">
				<button type="submit" class="btn btn-primary">Update</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
			</div>
		</form>
	</div>
	</div>
	</div>
    </div>

    <!-- Table -->
    <div class="table-responsive">
	<table id="add-row" class="display table table-striped table-hover">
    <thead>
    <tr>
        <th>No</th>
        <th>Nama Siswa</th>
        <th>Sekolah</th>
        <th>Kelas</th>
        <th>Tahun Ajaran</th>
        <th>Aksi</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>No</th>
        <th>Nama Siswa</th>
        <th>Sekolah</th>
        <th>Kelas</th>
        <th>Tahun Ajaran</th>
        <th>Aksi</th>
    </tr>
    </tfoot>
    <tbody>
    @foreach($siswas as $index => $siswa)
    <tr>
        <td>{{ $index + 1 }}</td>
        <td>{{ $siswa->user->name }}</td>
        <td>{{ $siswa['sekolah']['nama']}}</td>
        <td>{{ $siswa['kelas']['nama_kelas']}}</td>
        <td>{{ $siswa['tahunAjaran']['nama']}}</td>
        <td>
            <div class="form-button-action">
            <button type="button" class="btn btn-link p-3 text-primary editBtn" 
            data-id="{{ $siswa->id }}" 
            data-user_id="{{ $siswa->user_id }}" 
            data-sekolah="{{ $siswa->sekolah->id }}"
            data-kelas="{{ $siswa->kelas->id }}"
            data-tahun_ajaran="{{ $siswa->tahunAjaran->id }}" 
            data-toggle="modal" data-target="#updateRowModal" title="Edit"><i class="fa fa-edit"></i></button>
            <a href="{{ route('hapus.siswa', $siswa->id) }}" class="btn btn-link p-3 text-danger" data-toggle="tooltip" title="Hapus"><i class="fas fa-trash-alt"></i></a>
            </div>
        </td>
	</tr>
	@endforeach
    </tbody>
    </table>
    </div>

		
	</div>
	</div>
	</div>
	</div>

	
	</div>
	</div>
    <!-- End Main Panel -->
     
	</div>
	</div>
<!-- Script Files -->
@include('admin.script')
<script>
    // Inisialisasi DataTable
    var table = $('#add-row').DataTable({
            "pageLength": 10,
            "language": {
                "search": "Cari:",
                "lengthMenu": "Tampilkan _MENU_ data per halaman",
                "zeroRecords": "Tidak ada data yang ditemukan",
                "info": "Menampilkan halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data tersedia",
                "infoFiltered": "(difilter dari _MAX_ total data)"
            }
    });
</script>
<script>
    $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id'); // Ambil ID dari tombol edit
        let user_id = $(this).data('user_id'); // ID user (siswa)
        let sekolah_id = $(this).data('sekolah'); // ID sekolah
        let kelas_id = $(this).data('kelas'); // ID kelas
        let tahun_ajaran_id = $(this).data('tahun_ajaran'); // ID tahun ajaran

        // Set data ke dalam input form update
        $('#updateNama').val(user_id); // Set ID user di dropdown Nama
        $('#updateSekolah').val(sekolah_id); // Set ID sekolah
        $('#updateTahunAjaran').val(tahun_ajaran_id); // Set ID tahun ajaran
        
        // Trigger perubahan sekolah agar dropdown kelas dimuat
        $('#updateSekolah').trigger('change');

        // Tunggu dropdown kelas selesai di-load
        setTimeout(function () {
            $('#updateKelas').val(kelas_id); // Set ID kelas pada dropdown Kelas
        }, 1000); // Sesuaikan delay jika perlu (1000ms atau 1 detik)

        // Set form action
        $('#formUpdateSiswa').attr('action', '/admin/siswa/update/' + id); // Update action untuk form
    });
</script>


<script>
    $(document).on('click', '.hapusBtn', function (e) {
    if (confirm("Apakah Anda yakin ingin menghapus data ini?")) {
        $.ajax({
            url: '/admin/siswa/hapus/' + id, 
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}', 
            },
            success: function(response) {
                alert('Data berhasil dihapus');
                location.reload(); 
            },
            error: function(xhr, status, error) {
                alert('Terjadi kesalahan: ' + error);
            }
        });
    }
});
</script>
<script>
$(document).ready(function () {
    $('#sekolah_id').on('change', function () {
        var sekolahId = $(this).val();

        if (sekolahId === "") {
            $('#kelas_id').html("<option value=''>Pilih Kelas</option>");
            return;
        }

        $.ajax({
            url: '/admin/kelas/getkelas/' + sekolahId,
            type: 'GET',
            success: function (data) {
                console.log(data); // Debug

                var html = "<option value=''>Pilih Kelas</option>";
                $.each(data.kelas, function (key, value) {
                    // Use the correct key 'nama_kelas' for the class name
                    html += "<option value='" + value.id + "'>" + value.nama_kelas + "</option>";
                });

                $('#kelas_id').html(html);
            },
            error: function (xhr, status, error) {
                alert("Gagal mengambil data kelas: " + error);
            }
        });
    });
});
</script>
<script>
$('#updateSekolah').on('change', function () {
    var sekolahId = $(this).val();

    if (sekolahId === "") {
        $('#updateKelas').html("<option value=''>Pilih Kelas</option>");
        return;
    }

    $.ajax({
        url: '/admin/kelas/getkelas/' + sekolahId,
        type: 'GET',
        success: function (data) {
            var html = "<option value=''>Pilih Kelas</option>";
            $.each(data.kelas, function (key, value) {
                html += "<option value='" + value.id + "'>" + value.nama_kelas + "</option>";
            });
            $('#updateKelas').html(html);
        }
    });
});

</script>



<!-- End Script Files -->
</body>
</html>