@extends('main.layouts.app')

@section('title', 'Profile')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <h5 class="card-header">Detail Profil</h5>
                <div class="card-body">
                    <div class="d-flex align-items-start align-items-sm-center gap-4">
                        <img
                            src="{{ auth()->user()->foto_profil ?? '../frontend/assets/img/avatars/1.png' }}"
                            alt="user-avatar"
                            class="d-block rounded"
                            height="100"
                            width="100"
                            id="uploadedAvatar"
                        />
                        <div class="button-wrapper">
                            <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                                <span class="d-none d-sm-block">Ganti Foto Profil</span>
                                <i class="bx bx-upload d-block d-sm-none"></i>
                                <input
                                    type="file"
                                    id="upload"
                                    name="foto_profil"
                                    class="account-file-input"
                                    hidden
                                    accept="image/png, image/jpeg"
                                />
                            </label>
                            <button type="button" class="btn btn-danger account-image-reset mb-4" data-bs-toggle="modal" data-bs-target="#confirmationModal">
                                <i class="bx bx-reset d-block d-sm-none"></i>
                                <span class="d-none d-sm-block">Hapus Foto Profil</span>
                            </button>
                            <p class="text-muted mb-0">Format foto profil adalah JPG atau PNG. Maksimal ukuran foto adalah 15MB</p>
                        </div>
                    </div>
                </div>
                <hr class="my-0" />
                <div class="card-body">
                    <form id="formAccountSettings" method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <label for="email" class="form-label">Email</label>
                                <input
                                    class="form-control"
                                    type="text"
                                    id="email"
                                    name="email"
                                    value="{{ auth()->user()->email ?? 'tamu@mail.com'}}"
                                    readonly
                                />
                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="nama_lengkap" class="form-label">Nama Lengkap</label>
                                <input
                                    class="form-control"
                                    type="text"
                                    id="nama_lengkap"
                                    name="nama_lengkap"
                                    value="{{ auth()->user()->nama_lengkap ?? 'Tamu'}}"
                                    autofocus
                                />
                                @error('nama_lengkap')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="nim">NIM</label>
                                <input
                                    type="text"
                                    id="nim"
                                    name="nim"
                                    class="form-control"
                                    value="{{ auth()->user()->nim ?? 'E41200000'}}"
                                />
                                @error('nim')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="semester">Semester</label>
                                <select id="semester" name="semester" class="select2 form-select">
                                    <option value="">Pilih Semester</option>
                                    @for ($i = 1; $i <= 14; $i++)
                                        <option value="{{ $i }}" {{ (auth()->user()?->semester ?? '') == $i ? 'selected' : '' }}>{{ $i }}</option>
                                    @endfor
                                </select>
                                @error('semester')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="angkatan" class="form-label">Angkatan</label>
                                <select id="angkatan" name="angkatan" class="select2 form-select">
                                    <option value="">Pilih Angkatan</option>
                                    @for ($i = 2000; $i <= date('Y'); $i++)
                                        <option value="{{ $i }}" {{ (auth()->user()?->angkatan ?? '') == $i ? 'selected' : '' }}>{{ $i }}</option>
                                    @endfor
                                </select>
                                @error('angkatan')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="mt-2">
                            <button type="submit" class="btn btn-primary me-2">Simpan Perubahan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmationModalLabel">Konfirmasi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Anda yakin ingin menghapus foto profil Anda?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                <form action="{{ route('profile.delete-photo') }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    // Pratinjau gambar saat upload
    const uploadInput = document.querySelector('#upload');
    const uploadedAvatar = document.querySelector('#uploadedAvatar');

    uploadInput.addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                uploadedAvatar.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
</script>
@endsection

@section('helpInstructions')
[
    "<h4>Selamat datang di Profil!</h4><p>Hai! Kenalin aku Yura, yang akan mengajak kamu untuk menjelajah fitur profil!</p>",
    "<p>Klik <strong>Ganti Foto Profil</strong> untuk mengganti foto profil Kamu.</p>",
    "<p>Gunakan tombol <strong>Hapus Foto Profil</strong> untuk menghapus foto profil kamu.</p>",
    "<p>Isi semua kolom dengan informasi yang benar, seperti Nama Lengkap, NIM, Semester, dan Angkatan.</p>",
    "<p>Klik <strong>Simpan Perubahan</strong> untuk menyimpan perubahan data profil kamu.</p>"
]
@endsection
@endsection