@extends('dashboard.main')

@section('main-content')

<style>
    .custom-card{
        background:#fff;
        border-radius:18px;
        border:none;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(31,48,68,.08);
    }

    .custom-card .card-header{
        background:#1F3044;
        color:#fff;
        padding:22px 30px;
        border:none;
    }

    .custom-card .card-header h3{
        margin:0;
        font-size:28px;
        font-weight:700;
    }

    .btn-theme{
        background:#fff;
        color:#1F3044;
        border-radius:10px;
        padding:12px 24px;
        font-weight:600;
        transition:.3s;
    }

    .btn-theme:hover{
        background:#dce6f3;
        color:#1F3044;
    }

    .table{
        margin:0;
    }

    .table thead th{
        background:#F5F7FA;
        color:#1F3044;
        font-weight:700;
        border:none;
        padding:18px;
        text-transform:uppercase;
        font-size:14px;
        letter-spacing:.5px;
    }

    .table tbody td{
        padding:22px 18px;
        vertical-align:middle;
        border-color:#edf1f5;
    }

    .table tbody tr{
        transition:.3s;
    }

    .table tbody tr:hover{
        background:#F8FAFD;
    }

    .blog-img{
        width:100px;
        height:75px;
        object-fit:cover;
        border-radius:12px;
        border:3px solid #fff;
        box-shadow:0 6px 15px rgba(0,0,0,.15);
    }

    .blog-title{
        font-size:22px;
        font-weight:700;
        color:#1F3044;
        margin-bottom:8px;
    }

    .blog-desc{
        color:#666;
        line-height:1.7;
        margin:0;
    }

    .status-badge{
        padding:8px 18px;
        border-radius:40px;
        font-size:13px;
        font-weight:700;
    }

    .status-active{
        background:#1f9d57;
        color:#fff;
    }

    .status-inactive{
        background:#dc3545;
        color:#fff;
    }

    .date{
        color:#1F3044;
        font-weight:700;
        font-size:18px;
    }

    .time{
        color:#7b8794;
        font-size:14px;
    }

    .action-btn{
        width:46px;
        height:46px;
        border-radius:12px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        margin-bottom:8px;
        transition:.3s;
    }

    .edit-btn{
        background:#1F3044;
    }

    .edit-btn:hover{
        background:#152332;
        color:#fff;
        transform:translateY(-3px);
    }

    .delete-btn{
        background:#dc3545;
        border:none;
    }

    .delete-btn:hover{
        background:#b91d2f;
        transform:translateY(-3px);
    }

    .empty-box{
        padding:80px;
        text-align:center;
        color:#777;
        font-size:20px;
    }

</style>


<div class="card custom-card">

    <div class="card-header d-flex justify-content-between align-items-center">

        <h3 style="color: white">
            <i class="fas fa-blog me-2"></i>
            Blogs Management
        </h3>

        <a href="{{ route('blogs.create') }}" class="btn btn-theme">

            <i class="fas fa-plus me-2"></i>

            Add New Blog

        </a>

    </div>


    <div class="card-body p-0">

        @if(session('success'))

            <div class="alert alert-success m-4">

                {{ session('success') }}

            </div>

        @endif


        <div class="table-responsive">

            <table class="table align-middle">

                <thead>

                    <tr>

                        <th width="60">#</th>

                        <th width="140">Image</th>

                        <th>Blog Title</th>

                        <th>Description</th>

                        <th width="140">Status</th>

                        <th width="170">Created Date</th>

                        <th width="110" class="text-center">Actions</th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($blogs as $blog)

                        <tr>

                            <td>

                                <strong>

                                    {{ $loop->iteration }}

                                </strong>

                            </td>


                            <td>

                                @if($blog->image)

                                    <img src="{{ asset('uploads/blogs/'.$blog->image) }}"
                                         class="blog-img">

                                @else

                                    <img src="{{ asset('assets/images/no-image.png') }}"
                                         class="blog-img">

                                @endif

                            </td>


                            <td>

                                <div class="blog-title">

                                    {{ $blog->title }}

                                </div>

                            </td>


                            <td>

                                <p class="blog-desc">

                                    {{ Str::limit($blog->short_description,80) }}

                                </p>

                            </td>


                            <td>

                                @if($blog->status=='active')

                                    <span class="status-badge status-active">

                                        Active

                                    </span>

                                @else

                                    <span class="status-badge status-inactive">

                                        Inactive

                                    </span>

                                @endif

                            </td>


                            <td>

                                <div class="date">

                                    {{ $blog->created_at->format('d M Y') }}

                                </div>

                                <div class="time">

                                    {{ $blog->created_at->format('h:i A') }}

                                </div>

                            </td>


                            <td class="text-center">

                                <a href="{{ route('blogs.edit',$blog->id) }}"
                                   class="action-btn edit-btn">

                                    <i class="fas fa-edit"></i>

                                </a>


                                <form action="{{ route('blogs.destroy',$blog->id) }}"
                                      method="POST">

                                    @csrf
                                    @method('DELETE')

                                    <button class="action-btn delete-btn"
                                            onclick="return confirm('Delete this blog?')">

                                        <i class="fas fa-trash"></i>

                                    </button>

                                </form>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="7">

                                <div class="empty-box">

                                    <i class="fas fa-blog fa-3x mb-3"></i>

                                    <br>

                                    No Blogs Available

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

@endsection
