@extends('layouts.app')

@section('content') 
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="mb-0">Edit Karyawan</h2>
            <small class="text-muted">
                Perbarui data karyawan
            </small>
        </div>

        <a href="{{ route('karyawan.index') }}" class="btn btn-outline-secondary rounded-3 px-4">
            <i class="bi bi-arrow-left me-1"></i> Kembali
        </a>
    </div>
 
    <div class="card border-0 shadow-sm rounded-4">
 
        <div style="height:4px; background:#d6a100;"></div>

        <div class="card-body p-4">

            <form action="{{ route('karyawan.update', $karyawan->slug) }}" method="POST" enctype="multipart/form-data"
                id="formKaryawan">

                @csrf
                @method('PUT')

                <div class="row align-items-start g-4">
 
                    <div class="col-lg-3 text-center">

                        <img id="img-preview"
                            src="{{ $karyawan->foto ? asset('storage/' . $karyawan->foto) : 'https://ui-avatars.com/api/?name=Karyawan&background=f1f3f5&color=6c757d&size=300' }}"
                            class="rounded-4 border shadow-sm mb-3" style="width:170px; height:210px; object-fit:cover;">

                        <div>
                            <label for="foto" class="btn btn-light border rounded-3 px-3 w-100">
                                <i class="bi bi-camera me-1"></i>
                                Upload Foto
                            </label>

                            <input type="file" id="foto" name="foto"
                                class="d-none @error('foto') is-invalid @enderror" accept="image/*"
                                onchange="previewImage()">

                            @error('foto')
                                <div class="text-danger small mt-2">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                    </div>
 
                    <div class="col-lg-9">

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">
                                    NRP
                                </label>

                                <input type="text" name="nrp" value="{{ old('nrp', $karyawan->nrp) }}"
                                    class="form-control rounded-3 @error('nrp') is-invalid @enderror"
                                    placeholder="Masukkan NRP">

                                <span id="messageNRP" class="text-danger small mt-1 d-block"></span>

                                @error('nrp')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">
                                    Nama
                                </label>

                                <input type="text" name="nama" value="{{ old('nama', $karyawan->nama) }}"
                                    class="form-control rounded-3 @error('nama') is-invalid @enderror"
                                    placeholder="Masukkan Nama">

                                <span id="messageNama" class="text-danger small mt-1 d-block"></span>

                                @error('nama')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">
                                    Jabatan
                                </label>

                                <select name="jabatan_id" id="jabatan_id"
                                    class="form-select rounded-3 @error('jabatan_id') is-invalid @enderror">

                                    <option value="">
                                        Pilih Jabatan
                                    </option>

                                    @foreach ($jabatans as $jabatan)
                                        <option value="{{ $jabatan->id }}"
                                            {{ old('jabatan_id', $karyawan->jabatan_id) == $jabatan->id ? 'selected' : '' }}>
                                            {{ $jabatan->jabatan }}
                                        </option>
                                    @endforeach

                                </select>

                                <span id="messageJabatan" class="text-danger small mt-1 d-block"></span>

                                @error('jabatan_id')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">
                                    Departemen
                                </label>

                                <select name="departemen_id" id="departemen_id"
                                    class="form-select rounded-3 @error('departemen_id') is-invalid @enderror">

                                    <option value="">
                                        Pilih Departemen
                                    </option>

                                    @foreach ($departemens as $departemen)
                                        <option value="{{ $departemen->id }}"
                                            {{ old('departemen_id', $karyawan->departemen_id) == $departemen->id ? 'selected' : '' }}>
                                            {{ $departemen->departemen }}
                                        </option>
                                    @endforeach

                                </select>

                                <span id="messageDepartemen" class="text-danger small mt-1 d-block"></span>

                                @error('departemen_id')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">
                                    No HP
                                </label>

                                <input type="text" name="no_hp"
                                    class="form-control rounded-3 @error('no_hp') is-invalid @enderror"
                                    value="{{ old('no_hp', $karyawan->no_hp) }}" placeholder="Masukkan No Hp">
                                <span id="messageNoHp" class="text-danger small mt-1 d-block"></span>
                                @error('no_hp')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">
                                    Atasan
                                </label>

                                <select name="atasan_id" id="atasan_id"
                                    class="form-select rounded-3 js-example-basic-single @error('atasan_id') is-invalid @enderror">

                                    <option value="">
                                        Tidak Ada
                                    </option>

                                    @foreach ($atasans as $item)
                                        <option value="{{ $item->id }}"
                                            {{ old('atasan_id', $karyawan->atasan_id) == $item->id ? 'selected' : '' }}>
                                            {{ $item->nama }}
                                        </option>
                                    @endforeach

                                </select>

                                <span id="messageAtasan" class="text-danger small mt-1 d-block"></span>

                                @error('atasan_id')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                        </div>
 
                        <div class="mt-4 d-flex justify-content-end">
                            <button type="submit" class="btn btn-warning rounded-3 px-4 fw-semibold shadow-sm text-dark">
                                <i class="bi bi-check-circle me-1"></i>
                                Update
                            </button>
                        </div>

                    </div>

                </div>

            </form>

        </div>
    </div>

    <script>
        function previewImage() {
            const file = document.getElementById('foto').files[0];
            const preview = document.getElementById('img-preview');

            if (file) {
                preview.src = URL.createObjectURL(file);
            }
        }

        window.addEventListener('DOMContentLoaded', function() {
            new TomSelect("#jabatan_id", {
                create: false
            });

            new TomSelect("#departemen_id", {
                create: false
            });

            new TomSelect("#atasan_id", {
                create: false
            });
        });

        document.getElementById('formKaryawan').addEventListener('submit', function(e) {

            let valid = true;

            const nrp = document.querySelector('[name="nrp"]');
            const nama = document.querySelector('[name="nama"]');
            const jabatan = document.querySelector('[name="jabatan"]');
            const departemen = document.querySelector('[name="departemen"]');
            const messageNRP = document.getElementById('messageNRP');
            const messageNama = document.getElementById('messageNama');
            const messageJabatan = document.getElementById('messageJabatan');
            const messageDepartemen = document.getElementById('messageDepartemen');

            messageNRP.textContent = '';
            messageNama.textContent = '';
            messageJabatan.textContent = '';
            messageDepartemen.textContent = '';

            if (!nrp.value.trim()) {
                messageNRP.textContent = 'NRP wajib diisi';
                nrp.classList.add('is-invalid');
                valid = false;
            } else {
                nrp.classList.remove('is-invalid');
            }

            if (!nama.value.trim()) {
                messageNama.textContent = 'Nama wajib diisi';
                nama.classList.add('is-invalid');
                valid = false;
            } else {
                nama.classList.remove('is-invalid');
            }

            if (!jabatan.value.trim()) {
                messageJabatan.textContent = 'Jabatan wajib diisi';
                jabatan.classList.add('is-invalid');
                valid = false;
            } else {
                jabatan.classList.remove('is-invalid');
            }

            if (!departemen.value) {
                messageDepartemen.textContent = 'Departemen wajib dipilih';
                departemen.classList.add('is-invalid');
                valid = false;
            } else {
                departemen.classList.remove('is-invalid');
            } 

            if (!valid) {
                e.preventDefault();
            }
        });
    </script>
@endsection