@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
        }

        .soft-card {
            /* ...existing styles... */
        }

        .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',
    ];
@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">Tambah 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.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <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"
                            placeholder="NIK" value="{{ old('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="" selected disabled>Pilih role</option>
                            <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>Admin</option>
                            <option value="user" {{ old('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="" selected disabled>Jabatan</option>
                            @foreach ($jabatanOptions as $opt)
                                <option value="{{ $opt }}" {{ old('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"
                            placeholder="Nama" value="{{ old('name') }}">
                        @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"
                            placeholder="Alamat" value="{{ old('address') }}">
                        @error('address')
                            <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" placeholder="ID Pegawai" value="{{ old('employee_id') }}">
                        @error('employee_id')
                            <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="number" class="form-control @error('phone') is-invalid @enderror" name="phone"
                            placeholder="No. Telepon" value="{{ old('phone') }}">
                        @error('phone')
                            <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" name="jenis_kelamin" id="jkL" value="Laki-laki"
                                {{ old('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" name="jenis_kelamin" id="jkP" value="Perempuan"
                                {{ old('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" name="tempat_lahir"
                            class="form-control @error('tempat_lahir') is-invalid @enderror"
                            placeholder="Tempat Lahir" value="{{ old('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" name="tanggal_lahir"
                                class="form-control date-picker @error('tanggal_lahir') is-invalid @enderror"
                                placeholder="dd/mm/yyyy" value="{{ old('tanggal_lahir') }}">
                            <span class="input-group-text bg-white"><i class="ti ti-calendar"></i></span>
                        </div>
                        @error('tanggal_lahir')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </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" name="hire_date"
                                class="form-control date-picker @error('hire_date') is-invalid @enderror"
                                placeholder="dd/mm/yyyy" value="{{ old('hire_date') }}">
                            <span class="input-group-text bg-white"><i class="ti ti-calendar"></i></span>
                        </div>
                        @error('hire_date')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>


                    <div class="col-12 col-md-2">E-mail</div>
                    <div class="col-12 col-md-10"><input type="email" name="email"
                            class="form-control @error('email') is-invalid @enderror" placeholder="E-mail"
                            value="{{ old('email') }}">
                        @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" name="password"
                            class="form-control @error('password') is-invalid @enderror" placeholder="Kata Sandi">
                        @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" name="password_confirmation"
                            class="form-control @error('password_confirmation') is-invalid @enderror"
                            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="display:none;">
                            <img id="fotoPreview" src="" 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">Tambahkan</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 // Senin sebagai hari pertama
                }
            });

            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