{{-- ====================================================================================================
FILE        : resources/views/profile/edit.blade.php
PEMBUAT     : Joudie Posumah (Dipercantik oleh AI Assistant)
MODUL       : Profile - Edit Profil + Upload Foto + Ubah Password
TAHUN       : 2026

PERBAIKAN:
- Responsive design mobile-first (Android optimal)
- Layout 2-kolom mobile, 3-kolom desktop 
- Visual modern dengan gradient, shadow, hover effects
- Spacing & typography yang lebih nyaman
- Loading states & micro-interactions
- Performance optimization
==================================================================================================== --}}

@extends('layouts.dashboard')

@section('title', 'Profil Saya')
@section('page-title', 'Profil Saya')

@section('content')
<div class="container-fluid px-3 px-md-4 py-4">
    {{-- Notifikasi --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li class="small">{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @php
        /** @var \App\Models\Anggota $user */
        $user = $user ?? auth()->user();
        $fotoSrc = null;
        if (!empty($user->foto_render)) {
            $fotoSrc = $user->foto_render;
        } elseif (!empty($user->foto)) {
            $filename = basename((string) $user->foto);
            $fotoSrc = route('pasfoto.show', ['filename' => $filename]);
        }
    @endphp

    <div class="row g-3 g-lg-4 profile-grid">
        
        {{-- FOTO PROFIL - FULL WIDTH MOBILE --}}
        <div class="col-12">
            <div class="card border-0 shadow-lg h-100 overflow-hidden profile-photo-card">
                <div class="card-header bg-gradient-primary text-white py-3 position-relative">
                    <h5 class="mb-0 fw-bold d-flex align-items-center">
                        <i class="bi bi-person-circle fs-5 me-2"></i>
                        Foto Profil
                    </h5>
                </div>

                <div class="card-body p-4 text-center">
                    <div class="profile-avatar-container position-relative mx-auto mb-4">
                        @if(!empty($fotoSrc))
                            <img src="{{ $fotoSrc }}"
                                 alt="Foto {{ $user->nama_lengkap }}"
                                 class="profile-avatar img-fluid rounded-super-circle shadow-xl"
                                 style="width:140px;height:140px;object-fit:cover;"
                                 onerror="handleProfilePhotoError(this)">
                            
                            <div class="avatar-ring"></div>
                            <div class="avatar-status bg-success"></div>
                        @else
                            <div class="profile-avatar-placeholder">
                                <i class="bi bi-person-circle fs-1 text-muted"></i>
                                <div class="mt-2 small text-muted fw-medium">Tambahkan Foto Profil</div>
                            </div>
                        @endif

                        @if(!empty($user->foto))
                            <div class="filename-badge mt-2 mx-auto">
                                <!-- <small class="text-truncate d-block text-muted">{{ basename($user->foto) }}</small> -->
                            </div>
                        @endif
                    </div>

                    {{-- Upload Form --}}
                    <form method="POST" action="{{ route('profile.photo.update') }}" enctype="multipart/form-data" 
                          class="upload-form needs-validation" novalidate>
                        @csrf
                        
                        <div class="mb-3">
                            <label for="foto_profile" class="form-label fw-semibold text-dark mb-2">
                                <i class="bi bi-cloud-upload me-1"></i> Upload Foto Baru
                            </label>
                            <input type="file" name="foto" id="foto_profile" 
                                   class="form-control form-control-lg @error('foto') is-invalid @enderror"
                                   accept="image/jpeg,image/jpg,image/png" required>
                            @error('foto')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Preview --}}
                        <div class="preview-container mb-4">
                            <div id="profile-preview-empty" class="preview-placeholder">
                                <i class="bi bi-image fs-3 text-muted"></i>
                                <div class="small text-muted mt-1">Preview foto</div>
                            </div>
                            <img id="profile-preview-img" src="" alt="Preview" 
                                 class="preview-img rounded-super-circle shadow d-none"
                                 style="width:100px;height:100px;object-fit:cover;">
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 upload-btn shadow-sm">
                            <span class="btn-text"><i class="bi bi-upload me-2"></i>Simpan Foto</span>
                            <span class="btn-loading d-none">
                                <span class="spinner-border spinner-border-sm me-2"></span>Mengunggah...
                            </span>
                        </button>

                        <div class="form-text small text-muted mt-3 text-center">
                            <i class="bi bi-info-circle-fill me-1"></i>
                            JPG/PNG, maksimal 2MB, ukuran persegi disarankan
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- DATA UTAMA & PASSWORD - 50/50 MOBILE, 1/3 DESKTOP --}}
        <div class="col-12 col-lg-8">
            <div class="row g-3">
                {{-- DATA UTAMA --}}
                <div class="col-12 col-lg-8">
                    <div class="card border-0 shadow-lg h-100 main-data-card">
                        <div class="card-header bg-primary text-white py-3">
                            <h5 class="mb-0 fw-bold">
                                <i class="bi bi-card-text me-2"></i>Data Utama
                            </h5>
                        </div>

                        <div class="card-body p-4">
                            @if ($errors->utama->any())
                                <div class="alert alert-danger border-0 shadow-sm mb-4 p-3">
                                    <i class="bi bi-exclamation-triangle me-2"></i>
                                    <ul class="mb-0 small">
                                        @foreach ($errors->utama->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form method="POST" action="{{ route('profile.update') }}" class="main-form">
                                @csrf @method('PATCH')
                                <input type="hidden" name="_section" value="utama">

                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label fw-semibold text-muted mb-2 small">NIK</label>
                                        <input type="text" class="form-control form-control-lg bg-light" 
                                               value="{{ $user->nik }}" disabled>
                                    </div>

                                    <div class="col-12">
                                        <label for="nama_lengkap" class="form-label fw-semibold mb-2">Nama Lengkap</label>
                                        <input type="text" name="nama_lengkap" id="nama_lengkap"
                                               class="form-control form-control-lg @error('nama_lengkap','utama') is-invalid @enderror"
                                               value="{{ old('nama_lengkap', $user->nama_lengkap) }}" required>
                                        @error('nama_lengkap','utama')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="nomor_wa" class="form-label fw-semibold mb-2">Nomor WA</label>
                                        <input type="tel" name="nomor_wa" id="nomor_wa"
                                               class="form-control form-control-lg @error('nomor_wa','utama') is-invalid @enderror"
                                               value="{{ old('nomor_wa', $user->nomor_wa) }}" placeholder="08xxxxxxxxx">
                                        @error('nomor_wa','utama')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="email" class="form-label fw-semibold mb-2">Email</label>
                                        <input type="email" name="email" id="email"
                                               class="form-control form-control-lg @error('email','utama') is-invalid @enderror"
                                               value="{{ old('email', $user->email) }}">
                                        @error('email','utama')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <label for="detail_alamat" class="form-label fw-semibold mb-2">Alamat Lengkap</label>
                                        <textarea name="detail_alamat" id="detail_alamat" rows="3"
                                                  class="form-control form-control-lg @error('detail_alamat','utama') is-invalid @enderror"
                                                  placeholder="Masukkan alamat lengkap Anda">{{ old('detail_alamat', $user->detail_alamat) }}</textarea>
                                        @error('detail_alamat','utama')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mt-4 pt-3 border-top">
                                    <button type="submit" class="btn btn-primary btn-lg w-100 shadow-sm save-btn">
                                        <i class="bi bi-check-circle me-2"></i>Simpan Data Utama
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- UBAH PASSWORD --}}
                <div class="col-12 col-lg-4">
                    <div class="card border-0 shadow-lg h-100 password-card">
                        <div class="card-header bg-gradient-danger text-white py-3">
                            <h6 class="mb-0 fw-bold d-flex align-items-center">
                                <i class="bi bi-shield-lock-fill me-2"></i>Ubah Password
                            </h6>
                        </div>

                        <div class="card-body p-4">
                            <form method="POST" action="{{ route('profile.password.update') }}" 
                                  class="needs-validation password-form" novalidate>
                                @csrf

                                <div class="mb-4">
                                    <label for="current_password" class="form-label fw-semibold mb-2">Password Lama</label>
                                    <input type="password" name="current_password" id="current_password"
                                           class="form-control form-control-lg @error('current_password') is-invalid @enderror"
                                           required>
                                    @error('current_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="password" class="form-label fw-semibold mb-2">Password Baru</label>
                                    <input type="password" name="password" id="password"
                                           class="form-control form-control-lg @error('password') is-invalid @enderror"
                                           minlength="8" required>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Minimal 8 karakter, kombinasi huruf & angka</div>
                                </div>

                                <div class="mb-4">
                                    <label for="password_confirmation" class="form-label fw-semibold mb-2">Konfirmasi Password</label>
                                    <input type="password" name="password_confirmation" id="password_confirmation"
                                           class="form-control form-control-lg" minlength="8" required>
                                </div>

                                <button type="submit" class="btn btn-outline-danger btn-lg w-100 shadow-sm">
                                    <i class="bi bi-arrow-clockwise me-2"></i>Update Password
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- INFORMASI TAMBAHAN - FULL WIDTH MOBILE, 1/3 DESKTOP --}}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-lg h-100 additional-info-card">
                <div class="card-header bg-gradient-info text-white py-3">
                    <h6 class="mb-0 fw-bold">
                        <i class="bi bi-info-circle-fill me-2"></i>Informasi Tambahan
                    </h6>
                </div>

                <div class="card-body p-4">
                    @if ($errors->tambahan->any())
                        <div class="alert alert-danger border-0 shadow-sm mb-4 p-3">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <ul class="mb-0 small">
                                @foreach ($errors->tambahan->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('profile.update') }}" class="additional-form">
                        @csrf @method('PATCH')
                        <input type="hidden" name="_section" value="tambahan">

                        <div class="row g-3 mb-4">
                            @php $fields = [
                                ['status_rumah', 'Status Rumah', [
                                    '' => 'Pilih', 'M' => 'Milik Sendiri', 'S' => 'Sewa', 'N' => 'Menumpang'
                                ]],
                                ['status_tanah_pekarangan', 'Status Tanah', [
                                    '' => 'Pilih', 'M' => 'Memiliki', 'B' => 'Belum Memiliki'
                                ]],
                                ['akses_listrik', 'Listrik', [
                                    '' => 'Pilih', 'A' => 'Ada', 'T' => 'Tidak'
                                ]],
                                ['akses_air_bersih', 'Air Bersih', [
                                    '' => 'Pilih', 'A' => 'Ada', 'T' => 'Tidak'
                                ]],
                                ['bpjs_kesehatan', 'BPJS Kesehatan', [
                                    '' => 'Pilih', 'Y' => 'Peserta', 'T' => 'Tidak'
                                ]],
                                ['bpjs_ketenagakerjaan', 'BPJS Ketenagakerjaan', [
                                    '' => 'Pilih', 'Y' => 'Peserta', 'T' => 'Tidak'
                                ]],
                                ['kartu_kusuka', 'Kartu Kusuka', [
                                    '' => 'Pilih', 'Y' => 'Memiliki', 'T' => 'Belum Memiliki'
                                ]]
                            ]; @endphp

                            @foreach($fields as $field)
                                <div class="col-12">
                                    <label for="{{ $field[0] }}" class="form-label fw-semibold mb-2 small">
                                        {{ $field[1] }}
                                    </label>
                                    <select name="{{ $field[0] }}" id="{{ $field[0] }}"
                                            class="form-select form-select-lg @error($field[0],'tambahan') is-invalid @enderror">
                                        @foreach($field[2] as $value => $label)
                                            <option value="{{ $value }}" 
                                                    {{ old($field[0], $user->{$field[0]}) == $value ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error($field[0],'tambahan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endforeach
                        </div>

                        <button type="submit" class="btn btn-outline-primary btn-lg w-100 shadow-sm">
                            <i class="bi bi-save me-2"></i>Simpan Informasi
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --border-radius: 20px;
}

.profile-grid { min-height: 80vh; }
.bg-gradient-primary { background: var(--primary-gradient) !important; }
.bg-gradient-danger { background: var(--danger-gradient) !important; }
.bg-gradient-info { background: var(--info-gradient) !important; }

.profile-photo-card,
.main-data-card,
.password-card,
.additional-info-card { 
    border-radius: var(--border-radius); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.profile-photo-card:hover,
.main-data-card:hover,
.password-card:hover,
.additional-info-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.profile-avatar-container {
    width: 160px; height: 160px;
}

.profile-avatar {
    transition: transform 0.3s ease;
}

.profile-avatar:hover { transform: scale(1.05); }

.rounded-super-circle {
    border-radius: 50% !important;
    border: 4px solid rgba(255,255,255,0.9);
}

.avatar-ring {
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border: 3px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57) 0 0 / 300% 300%;
    animation: ringRotate 3s linear infinite;
    z-index: -1;
}

@keyframes ringRotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.avatar-status {
    position: absolute; bottom: 8px; right: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    border: 3px solid white;
}

.profile-avatar-placeholder {
    width: 140px; height: 140px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px dashed #cbd5e1;
}

.filename-badge {
    max-width: 200px; background: rgba(0,0,0,0.03);
    padding: 0.375rem 0.75rem; border-radius: 20px;
}

.preview-container { 
    background: #f8fafc; 
    border-radius: 16px; 
    padding: 1.5rem; 
    border: 2px dashed #e2e8f0;
    transition: all 0.3s ease;
}

.preview-container:hover { border-color: #3b82f6; }

.preview-img { 
    transition: transform 0.3s ease; 
    border: 3px solid white;
}

.preview-img:hover { transform: scale(1.05); }

.preview-placeholder {
    color: #94a3b8; min-height: 100px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

.btn-lg { 
    padding: 0.875rem 2rem; 
    font-weight: 600; 
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

.form-control-lg {
    padding: 0.75rem 1rem; 
    border-radius: 12px; 
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-control-lg:focus {
    border-color: #3b82f6; box-shadow: 0 0 0 0.25rem rgba(59,130,246,0.1);
}

.form-select-lg { 
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    background-size: 1.25rem;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .profile-grid { margin-top: 1rem; }
    .container-fluid { padding-left: 1rem; padding-right: 1rem; }
    .profile-avatar-container { width: 130px; height: 130px; }
    .card-body { padding: 1.5rem !important; }
    .form-control-lg, .form-select-lg { font-size: 16px; } /* Prevent zoom */
}

/* Desktop Enhancements */
@media (min-width: 1200px) {
    .profile-grid { max-width: 1200px; margin: 0 auto; }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enhanced Bootstrap validation
    const forms = document.querySelectorAll('.needs-validation, .main-form, .additional-form');
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            if (!this.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
            }
            this.classList.add('was-validated');
        }, false);
    });

    // Advanced photo preview with validation
    const fotoInput = document.getElementById('foto_profile');
    const previewImg = document.getElementById('profile-preview-img');
    const previewEmpty = document.getElementById('profile-preview-empty');
    const uploadBtn = document.querySelector('.upload-btn');
    const btnText = uploadBtn.querySelector('.btn-text');
    const btnLoading = uploadBtn.querySelector('.btn-loading');

    if (fotoInput) {
        fotoInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            
            // Reset preview
            previewImg.classList.add('d-none');
            previewEmpty.classList.remove('d-none');
            
            if (!file) return;

            // Size validation
            if (file.size > 2 * 1024 * 1024) {
                alert('Ukuran file maksimal 2MB!');
                this.value = '';
                return;
            }

            // Type validation
            const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
            if (!validTypes.includes(file.type)) {
                alert('Hanya JPG/PNG yang diperbolehkan!');
                this.value = '';
                return;
            }

            // Show preview
            const reader = new FileReader();
            reader.onload = function(event) {
                previewImg.src = event.target.result;
                previewImg.classList.remove('d-none');
                previewEmpty.classList.add('d-none');
            };
            reader.readAsDataURL(file);
        });
    }

    // Form submission loading states
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            const submitBtn = this.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Menyimpan...';
            }
        });
    });

    // Profile photo error handler
    window.handleProfilePhotoError = function(img) {
        img.style.display = 'none';
        const fallback = document.querySelector('.profile-avatar-placeholder');
        if (fallback) fallback.style.display = 'flex';
    }
});
</script>
@endpush