@extends('app')
@section('content')
<div class="container delete-user-dashboard">
    <div class="image-container text-center mt-4">
        <img loading="auto|eager|lazy" src="{{ Vite::asset('resources/images/logo_image.webp') }}" alt="">
    </div>
    <div class="mt-4">
        <div class="mb-3">
            <h4 class="text-blue">Donor dashboard</h4>
        </div>
        @if ($sponsor)
        <div class="user-banner">
            <div class="d-flex align-items-center">
                <div class="p-3">
                    @php
                        $imageUrl = $sponsor->profile_image && Storage::exists('public/sponsor_profile_image/' . $sponsor->profile_image)
                            ? asset('storage/sponsor_profile_image/' . $sponsor->profile_image)
                            : Vite::asset('resources/images/profile_img.webp');
                    @endphp
                    <img id="user-profile-image" src="{{ $imageUrl }}" class="organization-image img-fluid" alt="User Image">
                </div>
                <div class="py-2">
                    <h6 class="text-light mb-0" id="delete-dashboard-name">
                        {{ $sponsor->first_name . ' ' . $sponsor->last_name }}
                    </h6>
                    <div>
                        <small class="text-brown" id="delete-dashboard-email">{{ $sponsor->email }}</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-end mt-4">
            <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop"
                data-sponsor-id="{{ $sponsor->id }}">Delete Account</button>
        </div>
    @endif



        <!-- Button trigger modal -->
        <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            Launch static backdrop modal
        </button> -->

        <!-- Modal -->
        <div class="modal fade mobile-confirm-pop" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel">Delete Account</h6>
                    <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
                </div>
                <div class="modal-body">
                    Are you sure you want to delete your account? If you delete your account, your data will be lost, and you won't be able to login or register again.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-sm btn-success" id="delete-sponsor"  data-sponsor-id="{{ $sponsor->id }}">Yes</button>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
@vite(['resources/js/mobile/delete_user.js'])
@endsection