@extends('admin.layout.app')

@section('title', 'Create Blog')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Create Blog</h5>
      <a href="{{ route('admin.blog.index') }}" class="btn btn-sm btn-secondary">
        <i class="bx bx-arrow-back"></i> Back
      </a>
    </div>

    <div class="card-body">
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul class="mb-0">
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <form method="POST" action="{{ route('admin.blog.store') }}" enctype="multipart/form-data">
        @csrf

        {{-- Category & Title --}}
        <div class="row mb-3">
          <div class="col-md-6">
            <label for="category_id" class="form-label">Category</label>
            <select name="category_id" class="form-control" required>
              <option value="">-- Select Category --</option>
              @foreach($categories as $category)
                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                  {{ $category->name }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="col-md-6">
            <label for="title" class="form-label">Title</label>
            <input type="text" name="title" id="title" class="form-control" 
                   value="{{ old('title') }}" required>
          </div>
        </div>

        {{-- Slug --}}
        <div class="mb-3">
          <label for="slug" class="form-label">Slug</label>
          <input type="text" name="slug" id="slug" class="form-control" 
                 value="{{ old('slug') }}" required>
        </div>

        {{-- Short Description --}}
        <div class="mb-3">
          <label for="short_description" class="form-label">Short Description</label>
          <textarea name="short_description" class="form-control" rows="2">{{ old('short_description') }}</textarea>
        </div>

        {{-- Content --}}
        <div class="mb-3">
          <label for="content" class="form-label">Content</label>
          <!-- Remove required from textarea to avoid browser validation error -->
          <textarea name="content" id="content" class="form-control" rows="6">{{ old('content') }}</textarea>
        </div>

        {{-- Featured Image --}}
        <div class="mb-3">
          <label for="featured_image" class="form-label">Featured Image</label>
          <input type="file" name="featured_image" class="form-control">
        </div>

        {{-- Meta --}}
        <div class="mb-3">
          <label for="meta_title" class="form-label">Meta Title</label>
          <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title') }}">
        </div>

        <div class="mb-3">
          <label for="meta_description" class="form-label">Meta Description</label>
          <textarea name="meta_description" class="form-control">{{ old('meta_description') }}</textarea>
        </div>

        {{-- Submit --}}
        <div class="text-end">
          <button type="submit" class="btn btn-primary">Save Blog</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script src="{{ asset('csstemplate/libs/downloaded/ckeditor.js') }}"></script>
<script>
  // Auto-generate slug
  document.getElementById('title').addEventListener('keyup', function() {
      let slug = this.value.toLowerCase()
                    .replace(/[^a-z0-9]+/g, '-')
                    .replace(/(^-|-$)+/g, '');
      document.getElementById('slug').value = slug;
  });

  // Initialize CKEditor
  ClassicEditor.create(document.querySelector('#content'), {
      ckfinder: {
          uploadUrl: "{{ route('admin.ckeditor.upload').'?_token='.csrf_token() }}"
      }
  }).then(editor => {
      // Sync CKEditor content to textarea before submit
      const form = editor.sourceElement.closest('form');
      form.addEventListener('submit', () => {
          editor.updateSourceElement();
      });
  }).catch(error => console.error(error));
</script>
@endpush
@endsection