@section('title')
    Blogs
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.2/css/dataTables.dataTables.css" />
    <script src="https://cdn.datatables.net/2.1.2/js/dataTables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons.min.js"></script>
    <style>
        div.dt-container select.dt-input {
            width: 60px !important;
        }
    </style>
@endsection

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            @lang('messages.blog')
        </h2>
        <div class="flex gap-4">
            <a href="{{ route('create.blog') }}"
                class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">@lang('messages.new')</a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <table class="w-full table-fixed responsive" width="100%" id="blogs">
                        <thead>
                            <tr>
                                <th>@lang('messages.title')</th>
                                <th>@lang('messages.translate')</th>
                                <th style="text-align: center;">@lang('messages.created_at')</th>
                                <th style="text-align: center;">@lang('messages.actions')</th>
                            </tr>
                        </thead>
                        <tbody class="text-[13px]">
                            @if (count($posts) > 0)
                                @foreach ($posts as $post)
                                    @if ($post->hasTranslation(app()->getLocale()))
                                        <tr
                                            @if ($post->status == 0) style="background-color:#ff000010;" @endif>
                                            <td class="whitespace-nowrap overflow-hidden text-ellipsis">
                                                {{ $post->title }}<br>
                                                <small>-
                                                    https://pellaglobal.net/{{ app()->getLocale() . '/' . $post->slug }}</small>
                                            </td>
                                            <td>
                                                @if ($post->translations != null)
                                                    <div class="flex justify-center gap-2">
                                                        @foreach ($post->translations as $item)
                                                            @if ($item->locale == 'en')
                                                                <img src="https://flagcdn.com/w20/us.png"
                                                                    srcset="https://flagcdn.com/w20/us.png 2x, https://flagcdn.com/w40/us.png 3x"
                                                                    width="20" height="16" alt="">
                                                            @else
                                                                <img src="https://flagcdn.com/w20/{{ $item->locale }}.png"
                                                                    srcset="https://flagcdn.com/w20/{{ $item->locale }}.png 2x, https://flagcdn.com/w40/{{ $item->locale }}.png 3x"
                                                                    width="20" height="16" alt="">
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </td>
                                            <td class="whitespace-nowrap overflow-hidden text-ellipsis"
                                                style="text-align: center;">{{ $post->created_at }}</td>
                                            <td style="text-align: center;">
                                                <div class="w-full flex justify-center gap-4">
                                                    <a href="/blog/{{ $post->id }}/edit"><ion-icon
                                                            name="create-outline"></ion-icon></a>
                                                    @if ($post->status == 0)
                                                        <form action="{{ url('blog/' . $post->id) }}" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <button type="submit"><ion-icon
                                                                    name="share-outline"></ion-icon></button>
                                                        </form>
                                                    @endif
                                                    <form action="{{ url('blog/' . $post->id) }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit"><ion-icon
                                                                name="trash-outline"></ion-icon></button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#blogs').DataTable({
                order: [2, "desc"],
                columnDefs: [{
                    targets: 2,
                    render: DataTable.render.datetime('DD/MM/Y')
                }],
                language: {
                    url: '/files/{{ app()->getLocale() }}.json',
                },
                responsive: {
                    details: true
                }
            });
        });
    </script>
</x-app-layout>