@extends('user::layouts.master')
@section('breadcrumb_title', trans('backend::translate.All Blogs'))

@push('style')
@endpush

@section('content')
  <div class="max-w-[1062px] w-full mx-auto py-6 px-3">
    <div class="bg-white rounded-xl p-6">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-nowrap">{{ trans('backend::translate.All Blogs') }}</h2>
        </div>

        <!-- Header Actions -->
        <div class="flex gap-4 items-center">
          <!-- Search Input -->
          <div class="left-sides-icon-input">
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M2.29102 9.58317C2.29102 13.6102 5.55561 16.8748 9.58268 16.8748C13.6098 16.8748 16.8743 13.6102 16.8743 9.58317C16.8743 5.55609 13.6098 2.2915 9.58268 2.2915C5.55561 2.2915 2.29102 5.55609 2.29102 9.58317ZM9.58268 18.1248C4.86525 18.1248 1.04102 14.3006 1.04102 9.58317C1.04102 4.86574 4.86525 1.0415 9.58268 1.0415C14.3001 1.0415 18.1243 4.86574 18.1243 9.58317C18.1243 11.7169 17.342 13.668 16.0484 15.165L18.7746 17.8912C19.0187 18.1353 19.0187 18.531 18.7746 18.7751C18.5305 19.0192 18.1348 19.0192 17.8907 18.7751L15.1645 16.0489C13.6675 17.3424 11.7164 18.1248 9.58268 18.1248Z"
                fill="currentColor"
              />
            </svg>
            <input type="text" id="global-search" placeholder="{{ trans('backend::translate.Search blogs') }}" />
          </div>

          <!-- Bulk Actions Button -->
          <button
            id="bulk-action-btn"
            class="btn-primary py-2.5 px-3 text-14p font-medium w-auto sm:w-full lg:w-fit hidden"
          >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7.5 12.5L10 15L17.5 7.5"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <span>{{ trans('backend::translate.Bulk Actions') }}</span>
          </button>

          <!-- Add New Blog Button -->
          <a href="{{ route('author.blog.create') }}" class="btn-primary py-2.5 px-3 text-14p font-medium">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M10 4.16667V15.8333"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M4.16669 10H15.8334"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <span>{{ trans('backend::translate.Add New Blog') }}</span>
          </a>
        </div>
      </div>

      <!-- Status Filter Tabs -->
      <div class="flex gap-4 sm:gap-8 flex-wrap mt-6 border-b border-border">
        <button
          id="filter-all"
          class="capitalize pb-3 text-16 text-main hover:text-main hover:before:block transition-all duration-300 relative before:w-full before:content-[''] before:absolute before:h-[1px] before:bg-main before:-bottom-[1px]"
        >
          {{ trans('backend::translate.All Blogs') }}
          <span id="count-all" class="text-[10px] text-main py-0.5 px-1 rounded bg-main/10">0</span>
        </button>
        <button
          id="filter-published"
          class="capitalize pb-3 text-16 text-paragraph hover:text-main hover:before:block transition-all duration-300 before:hidden relative before:w-full before:content-[''] before:absolute before:h-[1px] before:bg-main before:-bottom-[1px]"
        >
          {{ trans('backend::translate.Published') }}
          <span id="count-published" class="text-[10px] text-paragraph py-0.5 px-1 rounded bg-paragraph/10">0</span>
        </button>
        <button
          id="filter-draft"
          class="capitalize pb-3 text-16 text-paragraph hover:text-main hover:before:block transition-all duration-300 before:hidden relative before:w-full before:content-[''] before:absolute before:h-[1px] before:bg-main before:-bottom-[1px]"
        >
          {{ trans('backend::translate.Draft') }}
          <span id="count-draft" class="text-[10px] text-paragraph py-0.5 px-1 rounded bg-paragraph/10">0</span>
        </button>
        <button
          id="filter-scheduled"
          class="capitalize pb-3 text-16 text-paragraph hover:text-main hover:before:block transition-all duration-300 before:hidden relative before:w-full before:content-[''] before:absolute before:h-[1px] before:bg-main before:-bottom-[1px]"
        >
          {{ trans('backend::translate.Scheduled') }}
          <span id="count-scheduled" class="text-[10px] text-paragraph py-0.5 px-1 rounded bg-paragraph/10">0</span>
        </button>
        <button
          id="filter-trash"
          class="capitalize pb-3 text-16 text-paragraph hover:text-main hover:before:block transition-all duration-300 before:hidden relative before:w-full before:content-[''] before:absolute before:h-[1px] before:bg-main before:-bottom-[1px]"
        >
          {{ trans('backend::translate.Trash') }}
          <span id="count-trash" class="text-[10px] text-paragraph py-0.5 px-1 rounded bg-paragraph/10">0</span>
        </button>
      </div>

      <!-- Filters Section -->
      <div class="flex gap-4 items-center mt-4 flex-wrap">
        <!-- Status Filter -->
        <div class="custom-select min-w-36">
          <select id="status-filter" class="peer">
            <option value="">{{ trans('backend::translate.All Statuses') }}</option>
            <option value="published">{{ trans('backend::translate.Published') }}</option>
            <option value="draft">{{ trans('backend::translate.Draft') }}</option>
            <option value="scheduled">{{ trans('backend::translate.Scheduled') }}</option>
            <option value="archived">{{ trans('backend::translate.Archived') }}</option>
            <option value="trash">{{ trans('backend::translate.Trash') }}</option>
          </select>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M17 10L12 14L7 10"
              stroke="#0A192F"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>

        <x-backend::datatable-advanced-filters
                    :filters="[
                        [
                            'type' => 'select',
                            'id' => 'status-filter',
                            'placeholder' => trans('backend::translate.All Statuses'),
                            'options' => [
                                '' => trans('backend::translate.All Statuses'),
                                'published' => trans('backend::translate.Published'),
                                'draft' => trans('backend::translate.Draft'),
                                'scheduled' => trans('backend::translate.Scheduled'),
                                'archived' => trans('backend::translate.Archive'),
                                'trash' => trans('backend::translate.Trash')
                            ]
                        ],
                        [
                            'type' => 'select',
                            'id' => 'category-filter',
                            'placeholder' => trans('backend::translate.All Categories'),
                            'options' => $categories->mapWithKeys(function($cat) {
                                $options = [$cat->id => $cat->name];
                                foreach($cat->children as $child) {
                                    $options[$child->id] = '— ' . $child->name;
                                }
                                return $options;
                            })->prepend(trans('backend::translate.All Categories'), '')->toArray()
                        ],
                        [
                            'type' => 'select',
                            'id' => 'language-filter',
                            'placeholder' => trans('backend::translate.All Languages'),
                            'options' => $languages->pluck('name', 'code')->prepend(trans('backend::translate.All Languages'), '')->toArray()
                        ]
                    ]"
                    :resetText="trans('backend::translate.Reset Filters')"
                />

        <!-- Category Filter -->
        <div class="custom-select min-w-36">
          <select id="category-filter" class="peer">
            <option value="">{{ trans('backend::translate.All Categories') }}</option>
            @if(isset($categories))
              @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
              @endforeach
            @endif
          </select>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M17 10L12 14L7 10"
              stroke="#0A192F"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>

        <!-- Language Filter -->
        <div class="custom-select min-w-36">
          <select id="language-filter" class="peer">
            <option value="">{{ trans('backend::translate.All Languages') }}</option>
            @if(isset($languages))
              @foreach($languages as $language)
                <option value="{{ $language->code }}">{{ $language->name }}</option>
              @endforeach
            @endif
          </select>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M17 10L12 14L7 10"
              stroke="#0A192F"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>

      <!-- DataTable Container -->
      <div class="mt-6" id="table-container">
        <div class="overflow-x-auto">
          <table class="w-full" id="blogs-table">
            <thead>
              <tr>
                <th scope="col" class="col-select">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap w-0 overflow-hidden opacity-0">I</h3>
                    <input
                      type="checkbox"
                      name=""
                      id="select-all"
                      class="border border-border bg-gray rounded text-main size-4"
                    />
                  </div>
                </th>
                <th scope="col" class="col-image">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap">{{ trans('backend::translate.Image') }}</h3>
                  </div>
                </th>
                <th scope="col" class="col-title">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap">{{ trans('backend::translate.Title') }}</h3>
                  </div>
                </th>
                <th scope="col" class="col-categories">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap">{{ trans('backend::translate.Categories') }}</h3>
                  </div>
                </th>
                <th scope="col" class="col-language">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap">{{ trans('backend::translate.Language') }}</h3>
                  </div>
                </th>
                <th scope="col" class="col-status">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap">{{ trans('backend::translate.Status') }}</h3>
                  </div>
                </th>
                <th scope="col" class="col-created">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap">{{ trans('backend::translate.Created Date') }}</h3>
                  </div>
                </th>
                <th scope="col" class="col-actions">
                  <div class="text-headline flex gap-2 items-center py-2.5 px-3 border-y border-[#F5F7FF] bg-[#F5F7FF]">
                    <h3 class="capitalize text-nowrap">{{ trans('backend::translate.Actions') }}</h3>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-[#F5F7FF]">
              <!-- DataTable will populate this -->
            </tbody>
          </table>
        </div>
      </div>

      <!-- Empty State -->
      <div id="empty-state" class="hidden">
        <x-backend::datatable-empty-state
          icon="blog"
          :title="trans('backend::translate.No blogs found')"
          :description="trans('backend::translate.No results found for your current search or filter criteria.')"
          :actionText="trans('backend::translate.Add New Blog')"
          actionUrl="{{ route('author.blog.create') }}"
        />
      </div>

      <!-- pagination -->
      <x-backend::datatable-pagination
        :showPageLength="true"
        :pageLength="10"
        :pageLengthOptions="[10, 25, 50, 100]"
        :showInfo="true"
        :showControls="true"
        :responsive="true"
      />
    </div>
  </div>
@endsection

@push('script')
<script src="{{ asset('backend/assets/js/blog-datatable.js') }}"></script>
@endpush