@extends('layouts.app')
@section('title','Pengajuan Mutasi')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h3 class="mb-1">Pengajuan Mutasi</h3>
        <div class="text-muted">Form pengajuan mutasi menggunakan data pegawai yang sudah terdaftar.</div>
    </div>
    <a href="{{ route('mutasi.index') }}" class="btn btn-outline-secondary">Kembali</a>
</div>

<form method="post" action="{{ route('mutasi.store') }}" enctype="multipart/form-data">
@csrf

{{-- =========================================================
     DATA PEGAWAI
     USER hanya menerima daftar pegawai dari cabangnya sendiri.
     ADMIN/SUPERADMIN dapat memilih seluruh pegawai.
     ========================================================= --}}
<div class="card shadow-sm mb-3">
    <div class="card-header bg-white"><strong>Data Pegawai</strong></div>
    <div class="card-body">
        @if(auth()->user()->role === 'USER')
            <div class="alert alert-info py-2">
                Anda hanya dapat memilih karyawan yang berada di <strong>cabang Anda</strong>.
            </div>
        @endif

        <div class="row g-3">
            <div class="col-md-8">
                @php
                    $selectedPegawaiId = old('pegawai_id','');
                    $selectedPegawai = $pegawai->firstWhere('id',$selectedPegawaiId);
                @endphp
                <label class="form-label">Pegawai <span class="text-danger">*</span></label>
                <div class="position-relative" id="mutasi-pegawai-picker">
                    <input type="text"
                           id="mutasi-pegawai-input"
                           class="form-control"
                           value="{{ $selectedPegawai ? $selectedPegawai->nip.' - '.$selectedPegawai->nama : '' }}"
                           placeholder="Ketik NIP atau Nama pegawai..."
                           autocomplete="off">
                    <input type="hidden" name="pegawai_id" id="mutasi-pegawai-value" value="{{ $selectedPegawaiId }}">
                    <div id="mutasi-pegawai-list"
                         class="list-group position-absolute w-100 shadow-sm bg-white"
                         style="display:none;z-index:1080;max-height:280px;overflow-y:auto;">
                        @foreach($pegawai as $p)
                            <button type="button"
                                    class="list-group-item list-group-item-action text-start mutasi-pegawai-option"
                                    data-id="{{ $p->id }}"
                                    data-text="{{ strtolower($p->nip.' '.$p->nama) }}"
                                    data-label="{{ $p->nip.' - '.$p->nama }}"
                                    data-cabang="{{ $p->cabang->nama ?? '-' }}"
                                    data-bagian="{{ $p->bagian->nama ?? '-' }}"
                                    data-jabatan="{{ $p->jabatan->nama ?? '-' }}"
                                    data-gaji="{{ (float)($p->gaji_pokok ?? 0) }}"
                                    data-tjab="{{ (float)($p->tunjangan_jabatan ?? 0) }}"
                                    data-ttrans="{{ (float)($p->tunjangan_transport ?? 0) }}"
                                    data-tmakan="{{ (float)($p->tunjangan_makan ?? 0) }}">
                                <strong>{{ $p->nip }}</strong> - {{ $p->nama }}
                            </button>
                        @endforeach
                    </div>
                </div>
                <div class="form-text">Ketik NIP atau Nama, lalu pilih karyawan.</div>
            </div>

            <div class="col-md-4">
                <label class="form-label">Tanggal Pengajuan <span class="text-danger">*</span></label>
                <input type="date" name="tanggal_pengajuan"
                       value="{{ old('tanggal_pengajuan',today()->format('Y-m-d')) }}"
                       class="form-control" required>
            </div>
        </div>

        <div class="alert alert-secondary mt-3 mb-0" id="mutasi-asal">
            Pilih pegawai untuk melihat data dan gaji saat ini.
        </div>
    </div>
</div>

{{-- =========================================================
     TUJUAN MUTASI
     USER hanya menentukan cabang dan jabatan baru.
     Gaji baru ditentukan pada saat approval oleh ADMIN/SUPERADMIN.
     ========================================================= --}}
<div class="card shadow-sm mb-3">
    <div class="card-header bg-white"><strong>Tujuan Mutasi</strong></div>
    <div class="card-body">
        <div class="alert alert-warning py-2">
            <strong>Catatan:</strong> Gaji pokok dan tunjangan baru <strong>tidak ditentukan oleh USER</strong>.
            Nilai final akan ditentukan/dikonfirmasi oleh ADMIN/SUPERADMIN saat persetujuan.
        </div>

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Cabang Baru <span class="text-danger">*</span></label>
                <select name="cabang_tujuan_id" class="form-select" required>
                    <option value="">-- Pilih Cabang Tujuan --</option>
                    @foreach($cabangs as $x)
                        <option value="{{ $x->id }}" @selected(old('cabang_tujuan_id') == $x->id)>
                            {{ $x->nama }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label class="form-label">Jabatan Baru <span class="text-danger">*</span></label>
                <select id="jabatan_tujuan" name="jabatan_tujuan_id" class="form-select" required>
                    <option value="">-- Pilih Jabatan Tujuan --</option>
                    @foreach($jabatans as $x)
                        <option value="{{ $x->id }}"
                                data-bagian="{{ $x->bagian_id }}"
                                @selected(old('jabatan_tujuan_id') == $x->id)>
                            {{ $x->nama }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label class="form-label">Bagian Baru</label>
                <select id="bagian_tujuan" name="bagian_tujuan_id" class="form-select">
                    <option value="">-- Otomatis dari Jabatan --</option>
                    @foreach($bagians as $x)
                        <option value="{{ $x->id }}" @selected(old('bagian_tujuan_id') == $x->id)>
                            {{ $x->nama }}
                        </option>
                    @endforeach
                </select>
                <div class="form-text">Akan otomatis mengikuti bagian dari jabatan baru.</div>
            </div>

            <div class="col-md-6">
                <label class="form-label">Tanggal Efektif</label>
                <input type="date" name="tanggal_efektif"
                       value="{{ old('tanggal_efektif') }}"
                       class="form-control">
            </div>
        </div>
    </div>
</div>

{{-- =========================================================
     ALASAN DAN LAMPIRAN
     ========================================================= --}}
<div class="card shadow-sm mb-3">
    <div class="card-header bg-white"><strong>Alasan & Lampiran</strong></div>
    <div class="card-body">
        <div class="mb-3">
            <label class="form-label">Alasan Mutasi <span class="text-danger">*</span></label>
            <textarea name="alasan" class="form-control" rows="4" required>{{ old('alasan') }}</textarea>
        </div>

        <label class="form-label">Lampiran</label>
        <input type="file" name="lampiran[]" class="form-control"
               accept=".jpg,.jpeg,.png,.pdf" multiple>
        <div class="form-text">
            JPG/JPEG/PNG/PDF, maksimal 5 MB per file. Lampiran dapat dilihat oleh ADMIN/SUPERADMIN.
        </div>
    </div>
</div>

<div class="d-flex justify-content-end gap-2">
    <a href="{{ route('mutasi.index') }}" class="btn btn-outline-secondary">Batal</a>
    <button type="submit" class="btn btn-primary">Kirim Pengajuan Mutasi</button>
</div>
</form>

<script>
(function(){
    const root = document.getElementById('mutasi-pegawai-picker');
    const input = document.getElementById('mutasi-pegawai-input');
    const hidden = document.getElementById('mutasi-pegawai-value');
    const list = document.getElementById('mutasi-pegawai-list');
    const asal = document.getElementById('mutasi-asal');
    const options = Array.from(document.querySelectorAll('.mutasi-pegawai-option'));
    const jabatan = document.getElementById('jabatan_tujuan');
    const bagian = document.getElementById('bagian_tujuan');

    function rupiah(v){
        return Number(v || 0).toLocaleString('id-ID',{
            minimumFractionDigits:0,
            maximumFractionDigits:0
        });
    }

    function showPegawai(opt){
        if(!opt){
            asal.innerHTML='Pilih pegawai untuk melihat data dan gaji saat ini.';
            return;
        }

        hidden.value = opt.dataset.id;
        input.value = opt.dataset.label;
        list.style.display = 'none';

        asal.innerHTML =
            '<strong>Data saat ini:</strong> ' +
            opt.dataset.cabang + ' / ' +
            opt.dataset.bagian + ' / ' +
            opt.dataset.jabatan +
            '<br><strong>Gaji Pokok:</strong> Rp ' + rupiah(opt.dataset.gaji) +
            ' &nbsp; | &nbsp; <strong>Tunj. Jabatan:</strong> Rp ' + rupiah(opt.dataset.tjab) +
            ' &nbsp; | &nbsp; <strong>Transport:</strong> Rp ' + rupiah(opt.dataset.ttrans) +
            ' &nbsp; | &nbsp; <strong>Makan:</strong> Rp ' + rupiah(opt.dataset.tmakan);
    }

    function filter(){
        const q=(input.value||'').trim().toLowerCase();
        let count=0;
        options.forEach(function(opt){
            const match=!q || opt.dataset.text.includes(q);
            opt.style.display=match?'':'none';
            if(match) count++;
        });
        list.style.display=count?'block':'none';
    }

    input.addEventListener('focus',filter);
    input.addEventListener('input',function(){
        hidden.value='';
        filter();
    });

    options.forEach(function(opt){
        opt.addEventListener('mousedown',function(e){
            e.preventDefault();
            showPegawai(opt);
        });
    });

    document.addEventListener('click',function(e){
        if(!root.contains(e.target)) list.style.display='none';
    });

    document.querySelector('form')?.addEventListener('submit',function(e){
        if(!hidden.value){
            e.preventDefault();
            input.classList.add('is-invalid');
            input.focus();
            list.style.display='block';
            alert('Silakan pilih pegawai dari daftar.');
        }
    });

    function syncBagian(){
        const opt=jabatan.options[jabatan.selectedIndex];
        const id=opt?.dataset?.bagian||'';
        if(id) bagian.value=id;
    }

    jabatan.addEventListener('change',syncBagian);
    syncBagian();

    const initialId=hidden.value;
    if(initialId){
        const initial=options.find(o=>o.dataset.id===String(initialId));
        if(initial) showPegawai(initial);
    }
})();
</script>
@endsection