@extends('layouts.app')

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

@section('content')
<div class="row">
    <div class="col-12">

        <!-- Filter & Search -->
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Filter Pencarian</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('tarif-pembayaran.index') }}" method="GET">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Tahun Ajaran</label>
                                <select name="tahun_ajaran_id" class="form-control" onchange="this.form.submit()">
                                    @foreach($tahunAjarans as $ta)
                                        <option value="{{ $ta->id }}" {{ $selectedTahunAjaranId == $ta->id ? 'selected' : '' }}>
                                            {{ $ta->tahun }} {{ $ta->status == 'aktif' ? '(Aktif)' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Jenis</label>
                                <select name="jenis" class="form-control" onchange="this.form.submit()">
                                    <option value="">Semua Jenis</option>
                                    <option value="SPP" {{ request('jenis') == 'SPP' ? 'selected' : '' }}>SPP</option>
                                    <option value="DPP" {{ request('jenis') == 'DPP' ? 'selected' : '' }}>DPP</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Status</label>
                                <select name="status" class="form-control" onchange="this.form.submit()">
                                    <option value="">Semua Status</option>
                                    <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="nonaktif" {{ request('status') == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Cari</label>
                                <div class="input-group">
                                    <input type="text" name="q" class="form-control" placeholder="Cari tarif..." value="{{ request('q') }}">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <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-info btn-sm" data-toggle="modal" data-target="#modal-copy">
                        <i class="fas fa-copy"></i> Copy dari Tahun Lain
                    </button>
                    <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>
            <!-- /.card-header -->
            <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                    <thead>
                        <tr>
                            <th style="width: 50px;">No</th>
                            <th>Jenis Tarif</th>
                            <th>Jenjang</th>
                            <th>Kategori</th>
                            <th>Tahun Ajaran</th>
                            <th>Nominal</th>
                            <th>Status</th>
                            <th style="width: 150px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tarifs as $index => $tarif)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>
                                @if($tarif->jenis == 'SPP')
                                    <span class="badge badge-info">SPP</span>
                                @else
                                    <span class="badge badge-warning">DPP</span>
                                @endif
                            </td>
                            <td>{{ $tarif->jenjang }}</td>
                            <td>
                                @if($tarif->kategori_siswa == 'internal')
                                    <span class="badge badge-secondary">Internal</span>
                                @elseif($tarif->kategori_siswa == 'external')
                                    <span class="badge badge-dark">External</span>
                                @else
                                    -
                                @endif
                            </td>
                            <td>{{ $tarif->tahunAjaran->tahun ?? '-' }}</td>
                            <td><strong>Rp {{ number_format($tarif->nominal, 0, ',', '.') }}</strong></td>
                            <td>
                                @if($tarif->status == 'aktif')
                                    <span class="badge badge-success">Aktif</span>
                                @else
                                    <span class="badge badge-secondary">Nonaktif</span>
                                @endif
                            </td>
                            <td>
                                <form action="{{ route('tarif-pembayaran.toggle-status', $tarif->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-{{ $tarif->status == 'aktif' ? 'secondary' : 'success' }} btn-sm" title="{{ $tarif->status == 'aktif' ? 'Nonaktifkan' : 'Aktifkan' }}">
                                        <i class="fas fa-power-off"></i>
                                    </button>
                                </form>
                                <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#modal-edit-{{ $tarif->id }}" title="Edit Data">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <form action="{{ route('tarif-pembayaran.destroy', $tarif->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus tarif ini?')">
                                    @csrf 
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm m-0" title="Hapus Data">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>

                        <!-- Edit Modal -->
                        <div class="modal fade" id="modal-edit-{{ $tarif->id }}">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <form action="{{ route('tarif-pembayaran.update', $tarif->id) }}" method="POST">
                                        @csrf 
                                        @method('PUT')
                                        <input type="hidden" name="tahun_ajaran_id" value="{{ $selectedTahunAjaranId }}">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Edit Tarif: {{ $tarif->nama }}</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label>Nominal (Rp)</label>
                                                <input type="number" name="nominal" class="form-control" value="{{ $tarif->nominal }}" min="0" required>
                                            </div>
                                            <div class="form-group">
                                                <label>Status</label>
                                                <select name="status" class="form-control" required>
                                                    <option value="aktif" {{ $tarif->status == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                                    <option value="nonaktif" {{ $tarif->status == 'nonaktif' ? 'selected' : '' }}>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 Perubahan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- /.modal -->
                        @empty
                        <tr>
                            <td colspan="8" class="text-center">Belum ada data tarif pembayaran.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
</div>

<!-- Add Modal -->
<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" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Tahun Ajaran <span class="text-danger">*</span></label>
                        <select name="tahun_ajaran_id" class="form-control" required>
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}" {{ $selectedTahunAjaranId == $ta->id ? 'selected' : '' }}>
                                    {{ $ta->tahun }} {{ $ta->status == 'aktif' ? '(Aktif)' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Jenis Tarif <span class="text-danger">*</span></label>
                                <select name="jenis" id="add-jenis" 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>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Jenjang <span class="text-danger">*</span></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>
                    </div>
                    <div class="form-group" id="wrap-kategori" style="display:none;">
                        <label>Kategori Siswa (Hanya untuk DPP)</label>
                        <select name="kategori_siswa" class="form-control">
                            <option value="">Semua Kategori</option>
                            <option value="internal">Internal (Dari lembaga sendiri)</option>
                            <option value="external">External (Pindahan/Luar)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Nominal (Rp) <span class="text-danger">*</span></label>
                        <input type="number" name="nominal" class="form-control" min="0" placeholder="Contoh: 250000" required>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> Tarif baru akan otomatis berstatus <strong>Aktif</strong>.
                    </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 Tarif</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /.modal -->

<!-- Copy Year Modal -->
<div class="modal fade" id="modal-copy">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('tarif-pembayaran.copy-year') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Copy Tarif dari Tahun Sebelumnya</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i> Tarif yang sudah ada di tahun tujuan tidak akan ditimpa. Hanya tarif yang belum ada yang akan disalin.
                    </div>
                    <div class="form-group">
                        <label>Salin Dari Tahun Ajaran <span class="text-danger">*</span></label>
                        <select name="source_tahun_ajaran_id" class="form-control" required>
                            <option value="">-- Pilih Tahun Ajaran Sumber --</option>
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}">{{ $ta->tahun }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Ke Tahun Ajaran Tujuan <span class="text-danger">*</span></label>
                        <select name="target_tahun_ajaran_id" class="form-control" required>
                            <option value="">-- Pilih Tahun Ajaran Tujuan --</option>
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}" {{ $selectedTahunAjaranId == $ta->id ? 'selected' : '' }}>
                                    {{ $ta->tahun }} {{ $ta->status == 'aktif' ? '(Aktif)' : '' }}
                                </option>
                            @endforeach
                        </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-info">Proses Copy</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /.modal -->

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // Show/hide kategori field based on jenis
    $('#add-jenis').on('change', function() {
        if ($(this).val() === 'DPP') {
            $('#wrap-kategori').show();
        } else {
            $('#wrap-kategori').hide();
            $('#wrap-kategori select').val('');
        }
    });

    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: '{{ session('success') }}',
            timer: 3000,
            showConfirmButton: false
        });
    @endif
    
    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: '{{ session('error') }}',
            timer: 4000,
            showConfirmButton: false
        });
    @endif
    
    @if($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'Terdapat Kesalahan',
            html: '{!! implode("<br>", $errors->all()) !!}'
        });
    @endif
});
</script>
@endpush