@extends('layouts.app')

@section('title', 'Edit Karyawan')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center">
                <div class="mb-3 mb-lg-0">
                    <h1 class="h3 mb-2 text-gray-800">
                        <i class="fas fa-user-edit text-primary"></i>
                        Edit Karyawan
                    </h1>
                    <p class="text-muted mb-0">Perbarui data karyawan</p>
                </div>
                <div class="d-flex flex-column flex-sm-row gap-2">
                    <a href="{{ route('manajemen-karyawan.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i>
                        <span class="d-none d-sm-inline">Kembali</span>
                        <span class="d-sm-none">Back</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-edit"></i>
                        Edit Data Karyawan
                    </h6>
                </div>
                <div class="card-body">
                    <!-- Edit Form -->
                    <form action="{{ route('manajemen-karyawan.update', $karyawan) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <!-- Current Photo Preview -->
                        <div class="row mb-4">
                            <div class="col-12 text-center">
                                <div class="current-photo">
                                    @if($karyawan->foto)
                                        <img src="{{ asset('storage/karyawan/' . $karyawan->foto) }}" 
                                             alt="Foto {{ $karyawan->user->name }}" 
                                             class="rounded-circle border border-3 border-light shadow mb-2"
                                             style="width: 120px; height: 120px; object-fit: cover;">
                                    @else
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($karyawan->user->name ?? 'User') }}&background=4f46e5&color=fff&size=120" 
                                             alt="Avatar {{ $karyawan->user->name }}" 
                                             class="rounded-circle border border-3 border-light shadow mb-2"
                                             style="width: 120px; height: 120px; object-fit: cover;">
                                    @endif
                                    <p class="text-muted small">Foto Saat Ini</p>
                                </div>
                            </div>
                        </div>

                        <!-- Personal Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary border-bottom pb-2 mb-3">
                                    <i class="fas fa-user"></i>
                                    Informasi Personal
                                </h6>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="nama" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama') is-invalid @enderror" id="nama" name="nama" value="{{ old('nama', $karyawan->user->name) }}" required>
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="nip" class="form-label">NIP <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nip') is-invalid @enderror" id="nip" name="nip" value="{{ old('nip', $karyawan->nip) }}" required>
                                @error('nip')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email', $karyawan->user->email) }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="no_telp" class="form-label">No. Telepon <span class="text-danger">*</span></label>
                                <input type="tel" class="form-control @error('no_telp') is-invalid @enderror" id="no_telp" name="no_telp" value="{{ old('no_telp', $karyawan->user->no_telp) }}" required>
                                @error('no_telp')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label for="alamat" class="form-label">Alamat Lengkap</label>
                                <textarea class="form-control @error('alamat') is-invalid @enderror" id="alamat" name="alamat" rows="3">{{ old('alamat', $karyawan->alamat) }}</textarea>
                                @error('alamat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Employment Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary border-bottom pb-2 mb-3">
                                    <i class="fas fa-briefcase"></i>
                                    Informasi Kepegawaian
                                </h6>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="departemen" class="form-label">Departemen <span class="text-danger">*</span></label>
                                <select class="form-select @error('departemen') is-invalid @enderror" id="departemen" name="departemen" required>
                                    <option value="">Pilih Departemen</option>
                                    <option value="it" {{ old('departemen', $karyawan->departemen) == 'it' ? 'selected' : '' }}>IT</option>
                                    <option value="finance" {{ old('departemen', $karyawan->departemen) == 'finance' ? 'selected' : '' }}>Finance</option>
                                    <option value="marketing" {{ old('departemen', $karyawan->departemen) == 'marketing' ? 'selected' : '' }}>Marketing</option>
                                    <option value="operation" {{ old('departemen', $karyawan->departemen) == 'operation' ? 'selected' : '' }}>Operation</option>
                                    <option value="hr" {{ old('departemen', $karyawan->departemen) == 'hr' ? 'selected' : '' }}>Human Resource</option>
                                </select>
                                @error('departemen')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="jabatan" class="form-label">Jabatan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('jabatan') is-invalid @enderror" id="jabatan" name="jabatan" value="{{ old('jabatan', $karyawan->jabatan) }}" required>
                                @error('jabatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="tanggal_bergabung" class="form-label">Tanggal Bergabung <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('tanggal_bergabung') is-invalid @enderror" id="tanggal_bergabung" name="tanggal_bergabung" value="{{ old('tanggal_bergabung', $karyawan->tanggal_bergabung ? $karyawan->tanggal_bergabung->format('Y-m-d') : '') }}" required>
                                @error('tanggal_bergabung')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <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="">Pilih Status</option>
                                    <option value="aktif" {{ old('status', $karyawan->status) == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="nonaktif" {{ old('status', $karyawan->status) == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                    <option value="cuti" {{ old('status', $karyawan->status) == 'cuti' ? 'selected' : '' }}>Cuti</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Customer Service Section -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input @error('is_customer_service') is-invalid @enderror" type="checkbox" id="is_customer_service" name="is_customer_service" value="1" {{ old('is_customer_service', $karyawan->is_customer_service) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_customer_service">
                                        <i class="fas fa-headset text-primary"></i>
                                        <strong>Jadikan Customer Service</strong>
                                    </label>
                                    @error('is_customer_service')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted d-block">
                                        Centang jika karyawan ini akan bertugas sebagai Customer Service. 
                                        Nomor WhatsApp karyawan ini akan digunakan untuk variable <code>@{{wa_cs}}</code> di template pesan.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="gaji_pokok" class="form-label">Gaji Pokok</label>
                                <input type="number" class="form-control @error('gaji_pokok') is-invalid @enderror" id="gaji_pokok" name="gaji_pokok" value="{{ old('gaji_pokok', $karyawan->gaji_perbulan ?? '') }}" min="0">
                                @error('gaji_pokok')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Format: Angka saja tanpa titik/koma</small>
                            </div>
                            <div class="col-md-6">
                                <label for="foto" class="form-label">Ganti Foto Karyawan</label>
                                <input type="file" class="form-control @error('foto') is-invalid @enderror" id="foto" name="foto" accept="image/*">
                                @error('foto')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Format: JPG, PNG. Maksimal 2MB. Kosongkan jika tidak ingin mengubah foto</small>
                            </div>
                        </div>

                        <!-- Additional Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary border-bottom pb-2 mb-3">
                                    <i class="fas fa-info-circle"></i>
                                    Informasi Tambahan
                                </h6>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-muted small">Masa Kerja</label>
                                <p class="form-control-plaintext">{{ $karyawan->masa_kerja ?? 'Belum dihitung' }}</p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted small">Terakhir Diupdate</label>
                                <p class="form-control-plaintext">{{ $karyawan->updated_at ? $karyawan->updated_at->format('d M Y, H:i') . ' WIB' : 'Belum pernah diupdate' }}</p>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <hr class="my-4">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                                            <i class="fas fa-trash"></i>
                                            Hapus Karyawan
                                        </button>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <a href="{{ route('manajemen-karyawan.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-times"></i>
                                            Batal
                                        </a>
                                        <button type="reset" class="btn btn-outline-warning">
                                            <i class="fas fa-refresh"></i>
                                            Reset
                                        </button>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save"></i>
                                            Simpan Perubahan
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle"></i>
                    Konfirmasi Hapus
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus data karyawan <strong>{{ $karyawan->user->name ?? 'Unknown' }}</strong>?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Peringatan:</strong> Tindakan ini tidak dapat dibatalkan!
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i>
                    Batal
                </button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    <i class="fas fa-trash"></i>
                    Ya, Hapus
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// FORCE SUBMIT - BYPASS ALL JS ERRORS
$(document).ready(function() {
    $('form').off('submit').on('submit', function() {
        console.log('Form submitting...');
        return true; // Allow submit
    });
});
// Fix untuk error fixChevronSize
window.addEventListener('error', function(e) {
    if (e.message && e.message.includes('Cannot read properties of undefined')) {
        e.preventDefault();
        console.log('Prevented error:', e.message);
    }
});

$(document).ready(function() {
    // FORCE ALLOW FORM SUBMIT - BYPASS ALL ERRORS
    $('form').off('submit').on('submit', function() {
        console.log('Form submitting - bypassing validation...');
        return true;
    });
    
    // Preview foto yang diupload
    $('#foto').on('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Update current photo preview
                $('.current-photo img').attr('src', e.target.result);
                $('.current-photo p').text('Preview Foto Baru');
            };
            reader.readAsDataURL(file);
        }
    });

    // Auto format nomor telepon
    $('#no_telp').on('input', function() {
        let value = $(this).val().replace(/\D/g, ''); // Remove non-digits
        if (value.startsWith('0')) {
            $(this).val(value);
        } else if (value.startsWith('62')) {
            $(this).val('0' + value.substring(2));
        }
    });

    // Format gaji dengan rupiah
    $('#gaji_pokok').on('input', function() {
        let value = $(this).val().replace(/\D/g, '');
        $(this).val(value);
    });

    // Form validation with debugging
    $('form').on('submit', function(e) {
        console.log('Form submit event triggered');
        
        // Basic validation
        let valid = true;
        const requiredFields = ['nama', 'nip', 'email', 'no_telp', 'departemen', 'jabatan', 'tanggal_bergabung', 'status'];
        
        console.log('Validating required fields:', requiredFields);
        
        requiredFields.forEach(function(field) {
            const input = $('#' + field);
            const value = input.val();
            console.log(`Field ${field}: "${value}"`);
            
            if (!value || !value.trim()) {
                input.addClass('is-invalid');
                valid = false;
                console.log(`Field ${field} is invalid`);
            } else {
                input.removeClass('is-invalid');
            }
        });
        
        if (!valid) {
            e.preventDefault();
            console.log('Form validation failed, preventing submit');
            alert('Mohon lengkapi semua field yang wajib diisi!');
            return false;
        }
        
        console.log('Form validation passed, allowing submit');
        // Allow normal form submission
        return true;
    });

    // Remove validation error on input
    $('.form-control, .form-select').on('input change', function() {
        $(this).removeClass('is-invalid');
    });

    // Confirm delete
    $('#confirmDelete').on('click', function() {
        // Create delete form and submit
        const form = $('<form method="POST" action="{{ route('manajemen-karyawan.destroy', $karyawan->id) }}">');
        form.append('@csrf');
        form.append('@method('DELETE')');
        $('body').append(form);
        form.submit();
    });

    // Reset form
    $('button[type="reset"]').on('click', function() {
        // Reset to original values from database
        $('#nama').val('{{ $karyawan->user->name ?? '' }}');
        $('#nip').val('{{ $karyawan->nip ?? '' }}');
        $('#email').val('{{ $karyawan->user->email ?? '' }}');
        $('#no_telp').val('{{ $karyawan->user->no_telp ?? '' }}');
        $('#alamat').val('{{ $karyawan->alamat ?? '' }}');
        $('#departemen').val('{{ $karyawan->departemen ?? '' }}');
        $('#jabatan').val('{{ $karyawan->jabatan ?? '' }}');
        $('#tanggal_bergabung').val('{{ $karyawan->tanggal_bergabung ? $karyawan->tanggal_bergabung->format('Y-m-d') : '' }}');
        $('#status').val('{{ $karyawan->status ?? '' }}');
        $('#gaji_pokok').val('{{ $karyawan->gaji_perbulan ?? '' }}');
        $('#is_customer_service').prop('checked', {{ $karyawan->is_customer_service ? 'true' : 'false' }});
        $('#foto').val('');
        
        // Reset photo preview
        @if($karyawan->foto)
            $('.current-photo img').attr('src', '{{ asset('storage/karyawan/' . $karyawan->foto) }}');
        @else
            $('.current-photo img').attr('src', 'https://ui-avatars.com/api/?name={{ urlencode($karyawan->user->name ?? 'User') }}&background=4f46e5&color=fff&size=120');
        @endif
        $('.current-photo p').text('Foto Saat Ini');
        
        // Remove validation errors
        $('.form-control, .form-select').removeClass('is-invalid');
    });
});
</script>
@endpush