@extends('frontend.template-frontend')
@section('content')
    <section class="mt-20">
        <section class="justify-center flex">
            <div>
                <h1 class="mb-3 mt-4 text-2xl">Penggunaan Dana</h1>
                <div class="flex gap-10 max-w-5xl flex-wrap sm:flex-nowrap md:flex-nowrap w-full">
                    <div class="w-full">
                        @foreach ($data as $item)
                            <div class="mb-5">
                                <div class="border-2 p-5 rounded-md w-full">
                                    <div class="flex gap-5">
                                        <div>
                                            <div class="flex items-center gap-4">
                                                <img class="w-10 h-10 rounded-full"
                                                    src="{{ asset(optional($item->kempen->pengumpul_dana)->photo) }}"
                                                    alt="">
                                                <div class="font-medium dark:text-white">
                                                    <div>{{ optional($item->kempen->pengumpul_dana)->name }} > <span
                                                            class="text-gray-500 font-normal">0
                                                            Minit yang lalu</span>
                                                    </div>
                                                    <div class="text-sm text-gray-500 dark:text-gray-400">Menarik
                                                        sebanyak :
                                                        {{ number_format($item->nominal, 2) }}

                                                    </div>
                                                </div>
                                            </div>
                                            <p class="text-xs mt-3">
                                                {{ $item->keterangan }}
                                            </p>
                                            <button class="bg-orange-200 text-orange-500 px-5 py-1 rounded-md mt-3">Lihat
                                                resit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div>
                        <div
                            class="max-w-full w-96  bg-white border-2 border-gray-200 rounded-lg  dark:bg-gray-600 dark:border-gray-700">
                            <div class="p-5 mt-2">
                                <h4 class="mb-1 text-gray-500">Terkumpul</h4>
                                <div class="flex justify-between mb-1">
                                    <h5 class="text-2xl font-semibold tracking-tight text-gray-700 dark:text-white">
                                        RM.</h5>
                                    <h5 class="text-md tracking-tight text-gray-500 dark:text-white">Had Masa</h5>
                                </div>
                                <div class="flex justify-between">
                                    <p class="font-normal text-gray-500 dark:text-gray-400">dari
                                        RM.0</p>
                                    <p class="font-normal text-gray-500 dark:text-gray-400"></p>
                                </div>
                                <div class="w-full bg-orange-100 rounded-md h-5 mt-5 dark:bg-gray-700">
                                    <div class="bg-orange-400 h-5 rounded-md dark:bg-orange-400" style="width: %"></div>
                                </div>

                            </div>

                            <div class="flex border-t-2 border-b-2 py-3 px-6">
                                <div class="flex gap-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none">
                                        <path
                                            d="M5 21V5C5 4.45 5.196 3.979 5.588 3.587C5.97933 3.19567 6.45 3 7 3H17C17.55 3 18.021 3.19567 18.413 3.587C18.8043 3.979 19 4.45 19 5V21L12 18L5 21Z"
                                            fill="#666666" />
                                        <h4>Simpan</h4>
                                    </svg>
                                </div>
                                <div class="border-r-2 ms-auto"></div>
                                <div class="flex ms-auto gap-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none">
                                        <path
                                            d="M13 13H11V7H13M11 15H13V17H11M15.73 3H8.27L3 8.27V15.73L8.27 21H15.73L21 15.73V8.27L15.73 3Z"
                                            fill="#666666" />
                                    </svg>
                                    <h4>Laporkan</h4>
                                </div>
                            </div>
                            <div class="grid p-5">
                                <h4 class="text-sm">Penggalang dana</h4>
                                <div class="flex gap-3 mt-4">
                                    <div class="border-2 rounded-full p-1">
                                        <img class="w-10 h-10 rounded-full" src="" alt="Rounded avatar">
                                    </div>
                                    <div class="mt-1">
                                        <div class="flex">
                                            <h4 class="font-semibold text-gray-600"></h4>
                                            <svg class="ms-2" xmlns="http://www.w3.org/2000/svg" width="24"
                                                height="24" viewBox="0 0 24 24" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M15.162 2.74432L11.9999 0L8.83783 2.74432L4.58357 2.2918L3.72145 6.27967L0 8.2918L1.76716 12L0 15.7082L3.72145 17.7203L4.58357 21.7082L8.83783 21.2557L11.9999 24L15.162 21.2557L19.4163 21.7082L20.2784 17.7203L23.9999 15.7082L22.2327 12L23.9999 8.2918L20.2784 6.27967L19.4163 2.2918L15.162 2.74432ZM15.5305 8.63087L10.1893 13.5848L8.46927 11.9895C8.3033 11.8355 8.09206 11.7586 7.83556 11.7586C7.57907 11.7586 7.36783 11.8355 7.20186 11.9895C7.03589 12.1434 6.95291 12.3393 6.95291 12.5772C6.95291 12.8151 7.03589 13.011 7.20186 13.165L9.55561 15.3481C9.73667 15.516 9.94791 15.6 10.1893 15.6C10.4307 15.6 10.642 15.516 10.823 15.3481L16.7979 9.80638C16.9639 9.65244 17.0469 9.45652 17.0469 9.21862C17.0469 8.98072 16.9639 8.7848 16.7979 8.63087C16.632 8.47693 16.4207 8.39996 16.1642 8.39996C15.9077 8.39996 15.6965 8.47693 15.5305 8.63087Z"
                                                    fill="#36D27B" />
                                            </svg>
                                        </div>
                                        <span class="text-light text-xs"> </span>
                                    </div>
                                </div>
                            </div>
                            <a href="" class="grid px-5 py-2 border-t-2">
                                <div class="flex gap-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                        viewBox="0 0 32 32" fill="none">
                                        <path
                                            d="M28.5002 23.9997V9.83301H30.1668V23.9997C30.1668 25.1902 29.1907 26.1663 28.0002 26.1663H5.8335V24.4997H28.0002H28.5002V23.9997ZM24.8335 7.99967V18.6663C24.8335 19.8569 23.8574 20.833 22.6668 20.833H4.00016C2.80964 20.833 1.8335 19.8569 1.8335 18.6663V7.99967C1.8335 6.80915 2.80964 5.83301 4.00016 5.83301H22.6668C23.8574 5.83301 24.8335 6.80915 24.8335 7.99967ZM8.8335 13.333C8.8335 15.8225 10.844 17.833 13.3335 17.833C15.823 17.833 17.8335 15.8225 17.8335 13.333C17.8335 10.8435 15.823 8.83301 13.3335 8.83301C10.844 8.83301 8.8335 10.8435 8.8335 13.333Z"
                                            stroke="#FF8651" />
                                    </svg>
                                    <h4 class="mt-1 text-gray-700">Lihat Penggunaan Dana</h4>
                                    <div class="ms-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                            viewBox="0 0 32 32" fill="none">
                                            <path
                                                d="M12.4134 8.94637C12.2898 9.06972 12.1917 9.21624 12.1248 9.37754C12.0579 9.53884 12.0234 9.71175 12.0234 9.88637C12.0234 10.061 12.0579 10.2339 12.1248 10.3952C12.1917 10.5565 12.2898 10.703 12.4134 10.8264L17.5867 15.9997L12.4134 21.173C12.1641 21.4223 12.024 21.7605 12.024 22.113C12.024 22.4656 12.1641 22.8037 12.4134 23.053C12.6627 23.3023 13.0008 23.4424 13.3534 23.4424C13.7059 23.4424 14.0441 23.3023 14.2934 23.053L20.4134 16.933C20.537 16.8097 20.635 16.6632 20.7019 16.5019C20.7688 16.3406 20.8033 16.1677 20.8033 15.993C20.8033 15.8184 20.7688 15.6455 20.7019 15.4842C20.635 15.3229 20.537 15.1764 20.4134 15.053L14.2934 8.93304C13.7867 8.42637 12.9334 8.42637 12.4134 8.94637Z"
                                                fill="#5B5B5B" />
                                        </svg>
                                    </div>
                                </div>
                            </a>
                            <a href="" class="grid px-5 py-2 border-t-2">
                                <div class="flex gap-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                        viewBox="0 0 32 32" fill="none">
                                        <path
                                            d="M7.49984 22.6667V23.1667H7.99984H14.6665H15.1665V22.6667V20V19.5H14.6665H7.99984H7.49984V20V22.6667ZM20.8332 22.6667V23.1667H21.3332H23.9998H24.4998V22.6667V20V19.5H23.9998H21.3332H20.8332V20V22.6667ZM7.49984 17.3333V17.8333H7.99984H14.6665H15.1665V17.3333V14.6667V14.1667H14.6665H7.99984H7.49984V14.6667V17.3333ZM20.8332 17.3333V17.8333H21.3332H23.9998H24.4998V17.3333V9.33333V8.83333H23.9998H21.3332H20.8332V9.33333V17.3333ZM7.49984 12V12.5H7.99984H14.6665H15.1665V12V9.33333V8.83333H14.6665H7.99984H7.49984V9.33333V12ZM5.33317 27.5C4.73337 27.5 4.23272 27.2924 3.80406 26.8638C3.37432 26.434 3.1665 25.9329 3.1665 25.3333V6.66667C3.1665 6.06712 3.37432 5.56596 3.80406 5.13622C4.23272 4.70755 4.73337 4.5 5.33317 4.5H26.6665C27.2663 4.5 27.7675 4.70756 28.1972 5.13646C28.6258 5.56601 28.8332 6.0671 28.8332 6.66667V25.3333C28.8332 25.933 28.6257 26.4342 28.1969 26.8638C27.7673 27.2925 27.2662 27.5 26.6665 27.5H5.33317Z"
                                            stroke="#FF8651" />
                                    </svg>
                                    <h4 class="mt-1 text-gray-700">Lihat Penggunaan Dana</h4>
                                    <div class="ms-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                            viewBox="0 0 32 32" fill="none">
                                            <path
                                                d="M12.4134 8.94637C12.2898 9.06972 12.1917 9.21624 12.1248 9.37754C12.0579 9.53884 12.0234 9.71175 12.0234 9.88637C12.0234 10.061 12.0579 10.2339 12.1248 10.3952C12.1917 10.5565 12.2898 10.703 12.4134 10.8264L17.5867 15.9997L12.4134 21.173C12.1641 21.4223 12.024 21.7605 12.024 22.113C12.024 22.4656 12.1641 22.8037 12.4134 23.053C12.6627 23.3023 13.0008 23.4424 13.3534 23.4424C13.7059 23.4424 14.0441 23.3023 14.2934 23.053L20.4134 16.933C20.537 16.8097 20.635 16.6632 20.7019 16.5019C20.7688 16.3406 20.8033 16.1677 20.8033 15.993C20.8033 15.8184 20.7688 15.6455 20.7019 15.4842C20.635 15.3229 20.537 15.1764 20.4134 15.053L14.2934 8.93304C13.7867 8.42637 12.9334 8.42637 12.4134 8.94637Z"
                                                fill="#5B5B5B" />
                                        </svg>
                                    </div>
                                </div>
                            </a>
                            <a href="" class="grid px-5 py-2 border-t-2">
                                <div class="flex gap-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                        viewBox="0 0 32 32" fill="none">
                                        <path
                                            d="M17.7842 5.33485C18.9112 4.65587 20.1908 4.31374 21.6269 4.31374C22.4984 4.31374 23.4795 4.54377 24.576 5.05376L24.576 5.05379L24.5804 5.05577C25.6765 5.55284 26.5198 6.1274 27.1298 6.76933C28.4081 8.36549 28.9439 10.2166 28.7556 12.3547C28.5501 14.5368 27.8378 16.1858 26.6523 17.3347L26.6522 17.3346L26.6467 17.3402L16.5267 27.4602C16.3777 27.6092 16.1901 27.6871 15.9336 27.6871C15.6825 27.6871 15.5063 27.6127 15.3538 27.4602L15.3514 27.4578C15.2772 27.3847 15.219 27.297 15.1804 27.2004C15.1417 27.1037 15.1234 27.0001 15.1266 26.896L15.1269 26.8882V26.8804C15.1269 26.6239 15.2048 26.4363 15.3538 26.2873L21.4635 20.1776C21.6838 19.9797 21.8702 19.7081 21.8702 19.3621C21.8702 19.0187 21.6856 18.7387 21.4738 18.5269C21.262 18.315 20.9819 18.1304 20.6386 18.1304C20.2925 18.1304 20.0209 18.3168 19.823 18.5371L13.7133 24.6468L13.7121 24.6481C13.6374 24.7234 13.5479 24.7823 13.4493 24.8212C13.3506 24.8601 13.245 24.8781 13.1391 24.8741L13.1297 24.8737H13.1202C12.8692 24.8737 12.693 24.7994 12.5405 24.6468L12.538 24.6444C12.4639 24.5713 12.4057 24.4837 12.367 24.387C12.3284 24.2904 12.3101 24.1867 12.3133 24.0827L12.3136 24.0749V24.0671C12.3136 23.8106 12.3915 23.6229 12.5404 23.474L18.6542 17.3602C18.8844 17.1447 19.0769 16.8572 19.0769 16.5004C19.0769 16.1473 18.8883 15.862 18.6612 15.6472C18.4626 15.436 18.1935 15.2504 17.8502 15.2504C17.5055 15.2504 17.2285 15.4384 17.02 15.6468L17.0181 15.6488L10.9011 21.8324C10.8245 21.9069 10.734 21.9654 10.6346 22.0045C10.5342 22.0441 10.4269 22.0632 10.3191 22.0606L10.3191 22.0604H10.3069C10.0572 22.0604 9.85861 21.9861 9.67359 21.8204C9.50895 21.6622 9.43356 21.4875 9.43356 21.2537C9.43356 21.0283 9.51613 20.8183 9.72711 20.6073L15.8604 14.474C16.0722 14.2622 16.2569 13.9821 16.2569 13.6387C16.2569 13.2859 16.0631 13.0105 15.8372 12.8117C15.6152 12.6164 15.3391 12.4671 15.0186 12.4671C14.6912 12.4671 14.418 12.6224 14.2073 12.8329C14.2071 12.8331 14.2069 12.8333 14.2067 12.8335L8.02947 18.9708C7.80034 19.1768 7.61059 19.2471 7.44023 19.2471C7.19802 19.2471 7.02228 19.1667 6.88652 19.0083L6.8782 18.9986L6.86939 18.9894C6.70135 18.8125 6.62023 18.6146 6.62023 18.3737C6.62023 18.1362 6.69863 17.9558 6.86045 17.794L6.8616 17.7928C10.5152 14.1153 12.915 11.7451 14.0626 10.6326L18.462 14.9826L18.4619 14.9827L18.4694 14.9898C19.0784 15.5675 19.8002 15.8737 20.6669 15.8737C21.7594 15.8737 22.6427 15.4246 23.2837 14.5491L23.2885 14.5425L23.2931 14.5357C23.7397 13.8819 23.9005 13.1523 23.7739 12.3614C23.6514 11.5956 23.3256 10.9409 22.7989 10.3987L22.7989 10.3987L22.7955 10.3952L17.7842 5.33485ZM13.7133 7.64685L4.64871 16.7115C3.84222 15.6933 3.34526 14.21 3.21926 12.1827L3.21925 12.1825C3.08056 9.96346 3.68008 8.05695 4.9964 6.45819C6.48891 4.98603 8.25122 4.24707 10.3069 4.24707C12.3848 4.24707 14.1358 4.99219 15.5755 6.46938L15.5755 6.46941L15.58 6.47396L21.2733 12.1673C21.4259 12.3198 21.5002 12.496 21.5002 12.7471C21.5002 13.0009 21.4239 13.1873 21.278 13.3355C21.118 13.4852 20.9352 13.5671 20.6669 13.5671C20.4457 13.5671 20.2613 13.4905 20.0954 13.3351L14.4209 7.64727L14.0673 7.29288L13.7133 7.64685Z"
                                            stroke="#FF8651" />
                                    </svg>
                                    <h4 class="mt-1 text-gray-700">Lihat Penggunaan Dana</h4>
                                    <div class="ms-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                            viewBox="0 0 32 32" fill="none">
                                            <path
                                                d="M12.4134 8.94637C12.2898 9.06972 12.1917 9.21624 12.1248 9.37754C12.0579 9.53884 12.0234 9.71175 12.0234 9.88637C12.0234 10.061 12.0579 10.2339 12.1248 10.3952C12.1917 10.5565 12.2898 10.703 12.4134 10.8264L17.5867 15.9997L12.4134 21.173C12.1641 21.4223 12.024 21.7605 12.024 22.113C12.024 22.4656 12.1641 22.8037 12.4134 23.053C12.6627 23.3023 13.0008 23.4424 13.3534 23.4424C13.7059 23.4424 14.0441 23.3023 14.2934 23.053L20.4134 16.933C20.537 16.8097 20.635 16.6632 20.7019 16.5019C20.7688 16.3406 20.8033 16.1677 20.8033 15.993C20.8033 15.8184 20.7688 15.6455 20.7019 15.4842C20.635 15.3229 20.537 15.1764 20.4134 15.053L14.2934 8.93304C13.7867 8.42637 12.9334 8.42637 12.4134 8.94637Z"
                                                fill="#5B5B5B" />
                                        </svg>
                                    </div>
                                </div>
                            </a>
                            <div class="flex p-4 border-t">
                                <button data-modal-target="social-modal" data-modal-toggle="social-modal"
                                    class="bg-transparent border-2 rounded-md hover:bg-orange-50 transition border-orange-400 px-8 py-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none">
                                        <path
                                            d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.35C15.11 18.56 15.08 18.78 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08Z"
                                            fill="#FF8651" />
                                    </svg>
                                </button>
                                <button id="btn_derma"
                                    class="bg-orange-400 hover:bg-orange-500 transition text-white px-12 rounded-md ms-auto">Derma
                                    Sekarang</button>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endsection