@extends('layouts.app')

@section('content')
<div class="page-heading">
    <div class="page-title">
        <div class="row">
            <h3>Mata Pelajaran</h3>
            <p class="text-subtitle text-muted">Kelola data mapel.</p>
        </div>
    </div>
    <section class="section">
        <div class="card">
            <div class="card-header">
                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addMapelModal">
                    Tambah Mapel
                </button>
                <!-- The Modal -->
                <div class="modal fade" id="addMapelModal"  tabindex="-1" aria-labelledby="editKelasModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- Modal Header -->
                            <div class="modal-header">
                                <h4 class="modal-title">Tambah Mata Pelajaran</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>

                            <!-- Modal Body -->
                            <div class="modal-body">
                                <form action="{{ route('mapel.store') }}" method="POST">
                                    @csrf
                                    <div class="form-group">
                                        <label for="kode">Kode:</label>
                                        <input type="text" class="form-control" id="kode" name="kode" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="mata_pelajaran">Mata Pelajaran:</label>
                                        <input type="text" class="form-control" id="mata_pelajaran" name="mata_pelajaran" required>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="table1">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kode</th>
                                <th>Mata Pelajaran</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($mapels as $index => $mapel)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $mapel->kode }}</td>
                                <td>{{ $mapel->mata_pelajaran }}</td>
                                <td>
                                    <!-- Update Button -->
                                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#editMapelModal{{ $mapel->id }}">
                                        Update
                                    </button>

                                    <!-- Delete Form -->
                                    <form action="{{ route('mapel.destroy', $mapel->id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data kelas ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>

                            <!-- Edit Modal -->
                            <div class="modal fade" id="editMapelModal{{ $mapel->id }}" tabindex="-1" aria-labelledby="editKelasModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">

                                        <!-- Modal Header -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">Edit Mata Pelajaran</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>

                                        <!-- Modal Body -->
                                        <div class="modal-body">
                                            <form action="{{ route('mapel.update', $mapel->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="form-group">
                                                    <label for="kode">Kode:</label>
                                                    <input type="text" class="form-control" id="kode" name="kode" value="{{ $mapel->kode }}" required>
                                                </div>
                                                <div class="form-group">
                                                    <label for="mata_pelajaran">Mata Pelajaran:</label>
                                                    <input type="text" class="form-control" id="mata_pelajaran" name="mata_pelajaran" value="{{ $mapel->mata_pelajaran }}" required>
                                                </div>
                                                <button type="submit" class="btn btn-primary">Update</button>
                                            </form>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection