<!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.kriteria') }}" 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">

<!-- Header + Button -->
<div class="d-flex justify-content-between align-items-center mb-4 p-3">
<div>
	<h4 class="card-title mb-1">Manajemen Kriteria</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">
<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.kriteria') }}" method="POST">
	@csrf
		<div class="form-group">
			<label for="namaKriteria">Nama Kriteria</label>
			<input type="text" class="form-control input-square" id="namaKriteria" name="nama" placeholder="Masukkan Nama Kriteria">
		</div>
		<div class="form-group">
			<label for="jenisKriteria">Jenis</label>
			<select class="form-control input-square" id="jenisKriteria" name="jenis" required>
				<option value="">Pilih Jenis</option>
				<option value="Benefit">Benefit</option>
				<option value="Cost">Cost</option>
			</select>
		</div>
		<div class="form-group">
			<label for="bobotKriteria">Bobot</label>
			<input type="number" step="0.01" class="form-control input-square" id="bobotKriteria" name="bobot" placeholder="Masukkan Bobot" required>
			@error('bobot')
    			<small class="text-danger">{{ $message }}</small>
			@enderror
		</div>
		<div class="form-group">
			<label for="kurikulumKriteria">Kurikulum</label>
			<select class="form-control input-square" id="kurikulumKriteria" name="kurikulum_id" required>
				<option value="">Pilih Kurikulum</option>
				@foreach($kurikulums as $kurikulum)
					<option value="{{ $kurikulum->id }}">{{ $kurikulum->nama }}</option>
				@endforeach
			</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 Edit -->
<div class="modal fade" id="updateRowModal" tabindex="-1" role="dialog">
    <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 action="" method="POST" id="formUpdateKriteria">
                    @csrf
                    @method('PUT')
                    
                    <div class="form-group">
                        <label for="updateNama">Nama Kriteria</label>
                        <input type="text" class="form-control input-square" id="updateNama" name="nama" placeholder="Masukkan Nama Kriteria" required>
                    </div>
                    <div class="form-group">
                        <label for="updateJenis">Jenis</label>
                        <select class="form-control input-square" id="updateJenis" name="jenis" required>
                            <option value="">Pilih Jenis</option>
                            <option value="Benefit">Benefit</option>
                            <option value="Cost">Cost</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="updateBobot">Bobot</label>
                        <input type="number" step="0.01" class="form-control input-square" id="updateBobot" name="bobot" placeholder="Masukkan Bobot" required>
						@error('bobot')
    						<small class="text-danger">{{ $message }}</small>
						@enderror
                    </div>
                    <div class="form-group">
                        <label for="updateKurikulum">Kurikulum</label>
                        <select class="form-control input-square" id="updateKurikulum" name="kurikulum_id" required>
                            <option value="">Pilih Kurikulum</option>
                            @foreach($kurikulums as $kurikulum)
                                <option value="{{ $kurikulum->id }}">{{ $kurikulum->nama }}</option>
                            @endforeach
                        </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 Kriteria</th>
			<th>Jenis</th>
			<th>Bobot</th>
			<th>Kurikulum</th>
			<th>Aksi</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
            <th>No</th>
			<th>Nama Kriteria</th>
			<th>Jenis</th>
			<th>Bobot</th>
			<th>Kurikulum</th>
			<th>Aksi</th>
		</tr>
	</tfoot>
	<tbody>
		@foreach($kriterias as $index => $kriteria)
		<tr>
            <td>{{ $index + 1 }}</td>
			<td>{{ $kriteria->nama }}</td>
			<td>{{ $kriteria->jenis }}</td>
			<td>{{ $kriteria->bobot }}</td>
			<td>{{ $kriteria->kurikulum->nama }}</td>
			<td>
				<button type="button" class="btn btn-link p-3 text-primary editBtn" data-id="{{ $kriteria->id }}" data-nama="{{ $kriteria->nama }}" data-jenis="{{ $kriteria->jenis }}" data-bobot="{{ $kriteria->bobot }}" data-kurikulum="{{ $kriteria->kurikulum->id }}" data-toggle="modal" data-target="#updateRowModal" title="Edit"><i class="fa fa-edit"></i></button>
				<a href="{{ route('hapus.kriteria', $kriteria->id) }}" class="btn btn-link p-3 text-danger" data-toggle="tooltip" title="Hapus"><i class="fas fa-trash-alt"></i></a>
			</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)"
            }
    });

    // Menambah baris ke DataTable secara dummy (tanpa backend)
    $('#addRowButton').click(function () {
        var namaKriteria = $("#namaKriteria").val();
        var jenisKriteria = $("#jenisKriteria").val();
        var bobotKriteria = $("#bobotKriteria").val();
        var kurikulumKriteria = $("#kurikulumKriteria").val();

        if (namaKriteria === "" || jenisKriteria === "" || bobotKriteria === "" || kurikulumKriteria === "") {
            alert("Semua kolom harus diisi.");
            return;
        }

        var randomId = Math.floor(Math.random() * 1000000); // ID dummy

        table.row.add([
            namaKriteria,
            jenisKriteria,
            bobotKriteria,
            kurikulumKriteria,
            '<td><div class="form-button-action">' +
            '<button type="button" class="btn btn-link btn-simple-primary btn-lg editBtn" ' +
            'data-id="' + randomId + '" ' +
            'data-nama="' + namaKriteria + '" ' +
            'data-jenis="' + jenisKriteria + '" ' +
            'data-bobot="' + bobotKriteria + '" ' +
            'data-kurikulum="' + kurikulumKriteria + '" ' +
            'title="Edit"><i class="fa fa-edit"></i></button>' +
            '<button type="button" class="btn btn-link btn-simple-danger" title="Hapus" onclick="hapusData(' + randomId + ')"><i class="fa fa-times"></i></button>' +
            '</div></td>'
        ]).draw();

        $('#addRowModal').modal('hide');
        $("#namaKriteria").val('');
        $("#jenisKriteria").val('');
        $("#bobotKriteria").val('');
        $("#kurikulumKriteria").val('');
    });
</script>

<script>
        $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id');  // Mendapatkan ID dari data-id tombol

        let nama = $(this).data('nama');
        let jenis = $(this).data('jenis');
        let bobot = $(this).data('bobot');
        let kurikulum = $(this).data('kurikulum');

        // Set nilai input dengan data dari tombol Edit
        $('#updateNama').val(nama);
        $('#updateJenis').val(jenis);
        $('#updateBobot').val(bobot);
        $('#updateKurikulum').val(kurikulum);

        $('#updateKurikulum option').each(function () {
            if ($(this).val() == kurikulum) {
                $(this).prop('selected', true);
            }
        });

        // Mengubah action form sesuai dengan ID yang dipilih
        $('#formUpdateKriteria').attr('action', '/admin/kriteria/update/' + id);
    });
</script>

<script>
    $(document).on('click', '.hapusBtn', function (e) {
        if (confirm("Apakah Anda yakin ingin menghapus data ini?")) {
            $.ajax({
                url: '/admin/kriteria/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>
@if ($errors->any())
    @foreach ($errors->all() as $error)
        <script>
            toastr.error("{{ $error }}");
        </script>
    @endforeach
@endif
<!-- End Script Files -->
</body>
</html>