@extends('adminlte::page')

@section('title', 'Jenis Sekolah')

@section('content_header')
    <h1><i class="fas fa-school mr-2"></i>Jenis Sekolah</h1>
@stop

@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ session('success') }}
        </div>
    @endif

    <div class="row">
        <!-- Form Tambah -->
        <div class="col-md-4">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-plus-circle mr-1"></i> Tambah Jenis Sekolah</h3>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.jenis-sekolah.store') }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label>Kod Jenis <span class="text-danger">*</span></label>
                            <input type="text" name="kod_jenis"
                                class="form-control @error('kod_jenis') is-invalid @enderror" value="{{ old('kod_jenis') }}"
                                placeholder="Contoh: SK, SMK, SJK" style="text-transform: uppercase">
                            @error('kod_jenis')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Nama Jenis Sekolah <span class="text-danger">*</span></label>
                            <input type="text" name="nama_jenis"
                                class="form-control @error('nama_jenis') is-invalid @enderror"
                                value="{{ old('nama_jenis') }}" placeholder="Contoh: Sekolah Kebangsaan">
                            @error('nama_jenis')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Penerangan</label>
                            <textarea name="penerangan" rows="3" class="form-control @error('penerangan') is-invalid @enderror"
                                placeholder="Masukkan penerangan (jika ada)">{{ old('penerangan') }}</textarea>
                            @error('penerangan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="fas fa-save mr-1"></i> Simpan
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Senarai -->
        <div class="col-md-8">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-list mr-1"></i> Senarai Jenis Sekolah</h3>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th width="50">#</th>
                                <th width="100">Kod</th>
                                <th>Nama Jenis Sekolah</th>
                                <th>Penerangan</th>
                                <th width="110">Tindakan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($senarai as $index => $item)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td><span class="badge badge-primary">{{ $item->kod_jenis }}</span></td>
                                    <td>{{ $item->nama_jenis }}</td>
                                    <td>{{ $item->penerangan ?? '-' }}</td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <!-- Butang Edit -->
                                            <button type="button" class="btn btn-warning btn-sm mr-1" data-toggle="modal"
                                                data-target="#modalEdit" data-id="{{ $item->id }}"
                                                data-kod="{{ $item->kod_jenis }}" data-nama="{{ $item->nama_jenis }}"
                                                data-penerangan="{{ $item->penerangan }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <!-- Butang Padam -->
                                            <form action="{{ route('admin.jenis-sekolah.destroy', $item->id) }}"
                                                method="POST" onsubmit="return confirm('Padam jenis sekolah ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted">Tiada data jenis sekolah.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Edit -->
    <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title"><i class="fas fa-edit mr-1"></i> Kemaskini Jenis Sekolah</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form id="formEdit" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Kod Jenis <span class="text-danger">*</span></label>
                            <input type="text" name="kod_jenis" id="edit_kod_jenis" class="form-control"
                                style="text-transform: uppercase" required>
                        </div>
                        <div class="form-group">
                            <label>Nama Jenis Sekolah <span class="text-danger">*</span></label>
                            <input type="text" name="nama_jenis" id="edit_nama_jenis" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Penerangan</label>
                            <textarea name="penerangan" id="edit_penerangan" rows="3" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <i class="fas fa-times mr-1"></i> Batal
                        </button>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-save mr-1"></i> Kemaskini
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script>
        $('#modalEdit').on('show.bs.modal', function(e) {
            var btn = $(e.relatedTarget);
            var id = btn.data('id');
            var kod = btn.data('kod');
            var nama = btn.data('nama');
            var penerangan = btn.data('penerangan');

            $('#edit_kod_jenis').val(kod);
            $('#edit_nama_jenis').val(nama);
            $('#edit_penerangan').val(penerangan);

            var url = '{{ url('admin/jenis-sekolah') }}/' + id;
            $('#formEdit').attr('action', url);
        });
    </script>
@endpush
