@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Profile'])
    <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="{{ asset('/storage' . '/' . $user_login->image) }}" 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 }}
                        </h5>
                        <p class="mb-0 font-weight-bold text-sm">
                            {{ session('username') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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">

                            @include('components.alert')

                            {{-- Username --}}
                            <div class="row">
                                <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>
                            </div>

                            {{-- Email & Nama --}}
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-control-label">Email address</label>
                                    <input class="form-control" type="email" name="profile_email"
                                        value="{{ $user_login->email }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">First name</label>
                                    <input class="form-control" type="text" name="profile_firstname"
                                        value="{{ $user_login->firstname }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">Last name</label>
                                    <input class="form-control" type="text" name="profile_lastname"
                                        value="{{ $user_login->lastname }}">
                                </div>
                            </div>

                            {{-- FOTO PROFIL --}}
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <label class="form-control-label">Foto Profil</label>
                                    <div class="position-relative">
                                        <label for="ProfileImage" id="ProfileImageedit"
                                            class="btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                            <i class="fa fa-pen" title="Edit Image"></i>
                                        </label>
                                        <img src="{{ asset('/storage/' . $user_login->image) }}" id="preview"
                                            alt="image" class="w-30 border-radius-lg shadow-sm">
                                    </div>
                                    <input class="form-control d-none" type="file" id="ProfileImage" name="profile_image"
                                        accept="image/png,image/jpeg">
                                    <p class="text-primary text-xs pt-2 mb-0">Maksimal: <b>2048 KB</b></p>
                                    <p class="text-primary text-xs pt-1">Format: <b>PNG, JPG, JPEG</b></p>
                                </div>

                                {{-- TANDA TANGAN --}}
                                <div class="col-md-6">
                                    <label class="form-control-label">Tanda Tangan (PNG)</label>
                                    <div class="position-relative">
                                        <label for="ProfileTTD" id="ProfileTTDedit"
                                            class="btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                            <i class="fa fa-pen" title="Edit TTD"></i>
                                        </label>
                                        <img src="{{ asset('/storage/' . ($user_login->ttd ?? 'noimage.png')) }}"
                                            id="previewTTD" alt="ttd" class="w-30 border-radius-lg shadow-sm">
                                    </div>

                                    <input class="form-control d-none" type="file" id="ProfileTTD" name="profile_ttd"
                                        accept="image/png">

                                    <p class="text-primary text-xs pt-2 mb-0">Maksimal: <b>2048 KB</b></p>
                                    <p class="text-primary text-xs pt-1">Format: <b>PNG</b></p>
                                    <p class="text-danger text-xs pt-1">
                                        Belum punya tanda tangan? Buat di sini:
                                        <a href="https://www.signwell.com/online-signature/draw/" target="_blank"
                                            class="text-primary text-decoration-underline">
                                            https://www.signwell.com/online-signature/draw/
                                        </a>
                                    </p>
                                </div>
                            </div>

                            <hr class="horizontal dark mt-4">
                        </div>

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

    {{-- === JS Preview === --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const imgInput = document.getElementById('ProfileImage');
            const imgPreview = document.getElementById('preview');
            const ttdInput = document.getElementById('ProfileTTD');
            const ttdPreview = document.getElementById('previewTTD');

            // === Foto Profil ===
            document.getElementById('ProfileImageedit').addEventListener('click', function(e) {
                e.preventDefault();
                imgInput.value = ''; // reset supaya pilih file sama pun tetap trigger change
                imgInput.click();
            });

            imgInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    imgPreview.src = URL.createObjectURL(file);
                }
            });

            // === Tanda Tangan ===
            document.getElementById('ProfileTTDedit').addEventListener('click', function(e) {
                e.preventDefault();
                ttdInput.value = ''; // reset juga
                ttdInput.click();
            });

            ttdInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    ttdPreview.src = URL.createObjectURL(file);
                }
            });
        });
    </script>
@endsection