@extends('layouts.panel')
@section('content')
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
  <div><h2 class="text-3xl sm:text-4xl text-[#041627]">Homepage Slides</h2><p class="text-[#44474c]">Add, edit, remove and reorder slider images.</p></div>
</div>

<section class="bg-white border border-[#aeb6bf] p-4 sm:p-6 space-y-4">
  <h3 class="font-semibold text-[#041627]">Add New Slide</h3>
  <form method="POST" action="{{ route('admin.content.slides.store') }}" enctype="multipart/form-data" class="grid md:grid-cols-3 gap-3 items-end">
    @csrf
    <div><label class="text-sm font-semibold">Title</label><input name="title" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Subtitle</label><input name="subtitle" class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div><label class="text-sm font-semibold">Image</label><input type="file" name="image" required class="mt-1 border border-[#aeb6bf] p-2 w-full bg-[#f7fafc]"></div>
    <div class="md:col-span-3"><button class="w-full bg-[#041627] text-white px-5 py-2 text-sm font-semibold rounded sm:w-auto">Add Slide</button></div>
  </form>
</section>

<section class="bg-white border border-[#aeb6bf] overflow-hidden">
  <div class="overflow-x-auto">
  <table id="homepageSlidesTable" class="w-full min-w-[860px]">
    <thead><tr class="bg-[#041627] text-white text-xs uppercase"><th class="p-4 text-left">Preview</th><th class="p-4 text-left">Content</th><th class="p-4 text-left">Order</th><th class="p-4 text-right">Actions</th></tr></thead>
    <tbody class="divide-y divide-[#aeb6bf]"></tbody>
  </table>
  </div>
</section>
@endsection
@push('scripts')
<script>
NerosaDataTables.init('#homepageSlidesTable', {
  pageLength: 10,
  order: [[2, 'asc']],
  columns: [
    {data: 'preview', name: 'preview', orderable: false, searchable: false, className: 'p-4 w-56'},
    {data: 'content', name: 'content', orderable: false, searchable: false, className: 'p-4'},
    {data: 'sort_order', name: 'sort_order', className: 'p-4'},
    {data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'p-4 text-right'},
  ],
});
</script>
@endpush