@extends('layouts.frontend')

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

@section('content')
    <div class="container py-5 mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h4 class="mb-0 fw-bold">Edit Profil</h4>
                    </div>
                    <div class="card-body p-4">
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        <form action="{{ route('pembeli.profile.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col-md-4 text-center mb-4 d-flex flex-column align-items-center">
                                    <div class="position-relative mb-3">
                                        <img id="avatar-preview"
                                            src="{{ $user->foto ? asset('storage/' . $user->foto) : asset('template/frontend/img/avatar.jpg') }}"
                                            class="rounded-circle shadow-sm border"
                                            style="width: 150px; height: 150px; object-fit: cover;">

                                        <div class="position-absolute bottom-0 end-0 bg-primary rounded-circle p-2 border border-white"
                                            style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;">
                                            <i class="fas fa-camera text-white small"></i>
                                        </div>
                                    </div>

                                    <div>
                                        <label class="btn btn-sm btn-outline-primary rounded-pill px-3" for="avatar-input">
                                            <i class="fas fa-upload me-1"></i> Pilih Foto Baru
                                        </label>
                                        <input type="file" name="foto" id="avatar-input" hidden accept="image/*"
                                            onchange="previewImage()">
                                    </div>
                                    <small class="text-muted mt-2" style="font-size: 11px;">Format: JPG, PNG (Max.
                                        2MB)</small>
                                </div>

                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold small text-muted">NAMA LENGKAP</label>
                                        <input type="text" name="nama_lengkap" class="form-control rounded-pill px-3"
                                            value="{{ $user->nama_lengkap }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-bold small text-muted">EMAIL</label>
                                        <input type="email" name="email" class="form-control rounded-pill px-3 bg-light"
                                            value="{{ $user->email }}" required readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-bold small text-muted">NOMOR HP</label>
                                        <input type="text" name="no_hp" class="form-control rounded-pill px-3"
                                            value="{{ $user->no_hp }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-bold small text-muted">ALAMAT PENGIRIMAN DEFAULT</label>
                                        <textarea name="alamat" class="form-control rounded-4 p-3" rows="3" required>{{ $user->alamat }}</textarea>
                                    </div>

                                    <div class="accordion mt-4" id="accordionPassword">
                                        <div class="accordion-item border-0">
                                            <h2 class="accordion-header">
                                                <button
                                                    class="accordion-button collapsed bg-light rounded-3 shadow-none fw-bold text-dark"
                                                    type="button" data-bs-toggle="collapse" data-bs-target="#collapsePass">
                                                    <i class="fas fa-lock me-2 text-primary"></i> Ganti Password (Opsional)
                                                </button>
                                            </h2>
                                            <div id="collapsePass" class="accordion-collapse collapse"
                                                data-bs-parent="#accordionPassword">
                                                <div class="accordion-body px-0">
                                                    <div class="row">
                                                        <div class="col-md-6 mb-3">
                                                            <label class="form-label small text-muted">Password Baru</label>
                                                            <input type="password" name="password"
                                                                class="form-control rounded-pill px-3">
                                                        </div>
                                                        <div class="col-md-6 mb-3">
                                                            <label class="form-label small text-muted">Ulangi
                                                                Password</label>
                                                            <input type="password" name="password_confirmation"
                                                                class="form-control rounded-pill px-3">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-grid mt-4">
                                        <button type="submit" class="btn btn-primary rounded-pill py-3 fw-bold shadow-sm">
                                            <i class="fas fa-save me-2"></i> Simpan Perubahan
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        function previewImage() {
            const input = document.getElementById('avatar-input');
            const preview = document.getElementById('avatar-preview');

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    preview.src = e.target.result;
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection