@extends('admin.layouts.master')

@section('css')
<style>
.created-at-cell {
    min-width: 120px;
}
.created-at-cell span {
    cursor: help;
}
.created-at-cell small {
    font-size: 0.75rem;
    opacity: 0.7;
}
.table th {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
}
.table tbody tr:hover {
    background-color: #f8f9fa;
}
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.status-active {
    background-color: #d4edda;
    color: #155724;
}
.status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}
</style>
@endsection

@section('contents')

    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{__('Blogs')}}</h2>
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('admin.home')}}">{{__('Home')}}</a>
                                </li>
                                <li class="breadcrumb-item active">{{__('Blogs')}}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            @if(auth()->user()->can('create_blogs'))
                <div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none">
                    <div class="form-group breadcrum-right">
                        <a href="{{route('blogs.create')}}">
                            <button type="button"
                                    class="btn bg-gradient-primary mr-1 mb-1 waves-effect waves-light">{{__('Add New Blog')}}</button>
                        </a>
                    </div>
                </div>
            @endif
        </div>
        @include('admin.blogs.search_form')
        <div class="content-body">
            <!-- Zero configuration table -->
            <section id="basic-datatable">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex flex-wrap align-items-center" style="gap: 8px;">
                                    <h4 class="card-title mb-0">{{ __('Blogs') }} <span class="badge badge-primary">{{ $rows->total() }}</span></h4>
                                    <span class="text-muted mx-1">|</span>
                                    @foreach($sortedCategories as $category)
                                        <span class="badge badge-light-secondary" style="font-size: 0.85rem; padding: 5px 10px; border: 1px solid #e0e0e0; border-radius: 15px;">
                                            {{ $category->name }}
                                            <span class="badge badge-primary" style="font-size: 0.75rem; margin-right: 4px;">{{ $categoryCounts->get($category->id, 0) }}</span>
                                        </span>
                                    @endforeach
                                    @if(isset($categoryCounts['']) || isset($categoryCounts[null]) || isset($categoryCounts[0]))
                                        <span class="badge badge-light-secondary" style="font-size: 0.85rem; padding: 5px 10px; border: 1px solid #e0e0e0; border-radius: 15px;">
                                            {{ __('بدون تصنيف') }}
                                            <span class="badge badge-secondary" style="font-size: 0.75rem; margin-right: 4px;">{{ $categoryCounts[''] ?? $categoryCounts[null] ?? $categoryCounts[0] ?? 0 }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="card-content">
                                <div class="card-body card-dashboard">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{__('Image')}}</th>
                                                <th>{{__('Title')}}</th>
                                                <th>{{__('Category')}}</th>
                                                <th>{{__('Focus Keyword')}}</th>
                                                <th>{{__('Status')}}</th>
                                                <th>{{__('Created At')}}</th>
                                                <th>{{__('Actions')}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($rows as $row)
                                                <tr>
                                                    <td>{{ $rows->total() - (($rows->currentPage() - 1) * $rows->perPage() + $loop->index) }}</td>
                                                    <td>
                                                        <img src="{{$row->image}}" alt="{{$row->title}}" style="max-width: 50px; max-height: 50px; object-fit: cover; border-radius: 4px;">
                                                    </td>
                                                    <td>{{$row->title ?? __('None')}}</td>
                                                    <td>
                                                        @if($row->category)
                                                            <a href="{{route('blog-categories.show', $row->category->id)}}" class="badge badge-info" style="font-size:0.85rem;">
                                                                {{$row->category->name}}
                                                            </a>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($row->focus_keyword)
                                                            <span class="badge badge-info">{{$row->focus_keyword}}</span>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <span class="status-badge {{$row->status ? 'status-active' : 'status-inactive'}}">
                                                            {{$row->status ? __('Active') : __('Inactive')}}
                                                        </span>
                                                    </td>
                                                    <td class="created-at-cell">
                                                        <span title="{{Carbon\Carbon::parse($row->created_at)->format('F j, Y \a\t g:i A')}}">
                                                            {{Carbon\Carbon::parse($row->created_at)->format('M j, Y')}}
                                                            <br>
                                                            <small class="text-muted">{{Carbon\Carbon::parse($row->created_at)->format('g:i A')}}</small>
                                                        </span>
                                                    </td>
                                                    <td>

                                                                <a href="{{route('blogs.show', $row->id)}}">
                                                                    <button type="button" title="{{__('View')}}"
                                                                            class="btn btn-outline-primary mr-1 mb-1"><i
                                                                            class="fa fa-eye"></i>
                                                                    </button>
                                                                </a>
                                                            @if(auth()->user()->can('update_blogs'))
                                                                    <a href="{{route('blogs.edit', $row->id)}}">
                                                                        <button type="button" title="{{__('Edit')}}"
                                                                                class="btn btn-outline-primary mr-1 mb-1"><i
                                                                                class="fa fa-edit"></i>
                                                                        </button>
                                                                    </a>
                                                            @endif
                                                        @if(auth()->user()->can('delete_blogs'))
                                                            <a onclick="confirmAlert(`{{route('blogs.delete', $row->id)}}`)"
                                                               href="#">
                                                                <button type="button" title="{{__('Delete')}}"
                                                                        class="btn btn-outline-danger mr-1 mb-1"><i
                                                                        class="fa fa-trash"></i>
                                                                </button>
                                                            </a>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Pagination -->
                                    @include('admin.components.advanced-pagination', ['paginator' => $rows])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/ Zero configuration table -->
        </div>
    </div>

@endsection

@section('js')
<script>
function confirmAlert(url) {
    if (confirm('{{__("Are you sure you want to delete this blog? This action cannot be undone.")}}')) {
        window.location.href = url;
    }
}
</script>
@endsection