@extends('backend.layout.master-tailwind')
@section('title', __('Sitemap Generator'))

@section('admin_styles')
<style>
.sitemap-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 768px) {
    .sitemap-grid { grid-template-columns: 1fr; }
    #sitemap-content { min-height: 240px !important; }
}
</style>
@endsection

@section('content')

@php
  $sitemaps = glob(base_path('../sitemap/sitemap_*.xml'));
  if ($sitemaps) rsort($sitemaps);
  else $sitemaps = [];
@endphp

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Sitemap Generator') }}</h1>
      <p class="page-sub">{{ __('Generate and manage your XML sitemap') }}</p>
    </div>
    <div class="page-actions">
      <form action="{{ route('admin.sitemap.generate') }}" method="POST">
        @csrf
        <button type="submit" class="btn primary sm">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6"/><path d="M2.5 12a10 10 0 0 1 17.5-7L21.5 8"/><path d="M2.5 22v-6h6"/><path d="M21.5 12a10 10 0 0 1-17.5 7L2.5 16"/></svg>
          {{ __('Generate Sitemap') }}
        </button>
      </form>
    </div>
  </div>

  {{-- Info notice --}}
  <div style="background:color-mix(in oklch,var(--accent,#6366f1) 8%,transparent);border:1px solid color-mix(in oklch,var(--accent,#6366f1) 30%,transparent);border-radius:10px;padding:10px 14px;margin-bottom:20px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
    <svg class="icon" style="flex:none;margin-top:1px;color:var(--accent,#6366f1)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><circle cx="12" cy="16" r=".6" fill="currentColor"/></svg>
    {{ __('Generating a sitemap will include all public routes: homepage, projects, jobs, freelancers, and dynamic pages. The file is saved to the /sitemap/ directory.') }}
  </div>

  @if(count($sitemaps) > 0)

  <div class="sitemap-grid">

    {{-- File list --}}
    <div class="card">
      <div style="padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600">
        {{ __('Generated Files') }}
        <span style="font-size:11px;font-weight:400;color:var(--text-3);margin-left:6px">{{ count($sitemaps) }}</span>
      </div>
      <div style="display:flex;flex-direction:column">
        @foreach($sitemaps as $index => $sitemap)
        @php $filename = basename($sitemap); @endphp
        <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);{{ $index === 0 ? 'background:color-mix(in oklch,var(--accent,#6366f1) 5%,transparent)' : '' }}">
          <div style="min-width:0">
            <a href="{{ url('/sitemap/' . $filename) }}" target="_blank"
              style="font-size:12px;font-family:monospace;color:var(--accent,#6366f1);text-decoration:none;word-break:break-all;display:flex;align-items:center;gap:4px">
              {{ $filename }}
              @if($index === 0)
              <span class="tag success" style="font-family:sans-serif;font-size:10px">{{ __('latest') }}</span>
              @endif
            </a>
            <div style="font-size:11px;color:var(--text-3);margin-top:2px">{{ date('M d Y, H:i', filemtime($sitemap)) }}</div>
          </div>
          <a href="{{ url('/sitemap/' . $filename) }}" target="_blank" class="icon-btn" title="{{ __('Open') }}">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
          </a>
        </div>
        @endforeach
      </div>
    </div>

    {{-- Latest content preview --}}
    <div class="card" style="display:flex;flex-direction:column">
      <div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
        <span style="font-size:13px;font-weight:600">{{ __('Latest Sitemap Content') }}</span>
        <button type="button" id="copy-btn" class="btn ghost sm">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          {{ __('Copy') }}
        </button>
      </div>
      <textarea id="sitemap-content" readonly
        style="flex:1;font-family:monospace;font-size:11px;line-height:1.6;padding:14px 16px;background:var(--surface-2);border:none;resize:vertical;min-height:380px;color:var(--text-2);outline:none">{{ file_get_contents($sitemaps[0]) }}</textarea>
    </div>

  </div>

  @else

  <div class="card" style="padding:48px;text-align:center;color:var(--text-3)">
    <svg style="width:40px;height:40px;margin:0 auto 12px;opacity:.4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
    <p style="font-size:13px;margin-bottom:4px;color:var(--text-2)">{{ __('No sitemap files found.') }}</p>
    <p style="font-size:12px">{{ __('Click "Generate Sitemap" to create your first one.') }}</p>
  </div>

  @endif

</div>

@endsection

@section('script')
<script>
(function () {
  var btn = document.getElementById('copy-btn');
  if (!btn) return;
  btn.addEventListener('click', function () {
    var content = document.getElementById('sitemap-content');
    navigator.clipboard.writeText(content.value).then(function () {
      toastr.success('{{ __("Sitemap content copied to clipboard!") }}');
    });
  });
}());
</script>
@endsection