@extends('layouts.app')

@section('content')
<div class="lg:container pt-16 mx-4">
    {{-- Breadcrumb --}}
    <div class="flex mt-8 text-gray-700">
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{{ route('beranda') }}"
                    class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Beranda</a>
            </li>

            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <span class="ms-1 text-xs text-black md:ms-2">Profil</span>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}
    <div class="md:flex my-6 gap-6">
        <div class="bg-white xl:w-3/12 md:w-4/12">
            <div class="p-4 flex flex-col items-center rounded-xl shadow-custom mb-4">
                <div class="flex items-center">
                    <div id="image-preview"
                        class="shrink-0 relative flex items-center object-center hover:bg-slate-100 flex-none w-14 h-14 rounded-full overflow-hidden border-2 border-gray-100 shadow-md cursor-pointer">
                        {{-- <input id="upload" type="file" class="hidden" accept="image/*" />
                        <label for="upload"
                            class="cursor-pointer absolute flex items-center justify-center bottom-0 z-20 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/50 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M7 6V6.75C7.25076 6.75 7.48494 6.62467 7.62404 6.41603L7 6ZM8.40627 3.8906L7.78223 3.47457V3.47457L8.40627 3.8906ZM15.5937 3.8906L16.2178 3.47457L15.5937 3.8906ZM17 6L16.376 6.41603C16.5151 6.62467 16.7492 6.75 17 6.75V6ZM14.25 13.5C14.25 14.7426 13.2426 15.75 12 15.75V17.25C14.0711 17.25 15.75 15.5711 15.75 13.5H14.25ZM12 15.75C10.7574 15.75 9.75 14.7426 9.75 13.5H8.25C8.25 15.5711 9.92893 17.25 12 17.25V15.75ZM9.75 13.5C9.75 12.2574 10.7574 11.25 12 11.25V9.75C9.92893 9.75 8.25 11.4289 8.25 13.5H9.75ZM12 11.25C13.2426 11.25 14.25 12.2574 14.25 13.5H15.75C15.75 11.4289 14.0711 9.75 12 9.75V11.25ZM7.62404 6.41603L9.0303 4.30662L7.78223 3.47457L6.37596 5.58397L7.62404 6.41603ZM10.0704 3.75H13.9296V2.25H10.0704V3.75ZM14.9697 4.30662L16.376 6.41603L17.624 5.58397L16.2178 3.47457L14.9697 4.30662ZM13.9296 3.75C14.3476 3.75 14.7379 3.95888 14.9697 4.30662L16.2178 3.47457C15.7077 2.70953 14.8491 2.25 13.9296 2.25V3.75ZM9.0303 4.30662C9.26214 3.95888 9.65243 3.75 10.0704 3.75V2.25C9.1509 2.25 8.29226 2.70953 7.78223 3.47457L9.0303 4.30662ZM21.25 10V17H22.75V10H21.25ZM18 20.25H6V21.75H18V20.25ZM2.75 17V10H1.25V17H2.75ZM6 20.25C4.20507 20.25 2.75 18.7949 2.75 17H1.25C1.25 19.6234 3.37665 21.75 6 21.75V20.25ZM21.25 17C21.25 18.7949 19.7949 20.25 18 20.25V21.75C20.6234 21.75 22.75 19.6234 22.75 17H21.25ZM18 6.75C19.7949 6.75 21.25 8.20507 21.25 10H22.75C22.75 7.37665 20.6234 5.25 18 5.25V6.75ZM6 5.25C3.37665 5.25 1.25 7.37665 1.25 10H2.75C2.75 8.20507 4.20507 6.75 6 6.75V5.25ZM6 6.75H7V5.25H6V6.75ZM18 5.25H17V6.75H18V5.25Z"
                                    fill="#ffffff" />
                                <circle cx="12" cy="6" r="1" fill="#ffffff" />
                            </svg>
                        </label> --}}
                        <div class="absolute cursor-pointer z-10 w-full">
                            <img src="images/avatar.png"
                                class="rounded-full w-full bordder-2 border-white shadow-custom" alt="user"
                                loading="lazy" />
                        </div>
                    </div>
                    <div class="flex-1 mx-2">
                        <h3 class="font-bold text-black mb-0 line-clamp-1">{{ $user->nama }}</h3>
                        <span class="text-sm text-gray-400 line-clamp-1">{{ $user->email }}</span>
                    </div>
                </div>

                @include('layouts.component')
            </div>
        </div>
        <div class="xl:w-9/12 md:w-8/12 py-4">
            <div class="">
                <h1 class="mb-4 lg:mb-8 text-black text-xl md:text-3xl font-semibold">Ubah Profil</h1>
                <form action="{{ route('profile.update') }}" method="POST" class="flex flex-col gap-y-4">
                    @csrf
                    <!-- Nama Lengkap -->
                    <div class="flex flex-col">
                        <label for="nama" class="mb-1 text-sm font-semibold text-black">Nama Lengkap</label>
                        <input type="text" id="nama" name="nama" value="{{ old('nama', $user->nama) }}"
                            class="form-input" placeholder="Nama Lengkap" required />
                        @error('nama')
                        <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Email -->
                    <div class="flex flex-col">
                        <label for="email" class="mb-1 text-sm font-semibold text-black">Email</label>
                        <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}"
                            class="form-input" placeholder="Email" required />
                        @error('email')
                        <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- No. HP -->
                    <div class="flex flex-col">
                        <label for="no_ponsel" class="mb-1 text-sm font-semibold text-black">No. HP</label>
                        <input type="text" id="no_ponsel" name="no_ponsel"
                            value="{{ old('no_ponsel', $user->no_ponsel) }}" class="form-input" placeholder="No. HP" />
                        @error('no_ponsel')
                        <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Tanggal Lahir -->
                    <div class="flex flex-col">
                        <label for="tanggal_lahir" class="mb-1 text-sm font-semibold text-black">Tanggal Lahir</label>
                        <input type="date" id="tanggal_lahir" name="tanggal_lahir"
                            value="{{ old('tanggal_lahir', $user->tanggal_lahir) }}" class="form-input" />
                        @error('tanggal_lahir')
                        <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Jenis Kelamin -->
                    <div>
                        <h3 class="mb-3 text-sm text-black font-semibold">Jenis Kelamin</h3>
                        <div class="flex">
                            <div class="mb-[0.125rem] mr-4 inline-block min-h-[1.5rem] pl-[1.5rem]">
                                <input type="radio" name="gender" id="gender1" value="L" {{ old('gender', $user->gender)
                                == 'L' ? 'checked' : '' }} />
                                <label class="mt-px text-sm text-black inline-block pl-[0.15rem] hover:cursor-pointer"
                                    for="gender1">Laki-Laki</label>
                            </div>
                            <div class="mb-[0.125rem] mr-4 inline-block min-h-[1.5rem] pl-[1.5rem]">
                                <input type="radio" name="gender" id="gender2" value="P" {{ old('gender', $user->gender)
                                == 'P' ? 'checked' : '' }} />
                                <label class="mt-px text-sm text-black inline-block pl-[0.15rem] hover:cursor-pointer"
                                    for="gender2">Perempuan</label>
                            </div>
                        </div>
                        @error('gender')
                        <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Kata Sandi -->
                    {{-- <div class="flex flex-col">
                        <label for="password" class="mb-1 text-sm font-semibold text-black">Kata Sandi</label>
                        <div class="relative text-sm">
                            <input type="password" id="password" name="password"
                                class="password-profile form-input w-full" placeholder="••••••••" />
                            <i
                                class="fa fa-eye-slash eye-password-profile absolute top-4 right-3 cursor-pointer text-black"></i>
                        </div>
                        @error('password')
                        <span class="text-sm text-red-500">{{ $message }}</span>
                        @enderror
                    </div> --}}

                    <!-- Tombol Simpan -->
                    <button type="submit" class="btn btn-primary" data-twe-ripple-init
                        data-twe-ripple-color="light">Simpan</button>
                </form>
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit"
                        class="flex items-center justify-center gap-2 mt-8 btn btn-outline w-full lg:hidden"
                        data-twe-ripple-init data-twe-ripple-color="primary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="fill-primary"
                                d="M2 12L1.21913 11.3753L0.719375 12L1.21913 12.6247L2 12ZM11 13C11.5523 13 12 12.5523 12 12C12 11.4477 11.5523 11 11 11V13ZM5.21913 6.3753L1.21913 11.3753L2.78087 12.6247L6.78087 7.6247L5.21913 6.3753ZM1.21913 12.6247L5.21913 17.6247L6.78087 16.3753L2.78087 11.3753L1.21913 12.6247ZM2 13H11V11H2V13Z"
                                fill="white" />
                            <path class="stroke-primary"
                                d="M10 8.13193V7.38851C10 5.77017 10 4.961 10.474 4.4015C10.9479 3.84201 11.7461 3.70899 13.3424 3.44293L15.0136 3.1644C18.2567 2.62388 19.8782 2.35363 20.9391 3.25232C22 4.15102 22 5.79493 22 9.08276V14.9172C22 18.2051 22 19.849 20.9391 20.7477C19.8782 21.6464 18.2567 21.3761 15.0136 20.8356L13.3424 20.5571C11.7461 20.291 10.9479 20.158 10.474 19.5985C10 19.039 10 18.2298 10 16.6115V16.066"
                                stroke="white" stroke-width="2" />
                        </svg>
                        Keluar</button>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@section('javascript')
<script>
    // Inisialisasi Notyf
    const notyf = new Notyf({
        duration: 3000, // Durasi notifikasi (3 detik)
        position: {
            x: 'right',
            y: 'top',
        },
        types: [
            {
                type: 'success',
                background: 'green',
                icon: {
                    className: 'fas fa-check',
                    tagName: 'i',
                    color: 'white'
                },
                dismissible: true
            },
            {
                type: 'error',
                background: 'red',
                icon: {
                    className: 'fas fa-times',
                    tagName: 'i',
                    color: 'white'
                },
                dismissible: true
            }
        ]
    });

    // Cek flash message dan tampilkan notifikasi
    @if (session('success'))
        notyf.success("{{ session('success') }}");
    @endif

    @if (session('error'))
        notyf.error("{{ session('error') }}");
    @endif

    // Script untuk toggle password visibility
    const eyePasswordProfile = document.querySelector('.eye-password-profile');
    const passwordProfile = document.querySelector('.password-profile');
    const setEyePasswordProfile = document.querySelector('.eye-password-profile');

    eyePasswordProfile.addEventListener('click', function() {
        if (passwordProfile.type == 'password') {
            passwordProfile.type = 'text';
            setEyePasswordProfile.classList.remove('fa-eye-slash');
            setEyePasswordProfile.classList.add('fa-eye');
        } else {
            passwordProfile.type = 'password';
            setEyePasswordProfile.classList.remove('fa-eye-slash');
            setEyePasswordProfile.classList.add('fa-eye');
        }
    });
</script>
@endsection