@extends('layouts.app')

@section('content')
    <div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
    <div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
        <main>


            <div class="pt-6 px-4">

                <div>
                    <ol class="list-reset flex text-grey-dark mb-4 rounded">
                        <li class="bg-gray-500 py-2 px-4 rounded text-white"><a href="/"><i
                                    class="far fa-folder mr-2"></i>Home</a></li>
                        <li class="mt-2"><span class="mx-2"><i class="fas fa-angle-double-right"></i></span></li>
                        <li class="bg-yellow-600 py-2 px-4 rounded text-white"><a href="#"><i
                                    class="mr-2 fas fa-toolbox"></i>Poskod</a></li>
                    </ol>
                </div>

                <div class="container w-full max-w-xl mx-auto mt-7 px-4 font-sans"
                    route="http://admin-portal.test/pelanggan">
                    <form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" action="{{ request()->url() }}">
                        <div class="mb-4 w-96 mx-auto"><label class="block text-gray-500 font-medium text-sm mb-2">Kata
                                Kunci</label>
                            <div class="flex flex-wrap">
                                <div class="flex flex-row w-96 mx-auto">
                                    <div class="flex flex-col w-96">
                                        <input id="query_string" type="text" name="query_string"
                                            value="{{ $query_string }}" placeholder="Masukkan Poskod, Daerah, atau Negeri"
                                            class="mr-2 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500">
                                        <div role="menu" aria-orientation="vertical" aria-labelledby="menu-button"
                                            tabindex="-1"
                                            class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden">
                                            <div role="none" class="py-1"></div>
                                        </div>
                                    </div>
                                    <button type="submit" id="buttonsearch" class="px-4 py-2 bg-blue-600 rounded ml-2"><i
                                            class="fas fa-search text-white"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="container mx-auto px-5 my-5">

                    <article class="mt-8 lg:mt-5 prose prose-sm lg:prose-lg">
                        <div class="flex flex-row flex-row-reverse">
                            <div class="basis-o">
                                <button
                                    @php
                                        $create_route = "window.location.href = '". route('poskod.create') . '\'';
                                    @endphp
                                    onclick="{{$create_route}}"
                                    class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded mb-5">
                                    <div class="flex">
                                        <span class="pr-2">
                                            Tambah Poskod
                                        </span>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                                            class="w-6 h-6">
                                            <path fill-rule="evenodd"
                                                d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </button>
                            </div>
                        </div>
                        <table class="min-w-full leading-normal">
                            <thead class="text-center">
                                <tr>
                                    <th
                                        class="font-extrabold px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                        Poskod
                                    </th>
                                    <th
                                        class="font-extrabold px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                        Daerah
                                    </th>
                                    <th
                                        class="font-extrabold px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                        Negeri
                                    </th>
                                    <th
                                        class="font-extrabold px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($postcodes['data'] as $postcode)
                                    <tr>
                                        <td
                                            class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            {{ $postcode['poskod'] }}
                                        </td>
                                        <td
                                            class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            {{ $postcode['daerah']['namadaerah'] }}
                                        </td>
                                        <td
                                            class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            {{ $postcode['negeri']['negeri'] }}
                                        </td>
                                        <td
                                            class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-yellow-600 uppercase tracking-wider">
                                            <a href="{{ route('poskod.edit', $postcode['poskod']) }}">edit</a>
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>

                        </table>
                        <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
                            <div class="flex flex-1 justify-between sm:hidden">
                                @php
                                    $previous_page_number = $postcodes['current_page'] === 1 ? '' : $postcodes['current_page'] - 1;
                                @endphp
                                <a href="{{ request()->url() . '?page=' . $previous_page_number . '&query_string=' . $query_string }}"
                                    class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
                                @php
                                    $next_page_number = $postcodes['current_page'] === $postcodes['last_page'] ? '' : $postcodes['current_page'] + 1;
                                @endphp
                                <a href="{{ request()->url() . '?page=' . $next_page_number . '&query_string=' . $query_string }}"
                                    class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
                            </div>
                            <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                                <div>
                                    <p class="text-sm text-gray-700">
                                        Showing
                                        <!-- space -->
                                        <span class="font-medium">{{ $postcodes['from'] }}</span>
                                        <!-- space -->
                                        to
                                        <!-- space -->
                                        <span class="font-medium">{{ $postcodes['to'] }}</span>
                                        <!-- space -->
                                        of
                                        <!-- space -->
                                        <span class="font-medium">{{ $postcodes['total'] }}</span>
                                        <!-- space -->
                                        results
                                    </p>
                                </div>
                                <div>
                                    <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm"
                                        aria-label="Pagination">
                                        @php
                                            $previous_page_number = $postcodes['current_page'] === 1 ? '' : $postcodes['current_page'] - 1;
                                        @endphp
                                        <a href="{{ request()->url() . '?page=' . $next_page_number . '&query_string=' . $query_string }}"
                                            class="relative
                                            inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset
                                            ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                                            <span class="sr-only">Previous</span>
                                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd"
                                                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                        </a>

                                        @foreach ($paginator as $page_number)
                                            @php
                                                $is_current_page = $page_number === $postcodes['current_page'];
                                                $determined_classes = $is_current_page ? $current_page_classes : $unselected_page_classes;
                                            @endphp
                                            <a href="{{ request()->url() . '?page=' . $page_number . '&query_string=' . $query_string }}"
                                                class="{{ $determined_classes }}">{{ $page_number }}</a>
                                        @endforeach

                                        @php
                                            $next_page_number = $postcodes['current_page'] === $postcodes['last_page'] ? '' : $postcodes['current_page'] + 1;
                                        @endphp
                                        <a href="{{ request()->url() . '?page=' . $next_page_number . '&query_string=' . $query_string }}"
                                            class="relative
                                            inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset
                                            ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                                            <span class="sr-only">Next</span>
                                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd"
                                                    d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                        </a>

                                    </nav>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </main>
        @include('layouts.footer')
    @endsection