@extends('employee.layouts.app')
@section('title', 'Perbarui Pengguna | 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">Perbarui Pengguna</small>
    </h1>
@endsection
@section('content')
    <div class="mb-5 card mb-xl-10">
        <div class="pb-0 card-body pt-9">
            <div class="flex-wrap mb-3 d-flex flex-sm-nowrap">
                <div class="mb-4 me-7">
                    <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
                        <img src="{{ asset('assets/employee/media/avatars/blank.png') }}" alt="Profile Image" />
                    </div>
                </div>
                <div class="flex-grow-1">
                    <div class="flex-wrap mb-2 d-flex justify-content-between align-items-start">
                        <div class="d-flex flex-column">
                            <div class="mb-2 d-flex align-items-center">
                                <a href="#"
                                    class="text-gray-900 text-hover-primary fs-2 fw-bolder me-1">{{ $user->name }}</a>
                                </a>
                            </div>
                            <div class="flex-wrap mb-4 d-flex fw-bold fs-6 pe-2">
                                <a href="#"
                                    class="mb-2 text-gray-400 d-flex align-items-center text-hover-primary me-5">
                                    <!--begin::Svg Icon | path: icons/duotune/communication/com006.svg-->
                                    <span class="svg-icon svg-icon-4 me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none">
                                            <path opacity="0.3"
                                                d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z"
                                                fill="black" />
                                            <path
                                                d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z"
                                                fill="black" />
                                        </svg>
                                    </span>
                                    {{ ucfirst($user->role === 'admin' ? 'Admin' : ($user->role === 'student' ? 'Mahasiswa' : $user->role)) }}</a>
                                <a href="#" class="mb-2 text-gray-400 d-flex align-items-center text-hover-primary">
                                    <!--begin::Svg Icon | path: icons/duotune/communication/com011.svg-->
                                    <span class="svg-icon svg-icon-4 me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none">
                                            <path opacity="0.3"
                                                d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19Z"
                                                fill="black" />
                                            <path
                                                d="M21 5H2.99999C2.69999 5 2.49999 5.10005 2.29999 5.30005L11.2 13.3C11.7 13.7 12.4 13.7 12.8 13.3L21.7 5.30005C21.5 5.10005 21.3 5 21 5Z"
                                                fill="black" />
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->{{ $user->email }}</a>
                            </div>
                            <!--end::Info-->
                        </div>
                        <!--end::User-->
                        <!--begin::Actions-->
                        <div class="my-4 d-flex">
                            <a href="{{ route('employee.users') }}" class="btn btn-sm btn-light me-2"
                                id="kt_user_follow_button">
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr012.svg-->
                                <span class="svg-icon svg-icon-3 d-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none">
                                        <path opacity="0.3"
                                            d="M10 18C9.7 18 9.5 17.9 9.3 17.7L2.3 10.7C1.9 10.3 1.9 9.7 2.3 9.3C2.7 8.9 3.29999 8.9 3.69999 9.3L10.7 16.3C11.1 16.7 11.1 17.3 10.7 17.7C10.5 17.9 10.3 18 10 18Z"
                                            fill="black" />
                                        <path
                                            d="M10 18C9.7 18 9.5 17.9 9.3 17.7C8.9 17.3 8.9 16.7 9.3 16.3L20.3 5.3C20.7 4.9 21.3 4.9 21.7 5.3C22.1 5.7 22.1 6.30002 21.7 6.70002L10.7 17.7C10.5 17.9 10.3 18 10 18Z"
                                            fill="black" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <!--begin::Indicator-->
                                <span class="indicator-label">Kembali</span>
                            </a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <!--end::Title-->
                </div>
                <!--end::Info-->
            </div>
            <!--end::Details-->
        </div>
    </div>
    <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">Informasi Akun</h3>
            </div>
        </div>
        <div id="kt_account_profile_details" class="collapse show">
            <form action="{{ route('employee.users.update', $user) }}" method="POST" class="form">
                @csrf
                @method('PUT')
                <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" value="{{ old('name', $user->name) }}" />
                            @error('name')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-13">
                        <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" value="{{ old('email', $user->email) }}" />
                            @error('email')
                                <div class="fv-plugins-message-container invalid-feedback">
                                    <span>{{ $message }}</span>
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-8 fw-bolder fs-3 rotate collapsible">
                        Informasi Lengkap
                    </div>
                    @if ($user->role === 'admin')
                        <div class="mb-6 row">
                            <label class="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', $user->employee->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="Jabatan"
                                    value="{{ ucfirst(old('position', $user->employee->position)) }}" />
                                @error('position')
                                    <div class="fv-plugins-message-container invalid-feedback">
                                        <span>{{ $message }}</span>
                                    </div>
                                @enderror
                            </div>
                        </div>
                    @endif
                    @if ($user->role === 'student')
                        <div class="mb-6 row">
                            <label class="col-lg-4 col-form-label fw-bold fs-6">NIM</label>
                            <div class="col-lg-8 fv-row">
                                <input type="text" name="nim"
                                    class="form-control form-control-lg form-control-solid"
                                    placeholder="Nomor Induk Mahasiswa" value="{{ old('nim', $user->student->nim) }}" />
                                @error('nim')
                                    <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">Fakultas</label>
                            <div class="col-lg-8 fv-row">
                                <input type="text" name="faculty"
                                    class="form-control form-control-lg form-control-solid" placeholder="Program Studi"
                                    value="{{ ucfirst(old('faculty', $user->student->faculty)) }}" />
                                @error('faculty')
                                    <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">Jurusan</label>
                            <div class="col-lg-8 fv-row">
                                <select name="department_id" data-control="select2" data-placeholder="Jurusan"
                                    class="form-select form-select-solid form-select-lg">
                                    <option value=""></option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}"
                                            {{ old('department_id', $user->student->department_id) == $department->id ? 'selected' : '' }}>
                                            {{ $department->department_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('department_id')
                                    <div class="fv-plugins-message-container invalid-feedback">
                                        <span>{{ $message }}</span>
                                    </div>
                                @enderror
                            </div>
                        </div>
                    @endif
                    <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', $user->gender) == 'Laki-Laki' ? 'selected' : '' }}>
                                    Laki-Laki
                                </option>s
                                <option value="Perempuan"
                                    {{ old('gender', $user->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', $user->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', $user->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', $user->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 Perubahan</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $("#custom_date").flatpickr();
    </script>
@endpush