@extends('layouts.master')

@section('content')
    <div class="header bg-primary text-white p-3 mb-3 rounded mt-3">
        <h3 class="m-0 font-weight-normal">Pegawai</h3>
    </div>

    <div class="card mb-3">
        <div class="card-header">
            <h6 class="card-title">Tambah Pegawai</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('pegawai.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                @if (isset($pegawai))
                    <input type="hidden" name="id" value="{{ $pegawai->id }}">
                @endif
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="nama">Nama</label>
                            <input type="text" id="nama" name="nama" placeholder="Nama" class="form-control mb-3"
                                value="{{ isset($pegawai) ? $pegawai->nama : '' }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="jabatan_id">Jabatan</label>
                            <select id="jabatan_id" name="jabatan_id" class="form-control mb-3" required>
                                <option value="">Pilih Jabatan</option>
                                @foreach ($jabatans as $jabatan)
                                    <option value="{{ $jabatan->id }}"
                                        {{ isset($pegawai) && $pegawai->jabatan_id == $jabatan->id ? 'selected' : '' }}>
                                        {{ $jabatan->nama_jabatan }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="alamat">Alamat</label>
                            <input type="text" id="alamat" name="alamat" placeholder="Alamat" class="form-control mb-3"
                                value="{{ isset($pegawai) ? $pegawai->alamat : '' }}" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="no_telepon">No Telepon</label>
                            <input type="text" id="no_telepon" name="no_telepon" placeholder="No Telepon" class="form-control mb-3"
                                value="{{ isset($pegawai) ? $pegawai->no_telepon : '' }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="tanggal_masuk">Tanggal Masuk</label>
                            <input type="date" id="tanggal_masuk" name="tanggal_masuk" placeholder="Tanggal Masuk" class="form-control mb-3"
                                value="{{ isset($pegawai) ? $pegawai->tanggal_masuk : '' }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="tanggal_lahir">Tanggal Lahir</label>
                            <input type="date" id="tanggal_lahir" name="tanggal_lahir" placeholder="Tanggal Lahir" class="form-control mb-3"
                                value="{{ isset($pegawai) ? $pegawai->tanggal_lahir : '' }}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="foto">Foto Pegawai</label>
                            <input type="file" id="foto" name="foto" class="form-control mb-2" accept="image/jpeg,image/png,image/jpg">
                            <small class="text-muted">Format yang diperbolehkan: JPG, JPEG, PNG (Maksimal 2MB)</small>
                            @if (isset($pegawai) && $pegawai->foto)
                                <img src="{{ asset('storage/' . $pegawai->foto) }}" alt="Foto Pegawai" class="img-fluid mt-2" style="max-width: 200px;">
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4 komisi-field" style="display: none;">
                        <div class="form-group">
                            <label for="komisi">Komisi</label>
                            <div class="input-group">
                                <input type="number" id="komisi" name="komisi" placeholder="Komisi" class="form-control mb-3"
                                    value="{{ isset($pegawai) ? $pegawai->komisi : '' }}">
                                <div class="input-group-append">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">
                    @if(isset($pegawai))
                        Simpan
                    @else
                        Tambah Pegawai
                    @endif
                </button>
                @if(isset($pegawai))
                    <a href="{{ route('pegawai') }}" class="btn btn-secondary">Kembali</a>
                @endif
            </form>
        </div>
    </div>

    @if(!isset($pegawai))
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">Daftar Pegawai</h6>
        </div>
        <div class="card-body">
            <!-- Form Pencarian -->
            <div class="row mb-3">
                <div class="col-md-12">
                    <form action="{{ route('pegawai') }}" method="GET" class="form-inline">
                        <div class="row g-3">
                            <div class="col-md-2">
                                <input type="text" name="search" class="form-control" placeholder="Cari Pegawai" value="{{ request('search') }}">
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary">Cari</button>
                                <a href="{{ route('pegawai') }}" class="btn btn-secondary">Reset</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Tabel Pegawai -->
            <div class="table-responsive">
                <table class="table" id="daftarTabel">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Alamat</th>
                            <th>No HP</th>
                            <th>Jabatan</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (isset($pegawais) && count($pegawais) > 0)
                            @foreach ($pegawais as $pegawai)
                                <tr>
                                    <td>{{ $pegawai->nama }}</td>
                                    <td>{{ $pegawai->alamat }}</td>
                                    <td>{{ $pegawai->no_telepon }}</td>
                                    <td>{{ optional($pegawai->jabatan)->nama_jabatan ?? '-' }}</td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="{{ route('pegawai.edit', $pegawai->id) }}" class="btn btn-warning btn-action" data-toggle="tooltip" title="Edit Pegawai">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <form action="{{ route('pegawai.destroy', $pegawai->id) }}" method="POST" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-action" data-toggle="tooltip" title="Hapus Pegawai"
                                                    onclick="return confirm('Apakah anda yakin ingin menghapus pegawai ini?')">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                            <a href="{{ route('pegawai.show', $pegawai->id) }}" class="btn btn-info btn-action" data-toggle="tooltip" title="Lihat Detail Pegawai">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="5" class="text-center">Pegawai tidak ditemukan</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('scripts')
<script>
    $(document).ready(function(){
        console.log('Script loaded');
        $('#jabatan_id').on('change', function() {
            console.log('Jabatan changed');
            var selectedJabatan = $('#jabatan_id option:selected').text().trim();
            console.log('Selected Jabatan:', selectedJabatan);
            if (selectedJabatan === 'Sales') {
                $('.komisi-field').show();
                $('#komisi').prop('required', true);
            } else {
                $('.komisi-field').hide();
                $('#komisi').prop('required', false);
                $('#komisi').val('');
            }
        });
        // Jalankan saat halaman dimuat
        $('#jabatan_id').trigger('change');

        // Validasi format gambar
        document.getElementById('foto').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const fileType = file.type;
                const fileSize = file.size;
                const validTypes = ['image/jpeg', 'image/png', 'image/jpg'];
                const maxSize = 2 * 1024 * 1024; // 2MB

                // Validasi format
                if (!validTypes.includes(fileType)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Format File Tidak Sesuai',
                        text: 'Format yang diperbolehkan: JPG, JPEG, PNG (maksimal 2MB)',
                        confirmButtonText: 'OK'
                    });
                    this.value = '';
                    return;
                }

                // Validasi ukuran
                if (fileSize > maxSize) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Ukuran File Terlalu Besar',
                        text: 'Ukuran maksimal adalah 2MB',
                        confirmButtonText: 'OK'
                    });
                    this.value = '';
                    return;
                }
            }
        });

        // Validasi form sebelum submit
        $('form').on('submit', function(e) {
            e.preventDefault();
            
            let emptyFields = [];
            let form = $(this);
            
            // Cek setiap input yang required
            form.find('input[required], select[required]').each(function() {
                if (!$(this).val()) {
                    let fieldName = $(this).attr('name');
                    let label = form.find('label[for="' + fieldName + '"]').text();
                    emptyFields.push(label);
                }
            });

            if (emptyFields.length > 0) {
                // Tampilkan popup error
                Swal.fire({
                    icon: 'error',
                    title: 'Form Belum Lengkap',
                    html: 'Mohon lengkapi field berikut:<br>' + emptyFields.join('<br>'),
                    confirmButtonText: 'OK'
                });
                return false;
            }

            // Jika semua valid, submit form
            form.unbind('submit').submit();
        });

        if (window.location.search.includes('search')) {
            setTimeout(function() {
                var tabel = document.getElementById('daftarTabel');
                if (tabel) {
                    tabel.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }, 300);
        }
    });
</script>
@endpush