@extends('admin.layout.content')

@section('content')
<div class="content-manager-container px-3 py-4">

    {{-- Flash Messages --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
            <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
            <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
        <div>
            <h2 class="content-manager-title h3 mb-1">Profil Admin</h2>
            <p class="text-muted mb-0">Kelola informasi profil dan foto Anda</p>
        </div>
    </div>

    <div class="row g-4">
        {{-- Avatar Card --}}
        <div class="col-12 col-md-4">
            <div class="content-manager-card p-4 text-center">
                <div class="position-relative d-inline-block mb-3">
                    @if($profile && $profile->avatar_url)
                        <img src="{{ $profile->avatar_url }}"
                            alt="Foto Profil"
                            class="rounded-circle border border-3 border-success"
                            style="width:150px;height:150px;object-fit:cover;" />
                    @else
                        @php $initial = strtoupper(substr($user->username ?? 'A', 0, 1)); @endphp
                        <div class="rounded-circle border border-3 border-success d-flex align-items-center justify-content-center fw-bold text-white mx-auto"
                            style="width:150px;height:150px;background:linear-gradient(135deg,#10b981,#059669);font-size:3.5rem;">
                            {{ $initial }}
                        </div>
                    @endif

                    {{-- Pencil / Edit Button --}}
                    <button type="button" class="btn btn-sm rounded-circle position-absolute border-0 shadow"
                        style="bottom:5px;right:5px;width:38px;height:38px;background:#10b981;color:#fff;"
                        id="btnEditAvatar" title="Ubah Foto Profil">
                        <span class="material-symbols-outlined" style="font-size:20px;">edit</span>
                    </button>
                </div>

                {{-- Avatar Action Buttons --}}
                <div id="avatarActions" class="d-none mt-2">
                    <form id="formUploadAvatar" action="{{ route('admin.profile.upload-avatar') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="file" name="avatar" id="inputAvatar" accept="image/*" class="d-none">
                        <button type="button" class="btn btn-sm btn-modern-primary me-1" id="btnChooseFile">
                            <span class="material-symbols-outlined align-middle me-1" style="font-size:16px;">photo_camera</span>
                            Pilih Foto
                        </button>
                        <button type="submit" class="btn btn-sm btn-success d-none" id="btnSubmitAvatar">
                            <span class="material-symbols-outlined align-middle me-1" style="font-size:16px;">upload</span>
                            Upload
                        </button>
                    </form>

                    @if($profile && $profile->avatar_url)
                        <form action="{{ route('admin.profile.delete-avatar') }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus foto profil?')">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-danger mt-2">
                                <span class="material-symbols-outlined align-middle me-1" style="font-size:16px;">delete</span>
                                Hapus Foto
                            </button>
                        </form>
                    @endif
                </div>

                {{-- Selected file preview --}}
                <div id="filePreview" class="d-none mt-2">
                    <small class="text-muted" id="fileName"></small>
                </div>

                <h5 class="fw-bold mt-3 mb-1">{{ $user->username ?? '-' }}</h5>
            </div>
        </div>

        {{-- Profile Info Card --}}
        <div class="col-12 col-md-8">
            <div class="content-manager-card p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold mb-0">
                        <span class="material-symbols-outlined align-middle me-1" style="font-size:20px;color:#10b981;">person</span>
                        Informasi Profil
                    </h6>
                    <button type="button" class="btn btn-sm btn-modern-primary" id="btnEditProfile">
                        <span class="material-symbols-outlined align-middle me-1" style="font-size:16px;">edit</span>
                        Edit
                    </button>
                </div>

                <form id="formUpdateProfile" action="{{ route('admin.profile.update') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row g-3">
                        <div class="col-12 col-sm-6">
                            <label class="form-label small fw-semibold text-muted">Username <span class="text-danger">*</span></label>
                            <input type="text" name="username" class="form-control profile-field" value="{{ old('username', $user->username ?? '') }}" required maxlength="100" disabled style="background:#f9fafb;">
                        </div>
                        <div class="col-12 col-sm-6">
                            <label class="form-label small fw-semibold text-muted">Email</label>
                            <input type="email" class="form-control" value="{{ $user->email ?? '-' }}" disabled style="background:#f9fafb;" readonly>
                        </div>
                        <div class="col-12 col-sm-6">
                            <label class="form-label small fw-semibold text-muted">Nomor Telepon</label>
                            <input type="text" name="phone" class="form-control profile-field" value="{{ old('phone', $user->phone_number ?? '') }}" maxlength="20" disabled style="background:#f9fafb;">
                        </div>
                        <div class="col-12 col-sm-6">
                            <label class="form-label small fw-semibold text-muted">Nama Lengkap</label>
                            <input type="text" name="full_name" class="form-control profile-field" value="{{ old('full_name', $profile->full_name ?? '') }}" maxlength="100" disabled style="background:#f9fafb;">
                        </div>
                        <div class="col-12 col-sm-6">
                            <label class="form-label small fw-semibold text-muted">Jenis Kelamin</label>
                            <select name="gender" class="form-select profile-field" disabled style="background:#f9fafb;">
                                <option value="">-- Pilih --</option>
                                <option value="male" {{ ($profile->gender ?? '') === 'male' ? 'selected' : '' }}>Laki-laki</option>
                                <option value="female" {{ ($profile->gender ?? '') === 'female' ? 'selected' : '' }}>Perempuan</option>
                            </select>
                        </div>
                        <div class="col-12 col-sm-6">
                            <label class="form-label small fw-semibold text-muted">Tanggal Lahir</label>
                            <input type="date" name="birth_date" class="form-control profile-field" value="{{ old('birth_date', $profile->birth_date ? $profile->birth_date->format('Y-m-d') : '') }}" disabled style="background:#f9fafb;">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">Bio</label>
                            <textarea name="bio" class="form-control profile-field" rows="3" maxlength="500" disabled style="background:#f9fafb;">{{ old('bio', $profile->bio ?? '') }}</textarea>
                        </div>
                    </div>

                    {{-- Tombol Simpan --}}
                    <div id="btnSaveWrapper" class="d-none mt-3 text-end">
                        <button type="button" class="btn btn-modern-secondary me-2" id="btnCancelEdit">Batal</button>
                        <button type="submit" class="btn btn-success">
                            <span class="material-symbols-outlined align-middle me-1" style="font-size:16px;">save</span>
                            Simpan Perubahan
                        </button>
                    </div>
                </form>

                @if($errors->any())
                    <div class="mt-3">
                        @foreach($errors->all() as $error)
                            <div class="text-danger small">{{ $error }}</div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ========== Avatar Actions ==========
    const btnEditAvatar = document.getElementById('btnEditAvatar');
    const avatarActions = document.getElementById('avatarActions');
    const inputAvatar = document.getElementById('inputAvatar');
    const btnChooseFile = document.getElementById('btnChooseFile');
    const btnSubmitAvatar = document.getElementById('btnSubmitAvatar');
    const filePreview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');

    btnEditAvatar.addEventListener('click', function() {
        avatarActions.classList.toggle('d-none');
    });

    btnChooseFile.addEventListener('click', function() {
        inputAvatar.click();
    });

    inputAvatar.addEventListener('change', function() {
        if (this.files && this.files.length > 0) {
            fileName.textContent = this.files[0].name;
            filePreview.classList.remove('d-none');
            btnSubmitAvatar.classList.remove('d-none');
        }
    });

    // ========== Profile Edit Mode ==========
    const btnEditProfile = document.getElementById('btnEditProfile');
    const btnCancelEdit = document.getElementById('btnCancelEdit');
    const btnSaveWrapper = document.getElementById('btnSaveWrapper');
    const profileFields = document.querySelectorAll('.profile-field');

    btnEditProfile.addEventListener('click', function() {
        profileFields.forEach(function(field) {
            field.disabled = false;
            field.style.background = '#fff';
        });
        btnSaveWrapper.classList.remove('d-none');
        btnEditProfile.classList.add('d-none');
    });

    btnCancelEdit.addEventListener('click', function() {
        profileFields.forEach(function(field) {
            field.disabled = true;
            field.style.background = '#f9fafb';
        });
        btnSaveWrapper.classList.add('d-none');
        btnEditProfile.classList.remove('d-none');
        // Reset to original values
        document.getElementById('formUpdateProfile').reset();
    });

    // ========== Auto close flash alerts ==========
    document.querySelectorAll('.flash-alert').forEach(function(alert) {
        setTimeout(function() {
            var bsAlert = bootstrap.Alert.getOrCreateInstance(alert);
            if (bsAlert) bsAlert.close();
        }, 5000);
    });
});
</script>
@endsection