@extends('frontend.template-frontend')
@section('content')
    <section class="mt-20">
        <div class="flex justify-center">
            <div class="max-w-3xl p-3">
                <div class="flex gap-4 bg-orange-100 px-7 rounded-md">
                    <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M53 69L42.125 58.125C41.2083 57.2083 40.0833 56.75 38.75 56.75C37.4167 56.75 36.25 57.25 35.25 58.25C34.3333 59.1667 33.875 60.3333 33.875 61.75C33.875 63.1667 34.3333 64.3333 35.25 65.25L49.5 79.5C50.4167 80.4167 51.5833 80.875 53 80.875C54.4167 80.875 55.5833 80.4167 56.5 79.5L84.875 51.125C85.7917 50.2083 86.25 49.0833 86.25 47.75C86.25 46.4167 85.75 45.25 84.75 44.25C83.8333 43.3333 82.6667 42.875 81.25 42.875C79.8333 42.875 78.6667 43.3333 77.75 44.25L53 69ZM60 110C53.0833 110 46.5833 108.687 40.5 106.06C34.4167 103.437 29.125 99.875 24.625 95.375C20.125 90.875 16.5633 85.5833 13.94 79.5C11.3133 73.4167 10 66.9167 10 60C10 53.0833 11.3133 46.5833 13.94 40.5C16.5633 34.4167 20.125 29.125 24.625 24.625C29.125 20.125 34.4167 16.5617 40.5 13.935C46.5833 11.3117 53.0833 10 60 10C66.9167 10 73.4167 11.3117 79.5 13.935C85.5833 16.5617 90.875 20.125 95.375 24.625C99.875 29.125 103.437 34.4167 106.06 40.5C108.687 46.5833 110 53.0833 110 60C110 66.9167 108.687 73.4167 106.06 79.5C103.437 85.5833 99.875 90.875 95.375 95.375C90.875 99.875 85.5833 103.437 79.5 106.06C73.4167 108.687 66.9167 110 60 110Z"
                            fill="#33BC50" />
                    </svg>
                    <div class="mt-7 text-xs sm:text-base">
                        <h4>Terima kasih</h4>
                        <span>Derma anda sebanyak RM {{ number_format($valueCharity, 2) }} kepada
                            “{{ $campaign->penerima->name }}”
                            telah
                            diterima. Semoga bantuan anda dapat
                            memberikan manfaat kepada penerima derma</span>
                    </div>
                </div>
                <div class="mt-5">
                    <h4 class="sm:text-xl text-sm">Detail Donasi</h4>
                    <p class="mt-3 text-xs sm:text-sm">*Setiap derma yang berjaya akan disenaraikan di log derma anda, anda
                        boleh menyemak
                        log derma anda
                        di aplikasi. Klik disini untuk muat-turun aplikasi</p>
                </div>
                <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
                <div class="mt-4">
                    <div class="flex justify-between mb-3">
                        <h4>Jumlah Derma</h4>
                        <h4>RM{{ number_format($valueCharity, 2) }}</h4>
                    </div>
                    <div class="flex justify-between mb-3">
                        <h4>Kaedah Pembayaran</h4>
                        <h4>Saldo MyCharity</h4>
                    </div>
                    <div class="flex justify-between mb-3">
                        <h4>Status Nama</h4>
                        {{-- <h4>Disamarkan</h4> --}}
                        @if ($hiddenName == 1)
                            <h4>Disamarkan</h4>
                        @else
                            {{ Auth::user()->name }}
                        @endif
                    </div>
                </div>
                <div class="mt-8">
                    <h4>Doa & Harapan </h4>
                    <textarea readonly id="message" rows="4"
                        class="block mt-2 p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{ $prayerMessage }}</textarea>
                </div>
            </div>
        </div>
    </section>
@endsection