@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">
                {{-- 1. FOTO PROFIL --}}
                <div class="col-auto">
                    <div class="avatar avatar-xl position-relative">
                        <img src="{{ asset('/storage' . '/' . $user_login->image) }}" alt="profile_image"
                            class="w-100 border-radius-lg shadow-sm">
                    </div>
                </div>

                {{-- 2. NAMA & USERNAME --}}
                <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>

                {{-- 3. BUTTON SIMPAN (POSISI BARU DI KANAN) --}}
                <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                    <div class="d-flex align-items-center justify-content-end">
                        {{-- Tombol ini memicu form dengan ID 'profile-form' yang ada di bawah --}}
                        <button class="btn btn-primary btn-sm mb-0"
                            onclick="event.preventDefault(); document.getElementById('profile-form').submit();">
                            Simpan
                        </button>
                    </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">
                            {{-- alert --}}
                            @include('components.alert')
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Username</label>

                                        <p class="px-2"><label for="example-text-input"
                                                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 for="example-text-input" class="form-control-label">Email address</label>
                                        <input class="form-control" type="email" name="profile_email"
                                            value="{{ $user_login->email }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">First name</label>
                                        <input class="form-control" type="text" name="profile_firstname"
                                            value="{{ $user_login->firstname }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Last name</label>
                                        <input class="form-control" type="text" name="profile_lastname"
                                            value="{{ $user_login->lastname }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="col-sm-auto">
                                        <div class="position-relative">
                                            <div>
                                                <label for="ProfileImage" style="left: -5px !important;"
                                                    id="ProfileImageedit"
                                                    class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="" aria-hidden="true"
                                                        data-bs-original-title="Edit Image" aria-label="Edit Image"></i>
                                                    <span class="sr-only">Edit Image</span>
                                                </label>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                    <img src="{{ asset('/storage' . '/' . $user_login->image) }}"
                                                        id="preview" alt="image" data-bs-toggle="modal"
                                                        data-bs-target="#imageModal"
                                                        class="w-30 border-radius-lg shadow-sm">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <input class="form-control" type="file" value="{{ $user_login->image }}"
                                        id="ProfileImage" name="profile_image" style="display: none;">
                                    <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 Image :
                                        <b>PNG,JPG,JPEG</b>
                                    </p>

                                    {{-- SCRIPT DI SINI DIHAPUS AGAR TIDAK DUPLIKAT --}}
                                </div>

                                {{-- PERBAIKAN TYPO <d iv> MENJADI <div> --}}
                                <div class="col-md-6">
                                    <div class="col-sm-auto">
                                        <label class="form-control-label">Tanda Tangan (TTD)</label>
                                        <div class="position-relative">
                                            <div>
                                                {{-- LABEL ini sudah otomatis memicu input file karena atribut for="TtdImage" --}}
                                                <label for="TtdImage" style="left: -5px !important;" id="TtdImageEdit"
                                                    class="btn btn-xxl btn-icon-only bg-gradient-info position-absolute bottom-0 mb-n2">
                                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit TTD"></i>
                                                </label>

                                                <span
                                                    class="d-block overflow-hidden bg-gray-100 border-radius-lg shadow-sm"
                                                    style="width: 150px; height: 200px; display: flex; align-items: center; justify-content: center;">
                                                    @if (!empty($user_login->signature) && Storage::disk('public')->exists($user_login->signature))
                                                        {{-- JIKA ADA DATA DI DB DAN FILE NYA ADA --}}
                                                        <img src="{{ asset('storage/' . $user_login->signature) }}"
                                                            id="preview_ttd" alt="TTD"
                                                            style="width: 100%; height: 100%; object-fit: contain;">
                                                    @else
                                                        {{-- JIKA KOSONG / FILE TIDAK DITEMUKAN --}}
                                                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
                                                            id="preview_ttd" alt="Belum ada TTD"
                                                            style="width: 100%; height: 100%; object-fit: cover;">
                                                        <span class="position-absolute text-xs text-secondary"
                                                            style="pointer-events: none;" id="text_placeholder_ttd">
                                                            Belum ada TTD
                                                        </span>
                                                    @endif
                                                </span>

                                            </div>
                                        </div>
                                    </div>
                                    <input class="form-control" type="file" id="TtdImage" name="ttd_image"
                                        style="display: none;">
                                    <p class='text-info text-xs pt-2 mb-0'>
                                        Auto Resize: <b>400x600 px</b> (Disarankan PNG Transparan)
                                    </p>

                                    {{-- SCRIPT DI SINI JUGA DIHAPUS AGAR TIDAK DUPLIKAT --}}
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- SCRIPT UTAMA (HANYA SATU DI HALAMAN) --}}
    <script>
        const profileInput = document.getElementById('ProfileImage');
        const profilePreview = document.getElementById('preview');

        if (profileInput) {
            profileInput.onchange = evt => {
                const [file] = profileInput.files
                if (file) {
                    profilePreview.src = URL.createObjectURL(file)
                }
            }
        }
        const ttdInput = document.getElementById('TtdImage');
        const ttdPreview = document.getElementById('preview_ttd');
        const textPlaceholder = document.getElementById('text_placeholder_ttd');

        if (ttdInput) {
            ttdInput.onchange = evt => {
                const [file] = ttdInput.files
                if (file) {
                    ttdPreview.src = URL.createObjectURL(file)
                    if (textPlaceholder) textPlaceholder.style.display = 'none';
                }
            }
        }
    </script>
@endsection