@extends('layouts.admin_layout')

@section('content')

<main class="h-full pb-16 overflow-y-auto">
    <div class="container grid px-6 mx-auto">
    <h2
        class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
    >
    <span class="text-blue-500">List</span> of all Blog Posts
    </h2>
        <!-- CTA -->
        <a
        class="flex items-center justify-between p-4 mb-8 text-sm font-semibold bg-blue-600 shadow-md focus:outline-none focus:shadow-outline-green"
        href="{{ url('/') }}" style="color: #fff;"
    >
        <div class="flex items-center">
        <svg
            class="w-5 h-5 mr-2"
            fill="currentColor"
            viewBox="0 0 20 20"
        >
            <path
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
            ></path>
        </svg>
        <span>Go to main website</span>
        </div>
        <span>View &RightArrow;</span>
    </a>

     <!-- With actions -->
     <div class="mb-4">
        <a href="{{ route('admin.create-blog') }}" class="block max-w-xs p-6 mx-auto space-y-3 bg-blue-600 shadow-lg group bg-whitering-1 ring-gray-900/5 hover:bg-sky-500 hover:ring-sky-500">
            <div class="flex items-center space-x-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white dark:text-gray-300" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
            </svg>
            <h3 class="font-semibold text-white dark:text-gray-300">New Blog post</h3>
        </div>
        <small class="text-gray-900">Create a new Blog post.</small>
        </a>
    </div>

    <!-- With actions -->
    <h4
        class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
    >
        List of Blog Posts
    </h4>
    <x-alert/><br>
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
        <div class="w-full overflow-x-auto">
        <table class="w-full whitespace-no-wrap">
            <thead>
            <tr
                class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
            >
                <th class="px-4 py-3">Blog Title</th>
                <th class="px-4 py-3">Author</th>
                <th class="px-4 py-3">Creation Date</th>
                <th class="px-4 py-3">Actions</th>
            </tr>
            </thead>
            <tbody
            class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
            >
            @forelse($blogs as $blog)
            <tr class="text-gray-700 dark:text-gray-400">
                <td class="px-4 py-3">
                <div class="flex items-center text-sm">
                    <!-- Avatar with inset shadow -->
                    <div
                    class="relative w-8 h-8 mr-3 rounded-full md:block"
                    >
                    <img
                        class="object-cover w-full h-12 rounded-lg"
                        src="{{ asset('storage/images/'.$blog->featured_image) }}"
                        alt=""
                        loading="lazy"
                    />
                    <div
                        class="absolute inset-0 rounded-full shadow-inner"
                        aria-hidden="true"
                    ></div>
                    </div>
                    <div><a href="{{ route('admin.edit-blog', $blog->id) }}">
                    <p class="font-semibold">{{ mb_strimwidth($blog->title, 0, 40, '...') }}</p>
                    </a>
                    </div>
                </div>
                </td>
                <td class="px-4 py-3 text-sm">
                {{ $blog->author_name }}
                </td>
                <td class="px-4 py-3 text-sm">
                {{ date('M j Y', strtotime($blog->created_at)) }}
                </td>
                <td class="px-4 py-3">
                <div class="flex items-center space-x-4 text-sm">
                    <a
                    class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                    aria-label="Edit" href="{{ route('admin.edit-blog', $blog->id) }}"
                    >
                    <svg
                        class="w-5 h-5"
                        aria-hidden="true"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                    >
                        <path
                        d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                        ></path>
                    </svg>
                    </a>

                <form method="post" action="{{ route('admin.delete-blog', $blog->id) }}">
                    @csrf
                    <button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                    type="submit" onclick="return confirm('Dear Blogger, Are you sure you want to delete {{ $blog->title }}?');"
                    >
                    <svg
                        class="w-5 h-5"
                        aria-hidden="true"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                    >
                        <path
                        fill-rule="evenodd"
                        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                        clip-rule="evenodd"
                        ></path>
                    </svg>
                    </button>
                </form>
                </div>
                </td>
            </tr>
            @empty
            <div class="mx-auto my-3">
                <p class="text-center text-white lead">No Blog Posts!</p>
            </div>
            <br><br><br>
            @endforelse
            
            </tbody>
        </table>
        </div>
        <div
        class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800" style="padding-top:50px !important;padding-bottom:20px !important;"
        >
            
        @if($blogs->currentPage() != 1)
        <span><a class="p-3 mb-3" href="{{ $blogs->url(1) }}">«&nbsp;</a></span>
        <span><a class="p-3 mt-4" href="{{ $blogs->previousPageUrl() }}"><&nbsp;</a></span>
            @for($i=1; $i<=$blogs->lastPage(); $i++) 
            @if($i== $blogs->currentPage()) 
                <span><a class="p-1 mt-4 text-center pranala" style="background-color: #e4ab0d; color: #fff;border-radius:50%;"><b>{{ $i }}</b>&nbsp;</a></span>
                @else
                <span class="mt-12"><a class="p-3" href="{{ $blogs->url($i) }}">{{ $i }}&nbsp;</a></span>
                @endif
            @endfor
            @if($blogs->currentPage() != $blogs->lastPage())
        <span><a class="p-3 mt-4" href="{{ $blogs->nextPageUrl() }}">>&nbsp;</a></span>
        <span><a class="p-3 mt-4" href="{{ $blogs->url($blogs->lastPage()) }}">»</a></span>
        @endif
        @else
        <span><a class="p-3 mb-3" href="{{ $blogs->url(1) }}">1</a></span>
        <span><a class="p-3 mt-4" href="{{ $blogs->nextPageUrl() }}">>&nbsp;</a></span>
        <span><a class="p-3 mt-4" href="{{ $blogs->url($blogs->lastPage()) }}">»</a></span>
        @endif
        
        </div>
        <div>
            <small class="text-gray-500 dark:text-gray-400">Showing {{ $blogs->firstItem() }}–{{ $blogs->lastItem() }} of {{ $blogs->total() }} results</small>
        </div>
    </div>
    </div>
</main>

@endsection