@extends('admin.layout.index')
@section('title', 'Bölgeler')
@section('content')
    <div class="flex items-center justify-end mb-4 gap-4">
        <a href="{{ site('admin/regions/new') }}" class="border border-green-300 bg-green-50 hover:bg-green-200 px-4 py-2 rounded-md">
            Ekle
        </a>
    </div>
    <section class="relative overflow-x-auto border border-gray-100 sm:rounded-lg">
        <table class="w-full text-sm text-left text-gray-500">
            <thead class="text-xs text-gray-700 uppercase bg-gray-200/20">
            <tr>
                <th scope="col" class="px-6 py-3">
                    Sıra
                </th>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center">
                        Bölge Adı
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center">
                        Üst Bölge
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center">
                        Bölge Türü
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <span class="sr-only">Edit</span>
                </th>
            </tr>
            </thead>
            <tbody>
                @foreach($regions as $key => $region)
                    <tr class="bg-white border-b border-b-gray-100 last:border-b-transparent">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                            {{ ($key + ($page * $how_many) - $how_many) + 1 }}
                        </th>
                        <td class="px-6 py-4">
                            {{ $region->name }}
                        </td>
                        <td class="px-6 py-4">
                            @if($region->top != 0)
                                {!!
                                    db('region')->where('id', $region->top)->get()->first()->name
                                    ??
                                    '<span class="bg-red-100 border border-red-300 px-3 py-0.5 rounded-full text-red-600 inline-flex items-center justify-center gap-1">
                                        <i class="icon-alert-circle"></i>
                                        <span>Silinmiş</span>
                                    </span>'
                                !!}
                            @else
                                <span class="bg-blue-100 border border-blue-300 px-3 py-0.5 rounded-full text-blue-600 inline-flex items-center justify-center gap-2">
                                    <i class="icon-x-square"></i>
                                    <span>Yok</span>
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            @if($region->type == 'country')
                                <span class="bg-blue-100 border border-blue-300 px-3 py-0.5 rounded-full text-blue-600 inline-flex items-center justify-center gap-2">
                                    <i class="icon-layers-three-01"></i>
                                    <span>Ülke</span>
                                </span>
                            @else
                                <span class="bg-blue-100 border border-blue-300 px-3 py-0.5 rounded-full text-blue-600 inline-flex items-center justify-center gap-2">
                                    <i class="icon-layers-two-01"></i>
                                    <span>Şehir</span>
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right gap-2 h-full flex items-center justify-end">
                            <a href="{{ site('admin/regions/edit/' . $region->id) }}"
                               class="font-medium text-blue-600 hover:underline px-3 py-0.5 rounded bg-blue-50 border border-blue-100">
                                Düzenle
                            </a>
                            <a data-href="{{ site('admin/regions/delete/' . $region->id) }}"
                               class="font-medium text-rose-600 hover:underline px-3 py-0.5 rounded bg-rose-50 border border-rose-100">
                                Sil
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </section>
    <section class="w-full h-full mt-5 flex items-center justify-center gap-4">
        <a href="{{ ($page == 1) ? 'javascript: void(0);' : site('admin/regions?page=' . $page - 1) }}" class="flex items-center gap-2 border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md {{ ($page == 1) ? 'pointer-events-none opacity-50 select-none' : ''}}">
            <i class="icon-arrow-left"></i>
            Geri
        </a>
        <div class="form-item">
            <select name="paging" id="paging" class="text-center">
                @for($i = 1; $i < $pages+1; $i++)
                    <option value="{{ $i }}"{{ ($page == $i) ? ' selected' : '' }}>Sayfa {{ $i }}</option>
                @endfor
            </select>
        </div>
        <a href="{{ ($page >= $pages) ? 'javascript: void(0);' : site('admin/regions?page=' . $page + 1) }}" class="flex items-center gap-2 border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md {{ ($page >= $pages) ? 'pointer-events-none opacity-50 select-none' : ''}}">
            İleri
            <i class="icon-arrow-right"></i>
        </a>
    </section>
    <script>
        document.querySelector('select[name="paging"]#paging').addEventListener('change', event => {
            document.location = document.location.protocol + '//' + document.location.host + document.location.pathname + '?page=' + event.target.value;
        })
    </script>
@endsection