@extends('layouts.app')

@section('title', 'Tambah Gaji')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-cash-coin"></i> Tambah Gaji</h2>
    <a href="{{ route('gaji.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('gaji.store') }}" method="POST" id="gajiForm">
            @csrf

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Pegawai <span class="text-danger">*</span></label>
                    <select name="pegawai_id" id="pegawai_id" class="form-select @error('pegawai_id') is-invalid @enderror" required>
                        <option value="">Pilih Pegawai</option>
                        @foreach($pegawaiList as $p)
                        <option value="{{ $p->id }}" {{ old('pegawai_id') == $p->id ? 'selected' : '' }}>
                            {{ $p->nama_lengkap }} ({{ $p->nip }})
                        </option>
                        @endforeach
                    </select>
                    @error('pegawai_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">Tahun <span class="text-danger">*</span></label>
                    <input type="number" name="periode_tahun" id="periode_tahun" class="form-control @error('periode_tahun') is-invalid @enderror" 
                           value="{{ old('periode_tahun', date('Y')) }}" min="2000" max="2100" required>
                    @error('periode_tahun')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">Bulan <span class="text-danger">*</span></label>
                    <select name="periode_bulan" id="periode_bulan" class="form-select @error('periode_bulan') is-invalid @enderror" required>
                        @for($i = 1; $i <= 12; $i++)
                        <option value="{{ $i }}" {{ old('periode_bulan', date('n')) == $i ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create()->month($i)->locale('id')->monthName }}
                        </option>
                        @endfor
                    </select>
                    @error('periode_bulan')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <!-- Info Kehadiran -->
            <div class="alert alert-info mb-3" id="kehadiranInfo" style="display: none;">
                <h6><i class="bi bi-info-circle"></i> Data Kehadiran Periode</h6>
                <div class="row" id="kehadiranData">
                    <!-- Data akan diisi via AJAX -->
                </div>
                <small class="text-muted mt-2 d-block">
                    <i class="bi bi-lightbulb"></i> <strong>Catatan:</strong> Data kehadiran diambil otomatis dari absensi. Potongan akan dihitung saat menyimpan.
                </small>
            </div>

            <hr>
            <h5>Komponen Gaji</h5>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Gaji Pokok <span class="text-danger">*</span></label>
                    <input type="number" name="gaji_pokok" id="gaji_pokok" class="form-control @error('gaji_pokok') is-invalid @enderror" 
                           value="{{ old('gaji_pokok', 0) }}" min="0" step="0.01" required>
                    @error('gaji_pokok')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Tunjangan Jabatan</label>
                    <input type="number" name="tunjangan_jabatan" class="form-control @error('tunjangan_jabatan') is-invalid @enderror" 
                           value="{{ old('tunjangan_jabatan', 0) }}" min="0" step="0.01">
                    @error('tunjangan_jabatan')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Tunjangan Keluarga</label>
                    <input type="number" name="tunjangan_keluarga" class="form-control @error('tunjangan_keluarga') is-invalid @enderror" 
                           value="{{ old('tunjangan_keluarga', 0) }}" min="0" step="0.01">
                    @error('tunjangan_keluarga')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Tunjangan Transport</label>
                    <input type="number" name="tunjangan_transport" class="form-control @error('tunjangan_transport') is-invalid @enderror" 
                           value="{{ old('tunjangan_transport', 0) }}" min="0" step="0.01">
                    @error('tunjangan_transport')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Tunjangan Makan</label>
                    <input type="number" name="tunjangan_makan" class="form-control @error('tunjangan_makan') is-invalid @enderror" 
                           value="{{ old('tunjangan_makan', 0) }}" min="0" step="0.01">
                    @error('tunjangan_makan')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Bonus</label>
                    <input type="number" name="bonus" class="form-control @error('bonus') is-invalid @enderror" 
                           value="{{ old('bonus', 0) }}" min="0" step="0.01">
                    @error('bonus')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <hr>
            <h5>Persentase Potongan Kehadiran</h5>
            <div class="alert alert-info mb-3">
                <i class="bi bi-info-circle"></i> <strong>Info:</strong> Tentukan persentase potongan untuk setiap jenis ketidakhadiran. Potongan akan dihitung berdasarkan persentase dari gaji pokok per hari kerja.
            </div>

            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Persen Potongan Alpha (%) <span class="text-danger">*</span></label>
                    <input type="number" name="persen_potongan_alpha" id="persen_potongan_alpha" class="form-control @error('persen_potongan_alpha') is-invalid @enderror" 
                           value="{{ old('persen_potongan_alpha', 5.00) }}" min="0" max="100" step="0.01" required>
                    <small class="text-muted">Default: 5% per hari</small>
                    @error('persen_potongan_alpha')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Persen Potongan Izin (%) <span class="text-danger">*</span></label>
                    <input type="number" name="persen_potongan_izin" id="persen_potongan_izin" class="form-control @error('persen_potongan_izin') is-invalid @enderror" 
                           value="{{ old('persen_potongan_izin', 5.00) }}" min="0" max="100" step="0.01" required>
                    <small class="text-muted">Default: 5% per hari</small>
                    @error('persen_potongan_izin')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Persen Potongan Sakit (%) <span class="text-danger">*</span></label>
                    <input type="number" name="persen_potongan_sakit" id="persen_potongan_sakit" class="form-control @error('persen_potongan_sakit') is-invalid @enderror" 
                           value="{{ old('persen_potongan_sakit', 2.50) }}" min="0" max="100" step="0.01" required>
                    <small class="text-muted">Default: 2.5% per hari</small>
                    @error('persen_potongan_sakit')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <hr>
            <h5>Potongan</h5>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Potongan Absensi <small class="text-muted">(Dihitung otomatis)</small></label>
                    <input type="number" name="potongan_absensi" id="potongan_absensi" class="form-control @error('potongan_absensi') is-invalid @enderror" 
                           value="{{ old('potongan_absensi', 0) }}" min="0" step="0.01" readonly>
                    <small class="text-muted">Potongan dihitung otomatis berdasarkan persentase dan jumlah hari Alpha, Izin, dan Sakit</small>
                    @error('potongan_absensi')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Potongan Lainnya</label>
                    <input type="number" name="potongan_lainnya" id="potongan_lainnya" class="form-control @error('potongan_lainnya') is-invalid @enderror" 
                           value="{{ old('potongan_lainnya', 0) }}" min="0" step="0.01">
                    @error('potongan_lainnya')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-12">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title"><i class="bi bi-calculator"></i> Ringkasan Gaji</h6>
                            <div class="row">
                                <div class="col-md-4">
                                    <strong>Gaji Pokok:</strong><br>
                                    <span id="ringkasan_gaji_pokok" class="text-primary fs-5">Rp 0</span>
                                </div>
                                <div class="col-md-4">
                                    <strong>Total Tunjangan:</strong><br>
                                    <span id="ringkasan_tunjangan" class="text-success fs-5">Rp 0</span>
                                </div>
                                <div class="col-md-4">
                                    <strong>Total Potongan:</strong><br>
                                    <span id="ringkasan_potongan" class="text-danger fs-5">Rp 0</span>
                                </div>
                                <div class="col-md-12 mt-3 pt-3 border-top">
                                    <strong>Gaji Bersih yang Diterima:</strong><br>
                                    <span id="ringkasan_total_gaji" class="text-success fw-bold fs-4">Rp 0</span>
                                    <br><small class="text-muted">Total gaji setelah dikurangi semua potongan</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Keterangan</label>
                <textarea name="keterangan" class="form-control @error('keterangan') is-invalid @enderror" rows="3">{{ old('keterangan') }}</textarea>
                @error('keterangan')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const pegawaiSelect = document.getElementById('pegawai_id');
    const tahunInput = document.getElementById('periode_tahun');
    const bulanSelect = document.getElementById('periode_bulan');
    const gajiPokokInput = document.getElementById('gaji_pokok');
    const kehadiranInfo = document.getElementById('kehadiranInfo');
    const kehadiranData = document.getElementById('kehadiranData');
    const potonganAbsensiInput = document.getElementById('potongan_absensi');
    const persenAlphaInput = document.getElementById('persen_potongan_alpha');
    const persenIzinInput = document.getElementById('persen_potongan_izin');
    const persenSakitInput = document.getElementById('persen_potongan_sakit');
    const potonganLainnyaInput = document.getElementById('potongan_lainnya');
    const tunjanganJabatanInput = document.querySelector('input[name="tunjangan_jabatan"]');
    const tunjanganKeluargaInput = document.querySelector('input[name="tunjangan_keluarga"]');
    const tunjanganTransportInput = document.querySelector('input[name="tunjangan_transport"]');
    const tunjanganMakanInput = document.querySelector('input[name="tunjangan_makan"]');
    const bonusInput = document.querySelector('input[name="bonus"]');

    function formatRupiah(angka) {
        return 'Rp ' + parseFloat(angka || 0).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function hitungRingkasan() {
        const gajiPokok = parseFloat(gajiPokokInput.value) || 0;
        const tunjanganJabatan = parseFloat(tunjanganJabatanInput.value) || 0;
        const tunjanganKeluarga = parseFloat(tunjanganKeluargaInput.value) || 0;
        const tunjanganTransport = parseFloat(tunjanganTransportInput.value) || 0;
        const tunjanganMakan = parseFloat(tunjanganMakanInput.value) || 0;
        const bonus = parseFloat(bonusInput.value) || 0;
        const potonganAbsensi = parseFloat(potonganAbsensiInput.value) || 0;
        const potonganLainnya = parseFloat(potonganLainnyaInput.value) || 0;

        const totalTunjangan = tunjanganJabatan + tunjanganKeluarga + tunjanganTransport + tunjanganMakan + bonus;
        const totalPotongan = potonganAbsensi + potonganLainnya;
        const totalGaji = gajiPokok + totalTunjangan - totalPotongan;

        document.getElementById('ringkasan_gaji_pokok').textContent = formatRupiah(gajiPokok);
        document.getElementById('ringkasan_tunjangan').textContent = formatRupiah(totalTunjangan);
        document.getElementById('ringkasan_potongan').textContent = formatRupiah(totalPotongan);
        document.getElementById('ringkasan_total_gaji').textContent = formatRupiah(Math.max(0, totalGaji));
    }

    function loadKehadiran() {
        const pegawaiId = pegawaiSelect.value;
        const tahun = tahunInput.value;
        const bulan = bulanSelect.value;
        const gajiPokok = gajiPokokInput.value;
        const persenAlpha = persenAlphaInput.value || 5.00;
        const persenIzin = persenIzinInput.value || 5.00;
        const persenSakit = persenSakitInput.value || 2.50;

        if (!pegawaiId || !tahun || !bulan) {
            kehadiranInfo.style.display = 'none';
            hitungRingkasan();
            return;
        }

        // Show loading
        kehadiranInfo.style.display = 'block';
        kehadiranData.innerHTML = '<div class="col-12"><i class="bi bi-hourglass-split"></i> Memuat data kehadiran...</div>';

        const url = '{{ route("gaji.get-kehadiran") }}?pegawai_id=' + pegawaiId + 
                    '&periode_tahun=' + tahun + 
                    '&periode_bulan=' + bulan + 
                    '&gaji_pokok=' + (gajiPokok || 0) +
                    '&persen_potongan_alpha=' + persenAlpha +
                    '&persen_potongan_izin=' + persenIzin +
                    '&persen_potongan_sakit=' + persenSakit +
                    '&tunjangan_jabatan=' + (tunjanganJabatanInput.value || 0) +
                    '&tunjangan_keluarga=' + (tunjanganKeluargaInput.value || 0) +
                    '&tunjangan_transport=' + (tunjanganTransportInput.value || 0) +
                    '&tunjangan_makan=' + (tunjanganMakanInput.value || 0) +
                    '&bonus=' + (bonusInput.value || 0) +
                    '&potongan_lainnya=' + (potonganLainnyaInput.value || 0);

        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const k = data.data.kehadiran;
                    kehadiranData.innerHTML = `
                        <div class="col-md-2">
                            <div class="text-center p-2 bg-success bg-opacity-10 rounded">
                                <div class="fw-bold text-success">${k.jumlah_hadir}</div>
                                <small class="text-muted">Hadir</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-2 bg-warning bg-opacity-10 rounded">
                                <div class="fw-bold text-warning">${k.jumlah_izin}</div>
                                <small class="text-muted">Izin</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-2 bg-info bg-opacity-10 rounded">
                                <div class="fw-bold text-info">${k.jumlah_sakit}</div>
                                <small class="text-muted">Sakit</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-2 bg-primary bg-opacity-10 rounded">
                                <div class="fw-bold text-primary">${k.jumlah_cuti}</div>
                                <small class="text-muted">Cuti</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-2 bg-danger bg-opacity-10 rounded">
                                <div class="fw-bold text-danger">${k.jumlah_alpha}</div>
                                <small class="text-muted">Alpha</small>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center p-2 bg-secondary bg-opacity-10 rounded">
                                <div class="fw-bold text-secondary">${k.total_hari_kerja}</div>
                                <small class="text-muted">Hari Kerja</small>
                            </div>
                        </div>
                        <div class="col-12 mt-2">
                            <div class="alert alert-warning mb-0">
                                <strong>Potongan Absensi:</strong> ${formatRupiah(data.data.potongan_absensi)}
                                <br><small>Alpha: ${data.data.persen_alpha}% | Izin: ${data.data.persen_izin}% | Sakit: ${data.data.persen_sakit}% per hari dari gaji pokok</small>
                            </div>
                        </div>
                    `;
                    // Update potongan absensi input
                    potonganAbsensiInput.value = parseFloat(data.data.potongan_absensi).toFixed(2);
                    hitungRingkasan();
                } else {
                    kehadiranData.innerHTML = '<div class="col-12 text-danger">Error: ' + data.message + '</div>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                kehadiranData.innerHTML = '<div class="col-12 text-danger">Terjadi kesalahan saat memuat data kehadiran</div>';
            });
    }

    // Load kehadiran saat pegawai, tahun, bulan, gaji pokok, atau persentase berubah
    pegawaiSelect.addEventListener('change', loadKehadiran);
    tahunInput.addEventListener('change', loadKehadiran);
    bulanSelect.addEventListener('change', loadKehadiran);
    gajiPokokInput.addEventListener('input', () => { loadKehadiran(); hitungRingkasan(); });
    persenAlphaInput.addEventListener('input', loadKehadiran);
    persenIzinInput.addEventListener('input', loadKehadiran);
    persenSakitInput.addEventListener('input', loadKehadiran);
    potonganLainnyaInput.addEventListener('input', hitungRingkasan);
    tunjanganJabatanInput.addEventListener('input', () => { loadKehadiran(); hitungRingkasan(); });
    tunjanganKeluargaInput.addEventListener('input', () => { loadKehadiran(); hitungRingkasan(); });
    tunjanganTransportInput.addEventListener('input', () => { loadKehadiran(); hitungRingkasan(); });
    tunjanganMakanInput.addEventListener('input', () => { loadKehadiran(); hitungRingkasan(); });
    bonusInput.addEventListener('input', () => { loadKehadiran(); hitungRingkasan(); });

    // Hitung ringkasan saat halaman dimuat
    hitungRingkasan();

    // Load kehadiran saat halaman dimuat jika semua field sudah terisi
    if (pegawaiSelect.value && tahunInput.value && bulanSelect.value) {
        loadKehadiran();
    }
});
</script>
@endpush
@endsection