@extends('layouts.app')

@section('content')

<link rel="stylesheet" href="{{ asset('css/profile.css') }}">

<div class="profile-container">

    @if(session('success'))
        <div class="alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="profile-card">

        <div class="profile-header">

            <div class="profile-photo">

                @if($admin->foto && file_exists(public_path('assets/images/admin/'.$admin->foto)))

                    <img
                        src="{{ asset('assets/images/admin/'.$admin->foto) }}"
                        alt="Foto Profil"
                        id="profileImage">

                @else

                    <i class="bi bi-person-circle"></i>

                @endif

            </div>

            <div class="profile-title">

                <h2>{{ $admin->nama_lengkap }}</h2>

                <span>Administrator</span>

            </div>

        </div>

        <div class="profile-body">

            <div class="profile-item">

                <label>Nama Lengkap</label>

                <span>{{ $admin->nama_lengkap }}</span>

            </div>

            <div class="profile-item">

                <label>Username</label>

                <span>{{ $admin->username }}</span>

            </div>

            <div class="profile-item">

                <label>Email</label>

                <span>{{ $admin->email }}</span>

            </div>

            <div class="profile-item">

                <label>No Telepon</label>

                <span>{{ $admin->no_telepon ?: '-' }}</span>

            </div>

            <div class="profile-item">

                <label>Login Terakhir</label>

                <span>

                    @if($admin->last_login)

                        {{ \Carbon\Carbon::parse($admin->last_login)->translatedFormat('d F Y H:i') }} WIB

                    @else

                        -

                    @endif

                </span>

            </div>

            <div class="profile-item">

                <label>Tanggal Bergabung</label>

                <span>

                    {{ \Carbon\Carbon::parse($admin->created_at)->translatedFormat('d F Y') }}

                </span>

            </div>

        </div>

        <div class="profile-footer">

            <button class="btn btn-primary" id="btnEdit">

                <i class="bi bi-pencil-square"></i>

                Edit Profil

            </button>

            <button class="btn btn-warning" id="btnPassword">

                <i class="bi bi-key"></i>

                Ganti Password

            </button>

        </div>

    </div>

</div>

<!-- ================= EDIT PROFIL ================= -->

<div class="modal-overlay" id="modalEdit">

    <div class="modal-profile">

        <div class="modal-header">

            <h3>Edit Profil</h3>

            <button type="button" class="close-modal">

                <i class="bi bi-x-lg"></i>

            </button>

        </div>

        <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">

            @csrf
            @method('PUT')

            <div class="form-group">

                <label>Nama Lengkap</label>

                <input
                    type="text"
                    name="nama_lengkap"
                    value="{{ old('nama_lengkap',$admin->nama_lengkap) }}"
                    required>

            </div>

            <div class="form-group">

                <label>Username</label>

                <input
                    type="text"
                    name="username"
                    value="{{ old('username',$admin->username) }}"
                    required>

            </div>

            <div class="form-group">

                <label>Email</label>

                <input
                    type="email"
                    name="email"
                    value="{{ old('email',$admin->email) }}"
                    required>

            </div>

            <div class="form-group">

                <label>No Telepon</label>

                <input
                    type="text"
                    name="no_telepon"
                    value="{{ old('no_telepon',$admin->no_telepon) }}">

            </div>

            <div class="form-group">

                <label>Foto</label>

                <input type="file" name="foto">

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary close-modal">

                    Batal

                </button>

                <button class="btn btn-primary">

                    Simpan

                </button>

            </div>

        </form>

    </div>

</div>

<!-- ================= PASSWORD ================= -->

<div class="modal-overlay" id="modalPassword">

    <div class="modal-profile">

        <div class="modal-header">

            <h3>Ganti Password</h3>

            <button type="button" class="close-password">

                <i class="bi bi-x-lg"></i>

            </button>

        </div>

        <form action="{{ route('profile.password') }}" method="POST">

            @csrf
            @method('PUT')

            <div class="form-group">

                <label>Password Lama</label>

                <input
                    type="password"
                    name="password_lama"
                    required>

            </div>

            <div class="form-group">

                <label>Password Baru</label>

                <input
                    type="password"
                    name="password_baru"
                    required>

            </div>

            <div class="form-group">

                <label>Konfirmasi Password</label>

                <input
                    type="password"
                    name="password_baru_confirmation"
                    required>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary close-password">

                    Batal

                </button>

                <button class="btn btn-primary">

                    Update Password

                </button>

            </div>

        </form>

    </div>

</div>




@if($admin->foto && file_exists(public_path('assets/images/admin/'.$admin->foto)))

<div class="image-preview" id="imagePreview">

    <span class="close-preview">

        <i class="bi bi-x-lg"></i>

    </span>

    <img
        src="{{ asset('assets/images/admin/'.$admin->foto) }}"
        id="previewImage">

</div>

@endif

<script src="{{ asset('js/profile.js') }}"></script>

@endsection