@extends('layouts.app')

@section('title', 'Data Tarif Pembayaran')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Daftar Tarif Pembayaran</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-add">
                        <i class="fas fa-plus"></i> Tambah Tarif
                    </button>
                </div>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Tarif</th>
                            <th>Jenis</th>
                            <th>Jenjang</th>
                            <th>Kategori</th>
                            <th>Tahun Ajaran</th>
                            <th>Nominal</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tarifs as $index => $tarif)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td><strong>{{ $tarif->nama }}</strong></td>
                                <td><span class="badge badge-info">{{ $tarif->jenis }}</span></td>
                                <td>{{ $tarif->jenjang }}</td>
                                <td>{{ $tarif->jenis == 'DPP' ? ucfirst($tarif->kategori_siswa) : '-' }}</td>
                                <td>{{ $tarif->tahunAjaran->tahun }}</td>
                                <td>Rp {{ number_format($tarif->nominal, 0, ',', '.') }}</td>
                                <td>
                                    <span class="badge badge-{{ $tarif->status == 'aktif' ? 'success' : 'danger' }}">
                                        {{ ucfirst($tarif->status) }}
                                    </span>
                                </td>
                                <td>
                                    <button class="btn btn-warning btn-sm btn-edit" 
                                            data-id="{{ $tarif->id }}"
                                            data-jenis="{{ $tarif->jenis }}"
                                            data-jenjang="{{ $tarif->jenjang }}"
                                            data-kategori="{{ $tarif->kategori_siswa }}"
                                            data-tahun_ajaran_id="{{ $tarif->tahun_ajaran_id }}"
                                            data-nominal="{{ $tarif->nominal }}"
                                            data-status="{{ $tarif->status }}"
                                            data-toggle="modal" 
                                            data-target="#modal-edit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <form action="{{ route('tarif-pembayaran.destroy', $tarif->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus tarif ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="9" class="text-center">Belum ada data tarif pembayaran.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah -->
<div class="modal fade" id="modal-add">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('tarif-pembayaran.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Tambah Tarif Pembayaran</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Jenis Pembayaran</label>
                        <select name="jenis" id="jenis_add" class="form-control" required>
                            <option value="">Pilih Jenis</option>
                            <option value="SPP">SPP (Bulanan)</option>
                            <option value="DPP">DPP (Sekali Bayar)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Jenjang</label>
                        <select name="jenjang" class="form-control" required>
                            <option value="">Pilih Jenjang</option>
                            <option value="TK">TK</option>
                            <option value="SD">SD</option>
                            <option value="SMP">SMP</option>
                            <option value="SMA">SMA</option>
                        </select>
                    </div>
                    <div class="form-group d-none" id="kategori_add_group">
                        <label>Kategori Siswa (Khusus DPP)</label>
                        <select name="kategori_siswa" id="kategori_add" class="form-control">
                            <option value="">Pilih Kategori</option>
                            <option value="internal">Internal</option>
                            <option value="external">External</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Tahun Ajaran</label>
                        <select name="tahun_ajaran_id" class="form-control" required>
                            <option value="">Pilih Tahun Ajaran</option>
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}">{{ $ta->tahun }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Nominal (Rp)</label>
                        <input type="number" name="nominal" class="form-control" min="0" required>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control" required>
                            <option value="aktif">Aktif</option>
                            <option value="nonaktif">Nonaktif</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="POST" id="form-edit">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h4 class="modal-title">Edit Tarif Pembayaran</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Jenis Pembayaran</label>
                        <select name="jenis" id="jenis_edit" class="form-control" required>
                            <option value="SPP">SPP (Bulanan)</option>
                            <option value="DPP">DPP (Sekali Bayar)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Jenjang</label>
                        <select name="jenjang" id="jenjang_edit" class="form-control" required>
                            <option value="TK">TK</option>
                            <option value="SD">SD</option>
                            <option value="SMP">SMP</option>
                            <option value="SMA">SMA</option>
                        </select>
                    </div>
                    <div class="form-group d-none" id="kategori_edit_group">
                        <label>Kategori Siswa (Khusus DPP)</label>
                        <select name="kategori_siswa" id="kategori_edit" class="form-control">
                            <option value="">Pilih Kategori</option>
                            <option value="internal">Internal</option>
                            <option value="external">External</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Tahun Ajaran</label>
                        <select name="tahun_ajaran_id" id="tahun_ajaran_id_edit" class="form-control" required>
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}">{{ $ta->tahun }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Nominal (Rp)</label>
                        <input type="number" name="nominal" id="nominal_edit" class="form-control" min="0" required>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" id="status_edit" class="form-control" required>
                            <option value="aktif">Aktif</option>
                            <option value="nonaktif">Nonaktif</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Handle dinamis form tambah
        $('#jenis_add').change(function() {
            if ($(this).val() === 'DPP') {
                $('#kategori_add_group').removeClass('d-none');
                $('#kategori_add').prop('required', true);
            } else {
                $('#kategori_add_group').addClass('d-none');
                $('#kategori_add').prop('required', false).val('');
            }
        });

        // Handle dinamis form edit
        $('#jenis_edit').change(function() {
            if ($(this).val() === 'DPP') {
                $('#kategori_edit_group').removeClass('d-none');
                $('#kategori_edit').prop('required', true);
            } else {
                $('#kategori_edit_group').addClass('d-none');
                $('#kategori_edit').prop('required', false).val('');
            }
        });

        // Binding data to modal edit
        $('.btn-edit').click(function() {
            var id = $(this).data('id');
            var jenis = $(this).data('jenis');
            var jenjang = $(this).data('jenjang');
            var kategori = $(this).data('kategori');
            var tahun = $(this).data('tahun_ajaran_id');
            var nominal = $(this).data('nominal');
            var status = $(this).data('status');

            $('#form-edit').attr('action', '/tarif-pembayaran/' + id);
            $('#jenis_edit').val(jenis).trigger('change');
            $('#jenjang_edit').val(jenjang);
            $('#tahun_ajaran_id_edit').val(tahun);
            $('#nominal_edit').val(nominal);
            $('#status_edit').val(status);
            
            if (jenis === 'DPP') {
                $('#kategori_edit').val(kategori);
            }
        });
    });
</script>
@endpush