@extends('admin.layouts.app')

@section('title', 'Home')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .soft-card {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
        }

        .form-control::placeholder {
            color: #9ca3af
        }

        .btn-simpan {
            background: #0f766e;
            color: #fff
        }

        .btn-simpan:hover {
            background: #0f766e;
            color: #fff;
            opacity: .9;
        }
    </style>
@endpush

@php
    $jabatanOptions = [
        'Kepala Desa',
        'Sekretaris',
        'Kasi 1',
        'Kasi 2',
        'Kasi 3',
        'Kaur 1',
        'Kaur 2',
        'Kadus 1',
        'Kadus 1',
    ];
    $alamatValue = old('address', $data->alamat ?? $data->address ?? '');
    $phoneValue = old('phone', $data->no_telepon ?? $data->phone ?? '');
    $tglLahir = $data->tanggal_lahir ? \Illuminate\Support\Carbon::parse($data->tanggal_lahir)->format('d/m/Y') : '';
    $hireDate = $data->hire_date ? \Illuminate\Support\Carbon::parse($data->hire_date)->format('d/m/Y') : '';
@endphp

@section('content')
    <div class="card soft-card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="mb-0">Edit profil Anggota Perangat Desa</h4>
                    <small style="color: #0f766e">Anggota aktif</small>
                </div>
                <a href="{{ route('admin.perangkat') }}" class="btn btn-light border">Kembali</a>
            </div>

            <form action="{{ route('admin.perangkat.update', $data['id']) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row g-3">
                    <div class="col-12 col-md-2">NIK</div>
                    <div class="col-12 col-md-10">
                        <input type="text" class="form-control @error('nik') is-invalid @enderror" name="nik"
                            value="{{ old('nik', $data->nik) }}" placeholder="NIK">
                        @error('nik')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2">Role</div>
                    <div class="col-12 col-md-10">
                        <select class="form-select @error('role') is-invalid @enderror" name="role">
                            <option value="" disabled>Pilih role</option>
                            <option value="admin" {{ old('role', $data->role) === 'admin' ? 'selected' : '' }}>Admin
                            </option>
                            <option value="user" {{ old('role', $data->role) === 'user' ? 'selected' : '' }}>User
                            </option>
                        </select>
                        @error('role')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2">Jabatan</div>
                    <div class="col-12 col-md-10">
                        <select class="form-select @error('jabatan') is-invalid @enderror" name="jabatan">
                            <option value="" disabled>Jabatan</option>
                            @foreach ($jabatanOptions as $opt)
                                <option value="{{ $opt }}"
                                    {{ old('jabatan', $data->jabatan) === $opt ? 'selected' : '' }}>{{ $opt }}
                                </option>
                            @endforeach
                        </select>
                        @error('jabatan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12 col-md-2">Nama</div>
                    <div class="col-12 col-md-10">
                        <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                            value="{{ old('name', $data->name) }}" placeholder="Nama">
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>


                    <div class="col-12 col-md-2">Alamat</div>
                    <div class="col-12 col-md-10">
                        <input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
                            value="{{ $alamatValue }}" placeholder="Alamat">
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2">No. Telepon</div>
                    <div class="col-12 col-md-10">
                        <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone"
                            value="{{ $phoneValue }}" placeholder="No. Telepon">
                        @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2">ID Pegawai</div>
                    <div class="col-12 col-md-10">
                        <input type="text" class="form-control @error('employee_id') is-invalid @enderror"
                            name="employee_id" value="{{ old('employee_id', $data->employee_id) }}"
                            placeholder="ID Pegawai">
                        @error('employee_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12 col-md-2">Jenis Kelamin</div>
                    <div class="col-12 col-md-10">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input @error('jenis_kelamin') is-invalid @enderror" type="radio"
                                id="jkL" name="jenis_kelamin" value="Laki-laki"
                                {{ old('jenis_kelamin', $data->jenis_kelamin) === 'Laki-laki' ? 'checked' : '' }}>
                            <label class="form-check-label" for="jkL">Laki-laki</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input @error('jenis_kelamin') is-invalid @enderror" type="radio"
                                id="jkP" name="jenis_kelamin" value="Perempuan"
                                {{ old('jenis_kelamin', $data->jenis_kelamin) === 'Perempuan' ? 'checked' : '' }}>
                            <label class="form-check-label" for="jkP">Perempuan</label>
                        </div>
                        @error('jenis_kelamin')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2">Tempat Lahir</div>
                    <div class="col-12 col-md-10">
                        <input type="text" class="form-control @error('tempat_lahir') is-invalid @enderror"
                            name="tempat_lahir" value="{{ old('tempat_lahir', $data->tempat_lahir) }}"
                            placeholder="Tempat Lahir">
                        @error('tempat_lahir')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2">Tanggal Lahir</div>
                    <div class="col-12 col-md-10">
                        <div class="input-group">
                            <input type="text"
                                class="form-control date-picker @error('tanggal_lahir') is-invalid @enderror"
                                name="tanggal_lahir" value="{{ old('tanggal_lahir', $tglLahir) }}"
                                placeholder="dd/mm/yyyy">
                            <span class="input-group-text bg-white"><i class="ti ti-calendar"></i></span>
                            @error('tanggal_lahir')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-2">Tanggal Diterima Kerja</div>
                    <div class="col-12 col-md-10">
                        <div class="input-group">
                            <input type="text"
                                class="form-control date-picker @error('hire_date') is-invalid @enderror" name="hire_date"
                                value="{{ old('hire_date', $hireDate) }}" placeholder="dd/mm/yyyy">
                            <span class="input-group-text bg-white"><i class="ti ti-calendar"></i></span>
                            @error('hire_date')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-12 col-md-2">E-mail</div>
                    <div class="col-12 col-md-10">
                        <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                            value="{{ old('email', $data->email) }}" placeholder="E-mail">
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>


                    <div class="col-12 col-md-2">Kata Sandi</div>
                    <div class="col-12 col-md-10">
                        <input type="password" class="form-control @error('password') is-invalid @enderror"
                            name="password" placeholder="Kosongkan jika tidak diubah">
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12 col-md-2">Konfirmasi Kata Sandi</div>
                    <div class="col-12 col-md-10">
                        <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                            name="password_confirmation" placeholder="Ulangi Kata Sandi">
                        @error('password_confirmation')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>


                    <div class="col-12 col-md-2">Foto</div>
                    <div class="col-12 col-md-10">
                        <div class="mb-2" id="fotoPreviewWrapper" style="{{ empty($data->url_photo) ? 'display:none;' : '' }}">
                            <img id="fotoPreview"
                                src="{{ !empty($data->url_photo) ? asset('storage/' . $data->url_photo) : '' }}"
                                alt="Preview foto" style="height:64px;border-radius:8px">
                        </div>
                        <input id="fotoInput" class="form-control @error('foto') is-invalid @enderror" type="file"
                            name="foto" accept="image/*">
                        <small class="text-muted d-block mt-1">Format file gambar (jpg, jpeg, png, webp), maksimal
                            2MB.</small>
                        @error('foto')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="text-center mt-4">
                    <button class="btn btn-simpan px-5">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            flatpickr('.date-picker', {
                dateFormat: 'd/m/Y',
                allowInput: true,
                locale: {
                    firstDayOfWeek: 1
                }
            });

            const fotoInput = document.getElementById('fotoInput');
            const fotoPreview = document.getElementById('fotoPreview');
            const fotoPreviewWrapper = document.getElementById('fotoPreviewWrapper');

            if (fotoInput && fotoPreview && fotoPreviewWrapper) {
                fotoInput.addEventListener('change', function(e) {
                    const file = e.target.files?.[0];
                    if (!file || !file.type.startsWith('image/')) {
                        return;
                    }

                    const reader = new FileReader();
                    reader.onload = function(evt) {
                        fotoPreview.src = evt.target?.result;
                        fotoPreviewWrapper.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                });
            }
        });
    </script>
@endpush