@extends('admin.layouts.app')
@section('content')

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-5">
    <!-- Left Side: Blog Post Form -->
    <div class="bg-white p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-bold mb-4 text-gray-800">Create Blog Post</h2>
      <form>
        <!-- Title -->
        <div class="mb-4">
          <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Post Title</label>
          <input type="text" id="title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500" placeholder="Enter title" required />
        </div>

        <!-- Category -->
        <div class="mb-4">
          <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
          <select id="category" name="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500" required>
            <option value="">Select</option>
            <option value="tech">Tech</option>
            <option value="lifestyle">Lifestyle</option>
            <option value="news">News</option>
          </select>
        </div>

        <!-- Image Upload -->
        <div class="mb-4">
          <label for="image" class="block text-sm font-medium text-gray-700 mb-1">Upload Image</label>
          <input type="file" id="image" name="image" class="w-full px-4 py-2 border border-gray-300 rounded-lg file:bg-blue-600 file:text-white file:border-none" />
        </div>

        <!-- Content -->
        <div class="mb-4">
          <label for="content" class="block text-sm font-medium text-gray-700 mb-1">Content</label>
          <textarea id="content" name="content" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500" placeholder="Write content..." required></textarea>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition">
          Submit Post
        </button>
      </form>
    </div>

    <!-- Right Side: Blog Table -->
    <div class="bg-white p-6 rounded-lg shadow-lg overflow-auto">
      <h2 class="text-2xl font-bold mb-4 text-gray-800">Blog List</h2>

      <div class="w-full border border-slate-200 rounded-xl overflow-x-auto">
          <table class="w-full divide-y divide-slate-200">
            <thead class="bg-slate-100 text-slate-800">
              <tr>
                <th class="px-4 py-2 text-start">Heading</th>
                <th class="px-4 py-2 text-start">Heading</th>
                <th class="px-4 py-2 text-start">Heading</th>
                <th class="px-4 py-2 text-start">Heading</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200 bg-white text-slate-800">
              <tr class="hover:bg-slate-100 cursor-pointer odd:bg-white even:bg-slate-50">
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
              </tr>
              <tr class="hover:bg-slate-100 cursor-pointer odd:bg-white even:bg-slate-50">
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
              </tr>
              <tr class="hover:bg-slate-100 cursor-pointer odd:bg-white even:bg-slate-50">
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
                <td class="px-4 py-2">Row</td>
              </tr>
            </tbody>
          </table>
        </div>

    </div>
  </div>

@endsection