@extends('backend.template-admin')

@section('content')
    <div class="flex gap-4 justify-between">
        <button
            class="bg-orange-100 mb-10 hover:bg-orange-200 transition text-sm px-4 py-2 rounded-md text-orange-500 border-2 border-orange-300"><a
                href="/admin/kempen/usahawan-sosial/store">Tambah Kempen Baru</a></button>
        <div class="group">
            <button id="btn_penerima"
                class="bg-orange-100 mb-10 hover:bg-orange-200 transition text-sm px-4 py-2 rounded-md text-orange-500 border-2 border-orange-300">
                Daftar Penerima
            </button>
            <button id="btn_pengumpul_dana"
                class="bg-orange-100 mb-10 hover:bg-orange-200 transition text-sm px-4 py-2 rounded-md text-orange-500 border-2 border-orange-300">
                Daftar
                Pengumpul
            </button>
            <button
                class="bg-orange-100 mb-10 hover:bg-orange-200 transition text-sm px-4 py-2 rounded-md text-orange-500 border-2 border-orange-300">
                <a href="/admin/kempen/usahawan-sosial/categories">Daftar Kategori</a>
            </button>
        </div>

    </div>

    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        No
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Judul
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Photo
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Video
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Status
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Latar Belakang
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Penerima
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Pengumpul
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Target derma
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Derma terkumpul
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Tanggal berakhir
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody>
                @php
                    $no = 1;
                @endphp
                @foreach ($data as $item)
                    @if ($item->jenis_kempen == 'usahawan_sosial')
                        <tr
                            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                            <th scope="row"
                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ $no++ }}
                            </th>
                            <th scope="row"
                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ Str::limit($item->judul, 10, '...') }}
                            </th>
                            <td class="px-6 py-4">
                                <img data-tooltip-target="tooltip-roberta" class="w-12 rounded"
                                    src="{{ asset($item->cover) }}" alt="Medium avatar">
                            </td>
                            <td class="px-6 py-4">
                                <a href="#" data-modal-target="popup-modal-{{ $item->id }}"
                                    data-modal-toggle="popup-modal-{{ $item->id }}"
                                    class="text-orange-500 hover:underline"><i class="fa-solid fa-video"></i></a>
                            </td>
                            <th scope="row"
                                class="px-6 py-4 font-normal text-gray-900 whitespace-nowrap dark:text-white">
                                @if ($item->status == 'terbaharu')
                                    <span
                                        class="bg-orange-100 text-sm px-4 py-1 rounded-md text-orange-500">terbaharu</span>
                                @elseif ($item->status == 'sedang_berlangsung')
                                    <span class="bg-lime-100 text-sm px-4 py-1 rounded-md text-lime-500">sedang
                                        berlangsung</span>
                                @elseif ($item->status == 'tamat')
                                    <span class="bg-stone-100 text-sm px-4 py-1 rounded-md text-stone-500">tamat</span>
                                @endif
                            </th>
                            <th scope="row"
                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                <p class="block">
                                    {{ Str::limit($item->latar_belakang, 50, '...') }}
                                </p>
                            </th>
                            <td class="px-6 py-4">
                                @if ($item->penerima)
                                    {{ $item->penerima->name }}
                                @else
                                    Data Penerima Tidak Ditemukan
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                @if ($item->pengumpul_dana)
                                    {{ $item->pengumpul_dana->name }}
                                @else
                                    Data Pengumpul Dana Tidak Ditemukan
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->target_derma }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->derma_terkumpul }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $item->tanggal_berakhir }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex gap-4">
                                    @php
                                        $enId = $item->id;
                                    @endphp
                                    <a href="/admin/kempen/usahawan-sosial/edit/{{ $enId }}"
                                        class="font-medium text-gray-600 dark:text-gray-500 hover:underline">
                                        <i class="fa fa-pencil"></i>
                                    </a>
                                    <a onclick="return confirm('are you sure delete this data ? {{ $item->judul }}')"
                                        href="/admin/kempen/misi-sumbangan/delete/{{ $item->id }}"
                                        class="font-medium text-gray-600 dark:text-gray-500 hover:underline">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>

                        <div id="popup-modal-{{ $item->id }}" tabindex="-1"
                            class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
                            <div class="relative p-4 w-full max-w-[90%] max-h-full"> <!-- Perubahan di sini -->
                                <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                                    <button type="button"
                                        class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                                        data-modal-hide="popup-modal-{{ $item->id }}">
                                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                            fill="none" viewBox="0 0 14 14">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                        </svg>
                                        <span class="sr-only">Close modal</span>
                                    </button>
                                    <div class="p-4 md:p-5 text-center">
                                        <div class="mt-7 mb-5 px-5 py-2">
                                            <iframe width="100%" height="480"
                                                src="https://www.youtube.com/embed/{{ $item->video }}" frameborder="0"
                                                allowfullscreen></iframe> <!-- Sesuaikan di sini -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </tbody>
        </table>
    </div>
    <script>
        document.getElementById("btn_pengumpul_dana").onclick = function() {
            location.href = "/admin/another-menu/pengumpul-dana";
        };
        document.getElementById("btn_penerima").onclick = function() {
            location.href = "/admin/another-menu/penerima";
        };
    </script>
@endsection