@extends('layouts.app')

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

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

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('absensi.store') }}">
            @csrf
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="pegawai_id" class="form-label">Pegawai <span class="text-danger">*</span></label>
                        <select class="form-select @error('pegawai_id') is-invalid @enderror" 
                                id="pegawai_id" name="pegawai_id" required>
                            <option value="">Pilih Pegawai</option>
                            @foreach($pegawaiList as $p)
                            <option value="{{ $p->id }}" {{ old('pegawai_id') == $p->id ? 'selected' : '' }}>
                                {{ $p->nip }} - {{ $p->nama_lengkap }}
                            </option>
                            @endforeach
                        </select>
                        @error('pegawai_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="tanggal" class="form-label">Tanggal <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('tanggal') is-invalid @enderror" 
                               id="tanggal" name="tanggal" value="{{ old('tanggal', date('Y-m-d')) }}" required>
                        @error('tanggal')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small class="text-muted d-block mt-1">
                            <i class="bi bi-info-circle"></i> Setiap pegawai hanya diperbolehkan 1 kali absen per tanggal
                        </small>
                        <div id="jam-kerja-info" class="mt-2 small text-info" style="display: none;">
                            <i class="bi bi-info-circle"></i> <span id="jam-kerja-text"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="jam_masuk" class="form-label">Jam Masuk</label>
                        <input type="time" class="form-control @error('jam_masuk') is-invalid @enderror" 
                               id="jam_masuk" name="jam_masuk" value="{{ old('jam_masuk') }}">
                        @error('jam_masuk')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="jam_keluar" class="form-label">Jam Keluar</label>
                        <input type="time" class="form-control @error('jam_keluar') is-invalid @enderror" 
                               id="jam_keluar" name="jam_keluar" value="{{ old('jam_keluar') }}">
                        @error('jam_keluar')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select @error('status') is-invalid @enderror" 
                                id="status" name="status" required>
                            <option value="Hadir" {{ old('status') == 'Hadir' ? 'selected' : '' }}>Hadir</option>
                            <option value="Izin" {{ old('status') == 'Izin' ? 'selected' : '' }}>Izin</option>
                            <option value="Sakit" {{ old('status') == 'Sakit' ? 'selected' : '' }}>Sakit</option>
                            <option value="Cuti" {{ old('status') == 'Cuti' ? 'selected' : '' }}>Cuti</option>
                            <option value="Alpha" {{ old('status') == 'Alpha' ? 'selected' : '' }}>Alpha</option>
                            <option value="Terlambat" {{ old('status') == 'Terlambat' ? 'selected' : '' }}>Terlambat</option>
                        </select>
                        @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

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

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ route('absensi.index') }}" class="btn btn-secondary">Batal</a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tanggalInput = document.getElementById('tanggal');
    const jamMasukInput = document.getElementById('jam_masuk');
    const jamKeluarInput = document.getElementById('jam_keluar');
    const jamKerjaInfo = document.getElementById('jam-kerja-info');
    const jamKerjaText = document.getElementById('jam-kerja-text');
    
    // Jam kerja per hari
    const jamKerjaPerHari = {
        1: { masuk: '07:30', keluar: '14:30', jam: 7, menit: 0, label: 'Senin-Kamis' },
        2: { masuk: '07:30', keluar: '14:30', jam: 7, menit: 0, label: 'Senin-Kamis' },
        3: { masuk: '07:30', keluar: '14:30', jam: 7, menit: 0, label: 'Senin-Kamis' },
        4: { masuk: '07:30', keluar: '14:30', jam: 7, menit: 0, label: 'Senin-Kamis' },
        5: { masuk: '07:30', keluar: '11:30', jam: 4, menit: 0, label: 'Jumat' },
        6: { masuk: '07:30', keluar: '13:00', jam: 5, menit: 30, label: 'Sabtu' },
    };
    
    function updateJamKerjaInfo() {
        if (!tanggalInput.value) {
            jamKerjaInfo.style.display = 'none';
            return;
        }
        
        const tanggal = new Date(tanggalInput.value);
        const hari = tanggal.getDay(); // 0 = Minggu, 1 = Senin, ..., 6 = Sabtu
        
        if (jamKerjaPerHari[hari]) {
            const info = jamKerjaPerHari[hari];
            const jamText = info.menit > 0 ? `${info.jam} jam ${info.menit} menit` : `${info.jam} jam`;
            jamKerjaText.textContent = `${info.label}: Masuk ${info.masuk}, Keluar ${info.keluar} (${jamText})`;
            jamKerjaInfo.style.display = 'block';
        } else {
            jamKerjaInfo.style.display = 'none';
        }
    }
    
    function calculateJamKeluar() {
        if (!tanggalInput.value || !jamMasukInput.value) {
            return;
        }
        
        const tanggal = new Date(tanggalInput.value);
        const hari = tanggal.getDay();
        
        if (!jamKerjaPerHari[hari]) {
            return;
        }
        
        const info = jamKerjaPerHari[hari];
        const [jamMasukStandar, menitMasukStandar] = info.masuk.split(':').map(Number);
        const [jamMasukInputValue, menitMasukInputValue] = jamMasukInput.value.split(':').map(Number);
        
        // Hitung menit telat
        const totalMenitStandar = jamMasukStandar * 60 + menitMasukStandar;
        const totalMenitInput = jamMasukInputValue * 60 + menitMasukInputValue;
        const menitTelat = totalMenitInput - totalMenitStandar;
        
        // Jika telat dan belum ada jam keluar, auto-calculate
        if (menitTelat > 0 && !jamKeluarInput.value) {
            const totalMenitKerja = info.jam * 60 + info.menit;
            const totalMenitKeluar = totalMenitInput + totalMenitKerja;
            
            const jamKeluar = Math.floor(totalMenitKeluar / 60);
            const menitKeluar = totalMenitKeluar % 60;
            
            jamKeluarInput.value = `${String(jamKeluar).padStart(2, '0')}:${String(menitKeluar).padStart(2, '0')}`;
            
            // Update status ke Terlambat
            const statusSelect = document.getElementById('status');
            if (statusSelect) {
                statusSelect.value = 'Terlambat';
            }
        }
    }
    
    tanggalInput.addEventListener('change', function() {
        updateJamKerjaInfo();
        calculateJamKeluar();
    });
    
    jamMasukInput.addEventListener('change', function() {
        calculateJamKeluar();
    });
    
    // Initialize
    updateJamKerjaInfo();
});
</script>
@endsection