@extends('layouts.app')

@section('content')
    <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
        <div
            class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
            <h4 class="mb-6 text-xl font-bold text-black dark:text-white">
                Suara
            </h4>

            <div class="flex flex-col">
                <div class="mb-4  flex gap-2 w-full justify-between">
                    <div class="flex gap-2">
                        <form class="relative ">
                            <input type="q" placeholder="Cari..." name="q" value="{{ request('q') }}"
                                class="rounded-lg border border-stroke bg-transparent py-2 px-4 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary" />

                            <span class="absolute right-2 top-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2"
                                        d="m5 27l7.5-7.5M28 13a9 9 0 1 1-18 0a9 9 0 0 1 18 0" />
                                </svg>
                            </span>
                        </form>
                    </div>

                </div>

                <!-- Table -->
                <div class="overflow-x-auto">
                    <table class="w-full table-auto">
                        <thead>
                            <tr class="bg-gray-2 text-left dark:bg-meta-4">
                                <th class="min-w-[220px] px-4 py-4 font-medium text-black dark:text-white ">
                                    No
                                </th>
                                <th class="min-w-[150px] px-4 py-4 font-medium text-black dark:text-white">
                                    TPS
                                </th>
                                <th class="min-w-[150px] px-4 py-4 font-medium text-black dark:text-white">
                                    Total Suara
                                </th>
                                <th class="min-w-[150px] px-4 py-4 font-medium text-black dark:text-white">
                                    User
                                </th>
                                <th class="min-w-[150px] px-4 py-4 font-medium text-black dark:text-white">
                                    Kelurahan/Desa
                                </th>
                                <th class="min-w-[150px] px-4 py-4 font-medium text-black dark:text-white">
                                    Kecamatan
                                </th>
                                <th class="min-w-[150px] px-4 py-4 font-medium text-black dark:text-white">
                                    Kabupaten/Kota
                                </th>
                                <th class="px-4 py-4 font-medium text-black dark:text-white">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($datas as $data)
                                <tr>
                                    <td class="border-b border-[#eee] px-4 py-5  dark:border-strokedark ">
                                        <p class="font-medium text-black dark:text-white">
                                            {{ $loop->iteration + $datas->firstItem() - 1 }}
                                        </p>
                                    </td>
                                    <td class="border-b border-[#eee] px-4 py-5  dark:border-strokedark ">
                                        <p class="font-medium text-black dark:text-white">
                                            {{ $data->tps->nomor }}
                                        </p>
                                    </td>
                                    <td class="border-b border-[#eee] px-4 py-5  dark:border-strokedark ">
                                        <p class="font-medium text-black dark:text-white">
                                            {{ $data->total_suara }}
                                        </p>
                                    </td>
                                    <td class="border-b border-[#eee] px-4 py-5  dark:border-strokedark ">
                                        <p class="font-medium text-black dark:text-white">
                                            {{ $data->user->nama }}
                                        </p>
                                    </td>
                                    <td class="border-b border-[#eee] px-4 py-5  dark:border-strokedark ">
                                        <p class="font-medium text-black dark:text-white">
                                            {{ $data->tps->kelurahan_desa->nama }}
                                        </p>
                                    </td>
                                    <td class="border-b border-[#eee] px-4 py-5  dark:border-strokedark ">
                                        <p class="font-medium text-black dark:text-white">
                                            {{ $data->tps->kelurahan_desa->kecamatan->nama }}
                                        </p>
                                    </td>
                                    <td class="border-b border-[#eee] px-4 py-5  dark:border-strokedark ">
                                        <p class="font-medium text-black dark:text-white">
                                            {{ $data->tps->kelurahan_desa->kecamatan->kabupaten_kota->nama }}
                                        </p>
                                    </td>
                                    <td class="border-b border-[#eee] px-4 py-5 dark:border-strokedark">
                                        <div class="flex items-center space-x-3.5">
                                            @if ($data->status == 'pending')
                                                <form action="{{ route('suara.status', $data->id) }}" method="POST"
                                                    class="flex items-center space-x-3.5">
                                                    @csrf
                                                    <button class="hover:text-success pt-1" name="status" value="approve">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="fill-current"
                                                            width="18" height="18" width="18" height="18"
                                                            viewBox="0 0 2048 2048" fill="none">
                                                            <path fill=""
                                                                d="M640 1755L19 1133l90-90l531 530L1939 275l90 90z" />
                                                        </svg>
                                                    </button>
                                                    <button class="hover:text-danger pt-1" name="status" value="reject">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="fill-current"
                                                            width="18" height="18" width="18" height="18"
                                                            viewBox="0 0 2048 2048" fill="none">
                                                            <path fill=""
                                                                d="m1115 1024l690 691l-90 90l-691-690l-691 690l-90-90l690-691l-690-691l90-90l691 690l691-690l90 90z" />
                                                        </svg>
                                                    </button>
                                                </form>
                                            @else
                                                <p class="p-1">
                                                    {{ $data->status }}
                                                </p>
                                            @endif

                                            <a href="{{ route('suara.show', $data->id) }}" class="hover:text-primary">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="fill-current" width="18" height="18" width="18" height="18"
                                                    viewBox="0 0 24 24">
                                                    <path fill="currentColor"
                                                        d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5" />
                                                </svg>
                                            </a>
                                            <form action="{{ route('suara.destroy', $data->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button class="hover:text-danger pt-1">
                                                    <svg class="fill-current" width="18" height="18"
                                                        viewBox="0 0 18 18" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M13.7535 2.47502H11.5879V1.9969C11.5879 1.15315 10.9129 0.478149 10.0691 0.478149H7.90352C7.05977 0.478149 6.38477 1.15315 6.38477 1.9969V2.47502H4.21914C3.40352 2.47502 2.72852 3.15002 2.72852 3.96565V4.8094C2.72852 5.42815 3.09414 5.9344 3.62852 6.1594L4.07852 15.4688C4.13477 16.6219 5.09102 17.5219 6.24414 17.5219H11.7004C12.8535 17.5219 13.8098 16.6219 13.866 15.4688L14.3441 6.13127C14.8785 5.90627 15.2441 5.3719 15.2441 4.78127V3.93752C15.2441 3.15002 14.5691 2.47502 13.7535 2.47502ZM7.67852 1.9969C7.67852 1.85627 7.79102 1.74377 7.93164 1.74377H10.0973C10.2379 1.74377 10.3504 1.85627 10.3504 1.9969V2.47502H7.70664V1.9969H7.67852ZM4.02227 3.96565C4.02227 3.85315 4.10664 3.74065 4.24727 3.74065H13.7535C13.866 3.74065 13.9785 3.82502 13.9785 3.96565V4.8094C13.9785 4.9219 13.8941 5.0344 13.7535 5.0344H4.24727C4.13477 5.0344 4.02227 4.95002 4.02227 4.8094V3.96565ZM11.7285 16.2563H6.27227C5.79414 16.2563 5.40039 15.8906 5.37227 15.3844L4.95039 6.2719H13.0785L12.6566 15.3844C12.6004 15.8625 12.2066 16.2563 11.7285 16.2563Z"
                                                            fill=""></path>
                                                        <path
                                                            d="M9.00039 9.11255C8.66289 9.11255 8.35352 9.3938 8.35352 9.75942V13.3313C8.35352 13.6688 8.63477 13.9782 9.00039 13.9782C9.33789 13.9782 9.64727 13.6969 9.64727 13.3313V9.75942C9.64727 9.3938 9.33789 9.11255 9.00039 9.11255Z"
                                                            fill=""></path>
                                                        <path
                                                            d="M11.2502 9.67504C10.8846 9.64692 10.6033 9.90004 10.5752 10.2657L10.4064 12.7407C10.3783 13.0782 10.6314 13.3875 10.9971 13.4157C11.0252 13.4157 11.0252 13.4157 11.0533 13.4157C11.3908 13.4157 11.6721 13.1625 11.6721 12.825L11.8408 10.35C11.8408 9.98442 11.5877 9.70317 11.2502 9.67504Z"
                                                            fill=""></path>
                                                        <path
                                                            d="M6.72245 9.67504C6.38495 9.70317 6.1037 10.0125 6.13182 10.35L6.3287 12.825C6.35683 13.1625 6.63808 13.4157 6.94745 13.4157C6.97558 13.4157 6.97558 13.4157 7.0037 13.4157C7.3412 13.3875 7.62245 13.0782 7.59433 12.7407L7.39745 10.2657C7.39745 9.90004 7.08808 9.64692 6.72245 9.67504Z"
                                                            fill=""></path>
                                                    </svg>
                                                </button>
                                            </form>

                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4 dark:text-white">
                                        Data tidak ditemukan
                                    </td>
                                </tr>
                            @endforelse

                        </tbody>

                    </table>
                </div>
                <div class="mt-4 py-2 px-4">
                    {!! $datas->links() !!}
                </div>
            </div>
        </div>


    </div>
@endsection