@extends('layout.main')

@section('content')
@php
    $desa = $profile?->desaKelurahan;
    $alamatLengkapParts = array_filter([
        $profile?->alamat,
        $desa?->nama,
        $desa?->kecamatan?->nama,
        $desa?->kecamatan?->kabupatenkota?->nama,
        $desa?->kecamatan?->kabupatenkota?->provinsi?->nama,
    ]);
    $alamatLengkap = count($alamatLengkapParts) ? implode(', ', $alamatLengkapParts) : null;
@endphp
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <div class="card mb-6">
                <!-- <div class="user-profile-header-banner">
                    <img src="{{ asset('assets/img/pages/profile-banner.png') }}" alt="Banner image" class="rounded-top" />
                </div> -->
                <div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-5">
                    <!-- <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
                    <img
                        src="../../assets/img/avatars/1.png"
                        alt="user image"
                        class="d-block h-auto ms-0 ms-sm-6 rounded user-profile-img" />
                    </div> -->
                    <div class="flex-grow-1 mt-3 mt-lg-5">
                        <div
                            class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
                            <div class="user-profile-info">
                                <h4 class="mb-2 mt-lg-6">{{ $profile->nama ?? 'Guest' }}</h4>
                                <ul
                                    class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 my-2">
                                    <li class="list-inline-item d-flex gap-2 align-items-center">
                                    <i class="icon-base ti tabler-circles icon-lg"></i
                                    ><span class="fw-medium">{{ $profile->role ?? 'N/A' }}</span>
                                    </li>
                                    <li class="list-inline-item d-flex gap-2 align-items-center">
                                    <i class="icon-base ti tabler-map-pin  icon-lg"></i
                                    ><span class="fw-medium"> {{ $profile->alamat ?? 'N/A' }} </span>
                                    </li>
                                    <li class="list-inline-item d-flex gap-2 align-items-center">
                                    <i class="icon-base ti tabler-calendar  icon-lg"></i
                                    ><span class="fw-medium"> {{ $profile->created_at->format('F j, Y') ?? 'N/A' }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ Header -->

    <!-- Navbar pills -->
    <div class="row">
        <div class="col-md-12">
            <div class="nav-align-top">
                <ul class="nav nav-pills flex-column flex-sm-row mb-6 gap-sm-0 gap-2">
                    <li class="nav-item">
                    <a class="nav-link active" href="javascript:void(0);"
                        ><i class="icon-base ti tabler-user-check icon-sm me-1_5"></i> Profile</a
                    >
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="{{ route('userProfile.security') }}"
                        ><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Keamanan</a
                    >
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--/ Navbar pills -->

    <!-- User Profile Content -->
    <div class="row">
        <div class="col-xl-4 col-lg-5 col-md-5">
            <!-- About User -->
            <div class="card mb-6">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <p class="card-text text-uppercase text-body-secondary small mb-0">Tentang Pengguna</p>
                        @if($profile)
                        <button
                            type="button"
                            class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-1 px-3"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#editProfileOffcanvas"
                            aria-controls="editProfileOffcanvas"
                            title="Edit profil">
                            <i class="icon-base ti tabler-edit icon-sm"></i>
                            <span>Edit</span>
                        </button>
                        @endif
                    </div>
                    <ul class="list-unstyled my-3 py-1">
                        <li class="d-flex align-items-start mb-4">
                            <i class="icon-base ti tabler-user icon-lg"></i
                            ><span class="fw-medium mx-2">Nama Lengkap:</span> <span>{{ $profile->nama ?? 'N/A' }}</span>
                        </li>
                        <li class="d-flex align-items-start mb-4">
                            <i class="icon-base ti tabler-circles icon-lg"></i><span class="fw-medium mx-2">Role:</span>
                            <span>{{ $profile->role ?? 'N/A' }}</span>
                        </li>
                        @if(auth()->user()->role === \App\Enums\Role::PETANI)
                        <li class="d-flex align-items-start mb-4">
                            <i class="icon-base ti tabler-id icon-lg"></i><span class="fw-medium mx-2">No KTP:</span>
                            <span>{{ $profile->ktp ?? 'N/A' }}</span>
                        </li>
                        <li class="d-flex align-items-start mb-4">
                            <i class="icon-base ti tabler-users icon-lg"></i><span class="fw-medium mx-2">No KK:</span>
                            <span>{{ $profile->kk ?? 'N/A' }}</span>
                        </li>
                        @endif
                        <li class="d-flex align-items-start mb-0">
                            <i class="icon-base ti tabler-map-pin icon-lg flex-shrink-0"></i><span class="fw-medium mx-2">Alamat:</span>
                            <span>{{ $alamatLengkap ?? 'N/A' }}</span>
                        </li>
                    </ul>
                    <p class="card-text text-uppercase text-body-secondary small mb-0">Kontak</p>
                    <ul class="list-unstyled my-3 py-1">
                    <li class="d-flex align-items-center mb-4">
                        <i class="icon-base ti tabler-phone-call icon-lg"></i
                        ><span class="fw-medium mx-2">Telepon:</span>
                        <span>{{ $profile->telepon ?? 'N/A' }}</span>
                    </li>
                    <li class="d-flex align-items-center mb-4">
                        <i class="icon-base ti tabler-mail icon-lg"></i><span class="fw-medium mx-2">Email:</span>
                        <span>{{ $profile->email ?? 'N/A' }}</span>
                    </li>
                    </ul>
                    <p class="card-text text-uppercase text-body-secondary small mb-0">Akun</p>
                    <ul class="list-unstyled mb-0 mt-3 pt-1">
                    <li class="d-flex align-items-center mb-4">
                        <i class="icon-base ti tabler-calendar icon-lg"></i>
                        <span class="fw-medium mx-2">Tanggal Akun Dibuat:</span>
                        <span>{{ auth()->user()->created_at?->format('F j, Y') ?? 'N/A' }}</span>
                    </li>
                    <li class="d-flex align-items-center">
                        <i class="icon-base ti tabler-shield-check icon-lg"></i>
                        <span class="fw-medium mx-2">Status Akun:</span>
                        @if(auth()->user()->email_verified_at)
                            <span class="badge bg-label-success">Aktif</span>
                        @else
                            <span class="badge bg-label-warning">Pending Verifikasi</span>
                        @endif
                    </li>
                    </ul>
                </div>
            </div>
            <!--/ About User -->
        </div>
    <div class="col-xl-8 col-lg-7 col-md-7">
        @if(auth()->user()->role === \App\Enums\Role::SUPER_ADMIN)
        <div class="card mb-6">
        <div class="card-header align-items-center">
            <h5 class="card-action-title mb-0">
            <i class="icon-base ti tabler-alert-triangle icon-lg me-4"></i>Ringkasan Data Bermasalah
            </h5>
        </div>
        <div class="card-body">
            <ul class="list-unstyled mb-0">
            @foreach($problemSummary as $problem)
                <li class="d-flex align-items-center justify-content-between gap-3 mb-4">
                    <div class="d-flex align-items-center">
                        <i class="icon-base ti {{ $problem['icon'] }} icon-lg text-body-primary"></i>
                        <span class="fw-medium mx-2">{{ $problem['label'] }}</span>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge bg-label-secondary">{{ number_format($problem['count']) }}</span>
                        <a href="{{ $problem['url'] }}" class="btn btn-sm btn-icon btn-text-secondary rounded-pill">
                            <i class="icon-base ti tabler-arrow-right icon-md"></i>
                        </a>
                    </div>
                </li>
            @endforeach
            </ul>
        </div>
        </div>
        @endif

        <!-- Activity Timeline -->
        <div class="card card-action mb-6">
        <div class="card-header align-items-center">
            <h5 class="card-action-title mb-0">
            <i class="icon-base ti tabler-chart-bar-popular icon-lg me-4"></i>Activity Timeline
            </h5>
            <div class="card-action-element">
            <div class="dropdown">
                <button
                type="button"
                class="btn dropdown-toggle hide-arrow p-0 text-body-secondary"
                data-bs-toggle="dropdown"
                aria-expanded="false"></button>
                <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="javascript:void(0);">Share timeline</a></li>
                <li><a class="dropdown-item" href="javascript:void(0);">Suggest edits</a></li>
                <li>
                    <hr class="dropdown-divider" />
                </li>
                <li><a class="dropdown-item" href="javascript:void(0);">Report bug</a></li>
                </ul>
            </div>
            </div>
        </div>
        <div class="card-body pt-3 activity-timeline-scroll">
            <ul class="timeline mb-0" id="activity-timeline" data-url="{{ route('userProfile.activities') }}">
            @forelse($activities as $activity)
            <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-{{ $activity['color'] }}"></span>
                <div class="timeline-event">
                <div class="timeline-header mb-3">
                    <h6 class="mb-0">{{ $activity['title'] }}</h6>
                    <small class="text-body-secondary">{{ $activity['time'] }}</small>
                </div>
                <p class="mb-2">{{ $activity['description'] }}</p>
                </div>
            </li>
            @empty
            <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-secondary"></span>
                <div class="timeline-event">
                <div class="timeline-header mb-3">
                    <h6 class="mb-0">Belum ada aktivitas</h6>
                    <small class="text-body-secondary">-</small>
                </div>
                <p class="mb-2">Aktivitas akan muncul setelah data dibuat, diubah, atau dihapus.</p>
                </div>
            </li>
            @endforelse
            </ul>
        </div>
        </div>
        <!--/ Activity Timeline -->
    </div>
    </div>
    <!--/ User Profile Content -->

    @if($profile)
    <div
        class="offcanvas offcanvas-end"
        tabindex="-1"
        id="editProfileOffcanvas"
        aria-labelledby="editProfileOffcanvasLabel">
        <div class="offcanvas-header">
            <h5 id="editProfileOffcanvasLabel" class="offcanvas-title">Edit Profil</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form id="profileQuickEditForm" action="{{ route('profile.update', $profile->id) }}" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="desa_kelurahan_id" value="{{ $profile->desa_kelurahan_id }}">

                <div class="mb-4">
                    <label class="form-label" for="quick-profile-nama">Nama Lengkap</label>
                    <input type="text" class="form-control" id="quick-profile-nama" name="nama" value="{{ $profile->nama }}" required>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="quick-profile-role">Role</label>
                    <input type="text" class="form-control" id="quick-profile-role" value="{{ $profile->role ?? '-' }}" disabled>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="quick-profile-email">Email</label>
                    <input type="email" class="form-control" id="quick-profile-email" name="email" value="{{ $profile->email }}" required>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="quick-profile-telepon">Telepon</label>
                    <input type="text" class="form-control" id="quick-profile-telepon" name="telepon" value="{{ $profile->telepon }}" maxlength="13">
                </div>
                @if($profile->role === \App\Enums\Role::PETANI->value)
                <div class="mb-4">
                    <label class="form-label" for="quick-profile-ktp">No KTP</label>
                    <input type="text" class="form-control" id="quick-profile-ktp" name="ktp" value="{{ $profile->ktp }}" maxlength="16">
                </div>               
                <div class="mb-4">
                    <label class="form-label" for="quick-profile-kk">No KK</label>
                    <input type="text" class="form-control" id="quick-profile-kk" name="kk" value="{{ $profile->kk }}" maxlength="16">
                </div>
                @endif
                <div class="mb-4">
                    <label class="form-label" for="quick-profile-alamat">Alamat</label>
                    <textarea class="form-control" id="quick-profile-alamat" name="alamat" rows="4">{{ $profile->alamat }}</textarea>
                    <div class="form-text">Wilayah desa sampai provinsi tetap mengikuti data wilayah profil.</div>
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="icon-base ti tabler-device-floppy icon-xs me-2"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts-head')
<style>
    .activity-timeline-scroll {
        max-height: 500px;
        overflow-y: auto;
        padding-right: 1rem;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const timeline = document.getElementById('activity-timeline');
    const profileQuickEditForm = document.getElementById('profileQuickEditForm');

    if (profileQuickEditForm) {
        profileQuickEditForm.addEventListener('submit', function (event) {
            event.preventDefault();

            fetch(profileQuickEditForm.action, {
                method: 'POST',
                body: new FormData(profileQuickEditForm),
                headers: {
                    Accept: 'application/json'
                }
            })
                .then(function (response) {
                    return response.json().then(function (data) {
                        return { ok: response.ok, data: data };
                    });
                })
                .then(function (result) {
                    if (!result.ok) {
                        const errors = result.data.errors ? Object.values(result.data.errors).flat().join('<br>') : result.data.message;
                        if (window.Swal) {
                            Swal.fire({ icon: 'error', title: 'Gagal!', html: errors || 'Data belum berhasil disimpan.' });
                        } else {
                            alert(errors || 'Data belum berhasil disimpan.');
                        }
                        return;
                    }

                    if (window.Swal) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: result.data.message || 'Profil berhasil diperbarui.',
                            timer: 1500,
                            showConfirmButton: false
                        }).then(function () {
                            window.location.reload();
                        });
                    } else {
                        window.location.reload();
                    }
                })
                .catch(function () {
                    if (window.Swal) {
                        Swal.fire({ icon: 'error', title: 'Gagal!', text: 'Koneksi bermasalah atau terjadi kesalahan server.' });
                    } else {
                        alert('Koneksi bermasalah atau terjadi kesalahan server.');
                    }
                });
        });
    }

    if (!timeline) {
        return;
    }

    const escapeHtml = function (value) {
        return String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    };

    const renderActivities = function (activities) {
        if (!activities.length) {
            timeline.innerHTML = `
                <li class="timeline-item timeline-item-transparent">
                    <span class="timeline-point timeline-point-secondary"></span>
                    <div class="timeline-event">
                        <div class="timeline-header mb-3">
                            <h6 class="mb-0">Belum ada aktivitas</h6>
                            <small class="text-body-secondary">-</small>
                        </div>
                        <p class="mb-2">Aktivitas akan muncul setelah data dibuat, diubah, atau dihapus.</p>
                    </div>
                </li>
            `;
            return;
        }

        timeline.innerHTML = activities.map(function (activity) {
            return `
                <li class="timeline-item timeline-item-transparent">
                    <span class="timeline-point timeline-point-${escapeHtml(activity.color)}"></span>
                    <div class="timeline-event">
                        <div class="timeline-header mb-3">
                            <h6 class="mb-0">${escapeHtml(activity.title)}</h6>
                            <small class="text-body-secondary">${escapeHtml(activity.time)}</small>
                        </div>
                        <p class="mb-2">${escapeHtml(activity.description)}</p>
                    </div>
                </li>
            `;
        }).join('');
    };

    const loadActivities = function () {
        fetch(timeline.dataset.url, {
            headers: {
                Accept: 'application/json'
            }
        })
            .then(function (response) {
                return response.ok ? response.json() : null;
            })
            .then(function (data) {
                if (data && Array.isArray(data.activities)) {
                    renderActivities(data.activities);
                }
            })
            .catch(function () {});
    };

    setInterval(loadActivities, 15000);
});
</script>
@endpush