@extends('backend.layout.master-tailwind')
@section('title', __('All Pages'))

@section('admin_styles')
<style>
@media (max-width: 640px) {
    .tbl .col-id,
    .tbl .col-created,
    .tbl .col-status { display: none; }
}
</style>
@endsection

@section('content')
<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('All Pages') }}</h1>
      <p class="page-sub">{{ __('Manage your site pages and page builder content') }}</p>
    </div>
    <div class="page-actions">
      @can('page-create-new')
      <a href="{{ route('admin.page.new') }}" class="btn primary sm">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
        {{ __('Add New Page') }}
      </a>
      @endcan
    </div>
  </div>

  @can('page-delete-bulk-action')
  <div class="toolbar" id="bulk-toolbar" style="display:none">
    <span id="bulk-count" style="font-size:13px;color:var(--text-2)"></span>
    <form id="bulk-delete-form" action="{{ route('admin.delete.bulk.action.page') }}" method="POST" style="display:inline">
      @csrf
      <div id="bulk-ids-container"></div>
      <button type="button" id="bulk-delete-btn" class="btn sm" style="background:color-mix(in oklch,var(--danger,#ef4444) 12%,transparent);color:var(--danger,#ef4444);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent)">
        {{ __('Delete Selected') }}
      </button>
    </form>
  </div>
  @endcan

  <div class="card" style="overflow:hidden">
    <div style="overflow-x:auto">
    <table class="tbl">
      <thead>
        <tr>
          @can('page-delete-bulk-action')
          <th style="width:40px">
            <input type="checkbox" id="check-all" style="width:15px;height:15px;cursor:pointer;accent-color:var(--accent,#6366f1)">
          </th>
          @endcan
          <th class="col-id" style="width:60px">{{ __('ID') }}</th>
          <th>{{ __('Title') }}</th>
          <th class="col-created" style="width:140px">{{ __('Created') }}</th>
          <th class="col-status" style="width:90px">{{ __('Status') }}</th>
          <th style="width:120px">{{ __('Action') }}</th>
        </tr>
      </thead>
      <tbody>
        @forelse($all_pages as $page)
        <tr>
          @can('page-delete-bulk-action')
          <td>
            <input type="checkbox" class="row-check" value="{{ $page->id }}" style="width:15px;height:15px;cursor:pointer;accent-color:var(--accent,#6366f1)">
          </td>
          @endcan
          <td class="col-id" style="color:var(--text-3);font-size:12px">{{ $page->id }}</td>
          <td>
            <span style="font-size:13px;font-weight:500;color:var(--text)">{{ $page->title ?? __('Untitled') }}</span>
            @if($page->id == get_static_option('home_page'))
            <span class="tag" style="margin-left:6px;background:color-mix(in oklch,var(--accent,#6366f1) 12%,transparent);color:var(--accent,#6366f1);border-color:color-mix(in oklch,var(--accent,#6366f1) 30%,transparent)">{{ __('Home Page') }}</span>
            @endif
          </td>
          <td class="col-created" style="font-size:12px;color:var(--text-3)">{{ $page->created_at->diffForHumans() }}</td>
          <td class="col-status">
            @if($page->status == 'publish')
            <span class="tag" style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Published') }}</span>
            @else
            <span class="tag" style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Draft') }}</span>
            @endif
          </td>
          <td>
            <div style="display:flex;gap:6px;align-items:center">
              @can('page-edit')
              <a href="{{ route('admin.edit.page', $page->id) }}" class="icon-btn" title="{{ __('Edit Page') }}">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              </a>
              @endcan
              @if($page->page_builder_status == 'on')
              <a href="{{ route('admin.dynamic.page.builder', ['type' => 'dynamic-page', 'id' => $page->id]) }}" class="icon-btn" title="{{ __('Open Page Builder') }}" target="_blank">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
              </a>
              @endif
              @can('page-delete')
              @if($page->id != get_static_option('home_page'))
              <button type="button" class="icon-btn delete-btn" data-id="{{ $page->id }}" data-url="{{ route('admin.delete.single.page', $page->id) }}" title="{{ __('Delete') }}" style="color:var(--danger,#ef4444)">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
              </button>
              @endif
              @endcan
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="6" style="text-align:center;padding:40px;color:var(--text-3);font-size:13px">{{ __('No pages found') }}</td>
        </tr>
        @endforelse
      </tbody>
    </table>
    </div>
  </div>

</div>
@endsection

@section('script')
<script>
(function () {
  // bulk select
  var $checkAll = $('#check-all');
  var $toolbar  = $('#bulk-toolbar');
  var $count    = $('#bulk-count');

  function updateToolbar() {
    var checked = $('.row-check:checked');
    if (checked.length > 0) {
      $toolbar.show();
      $count.text(checked.length + ' {{ __("item(s) selected") }}');
    } else {
      $toolbar.hide();
    }
  }

  $checkAll.on('change', function () {
    $('.row-check').prop('checked', this.checked);
    updateToolbar();
  });

  $(document).on('change', '.row-check', function () {
    if (!this.checked) $checkAll.prop('checked', false);
    else if ($('.row-check:not(:checked)').length === 0) $checkAll.prop('checked', true);
    updateToolbar();
  });

  // bulk delete
  $('#bulk-delete-btn').on('click', function () {
    var ids = $('.row-check:checked').map(function () { return this.value; }).get();
    if (!ids.length) return;
    Swal.fire({
      title: '{{ __("Are you sure?") }}',
      text: '{{ __("This will permanently delete the selected pages.") }}',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: '{{ __("Yes, delete") }}',
      cancelButtonText: '{{ __("Cancel") }}',
      confirmButtonColor: '#ef4444'
    }).then(function (result) {
      if (result.isConfirmed) {
        var $container = $('#bulk-ids-container');
        $container.empty();
        ids.forEach(function (id) {
          $container.append('<input type="hidden" name="ids[]" value="' + id + '">');
        });
        $('#bulk-delete-form').submit();
      }
    });
  });

  // single delete
  $(document).on('click', '.delete-btn', function () {
    var url = $(this).data('url');
    Swal.fire({
      title: '{{ __("Delete this page?") }}',
      text: '{{ __("This action cannot be undone.") }}',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: '{{ __("Yes, delete") }}',
      cancelButtonText: '{{ __("Cancel") }}',
      confirmButtonColor: '#ef4444'
    }).then(function (result) {
      if (result.isConfirmed) {
        var $form = $('<form method="POST" style="display:none">').attr('action', url);
        $form.append('{{ csrf_field() }}');
        $('body').append($form);
        $form.submit();
      }
    });
  });
}());
</script>
@endsection