@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Profile'])

    {{-- Profile Header --}}
    <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">
                        <img src="{{ $user_login->image ? asset('/storage/' . $user_login->image) : asset('/storage/noimage.png') }}"
                            alt="profile_image" class="w-100 border-radius-lg shadow-sm" id="preview" data-bs-toggle="modal"
                            data-bs-target="#imageModal">
                    </div>
                </div>
                <div class="col-auto my-auto">
                    <div class="h-100">
                        <h5 class="mb-1">{{ $user_login->firstname }}</h5>
                        <p class="mb-0 font-weight-bold text-sm">{{ session('username') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Profile Form --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md">
                <form role="form" method="post" action="{{ route('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 --}}
                            @include('components.alert')

                            <div class="row">

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

                                {{-- Email --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Email address</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')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Firstname --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">First name</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')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Lastname --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Last name</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')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- Upload Foto Profil --}}
                                <div class="col-md-6 mt-2">
                                    <label class="form-control-label">Foto Profil</label>
                                    <div class="position-relative">
                                        <button type="button"
                                            class="btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2"
                                            style="left: -5px;" id="btn-edit-photo">
                                            <i class="fa fa-pen text-white"></i>
                                        </button>

                                        <input type="file" name="profile_image" id="profile_image" style="display:none;">
                                    </div>

                                    <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">
                                        Format: <b>PNG,JPG,JPEG</b>
                                    </p>
                                    @error('profile_image')
                                        <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                            </div>
                            <hr class="horizontal dark">
                        </div>

                        {{-- Tombol Simpan --}}
                        <div class="card-footer d-flex align-items-center">
                            <button class="btn btn-primary btn-sm"
                                onclick="event.preventDefault(); document.getElementById('profile-form').submit();">
                                Simpan
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

    {{-- Preview image --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('profile_image');
            const preview = document.getElementById('preview');
            const btnEdit = document.getElementById('btn-edit-photo');

            if (btnEdit && fileInput) {
                btnEdit.addEventListener('click', () => fileInput.click());
            }

            if (fileInput && preview) {
                fileInput.addEventListener('change', (e) => {
                    const [file] = e.target.files;
                    if (file) {
                        preview.src = URL.createObjectURL(file);
                    }
                });
            }
        });
    </script>
@endsection