@extends('adminlte::page')

@section('title', 'Pengaturan Gaji per Jabatan | Smart Cendekia')

@section('plugins.Select2', true)

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Poppins', sans-serif; font-size: 1.5rem;">
                Pengaturan Gaji
            </h1>
            <p class="text-muted font-weight-medium mb-0" style="font-size: 0.9rem;">
                Konfigurasi standar honorarium per jabatan spesifik di lembaga.
            </p>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid">
    
    {{-- SWITCH SCHOOL (KHUSUS SUPER USER / YAYASAN) --}}
    @if(isset($isSuperUser) && $isSuperUser)
        <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
            <div class="card-body p-3 d-flex align-items-center justify-content-between bg-light-purple" style="border-radius: 15px;">
                <div class="d-flex align-items-center">
                    <div class="bg-white p-2 rounded-circle text-purple shadow-sm mr-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <div>
                        <h6 class="font-weight-bold text-purple mb-0">Mode Yayasan</h6>
                        <small class="text-muted">Mengatur untuk: <strong>{{ $namaSekolah }}</strong></small>
                    </div>
                </div>
                <div style="width: 280px;">
                    <select class="form-control select2-apex" onchange="window.location.href = this.value;">
                        @foreach($daftarSekolah as $s)
                            <option value="{{ route('hr.salary-settings.switch', $s->id) }}" 
                                {{ (isset($activeSekolahId) && $activeSekolahId == $s->id) ? 'selected' : '' }}>
                                {{ $s->nama_sekolah }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    @endif

    {{-- ALERT INFO --}}
    <div class="alert bg-light-info text-info border-0 shadow-sm rounded-lg mb-4">
        <div class="d-flex align-items-center">
            <i class="fas fa-info-circle fa-lg mr-3"></i>
            <span class="font-weight-bold">Silakan pilih tab Jabatan di bawah ini untuk mengatur nominal gaji masing-masing posisi.</span>
        </div>
    </div>

    {{-- CARD UTAMA (TABS JABATAN) --}}
    <div class="card border-0 shadow-lg" style="border-radius: 20px;">
        
        {{-- HEADER TABS (SCROLLABLE) --}}
        <div class="card-header bg-white border-bottom-0 pt-4 px-4">
            <ul class="nav nav-pills custom-nav-pills" id="pills-tab" role="tablist" style="overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; padding-bottom: 5px;">
                @foreach($jabatanList as $key => $label)
                    <li class="nav-item mr-2 mb-2">
                        <a class="nav-link {{ $loop->first ? 'active' : '' }} font-weight-bold py-2 px-3 border" 
                           id="tab-{{ $key }}" data-toggle="pill" href="#content-{{ $key }}" role="tab" 
                           style="border-radius: 50px;">
                            {{ $label }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="card-body p-4">
            <div class="tab-content" id="pills-tabContent">
                
                @foreach($jabatanList as $key => $label)
                    @php
                        // Ambil data setting berdasarkan KEY jabatan (misal: 'guru_mapel', 'kepala_sekolah')
                        $currentSetting = $settings[$key] ?? null;
                    @endphp

                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="content-{{ $key }}" role="tabpanel">
                        <form action="{{ route('hr.salary-settings.store') }}" method="POST">
                            @csrf
                            {{-- PENTING: Mengirim Key Jabatan ke Controller --}}
                            <input type="hidden" name="jabatan" value="{{ $key }}">

                            <div class="d-flex align-items-center mb-4 pb-2 border-bottom">
                                <h5 class="text-purple font-weight-bold mb-0">
                                    <i class="fas fa-user-tag mr-2"></i> Tarif Gaji: <span class="text-dark">{{ $label }}</span>
                                </h5>
                            </div>

                            <div class="row">
                                {{-- 1. PENDAPATAN --}}
                                <div class="col-lg-6 mb-4">
                                    <div class="p-3 bg-light-purple rounded-lg h-100 border border-light">
                                        <h6 class="font-weight-bold text-dark mb-3 border-bottom pb-2">
                                            <i class="fas fa-wallet mr-1 text-purple"></i> Pendapatan Utama
                                        </h6>
                                        
                                        <div class="form-group mb-3">
                                            <label class="font-weight-bold text-dark small text-uppercase">Honor Per Jam (JTM)</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend"><span class="input-group-text border-0 bg-white shadow-sm font-weight-bold">Rp</span></div>
                                                <input type="text" name="honor_per_jam" class="form-control border-0 font-weight-bold uang shadow-sm h-auto py-2" 
                                                       value="{{ old('honor_per_jam', $currentSetting?->honor_per_jam) }}" placeholder="0">
                                            </div>
                                            <small class="text-muted">Digunakan jika jabatan ini memiliki jam mengajar.</small>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label class="font-weight-bold text-dark small text-uppercase">Honor Kehadiran (Harian)</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend"><span class="input-group-text border-0 bg-white shadow-sm font-weight-bold">Rp</span></div>
                                                <input type="text" name="honor_kehadiran" class="form-control border-0 font-weight-bold uang shadow-sm h-auto py-2" 
                                                       value="{{ old('honor_kehadiran', $currentSetting?->honor_kehadiran) }}" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="form-group mb-0">
                                            <label class="font-weight-bold text-dark small text-uppercase">Tunjangan Jabatan</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend"><span class="input-group-text border-0 bg-white shadow-sm font-weight-bold">Rp</span></div>
                                                <input type="text" name="tunjangan_jabatan" class="form-control border-0 font-weight-bold uang shadow-sm h-auto py-2" 
                                                       value="{{ old('tunjangan_jabatan', $currentSetting?->tunjangan_jabatan) }}" placeholder="0">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- 2. TUNJANGAN LAIN & POTONGAN --}}
                                <div class="col-lg-6">
                                    {{-- Tambahan --}}
                                    <div class="p-3 bg-light-teal rounded-lg mb-3 border border-light">
                                        <h6 class="font-weight-bold text-dark mb-3 border-bottom pb-2">
                                            <i class="fas fa-plus-circle mr-1 text-teal"></i> Tambahan
                                        </h6>
                                        
                                        <div class="form-group mb-3">
                                            <label class="font-weight-bold text-dark small text-uppercase">Tunjangan Wali Kelas</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend"><span class="input-group-text border-0 bg-white shadow-sm font-weight-bold">Rp</span></div>
                                                <input type="text" name="tunjangan_wali_kelas" class="form-control border-0 font-weight-bold uang shadow-sm h-auto py-2" 
                                                       value="{{ old('tunjangan_wali_kelas', $currentSetting?->tunjangan_wali_kelas) }}" placeholder="0">
                                            </div>
                                        </div>

                                        <div class="form-group mb-0">
                                            <label class="font-weight-bold text-dark small text-uppercase">Tunjangan Transport</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend"><span class="input-group-text border-0 bg-white shadow-sm font-weight-bold">Rp</span></div>
                                                <input type="text" name="tunjangan_transport" class="form-control border-0 font-weight-bold uang shadow-sm h-auto py-2" 
                                                       value="{{ old('tunjangan_transport', $currentSetting?->tunjangan_transport) }}" placeholder="0">
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Potongan --}}
                                    <div class="p-3 bg-light-danger rounded-lg border border-light">
                                        <h6 class="font-weight-bold text-dark mb-3 border-bottom pb-2">
                                            <i class="fas fa-minus-circle mr-1 text-danger"></i> Potongan Kehadiran
                                        </h6>
                                        <div class="row">
                                            <div class="col-6">
                                                <label class="font-weight-bold text-danger small">Denda Terlambat</label>
                                                <input type="text" name="potongan_terlambat" class="form-control border-0 font-weight-bold text-danger uang shadow-sm h-auto py-2" 
                                                       value="{{ old('potongan_terlambat', $currentSetting?->potongan_terlambat) }}" placeholder="0">
                                            </div>
                                            <div class="col-6">
                                                <label class="font-weight-bold text-danger small">Denda Alpa (Per Hari)</label>
                                                <input type="text" name="potongan_alpa" class="form-control border-0 font-weight-bold text-danger uang shadow-sm h-auto py-2" 
                                                       value="{{ old('potongan_alpa', $currentSetting?->potongan_alpa) }}" placeholder="0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 text-right">
                                <button type="submit" class="btn btn-apex-primary rounded-pill px-5 font-weight-bold shadow-sm hover-lift">
                                    <i class="fas fa-save mr-2"></i> Simpan Tarif {{ $label }}
                                </button>
                            </div>
                        </form>
                    </div>
                @endforeach

            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    /* Scoped Styles: Menggunakan class spesifik agar tidak merusak Sidebar AdminLTE */
    
    /* Background Colors */
    .bg-light-purple { background-color: #F8F5FF !important; }
    .bg-light-teal { background-color: #E0F2F1 !important; }
    .bg-light-danger { background-color: #FFF5F8 !important; }
    .bg-light-info { background-color: #E1F0FF !important; }
    
    /* Text Colors */
    .text-purple { color: #5B247A !important; }
    .text-teal { color: #009688 !important; }
    
    /* Custom Nav Pills (Agar tidak menimpa .nav-link global sidebar) */
    .custom-nav-pills .nav-link.active {
        background: linear-gradient(90deg, #2E1451 0%, #5B247A 100%);
        color: white !important;
        box-shadow: 0 4px 6px rgba(91, 36, 122, 0.2);
        border: none;
    }
    .custom-nav-pills .nav-link {
        color: #6c757d;
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }
    .custom-nav-pills .nav-link:hover {
        background-color: #e2e6ea;
        transform: translateY(-1px);
    }
    
    /* Button Custom */
    .btn-apex-primary {
        background: linear-gradient(90deg, #2E1451 0%, #5B247A 100%);
        color: white; border: none;
    }
    .btn-apex-primary:hover {
        background: linear-gradient(90deg, #5B247A 0%, #2E1451 100%);
        color: white; transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(91, 36, 122, 0.3);
    }
    
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }

    /* Fix Select2 Height inside AdminLTE */
    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #ced4da !important;
        padding-top: 5px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function(){
        // Init Select2
        $('.select2-apex').select2({ theme: 'bootstrap4', width: '100%' });
        
        // Auto Format Rupiah saat halaman dimuat & saat diketik
        $('.uang').each(function(){ $(this).val(formatRupiah($(this).val())); });
        $('.uang').on('keyup', function(){ $(this).val(formatRupiah($(this).val())); });
    });

    // Helper: Format Angka ke Rupiah (Tanpa Rp)
    function formatRupiah(angka){
        if(!angka) return '';
        var number_string = angka.toString().replace(/[^,\d]/g, '').toString(),
            split   = number_string.split(','),
            sisa    = split[0].length % 3,
            rupiah  = split[0].substr(0, sisa),
            ribuan  = split[0].substr(sisa).match(/\d{3}/gi);
        
        if(ribuan){
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }
        return split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    }
</script>
@stop