@extends('employee.layouts.app')
@section('title', 'Buat Akun Pegawai | Career Development and Consultation (CDC)')
@section('navigation')
    <h1 class="my-1 d-flex align-items-center text-dark fw-bolder fs-3">Pengguna
        <span class="mx-2 border-gray-200 h-20px border-start ms-3"></span>
        <small class="my-1 text-muted fs-7 fw-bold ms-1">Buat Akun Pegawai</small>
    </h1>
@endsection
@section('content')
    <div class="mb-5 card mb-xl-10">
        <div class="border-0 cursor-pointer card-header" role="button" data-bs-toggle="collapse"
            data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
            <div class="m-0 card-title">
                <h3 class="m-0 fw-bolder">Buat Akun Pegawai</h3>
            </div>
        </div>
        <div id="kt_account_profile_details" class="collapse show">
            <form action="{{ route('employee.users.store') }}" method="POST" class="form">
                @csrf
                <div class="card-body border-top p-9">
                    {{-- <div class="mb-6 row">
                        <!--begin::Label-->
                        <label class="col-lg-4 col-form-label fw-bold fs-6">Foto Profil</label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-8">
                            <!--begin::Image input-->
                            <div class="image-input image-input-outline" data-kt-image-input="true"
                                style="background-image: url({{ asset('assets/employee/media/avatars/blank.png') }})">
                                <!--begin::Preview existing avatar-->
                                <div class="image-input-wrapper w-125px h-125px"
                                    style="background-image: url({{ asset('assets/employee/media/avatars/blank.png') }})">
                                </div>
                                <!--end::Preview existing avatar-->
                                <!--begin::Label-->
                                <label class="shadow btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body"
                                    data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                                    <i class="bi bi-pencil-fill fs-7"></i>
                                    <!--begin::Inputs-->
                                    <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
                                    <input type="hidden" name="avatar_remove" />
                                    <!--end::Inputs-->
                                </label>
                                <!--end::Label-->
                                <!--begin::Cancel-->
                                <span class="shadow btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body"
                                    data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
                                    <i class="bi bi-x fs-2"></i>
                                </span>
                                <!--end::Cancel-->
                                <!--begin::Remove-->
                                <span class="shadow btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body"
                                    data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
                                    <i class="bi bi-x fs-2"></i>
                                </span>

                            </div>
                            <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
                        </div>
                    </div> --}}
                    <div class="mb-6 row">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Nama</label>
                        <div class="col-lg-8 fv-row">
                            <input type="text" name="name" class="form-control form-control-lg form-control-solid"
                                placeholder="Nama Pegawai" value="{{ old('name') }}" />
                            @error('name')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-6 row">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Email</label>
                        <div class="col-lg-8 fv-row">
                            <input type="text" name="email" class="form-control form-control-lg form-control-solid"
                                placeholder="Email Pegawai" value="{{ old('email') }}" />
                            @error('email')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-8 row" data-kt-password-meter="true">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">
                            Password
                        </label>
                        <div class="position-relative col-lg-8 fv-row">
                            <input class="mb-3 form-control form-control-lg form-control-solid" type="password"
                                placeholder="**********" name="password" autocomplete="off" />
                            <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
                                data-kt-password-meter-control="visibility">
                                <i class="bi bi-eye-slash fs-2"></i>

                                <i class="bi bi-eye fs-2 d-none"></i>
                            </span>
                        </div>
                        <div class="col-4"></div>
                        <div class="justify-end col-8">
                            @error('password')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                        <label class="col-lg-4 col-form-label fw-bold fs-6"></label>
                        <div class="mb-3 d-flex col-8 fv-row align-items-center" data-kt-password-meter-control="highlight">
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px me-2"></div>
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px me-2"></div>
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px me-2"></div>
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px"></div>
                        </div>
                    </div>
                    <div class="mb-8 fw-bolder fs-3 rotate collapsible">
                        Informasi Lengkap (Opsional)
                    </div>
                    <div class="mb-6 row">
                        <label class="border-0 col-lg-4 col-form-label fw-bold fs-6">NIP</label>
                        <div class="col-lg-8 fv-row">
                            <input type="text" name="nip" class="form-control form-control-lg form-control-solid"
                                placeholder="Nomor Induk Pegawai" value="{{ old('nip') }}" />
                            @error('nip')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-6 row">
                        <label class="col-lg-4 col-form-label fw-bold fs-6">Jabatan</label>
                        <div class="col-lg-8 fv-row">
                            <input type="text" name="position" class="form-control form-control-lg form-control-solid"
                                placeholder="Administrator" value="{{ ucfirst(old('position')) }}" />
                            @error('position')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-6 row">
                        <label class="col-lg-4 col-form-label fw-bold fs-6">Jenis Kelamin</label>
                        <div class="col-lg-8 fv-row">
                            <select name="gender" data-control="select2" data-placeholder="Silahkan pilih jenis kelamin"
                                class="form-select form-select-solid form-select-lg">
                                <option value=""></option>
                                <option value="Laki-Laki" {{ old('gender') == 'Laki-Laki' ? 'selected' : '' }}>
                                    Laki-Laki
                                </option>
                                <option value="Perempuan" {{ old('gender') == 'Perempuan' ? 'selected' : '' }}>
                                    Perempuan
                                </option>
                            </select>
                            @error('gender')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-6 row">
                        <label class="col-lg-4 col-form-label fw-bold fs-6">Tanggal Lahir</label>
                        <div class="col-lg-8 fv-row">
                            <input type="date" id="custom_date" name="birth_date"
                                class="form-control form-control-lg form-control-solid" placeholder="1999-01-01"
                                value="{{ old('birth_date') }}" />
                            @error('birth_date')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-6 row">
                        <label class="col-lg-4 col-form-label fw-bold fs-6">
                            Telepon
                        </label>
                        <div class="col-lg-8 fv-row">
                            <input type="tel" name="phone" class="form-control form-control-lg form-control-solid"
                                placeholder="08xxxx" value="{{ old('phone') }}" />
                            @error('phone')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-6 row">
                        <label class="col-lg-4 col-form-label fw-bold fs-6">Alamat</label>
                        <div class="col-lg-8 fv-row">
                            <textarea name="address" rows="4" cols="50" class="form-control form-control-lg form-control-solid">{{ old('address') }}
                          </textarea>
                            @error('address')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="py-6 card-footer d-flex justify-content-end px-9">
                    <a href="{{ route('employee.users') }}"
                        class="btn btn-light btn-active-light-primary me-2">Kembali</a>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $("#custom_date").flatpickr();
    </script>
@endpush