@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .profile-card {
        border: 1px solid rgba(99,102,241,.12) !important;
        box-shadow: 0 10px 30px rgba(15,23,42,.16);
        transition: all .25s ease;
    }

    .profile-card:hover {
        border-color: rgba(99,102,241,.22) !important;
    }

    .card-header-custom {
        background: transparent;
        border-bottom: 1px solid rgba(148,163,184,.08);
    }

    .profile-avatar {
        width: 78px;
        height: 78px;
        border-radius: 20px;
        background:
            linear-gradient(
                135deg,
                rgba(99,102,241,.18),
                rgba(59,130,246,.18)
            );
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #c7d2fe;
        border: 1px solid rgba(99,102,241,.18);
        flex-shrink: 0;
    }

    .profile-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .profile-meta .name {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
    }

    .profile-meta .role {
        color: #94a3b8;
        font-size: .82rem;
    }

    .profile-info-box {
        background: rgba(15,23,42,.45);
        border: 1px solid rgba(148,163,184,.08);
        border-radius: 14px;
        padding: 1rem;
        height: 100%;
    }

    .profile-info-label {
        font-size: .72rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 6px;
    }

    .profile-info-value {
        color: #fff;
        font-weight: 600;
        word-break: break-word;
    }

    .form-section-title {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 1rem;
    }

    .form-control,
    .form-select {
        border-color: rgba(148,163,184,.12);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(99,102,241,.45);
        box-shadow: 0 0 0 .2rem rgba(99,102,241,.14);
    }
    
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:240px;
                height:240px;
                background:
                radial-gradient(
                    circle,
                    rgba(99,102,241,.16) 0%,
                    transparent 72%
                );
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1">

            <div class="d-flex align-items-center gap-3 flex-wrap">

                <div class="profile-avatar">
                    <i class="ti tabler-user"></i>
                </div>

                <div class="profile-meta">

                    <div class="name">
                        {{ $user->fullname ?: $user->username }}
                    </div>

                    <div class="role">
                        Administrator Profile Management
                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- PROFILE FORM --}}
    <div class="card border-0 shadow-sm overflow-hidden glass-card profile-card">

        <div class="card-header card-header-custom">

            <div>
                <h5 class="mb-1 text-white">
                    Profile Information
                </h5>

                <small class="text-body-secondary">
                    Informasi akun admin dan data kontak.
                </small>
            </div>

        </div>

        <div class="card-body">

            <div class="row g-4 mb-4">

                <div class="col-md-4">

                    <div class="profile-info-box">

                        <div class="profile-info-label">
                            Username
                        </div>

                        <div class="profile-info-value">
                            {{ $user->username }}
                        </div>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="profile-info-box">

                        <div class="profile-info-label">
                            Email
                        </div>

                        <div class="profile-info-value">
                            {{ $user->email ?: '-' }}
                        </div>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="profile-info-box">

                        <div class="profile-info-label">
                            Phone
                        </div>

                        <div class="profile-info-value">
                            {{ $user->no_handphone ?: '-' }}
                        </div>

                    </div>

                </div>

            </div>

            <form method="POST"
                  action="{{ route('admin.profile.update') }}"
                  id="profileForm">

                @csrf
                @method('PUT')

                <div class="form-section-title">
                    Update Account Information
                </div>

                <div class="row g-4">

                    <div class="col-md-6">

                        <label class="form-label text-white">
                            Username
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                <i class="ti tabler-user"></i>
                            </span>

                            <input
                                class="form-control"
                                value="{{ $user->username }}"
                                readonly
                            >

                        </div>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label text-white">
                            Fullname
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                <i class="ti tabler-id"></i>
                            </span>

                            <input
                                type="text"
                                name="fullname"
                                class="form-control"
                                value="{{ old('fullname', $user->fullname) }}"
                                required
                            >

                        </div>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label text-white">
                            Email
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                <i class="ti tabler-mail"></i>
                            </span>

                            <input
                                type="email"
                                name="email"
                                class="form-control"
                                value="{{ old('email', $user->email) }}"
                            >

                        </div>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label text-white">
                            Phone
                        </label>

                        <div class="input-group">

                            <span class="input-group-text">
                                <i class="ti tabler-phone"></i>
                            </span>

                            <input
                                type="text"
                                name="no_handphone"
                                class="form-control"
                                value="{{ old('no_handphone', $user->no_handphone) }}"
                            >

                        </div>

                    </div>

                </div>

                <div class="mt-4 d-flex flex-wrap gap-2">

                    <button class="btn btn-primary px-4"
                            type="submit"
                            id="profileSubmitBtn">

                        <span class="submit-text">
                            <i class="ti tabler-device-floppy me-1"></i>
                            Save Changes
                        </span>

                        <span class="submit-loading d-none">

                            <span class="spinner-border spinner-border-sm me-1"
                                  role="status"
                                  aria-hidden="true"></span>

                            Saving...

                        </span>

                    </button>

                    <a href="{{ route('admin.settings.index') }}"
                       class="btn btn-outline-secondary">

                        <i class="ti tabler-settings me-1"></i>
                        Settings

                    </a>

                </div>

            </form>

        </div>

    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const form =
        document.getElementById('profileForm');

    const btn =
        document.getElementById('profileSubmitBtn');

    if (!form || !btn) {
        return;
    }

    form.addEventListener('submit', function () {

        btn.disabled = true;

        btn.querySelector('.submit-text')
            ?.classList.add('d-none');

        btn.querySelector('.submit-loading')
            ?.classList.remove('d-none');

    });

});
</script>
@endpush