@extends('layouts.super-admin')

@section('page-title', 'Profil Super Admin')

@section('content')

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


<div class="super-profile-page">


    {{-- =====================================================
         ALERT SUCCESS
    ====================================================== --}}

    @if(session('success'))

        <div class="super-profile-alert success">

            <div class="super-profile-alert-icon">
                <i class="fa-solid fa-circle-check"></i>
            </div>

            <div>
                {{ session('success') }}
            </div>

            <button
                type="button"
                onclick="this.parentElement.remove()"
            >
                <i class="fa-solid fa-xmark"></i>
            </button>

        </div>

    @endif


    {{-- =====================================================
         ALERT ERROR
    ====================================================== --}}

    @if(session('error'))

        <div class="super-profile-alert error">

            <div class="super-profile-alert-icon">
                <i class="fa-solid fa-circle-exclamation"></i>
            </div>

            <div>
                {{ session('error') }}
            </div>

            <button
                type="button"
                onclick="this.parentElement.remove()"
            >
                <i class="fa-solid fa-xmark"></i>
            </button>

        </div>

    @endif


    {{-- =====================================================
         VALIDATION ERROR
    ====================================================== --}}

    @if($errors->any())

        <div class="super-profile-alert error">

            <div class="super-profile-alert-icon">
                <i class="fa-solid fa-circle-exclamation"></i>
            </div>

            <div class="super-profile-error-list">

                <strong>
                    Terjadi kesalahan:
                </strong>

                <ul>

                    @foreach($errors->all() as $error)

                        <li>
                            {{ $error }}
                        </li>

                    @endforeach

                </ul>

            </div>

            <button
                type="button"
                onclick="this.parentElement.remove()"
            >
                <i class="fa-solid fa-xmark"></i>
            </button>

        </div>

    @endif


    {{-- =====================================================
         PROFILE GRID
    ====================================================== --}}

    <div class="super-profile-grid">


        {{-- =================================================
             PROFILE CARD
        ================================================== --}}

        <div class="super-profile-card profile-main-card">


            {{-- PROFILE COVER --}}

            <div class="super-profile-cover">

                <div class="super-profile-cover-pattern"></div>

            </div>


            {{-- PROFILE CONTENT --}}

            <div class="super-profile-main-content">


                {{-- AVATAR --}}

                <div class="super-profile-avatar">

                    <div class="super-profile-avatar-inner">

                        @if($superAdmin->foto_profil)

                            <img
                                src="{{ asset('storage/' . $superAdmin->foto_profil) }}"
                                alt="Foto Profil Super Admin"
                            >

                        @else

                            <i class="fa-solid fa-user"></i>

                        @endif

                    </div>

                </div>


                {{-- IDENTITY --}}

                <div class="super-profile-identity">

                    <h2>
                        {{ $superAdmin->username }}
                    </h2>

                    <span class="super-profile-role">

                        <i class="fa-solid fa-shield-halved"></i>

                        Administrator

                    </span>

                </div>


                {{-- STATUS --}}

                <div class="super-profile-status">

                    <span class="status-dot"></span>

                    Aktif

                </div>


            </div>


            {{-- ACCOUNT INFORMATION --}}

            <div class="super-profile-information">


                <div class="super-profile-section-title">

                    <div class="section-title-icon">

                        <i class="fa-solid fa-id-card"></i>

                    </div>

                    <div>

                        <h3>
                            Informasi Akun
                        </h3>

                        <p>
                            Informasi akun Super Admin yang sedang digunakan.
                        </p>

                    </div>

                </div>


                {{-- USERNAME --}}

                <div class="super-profile-info-item">

                    <div class="super-profile-info-icon">

                        <i class="fa-solid fa-user"></i>

                    </div>

                    <div class="super-profile-info-content">

                        <span>
                            Username
                        </span>

                        <strong>
                            {{ $superAdmin->username }}
                        </strong>

                    </div>

                </div>


                {{-- EMAIL --}}

                <div class="super-profile-info-item">

                    <div class="super-profile-info-icon">

                        <i class="fa-solid fa-envelope"></i>

                    </div>

                    <div class="super-profile-info-content">

                        <span>
                            Email
                        </span>

                        <strong>
                            {{ $superAdmin->email ?? '-' }}
                        </strong>

                    </div>

                </div>


                {{-- ROLE --}}

                <div class="super-profile-info-item">

                    <div class="super-profile-info-icon">

                        <i class="fa-solid fa-shield-halved"></i>

                    </div>

                    <div class="super-profile-info-content">

                        <span>
                            Hak Akses
                        </span>

                        <strong>
                            Super Admin
                        </strong>

                    </div>

                </div>


                {{-- STATUS --}}

                <div class="super-profile-info-item">

                    <div class="super-profile-info-icon">

                        <i class="fa-solid fa-circle-check"></i>

                    </div>

                    <div class="super-profile-info-content">

                        <span>
                            Status Akun
                        </span>

                        <strong class="active-text">
                            Aktif
                        </strong>

                    </div>

                </div>


            </div>

        </div>


        {{-- =================================================
             EDIT PROFILE CARD
        ================================================== --}}

        <div class="super-profile-card edit-profile-card">


            <div class="super-profile-card-header">

                <div class="super-profile-card-header-icon profile-edit-icon">

                    <i class="fa-solid fa-user-pen"></i>

                </div>

                <div>

                    <h3>
                        Edit Profil
                    </h3>

                    <p>
                        Perbarui informasi dan foto profil Super Admin.
                    </p>

                </div>

            </div>


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

                @csrf

                @method('PUT')


                {{-- FOTO PROFIL --}}

                <div class="profile-photo-editor">

                    <div class="profile-photo-preview">

                        @if($superAdmin->foto_profil)

                            <img
                                src="{{ asset('storage/' . $superAdmin->foto_profil) }}"
                                alt="Foto Profil"
                                id="profilePreview"
                            >

                        @else

                            <div
                                class="profile-photo-placeholder"
                                id="profilePlaceholder"
                            >

                                <i class="fa-solid fa-user"></i>

                            </div>

                            <img
                                src=""
                                alt="Preview Foto Profil"
                                id="profilePreview"
                                style="display:none;"
                            >

                        @endif

                    </div>


                    <div class="profile-photo-actions">

                        <label
                            for="foto_profil"
                            class="profile-upload-button"
                        >

                            <i class="fa-solid fa-camera"></i>

                            Pilih Foto

                        </label>

                        <input
                            type="file"
                            id="foto_profil"
                            name="foto_profil"
                            accept="image/jpeg,image/png,image/webp"
                            hidden
                        >


                        @if($superAdmin->foto_profil)

                            <label class="profile-remove-photo">

                                <input
                                    type="checkbox"
                                    name="hapus_foto"
                                    value="1"
                                    id="hapus_foto"
                                >

                                <i class="fa-solid fa-trash"></i>

                                Hapus Foto

                            </label>

                        @endif


                        <span class="profile-photo-info">

                            JPG, JPEG, PNG atau WEBP

                            <br>

                            Maksimal 2 MB

                        </span>

                    </div>

                </div>


                {{-- USERNAME --}}

                <div class="super-profile-form-group">

                    <label for="username">

                        Username

                    </label>

                    <div class="super-profile-input-wrapper">

                        <i class="fa-solid fa-user"></i>

                        <input
                            type="text"
                            id="username"
                            name="username"
                            value="{{ old('username', $superAdmin->username) }}"
                            placeholder="Masukkan username"
                            maxlength="100"
                            autocomplete="username"
                            required
                        >

                    </div>

                </div>


                {{-- EMAIL --}}

                <div class="super-profile-form-group">

                    <label for="email">

                        Email

                    </label>

                    <div class="super-profile-input-wrapper">

                        <i class="fa-solid fa-envelope"></i>

                        <input
                            type="email"
                            id="email"
                            name="email"
                            value="{{ old('email', $superAdmin->email) }}"
                            placeholder="Masukkan email"
                            maxlength="255"
                            autocomplete="email"
                            required
                        >

                    </div>

                </div>


                {{-- INFO --}}

                <div class="password-information profile-information">

                    <i class="fa-solid fa-circle-info"></i>

                    <span>
                        Foto profil akan digunakan sebagai identitas
                        Super Admin pada halaman profil. Pastikan
                        ukuran foto tidak lebih dari 2 MB.
                    </span>

                </div>


                {{-- SUBMIT --}}

                <button
                    type="submit"
                    class="super-profile-submit profile-submit"
                >

                    <i class="fa-solid fa-floppy-disk"></i>

                    Simpan Perubahan

                </button>

            </form>

        </div>


        {{-- =================================================
             PASSWORD CARD
        ================================================== --}}

        <div class="super-profile-card password-card">


            <div class="super-profile-card-header">

                <div class="super-profile-card-header-icon">

                    <i class="fa-solid fa-lock"></i>

                </div>

                <div>

                    <h3>
                        Keamanan Akun
                    </h3>

                    <p>
                        Perbarui password untuk menjaga keamanan akun.
                    </p>

                </div>

            </div>


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

                @csrf

                @method('PUT')


                {{-- PASSWORD LAMA --}}

                <div class="super-profile-form-group">

                    <label for="current_password">

                        Password Saat Ini

                    </label>

                    <div class="super-profile-input-wrapper">

                        <i class="fa-solid fa-lock"></i>

                        <input
                            type="password"
                            id="current_password"
                            name="current_password"
                            placeholder="Masukkan password saat ini"
                            autocomplete="current-password"
                            required
                        >

                        <button
                            type="button"
                            class="toggle-password"
                            data-target="current_password"
                            aria-label="Tampilkan password"
                        >

                            <i class="fa-solid fa-eye"></i>

                        </button>

                    </div>

                </div>


                {{-- PASSWORD BARU --}}

                <div class="super-profile-form-group">

                    <label for="password">

                        Password Baru

                    </label>

                    <div class="super-profile-input-wrapper">

                        <i class="fa-solid fa-key"></i>

                        <input
                            type="password"
                            id="password"
                            name="password"
                            placeholder="Masukkan password baru"
                            autocomplete="new-password"
                            required
                        >

                        <button
                            type="button"
                            class="toggle-password"
                            data-target="password"
                            aria-label="Tampilkan password"
                        >

                            <i class="fa-solid fa-eye"></i>

                        </button>

                    </div>

                </div>


                {{-- KONFIRMASI PASSWORD --}}

                <div class="super-profile-form-group">

                    <label for="password_confirmation">

                        Konfirmasi Password Baru

                    </label>

                    <div class="super-profile-input-wrapper">

                        <i class="fa-solid fa-key"></i>

                        <input
                            type="password"
                            id="password_confirmation"
                            name="password_confirmation"
                            placeholder="Ulangi password baru"
                            autocomplete="new-password"
                            required
                        >

                        <button
                            type="button"
                            class="toggle-password"
                            data-target="password_confirmation"
                            aria-label="Tampilkan password"
                        >

                            <i class="fa-solid fa-eye"></i>

                        </button>

                    </div>

                </div>


                {{-- PASSWORD INFO --}}

                <div class="password-information">

                    <i class="fa-solid fa-circle-info"></i>

                    <span>
                        Gunakan password yang kuat dan jangan
                        membagikan password kepada orang lain.
                    </span>

                </div>


                {{-- SUBMIT --}}

                <button
                    type="submit"
                    class="super-profile-submit"
                >

                    <i class="fa-solid fa-shield-halved"></i>

                    Ubah Password

                </button>


            </form>

        </div>


    </div>


    {{-- =====================================================
         ACCOUNT SECURITY INFORMATION
    ====================================================== --}}

    <div class="super-profile-security-card">

        <div class="security-icon">

            <i class="fa-solid fa-shield-halved"></i>

        </div>

        <div class="security-content">

            <h3>
                Keamanan Akun
            </h3>

            <p>
                Pastikan hanya Anda yang memiliki akses ke akun
                Super Admin ini. Jangan membagikan username dan
                password kepada siapapun.
            </p>

        </div>

        <div class="security-badge">

            <i class="fa-solid fa-check"></i>

            Akun Aman

        </div>

    </div>


</div>


{{-- =========================================================
     JAVASCRIPT
========================================================== --}}

<script>

document.addEventListener('DOMContentLoaded', function () {


    /*
    |--------------------------------------------------------------------------
    | TOGGLE PASSWORD
    |--------------------------------------------------------------------------
    */

    const toggleButtons =
        document.querySelectorAll('.toggle-password');


    toggleButtons.forEach(function (button) {

        button.addEventListener('click', function () {

            const targetId =
                this.getAttribute('data-target');

            const input =
                document.getElementById(targetId);

            const icon =
                this.querySelector('i');


            if (!input) {
                return;
            }


            if (input.type === 'password') {

                input.type = 'text';

                icon.classList.remove(
                    'fa-eye'
                );

                icon.classList.add(
                    'fa-eye-slash'
                );

            } else {

                input.type = 'password';

                icon.classList.remove(
                    'fa-eye-slash'
                );

                icon.classList.add(
                    'fa-eye'
                );

            }

        });

    });


    /*
    |--------------------------------------------------------------------------
    | PREVIEW FOTO PROFIL
    |--------------------------------------------------------------------------
    */

    const photoInput =
        document.getElementById('foto_profil');

    const photoPreview =
        document.getElementById('profilePreview');

    const photoPlaceholder =
        document.getElementById('profilePlaceholder');


    if (photoInput) {

        photoInput.addEventListener('change', function () {

            const file = this.files[0];


            if (!file) {
                return;
            }


            const allowedTypes = [
                'image/jpeg',
                'image/png',
                'image/webp'
            ];


            if (!allowedTypes.includes(file.type)) {

                alert(
                    'Foto harus berformat JPG, JPEG, PNG, atau WEBP.'
                );

                this.value = '';

                return;
            }


            if (file.size > 2 * 1024 * 1024) {

                alert(
                    'Ukuran foto maksimal 2 MB.'
                );

                this.value = '';

                return;
            }


            const reader =
                new FileReader();


            reader.onload = function (event) {

                if (photoPreview) {

                    photoPreview.src =
                        event.target.result;

                    photoPreview.style.display =
                        'block';

                }


                if (photoPlaceholder) {

                    photoPlaceholder.style.display =
                        'none';

                }

            };


            reader.readAsDataURL(file);


            const removeCheckbox =
                document.getElementById('hapus_foto');


            if (removeCheckbox) {

                removeCheckbox.checked =
                    false;

            }

        });

    }


    /*
    |--------------------------------------------------------------------------
    | HAPUS FOTO
    |--------------------------------------------------------------------------
    */

    const removeCheckbox =
        document.getElementById('hapus_foto');


    if (removeCheckbox) {

        removeCheckbox.addEventListener(
            'change',
            function () {

                if (!this.checked) {
                    return;
                }


                if (photoInput) {

                    photoInput.value = '';

                }


                if (photoPreview) {

                    @if($superAdmin->foto_profil)

                        photoPreview.style.display =
                            'none';

                    @endif

                }


                if (photoPlaceholder) {

                    photoPlaceholder.style.display =
                        'flex';

                }

            }
        );

    }


});

</script>

@endsection