<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Admin Dashboard - Tahun Ajaran</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">
    <link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">

	<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.tahunajaran') }}" 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 Tahun Ajaran</h4>
        <p class="card-category text-muted mb-0">Mengelola dan memperbarui informasi tahun ajaran 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 Tahun Ajaran</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 tahun ajaran baru. Pastikan seluruh data diisi dengan benar.</p>
		<form action="{{ route('tambah.tahunajaran') }}" method="POST">
		@csrf
            <div class="form-group">
                <label for="namaTahunAjaran">Nama Tahun Ajaran</label>
                <input type="text" class="form-control input-square" id="namaTahunAjaran" name="nama" placeholder="Contoh: 2024/2025" required>
            </div>
            <div class="form-group">
                <label for="tanggalMulai">Tanggal Mulai</label>
                <input type="date" class="form-control input-square" id="tanggalMulai" name="tanggal_mulai" required>
            </div>
            <div class="form-group">
                <label for="tanggalSelesai">Tanggal Selesai</label>
                <input type="date" class="form-control input-square" id="tanggalSelesai" name="tanggal_selesai" required>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" id="isActive" name="is_active">
                    <label class="form-check-label" for="isActive">
                        Aktifkan tahun ajaran ini
                    </label>
                </div>
            </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 Tahun Ajaran</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 tahun ajaran. Pastikan seluruh data diisi dengan benar.</p>
        <form id="formUpdateTahunAjaran" method="POST">
        @csrf
        @method('PUT')
            <div class="form-group">
                <label for="updateNama">Nama Tahun Ajaran</label>
                <input type="text" class="form-control input-square" id="updateNama" name="nama" placeholder="Contoh: 2024/2025" required>
            </div>
            <div class="form-group">
                <label for="updateTanggalMulai">Tanggal Mulai</label>
                <input type="date" class="form-control input-square" id="updateTanggalMulai" name="tanggal_mulai" required>
            </div>
            <div class="form-group">
                <label for="updateTanggalSelesai">Tanggal Selesai</label>
                <input type="date" class="form-control input-square" id="updateTanggalSelesai" name="tanggal_selesai" required>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" id="updateIsActive" name="is_active">
                    <label class="form-check-label" for="updateIsActive">
                        Aktifkan tahun ajaran ini
                    </label>
                </div>
            </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 Tahun Ajaran</th>
        <th>Tanggal Mulai</th>
        <th>Tanggal Selesai</th>
        <th>Status</th>
        <th>Aksi</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>No</th>
        <th>Nama Tahun Ajaran</th>
        <th>Tanggal Mulai</th>
        <th>Tanggal Selesai</th>
        <th>Status</th>
        <th>Aksi</th>
    </tr>
    </tfoot>
    <tbody>
    @foreach($tahunAjarans as $index => $tahunAjaran)
    <tr>
        <td>{{ $index + 1 }}</td>
        <td>{{ $tahunAjaran->nama }}</td>
        <td>{{ $tahunAjaran->tanggal_mulai->format('d/m/Y') }}</td>
        <td>{{ $tahunAjaran->tanggal_selesai->format('d/m/Y') }}</td>
        <td>
            @if($tahunAjaran->is_active)
                <span class="badge badge-success">Aktif</span>
            @else
                <span class="badge badge-secondary">Tidak Aktif</span>
            @endif
        </td>
        <td>
            <div class="form-button-action">
            @if(!$tahunAjaran->is_active)
                <a href="{{ route('setaktif.tahunajaran', $tahunAjaran->id) }}" class="btn btn-link p-3 text-success" data-toggle="tooltip" title="Aktifkan"><i class="fas fa-unlock"></i></a>
            @endif
            <button type="button" class="btn btn-link p-3 text-primary editBtn" 
                    data-id="{{ $tahunAjaran->id }}" 
                    data-nama="{{ $tahunAjaran->nama }}" 
                    data-tanggal-mulai="{{ $tahunAjaran->tanggal_mulai->format('Y-m-d') }}" 
                    data-tanggal-selesai="{{ $tahunAjaran->tanggal_selesai->format('Y-m-d') }}" 
                    data-is-active="{{ $tahunAjaran->is_active ? '1' : '0' }}"
                    data-toggle="modal" data-target="#updateRowModal" title="Edit">
                <i class="fa fa-edit"></i>
            </button>
            <a href="{{ route('hapus.tahunajaran', $tahunAjaran->id) }}" class="btn btn-link p-3 text-danger" data-toggle="tooltip" title="Hapus" onclick="return confirm('Apakah Anda yakin ingin menghapus tahun ajaran ini?')"><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)"
            }
    });

    // Handle edit button click
    $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id');
        let nama = $(this).data('nama');
        let tanggalMulai = $(this).data('tanggal-mulai');
        let tanggalSelesai = $(this).data('tanggal-selesai');
        let isActive = $(this).data('is-active');

        // Set nilai input dengan data dari tombol Edit
        $('#updateNama').val(nama);
        $('#updateTanggalMulai').val(tanggalMulai);
        $('#updateTanggalSelesai').val(tanggalSelesai);
        
        // Set checkbox
        if(isActive == '1') {
            $('#updateIsActive').prop('checked', true);
        } else {
            $('#updateIsActive').prop('checked', false);
        }

        // Mengubah action form sesuai dengan ID yang dipilih
        $('#formUpdateTahunAjaran').attr('action', '/admin/tahunajaran/update/' + id);
    });

    // Validasi tanggal
    $('#tanggalMulai, #tanggalSelesai').on('change', function() {
        var tanggalMulai = $('#tanggalMulai').val();
        var tanggalSelesai = $('#tanggalSelesai').val();
        
        if (tanggalMulai && tanggalSelesai) {
            if (new Date(tanggalSelesai) <= new Date(tanggalMulai)) {
                alert('Tanggal selesai harus lebih besar dari tanggal mulai');
                $('#tanggalSelesai').val('');
            }
        }
    });

    // Validasi tanggal untuk form update
    $('#updateTanggalMulai, #updateTanggalSelesai').on('change', function() {
        var tanggalMulai = $('#updateTanggalMulai').val();
        var tanggalSelesai = $('#updateTanggalSelesai').val();
        
        if (tanggalMulai && tanggalSelesai) {
            if (new Date(tanggalSelesai) <= new Date(tanggalMulai)) {
                alert('Tanggal selesai harus lebih besar dari tanggal mulai');
                $('#updateTanggalSelesai').val('');
            }
        }
    });
</script>
</body>
</html>