@extends('layouts.app')

{{-- appname --}}
@section('title', config('app.name') . ' - Edit Profile')

@section('content')
    <div class="container py-2">

        <div class="card border-0 shadow-sm rounded-3">

            <div class="card-header bg-white py-3 border-bottom border-light d-flex align-items-center">
                <div class="bg-primary-subtle text-primary p-2 rounded-2 me-3 d-flex align-items-center justify-content-center"
                    style="width: 40px; height: 40px;">
                    <i class="fa-solid fa-user-pen fs-5"></i>
                </div>
                <div>
                    <h5 class="card-title mb-0 fw-semibold">Edit Profil</h5>
                    <small class="text-muted">Perbarui informasi akun Anda di bawah ini.</small>
                </div>
            </div>

            <form id="frmProfile" action="#" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf

                <div class="card-body p-4 p-md-5">

                    {{-- Foto profil --}}
                    <div class="row justify-content-center mb-4">
                        <div class="col-auto text-center">
                            <div class="position-relative d-inline-block shadow-sm rounded-circle p-1 bg-light">
                                <img id="photo-preview"
                                    src="{{ $user->user_photo ? asset($user->user_photo) : asset('assets/images/no_image.png') }}"
                                    class="rounded-circle img-thumbnail"
                                    style="width: 140px; height: 140px; object-fit: cover; cursor: pointer;"
                                    alt="Foto Profil" onclick="document.getElementById('user_photo').click()">

                                <button type="button"
                                    class="btn btn-sm btn-primary position-absolute rounded-circle d-flex align-items-center justify-content-center shadow"
                                    style="bottom: 4px; right: 4px; width: 36px; height: 36px;"
                                    onclick="document.getElementById('user_photo').click()">
                                    <i class="fa fa-camera small"></i>
                                </button>

                                <input type="file" id="user_photo" name="user_photo" accept="image/jpeg,image/png,image/jpg"
                                    class="d-none">
                            </div>
                            <div class="small text-muted mt-2">Klik foto untuk mengubah (JPG/PNG, maks. 500 KB)</div>
                        </div>
                    </div>

                    <hr class="text-muted opacity-25 my-4">

                    <div class="row g-4">

                        <div class="col-md-6">
                            <label for="name" class="form-label fw-semibold text-secondary">
                                Nama Lengkap <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0">
                                    <i class="fa fa-user"></i>
                                </span>
                                <input type="text" class="form-control border-start-0" id="name" name="name"
                                    value="{{ old('name', $user->name) }}" placeholder="Masukkan nama lengkap" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label fw-semibold text-secondary">Alamat Email</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0">
                                    <i class="fa fa-envelope"></i>
                                </span>
                                <input type="email" class="form-control border-start-0 bg-light" id="email" name="email"
                                    value="{{ $user->email }}" readonly>
                            </div>
                            <div class="form-text">Email tidak dapat diubah.</div>
                        </div>

                        <div class="col-md-6">
                            <label for="phone" class="form-label fw-semibold text-secondary">
                                No Handphone <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0">
                                    <i class="fa fa-phone"></i>
                                </span>
                                <input type="tel" class="form-control border-start-0" id="phone" name="phone"
                                    value="{{ old('phone', $user->phone ?? '') }}" placeholder="81234567890" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="gender" class="form-label fw-semibold text-secondary">Jenis Kelamin</label>
                            <select class="form-select" id="gender" name="gender">
                                <option value="">— Pilih —</option>
                                <option value="Laki-laki" @selected(old('gender', $user->gender ?? '') === 'Laki-laki')>
                                    Laki-laki</option>
                                <option value="Perempuan" @selected(old('gender', $user->gender ?? '') === 'Perempuan')>
                                    Perempuan</option>
                            </select>
                        </div>

                    </div>

                    <hr class="text-muted opacity-25 my-4">

                    <h6 class="fw-semibold text-secondary mb-3">Ubah Password <span
                            class="text-muted fw-normal">(opsional)</span></h6>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <label for="password" class="form-label fw-semibold text-secondary">Password Baru</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" class="form-control border-start-0" id="password" name="password"
                                    placeholder="Kosongkan jika tidak diubah" minlength="6" autocomplete="new-password">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="password_confirmation" class="form-label fw-semibold text-secondary">
                                Konfirmasi Password
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted border-end-0">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" class="form-control border-start-0" id="password_confirmation"
                                    name="password_confirmation" placeholder="Ulangi password baru"
                                    autocomplete="new-password">
                            </div>
                        </div>
                    </div>

                </div>

                <div
                    class="card-footer bg-white border-top border-light py-3 px-4 px-md-5 d-flex flex-wrap gap-2 justify-content-end">
                    <a href="{{ route('profile') }}" class="btn btn-outline-secondary">
                        <i class="fa fa-arrow-left me-1"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-primary" id="btnSimpan">
                        <i class="fa fa-save me-1"></i> Simpan Perubahan
                    </button>
                </div>
            </form>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('user_photo').addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (!file) return;

            if (!file.type.match(/^image\/(jpeg|jpg|png)$/)) {
                Swal.fire('Perhatian', 'Format foto harus JPG atau PNG.', 'warning');
                e.target.value = '';
                return;
            }

            if (file.size > 500 * 1024) {
                Swal.fire('Perhatian', 'Ukuran foto maksimal 500 KB.', 'warning');
                e.target.value = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = function (ev) {
                document.getElementById('photo-preview').src = ev.target.result;
            };
            reader.readAsDataURL(file);

            const formData = new FormData();
            formData.append('photo', file);

            $.ajax({
                url: "{{ route('profile.update_photo') }}",
                type: "POST",
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $.blockUI({
                        message: '<i class="fa fa-spinner fa-spin"></i> Please wait...',
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            color: '#fff'
                        }
                    });
                },
                success: function (response) {
                    if (response.code == 200) {
                        if (response.content.data && response.content.data.photo) {
                            document.getElementById('photo-preview').src = response.content.data.photo;
                        }
                        Swal.fire('Berhasil', response.content.message, 'success');
                    } else {
                        Swal.fire('Gagal', response.content.message, 'error');
                    }
                },
                error: function (xhr) {
                    const message = xhr.responseJSON?.content?.message
                        || xhr.responseJSON?.message
                        || 'Terjadi kesalahan saat mengunggah foto';
                    Swal.fire('Gagal', message, 'error');
                },
                complete: function () {
                    $.unblockUI();
                }
            });
        });

        //simpan profile frmProfile
        $("#frmProfile").submit(function (e) {
            e.preventDefault();
            const formData = new FormData(this);
            $.ajax({
                url: "{{ route('profile.simpan') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $.blockUI({
                        message: '<i class="fa fa-spinner fa-spin"></i> Please wait...',
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            color: '#fff'
                        }
                    });
                },
                success: function (response) {
                    if (response.code == 200) {
                        Swal.fire('Berhasil', response.content.message, 'success').then(function () {
                            window.location.href = "{{ route('profile') }}";
                        });
                    } else {
                        Swal.fire('Gagal', response.content.message, 'error');
                    }
                },
                error: function (xhr, status, error) {
                    Swal.fire('Gagal', xhr.responseJSON.content.message, 'error');
                },
                complete: function () {
                    $.unblockUI();
                }
            });
        });
    </script>
@endpush