@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Profile'])

    @php
        $roles = collect(explode(',', (string) $user_login->idroles))
            ->map(fn($r) => strtolower(trim($r)))
            ->filter()
            ->values()
            ->all();
    @endphp

    @if (in_array('admin', $roles, true) || in_array('pembim', $roles, true))
        <div class="card shadow-lg mx-4 card-profile">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-auto">
                        <div class="avatar avatar-xl position-relative">
                            {{-- photo profile --}}
                            <img src="{{ $user_login->image ? asset('/storage/' . $user_login->image) : asset('/assets/img/team-2.jpg') }}" alt="profile_image"
                                class="w-100 border-radius-lg shadow-sm">
                        </div>
                    </div>
                    <div class="col-auto my-auto">
                        <div class="h-100">
                            <h5 class="mb-1">
                                {{ $user_login->firstname }} {{ $user_login->lastname }}
                            </h5>
                            <p class="mb-0 font-weight-bold text-sm">
                                {{ session('username') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md">
                <form role="form" method="post" action="{{ URL::to('profile/update') }}" id="profile-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Informasi Akun</p>
                            <hr class="horizontal dark mt-0">
                            {{-- alert notifikasi --}}
                            @include('components.alert')

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Username</label>
                                        <p class="px-2">
                                            <label class="form-control-label text-primary">{{ session('username') }}</label>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Email address <span class="text-danger">*</span></label>
                                        <input class="form-control @error('profile_email') is-invalid @enderror" type="email" name="profile_email"
                                            value="{{ old('profile_email', $user_login->email) }}">
                                        @error('profile_email')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">First name <span class="text-danger">*</span></label>
                                        <input class="form-control @error('profile_firstname') is-invalid @enderror" type="text" name="profile_firstname"
                                            value="{{ old('profile_firstname', $user_login->firstname) }}">
                                        @error('profile_firstname')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Last name <span class="text-danger">*</span></label>
                                        <input class="form-control @error('profile_lastname') is-invalid @enderror" type="text" name="profile_lastname"
                                            value="{{ old('profile_lastname', $user_login->lastname) }}">
                                        @error('profile_lastname')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label d-block">Foto Profil</label>
                                        <div class="position-relative d-inline-block">
                                            <div>
                                                <label for="ProfileImage" id="ProfileImageedit"
                                                    class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2"
                                                    style="cursor: pointer;">
                                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit Image"></i>
                                                    <span class="sr-only">Edit Image</span>
                                                </label>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100 d-inline-block">
                                                    <img src="{{ $user_login->image ? asset('/storage/' . $user_login->image) : asset('/assets/img/team-2.jpg') }}"
                                                        id="preview" alt="image" data-bs-toggle="modal"
                                                        data-bs-target="#imageModal"
                                                        class="border-radius-lg shadow-sm @error('profile_image') border border-danger @enderror"
                                                        style="width: 100px; height: 100px; object-fit: cover;">
                                                </span>
                                            </div>
                                        </div>
                                        <input class="form-control" type="file"
                                            id="ProfileImage" name="profile_image" style="display: none;" accept="image/png,image/jpeg,image/jpg">
                                        <p class='text-primary text-xs pt-2 mb-0'>Maksimal Size : <b>2048 KB</b></p>
                                        <p class='text-primary text-xs pt-1 mb-0'>Format Image : <b>PNG, JPG, JPEG</b></p>
                                        @error('profile_image')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <script>
                                        document.getElementById('ProfileImage').onchange = evt => {
                                            const [file] = document.getElementById('ProfileImage').files;
                                            if (file) {
                                                document.getElementById('preview').src = URL.createObjectURL(file);
                                            }
                                        };
                                        $('#ProfileImageedit').click(function() {
                                            $('input[name="profile_image"]').click();
                                        });
                                    </script>
                                </div>
                            </div>

                            @if (in_array('pesert', $roles, true))
                                <hr class="horizontal dark">

                                {{-- INFORMASI INDIVIDU --}}
                                <p class="text-uppercase text-sm">Informasi Individu</p>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">NIS <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('nis') is-invalid @enderror" name="nis"
                                            value="{{ old('nis', $peserta_profile->nis ?? '') }}" placeholder="Masukkan NIS">
                                        @error('nis')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Tempat Lahir <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('tempat_lahir') is-invalid @enderror" name="tempat_lahir"
                                            value="{{ old('tempat_lahir', $peserta_profile->tempat_lahir ?? '') }}" placeholder="Masukkan Tempat Lahir">
                                        @error('tempat_lahir')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Tanggal Lahir <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control @error('tanggal_lahir') is-invalid @enderror" name="tanggal_lahir"
                                            value="{{ old('tanggal_lahir', $peserta_profile->tanggal_lahir ?? '') }}">
                                        @error('tanggal_lahir')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Jenis Kelamin <span class="text-danger">*</span></label>
                                        <select class="form-control @error('jenis_kelamin') is-invalid @enderror" name="jenis_kelamin">
                                            <option value="" disabled {{ old('jenis_kelamin', $peserta_profile->jenis_kelamin ?? '') == '' ? 'selected' : '' }}>-- Pilih Jenis Kelamin --</option>
                                            <option value="L" {{ old('jenis_kelamin', $peserta_profile->jenis_kelamin ?? '') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                            <option value="P" {{ old('jenis_kelamin', $peserta_profile->jenis_kelamin ?? '') == 'P' ? 'selected' : '' }}>Perempuan</option>
                                        </select>
                                        @error('jenis_kelamin')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label class="form-control-label">Alamat <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('alamat') is-invalid @enderror" name="alamat"
                                            value="{{ old('alamat', $peserta_profile->alamat ?? '') }}" placeholder="Masukkan Alamat Lengkap">
                                        @error('alamat')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                {{-- PENDIDIKAN --}}
                                <p class="text-uppercase text-sm mt-4">Pendidikan</p>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Semester <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('semester') is-invalid @enderror" name="semester"
                                            value="{{ old('semester', $peserta_profile->semester ?? '') }}" placeholder="Contoh: 6">
                                        @error('semester')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">IPK <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('ipk') is-invalid @enderror" name="ipk" step="0.01"
                                            value="{{ old('ipk', $peserta_profile->ipk ?? '') }}" placeholder="Contoh: 3.75">
                                        @error('ipk')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Nama Universitas <span class="text-danger">*</span></label>
                                        <select class="form-control select2 @error('universitas_id') is-invalid @enderror" name="universitas_id" id="universitas">
                                            <option value="">-- Pilih Universitas --</option>
                                            @foreach ($universitas_list as $universitas)
                                                <option value="{{ $universitas->id }}"
                                                    {{ old('universitas_id', $peserta_profile->universitas_id ?? '') == $universitas->id ? 'selected' : '' }}>
                                                    {{ $universitas->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('universitas_id')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Nama Jurusan <span class="text-danger">*</span></label>
                                        <select class="form-control select2 @error('jurusan_id') is-invalid @enderror" name="jurusan_id" id="jurusan">
                                            <option value="">-- Pilih Jurusan --</option>
                                            @foreach ($jurusan_list as $jurusan)
                                                <option value="{{ $jurusan->id }}"
                                                    {{ old('jurusan_id', $peserta_profile->jurusan_id ?? '') == $jurusan->id ? 'selected' : '' }}>
                                                    {{ $jurusan->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('jurusan_id')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label class="form-control-label">Nama Dosen Pembimbing <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('nama_dosen_pembimbing') is-invalid @enderror" name="nama_dosen_pembimbing"
                                            value="{{ old('nama_dosen_pembimbing', $peserta_profile->nama_dosen_pembimbing ?? '') }}" placeholder="Masukkan Nama Dosen Pembimbing">
                                        @error('nama_dosen_pembimbing')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                {{-- KONTAK --}}
                                <p class="text-uppercase text-sm mt-4">Kontak</p>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">No. Telp / WhatsApp <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('no_telp') is-invalid @enderror" name="no_telp"
                                            value="{{ old('no_telp', $peserta_profile->no_telp ?? '') }}" placeholder="08xxxxxxxxxx">
                                        @error('no_telp')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                {{-- INFORMASI ORANG TUA --}}
                                <p class="text-uppercase text-sm mt-4">Informasi Orang Tua</p>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Nama Orang Tua <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('nama_orang_tua') is-invalid @enderror" name="nama_orang_tua"
                                            value="{{ old('nama_orang_tua', $peserta_profile->nama_orang_tua ?? '') }}" placeholder="Masukkan Nama Orang Tua">
                                        @error('nama_orang_tua')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">No. Telp Orang Tua <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('no_telp_orang_tua') is-invalid @enderror" name="no_telp_orang_tua"
                                            value="{{ old('no_telp_orang_tua', $peserta_profile->no_telp_orang_tua ?? '') }}" placeholder="08xxxxxxxxxx">
                                        @error('no_telp_orang_tua')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label class="form-control-label">Alamat Orang Tua <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('alamat_orang_tua') is-invalid @enderror" name="alamat_orang_tua"
                                            value="{{ old('alamat_orang_tua', $peserta_profile->alamat_orang_tua ?? '') }}" placeholder="Masukkan Alamat Orang Tua">
                                        @error('alamat_orang_tua')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                {{-- INFORMASI BANK --}}
                                <p class="text-uppercase text-sm mt-4">Informasi Bank</p>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">No. Rekening <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('rekening_no') is-invalid @enderror" name="rekening_no"
                                            value="{{ old('rekening_no', $peserta_profile->rekening_no ?? '') }}" placeholder="Masukkan Nomor Rekening">
                                        @error('rekening_no')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">Nama Bank <span class="text-danger">*</span></label>
                                        <select class="form-control select2 @error('rekening_bank') is-invalid @enderror" name="rekening_bank" id="rekening_bank">
                                            <option value="">-- Pilih Bank --</option>
                                            @foreach ($bank as $bk)
                                                <option value="{{ $bk->id }}"
                                                    {{ old('rekening_bank', $peserta_profile->rekening_bank ?? '') == $bk->id ? 'selected' : '' }}>
                                                    {{ $bk->nama_bank }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('rekening_bank')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label class="form-control-label">Nama Pemilik Rekening <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('rekening_nama') is-invalid @enderror" name="rekening_nama"
                                            value="{{ old('rekening_nama', $peserta_profile->rekening_nama ?? '') }}" placeholder="Masukkan Nama Pemilik Rekening">
                                        @error('rekening_nama')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                {{-- INFORMASI ASURANSI & KESEHATAN --}}
                                <p class="text-uppercase text-sm mt-4">Informasi Asuransi & Kesehatan</p>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">No. JKN Kesehatan <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('nojkn') is-invalid @enderror" name="nojkn"
                                            value="{{ old('nojkn', $peserta_profile->nojkn ?? '') }}"
                                            placeholder="Masukkan nomor JKN kesehatan">
                                        @error('nojkn')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-control-label">No. Ketenagakerjaan <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('nojmo') is-invalid @enderror" name="nojmo"
                                            value="{{ old('nojmo', $peserta_profile->nojmo ?? '') }}"
                                            placeholder="Masukkan nomor ketenagakerjaan">
                                        @error('nojmo')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label class="form-control-label">No. Faskes <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('faskes') is-invalid @enderror" name="faskes"
                                            value="{{ old('faskes', $peserta_profile->faskes ?? '') }}"
                                            placeholder="Masukkan nomor faskes">
                                        @error('faskes')
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                {{-- BERKAS --}}
                                <p class="text-uppercase text-sm mt-4">Berkas Dokumen</p>
                                <div class="row">
                                    @foreach (['pas_foto' => 'Pas Foto (Wajib)', 'ktp_kk' => 'KTP / KK (Wajib)', 'surat_pengantar' => 'Surat Pengantar (Wajib)'] as $field => $label)
                                        <div class="col-md-6 mb-3">
                                            <label class="form-control-label">{{ $label }} <span class="text-danger">*</span></label>
                                            @if (!empty($peserta_profile->$field))
                                                <div class="mb-2">
                                                    <a href="{{ asset('storage/' . $peserta_profile->$field) }}"
                                                        target="_blank" class="btn btn-sm btn-outline-primary">Lihat Dokumen Saat Ini</a>
                                                </div>
                                            @endif
                                            <input type="file" class="form-control @error($field) is-invalid @enderror"
                                                name="{{ $field }}"
                                                accept="{{ $field == 'pas_foto' ? '.jpg,.jpeg,.png' : '.pdf' }}">
                                            <p class='text-primary text-xs pt-2 mb-0'>Maksimal Size : <b>2048 KB</b></p>
                                            <p class='text-primary text-xs pt-1 mb-0'>Format File : <b>{{ $field == 'pas_foto' ? 'jpg, jpeg, png' : 'pdf' }}</b></p>
                                            @error($field)
                                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    @endforeach
                                </div>
                                <script>
                                    document.querySelectorAll(
                                        'input[type="file"][name="pas_foto"],input[type="file"][name="ktp_kk"],input[type="file"][name="surat_pengantar"]'
                                    ).forEach(function(input) {
                                        input.addEventListener('change', function(e) {
                                            const file = e.target.files[0];
                                            if (file && file.size > 2 * 1024 * 1024) {
                                                alert('Ukuran file maksimal 2 MB!');
                                                e.target.value = '';
                                            }
                                        });
                                    });
                                </script>
                            @endif

                        </div>

                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Preview Image & Select2 Script --}}
    <script type="text/javascript">
        $(document).ready(function() {
            $('#universitas').select2({
                placeholder: '-- Pilih Universitas --',
                allowClear: true,
                width: '100%'
            });
            $('#jurusan').select2({
                placeholder: '-- Pilih Jurusan --',
                allowClear: true,
                width: '100%'
            });
            $('#rekening_bank').select2({
                placeholder: '-- Pilih Bank --',
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endsection