@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/profil.css') }}">
@endsection

@section('content')

<div class="profil-container">

    {{-- BREADCRUMB --}}
    <div class="breadcrumb">
        <a href="javascript:history.back()">Dashboard</a>
        <span>›</span>
        <span>Profil Saya</span>
    </div>

    <div class="profil-grid">

        {{-- KOLOM KIRI: Avatar + Info Singkat --}}
        <div class="profil-sidebar">

            <div class="avatar-card">

                <div class="avatar-wrapper">
                    <img
                        id="avatarPreview"
                        src="{{ auth()->user()->photo
                            ? asset('storage/'.auth()->user()->photo)
                            : 'https://ui-avatars.com/api/?name='.urlencode(auth()->user()->name).'&background=2e7d32&color=fff&size=200' }}"
                        alt="Foto Profil"
                        class="avatar-img"
                    >
                    <label for="photoInput" class="avatar-edit-btn" title="Ganti foto">
                        📷
                    </label>
                </div>

                <h3 class="avatar-name">{{ auth()->user()->name }}</h3>

                <span class="avatar-role role-{{ auth()->user()->role }}">
                    @if(auth()->user()->role == 'admin') ⚙ Admin
                    @elseif(auth()->user()->role == 'penyuluh') 📋 Penyuluh
                    @else 🌾 Petani
                    @endif
                </span>

                <div class="avatar-info">
                    <div class="ai-row">
                        <span class="ai-icon">📧</span>
                        <span class="ai-val">{{ auth()->user()->email }}</span>
                    </div>
                    <div class="ai-row">
                        <span class="ai-icon">📅</span>
                        <span class="ai-val">Bergabung {{ auth()->user()->created_at->format('M Y') }}</span>
                    </div>
                </div>

            </div>

        </div>

        {{-- KOLOM KANAN: Form Edit --}}
        <div class="profil-main">

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

            {{-- ALERT ERROR --}}
            @if($errors->any())
            <div class="alert alert-danger">
                <strong>⚠ Ada kesalahan:</strong>
                <ul>
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            {{-- FORM UPDATE DATA --}}
            <div class="form-card">

                <div class="form-card-title">
                    <span>👤</span> Edit Informasi Akun
                </div>

                <form action="{{ url('/profil/update') }}" method="POST" enctype="multipart/form-data" id="profilForm">
                    @csrf

                    {{-- Input file tersembunyi --}}
                    <input
                        type="file"
                        id="photoInput"
                        name="photo"
                        accept="image/*"
                        style="display:none"
                        onchange="previewPhoto(this)"
                    >

                    <div class="form-group">
                        <label for="name">Nama Lengkap</label>
                        <input
                            type="text"
                            id="name"
                            name="name"
                            value="{{ old('name', auth()->user()->name) }}"
                            placeholder="Masukkan nama lengkap"
                            required
                            autocomplete="name"
                            class="{{ $errors->has('name') ? 'is-error' : '' }}"
                        >
                        @error('name')
                            <span class="field-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="email">Alamat Email</label>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            value="{{ old('email', auth()->user()->email) }}"
                            placeholder="contoh@email.com"
                            required
                            autocomplete="email"
                            class="{{ $errors->has('email') ? 'is-error' : '' }}"
                        >
                        @error('email')
                            <span class="field-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="no_hp">Nomor HP <span class="optional">(opsional)</span></label>
                        <input
                            type="text"
                            id="no_hp"
                            name="no_hp"
                            value="{{ old('no_hp', auth()->user()->no_hp ?? '') }}"
                            placeholder="08xxxxxxxxxx"
                            autocomplete="tel"
                        >
                    </div>

                    <div class="form-group">
                        <label for="alamat">Alamat <span class="optional">(opsional)</span></label>
                        <textarea
                            id="alamat"
                            name="alamat"
                            placeholder="Desa, Kecamatan, Kabupaten..."
                            rows="3"
                        >{{ old('alamat', auth()->user()->alamat ?? '') }}</textarea>
                    </div>

                    <button type="submit" class="btn-submit">
                        💾 Simpan Perubahan
                    </button>

                </form>

            </div>

            {{-- FORM GANTI PASSWORD --}}
            <div class="form-card">

                <div class="form-card-title">
                    <span>🔑</span> Ganti Password
                </div>

                <form action="{{ url('/profil/password') }}" method="POST">
                    @csrf

                    <div class="form-group">
                        <label for="current_password">Password Saat Ini</label>
                        <div class="input-password">
                            <input
                                type="password"
                                id="current_password"
                                name="current_password"
                                placeholder="Masukkan password lama"
                                autocomplete="current-password"
                                class="{{ $errors->has('current_password') ? 'is-error' : '' }}"
                            >
                            <button type="button" class="toggle-pw" onclick="togglePw('current_password', this)">👁</button>
                        </div>
                        @error('current_password')
                            <span class="field-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="new_password">Password Baru</label>
                        <div class="input-password">
                            <input
                                type="password"
                                id="new_password"
                                name="password"
                                placeholder="Minimal 8 karakter"
                                autocomplete="new-password"
                                class="{{ $errors->has('password') ? 'is-error' : '' }}"
                            >
                            <button type="button" class="toggle-pw" onclick="togglePw('new_password', this)">👁</button>
                        </div>
                        @error('password')
                            <span class="field-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="password_confirmation">Konfirmasi Password Baru</label>
                        <div class="input-password">
                            <input
                                type="password"
                                id="password_confirmation"
                                name="password_confirmation"
                                placeholder="Ulangi password baru"
                                autocomplete="new-password"
                            >
                            <button type="button" class="toggle-pw" onclick="togglePw('password_confirmation', this)">👁</button>
                        </div>
                    </div>

                    <button type="submit" class="btn-submit secondary">
                        🔒 Update Password
                    </button>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection

@section('scripts')
<script>

// Preview foto sebelum upload
function previewPhoto(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('avatarPreview').src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}

// Toggle show/hide password
function togglePw(id, btn) {
    const input = document.getElementById(id);
    if (input.type === 'password') {
        input.type = 'text';
        btn.textContent = '🙈';
    } else {
        input.type = 'password';
        btn.textContent = '👁';
    }
}

</script>
@endsection