{{-- resources/views/admin/keuangan/tarif/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Penetapan Tarif Keuangan')

@push('styles')
<style>
    .nav-pills .nav-link { transition: all 0.3s ease; color: #495057; }
    .nav-pills .nav-link:hover { background-color: #f8f9fa; }
    .nav-pills .nav-link.active {
        font-weight: bold; background-color: #0d6efd !important; color: #ffffff !important; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Pengaturan Keuangan - <span class="text-primary">{{ $jenjang->nama_jenjang ?? 'Jenjang' }}</span></h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola Kategori Tagihan dan Penetapan Tarif Pembayaran Siswa.</p>
        </div>
    </div>

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex" role="tablist">
            <li class="nav-item flex-fill text-center">
                <a href="{{ route('admin.keuangan.kategori', $jenjang->id) }}" class="nav-link w-100 mb-0 py-2 text-dark">
                    <i class="bi bi-tags me-1"></i> 1. Master Kategori Pembayaran
                </a>
            </li>
            <li class="nav-item flex-fill text-center">
                <a href="{{ route('admin.keuangan.tarif', $jenjang->id) }}" class="nav-link active w-100 mb-0 py-2">
                    <i class="bi bi-cash-coin me-1"></i> 2. Penetapan Tarif & Tagihan
                </a>
            </li>
        </ul>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0 fw-medium">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
            <h6 class="card-title mb-0 fw-bold">Daftar Penetapan Tarif</h6>
            <button class="btn btn-success btn-sm d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahTarif">
                <i class="bi bi-node-plus-fill"></i> Tetapkan Tarif Baru
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 20%">KATEGORI & SIKLUS</th>
                            <th class="text-secondary" style="font-size: 12px; width: 15%">BERLAKU UNTUK</th>
                            <th class="text-secondary" style="font-size: 12px; width: 15%">PERIODE</th>
                            <th class="text-end text-secondary" style="font-size: 12px; width: 15%">TARIF DASAR</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 10%">DIKALI</th>
                            <th class="text-end text-secondary" style="font-size: 12px; width: 15%">TOTAL TAGIHAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tarifs as $index => $tarif)
                        <tr>
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <span class="fw-bold text-primary d-block">{{ $tarif->kategori->nama ?? '-' }}</span>
                                <span class="badge bg-secondary text-secondary bg-opacity-10 border border-secondary" style="font-size: 10px;">{{ $tarif->kategori->tipe ?? '-' }}</span>
                            </td>
                            <td>
                                @if($tarif->tingkat_kelas_id)
                                    <span class="badge bg-info text-dark border border-info"><i class="bi bi-diagram-2 me-1"></i>Tingkat {{ $tarif->tingkat->nama_tingkat ?? '' }}</span>
                                @else
                                    <span class="badge bg-primary bg-opacity-10 text-primary border border-primary"><i class="bi bi-globe me-1"></i>Semua Tingkat</span>
                                @endif
                            </td>
                            <td>
                                <span class="d-block fw-bold text-dark">{{ $tarif->tahunAjaran->tahun_ajaran }}</span>
                                <small class="text-muted">{{ $tarif->semester ? $tarif->semester->nama : 'Semua Semester' }}</small>
                            </td>
                            <td class="text-end fw-medium text-dark">
                                Rp {{ number_format($tarif->nominal, 0, ',', '.') }}
                            </td>
                            <td class="text-center fw-bold text-info">
                                x {{ $tarif->pengali }}
                            </td>
                            <td class="text-end fw-bold text-success fs-6">
                                Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}
                            </td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalEditTarif{{ $tarif->id }}" title="Edit Nominal">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger" title="Hapus Tarif" onclick="confirmDelete({{ $tarif->id }}, 'Tarif {{ $tarif->kategori->nama ?? '' }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                                <form id="delete-form-{{ $tarif->id }}" action="{{ route('admin.keuangan.tarif.destroy', $tarif->id) }}" method="POST" class="d-none">
                                    @csrf @method('DELETE')
                                </form>
                            </td>
                        </tr>

                        <div class="modal fade" id="modalEditTarif{{ $tarif->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header bg-light border-bottom-0">
                                        <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-pencil-square me-2"></i>Edit Penetapan Tarif</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.keuangan.tarif.update', $tarif->id) }}" method="POST">
                                        @csrf @method('PUT')
                                        <div class="modal-body p-4 text-start">
                                            
                                            <div class="row mb-3">
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium">Kategori Pembayaran <span class="text-danger">*</span></label>
                                                    <select class="form-select bg-light" name="kategori_id" id="edit_kategori_{{ $tarif->id }}" required style="pointer-events: none;">
                                                        <option value="{{ $tarif->kategori_id }}" data-tipe="{{ $tarif->kategori->tipe ?? '' }}" selected>{{ $tarif->kategori->nama ?? '-' }}</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium text-primary">Berlaku Untuk (Tingkat) <span class="text-danger">*</span></label>
                                                    <select class="form-select border-primary" name="tingkat_kelas_id">
                                                        <option value="">-- Semua Tingkat (Global Jenjang) --</option>
                                                        @foreach($tingkats as $t)
                                                            <option value="{{ $t->id }}" {{ $tarif->tingkat_kelas_id == $t->id ? 'selected' : '' }}>Tingkat {{ $t->nama_tingkat }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium">Tahun Ajaran <span class="text-danger">*</span></label>
                                                    <select class="form-select" name="tahun_ajaran_id" required>
                                                        @foreach($tahunAjarans as $ta)
                                                            <option value="{{ $ta->id }}" {{ $tarif->tahun_ajaran_id == $ta->id ? 'selected' : '' }}>
                                                                {{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium">Semester / Periode</label>
                                                    <select class="form-select" name="semester_id">
                                                        <option value="">-- Berlaku 1 Tahun Penuh --</option>
                                                        @foreach($semesters as $smt)
                                                            <option value="{{ $smt->id }}" {{ $tarif->semester_id == $smt->id ? 'selected' : '' }}>{{ $smt->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="p-3 bg-light rounded border">
                                                <div class="row g-3 align-items-center">
                                                    <div class="col-md-4">
                                                        <label class="form-label fw-medium text-primary">1. Tarif Dasar (Nominal) <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text bg-white fw-bold">Rp</span>
                                                            <input type="number" class="form-control fw-bold text-dark" id="edit_nominal_{{ $tarif->id }}" name="nominal" value="{{ $tarif->nominal }}" required min="0" onkeyup="kalkulasiTotal('edit', '{{ $tarif->id }}')">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">X</div>
                                                    <div class="col-md-3">
                                                        <label class="form-label fw-medium text-info" id="edit_label_pengali_{{ $tarif->id }}">2. Dikali (Jumlah Siklus)</label>
                                                        <input type="number" class="form-control fw-bold text-center text-info" id="edit_pengali_{{ $tarif->id }}" name="pengali" value="{{ $tarif->pengali }}" required min="1" onkeyup="kalkulasiTotal('edit', '{{ $tarif->id }}')">
                                                    </div>
                                                    <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">=</div>
                                                    <div class="col-md-3">
                                                        <label class="form-label fw-bold text-success">3. Total Tagihan</label>
                                                        <input type="text" class="form-control fw-bold text-success text-end border-success bg-success bg-opacity-10" id="edit_total_{{ $tarif->id }}" value="Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}" readonly>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="modal-footer bg-light">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-primary fw-bold px-4">Simpan Perubahan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="bi bi-cash-stack fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada penetapan tarif yang dilakukan.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambahTarif" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white border-bottom-0">
                <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-node-plus-fill me-2"></i>Penetapan Tarif Baru</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.keuangan.tarif.store', $jenjang->id) }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium">Kategori Pembayaran <span class="text-danger">*</span></label>
                            <select class="form-select" name="kategori_id" id="add_kategori" required onchange="kalkulasiTotal('add', null, true)">
                                <option value="">-- Pilih Kategori --</option>
                                @foreach($kategoris as $k)
                                    <option value="{{ $k->id }}" data-tipe="{{ $k->tipe }}">{{ $k->nama }} ({{ $k->tipe }})</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium text-primary">Berlaku Untuk (Tingkat) <span class="text-danger">*</span></label>
                            <select class="form-select border-primary" name="tingkat_kelas_id">
                                <option value="">-- Semua Tingkat (Global Jenjang) --</option>
                                @foreach($tingkats as $t)
                                    <option value="{{ $t->id }}">Tingkat {{ $t->nama_tingkat }}</option>
                                @endforeach
                            </select>
                            <div class="form-text" style="font-size: 11px;">Biarkan "Semua Tingkat" jika tagihan ini dipukul rata.</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium">Tahun Ajaran <span class="text-danger">*</span></label>
                            <select class="form-select" name="tahun_ajaran_id" required>
                                @foreach($tahunAjarans as $ta)
                                    <option value="{{ $ta->id }}">{{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium">Semester / Periode</label>
                            <select class="form-select" name="semester_id">
                                <option value="">-- Berlaku 1 Tahun Penuh --</option>
                                @foreach($semesters as $smt)
                                    <option value="{{ $smt->id }}">{{ $smt->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="p-3 bg-light rounded border">
                        <div class="row g-3 align-items-center">
                            <div class="col-md-4">
                                <label class="form-label fw-medium text-primary">1. Tarif Dasar (Nominal) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white fw-bold">Rp</span>
                                    <input type="number" class="form-control fw-bold text-dark" id="add_nominal" name="nominal" placeholder="0" required min="0" onkeyup="kalkulasiTotal('add')">
                                </div>
                            </div>
                            <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">X</div>
                            <div class="col-md-3">
                                <label class="form-label fw-medium text-info" id="add_label_pengali">2. Dikali (Jumlah Siklus)</label>
                                <input type="number" class="form-control fw-bold text-center text-info" id="add_pengali" name="pengali" value="1" required min="1" onkeyup="kalkulasiTotal('add')">
                            </div>
                            <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">=</div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold text-success">3. Total Tagihan</label>
                                <input type="text" class="form-control fw-bold text-success text-end border-success bg-success bg-opacity-10" id="add_total" value="Rp 0" readonly>
                            </div>
                        </div>
                        <div class="form-text mt-2" style="font-size: 11px;">
                            <i class="bi bi-info-circle"></i> Angka pengali otomatis menyesuaikan tipe tagihan. Anda bebas mengubahnya.
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success px-4 fw-bold">Tetapkan Tarif</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function kalkulasiTotal(mode, id = null, isCategoryChange = false) {
        let prefix = mode === 'add' ? 'add' : 'edit';
        let idSuffix = id ? '_' + id : '';
        
        let selectKat = document.getElementById(prefix + '_kategori' + idSuffix);
        let inputNominal = document.getElementById(prefix + '_nominal' + idSuffix);
        let inputPengali = document.getElementById(prefix + '_pengali' + idSuffix);
        let inputTotal = document.getElementById(prefix + '_total' + idSuffix);
        let labelPengali = document.getElementById(prefix + '_label_pengali' + idSuffix);

        let selectedOption = selectKat.options[selectKat.selectedIndex];
        let tipe = selectedOption ? selectedOption.getAttribute('data-tipe') : '';
        
        let sistemAkademik = "{{ $jenjang->sistem_akademik ?? 'semester' }}";

        if(isCategoryChange) {
            let valPengali = 1;
            let textLabel = "Dikali (Jumlah Siklus)";

            if(tipe === 'Harian') {
                valPengali = sistemAkademik === 'semester' ? 130 : 85; 
                textLabel = "Dikali (Jml Hari Aktif)";
            } else if (tipe === 'Mingguan') {
                valPengali = sistemAkademik === 'semester' ? 24 : 16; 
                textLabel = "Dikali (Jml Minggu Aktif)";
            } else if (tipe === 'Bulanan') {
                valPengali = sistemAkademik === 'semester' ? 6 : 4; 
                textLabel = "Dikali (Jml Bulan)";
            } else if (tipe === 'Per Periode' || tipe === 'Tahunan' || tipe === 'Sekali Bayar' || tipe === 'Insidental') {
                valPengali = 1;
                textLabel = "Dikali (Bayar 1x)";
            }

            inputPengali.value = valPengali;
            labelPengali.innerText = textLabel;
        }

        let nominal = parseFloat(inputNominal.value) || 0;
        let pengali = parseFloat(inputPengali.value) || 1;
        let total = nominal * pengali;

        inputTotal.value = "Rp " + new Intl.NumberFormat('id-ID').format(total);
    }

    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus Penetapan?',
            text: "Anda akan menghapus " + nama + ". Lanjutkan?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif
    });
</script>
@endpush
@endsection