@extends('admin.layouts.app')

@section('title', 'Homepage Sections')
@section('breadcrumb')
    <li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor"
            stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg></li>
    <li><a href="{{ route('admin.marketing.featured') }}" class="hover:text-primary-600 transition-colors">Marketing</a></li>
    <li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor"
            stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg></li>
    <li><a href="{{ route('admin.marketing.homepage') }}" class="hover:text-primary-600 transition-colors">Homepage
            Sections</a></li>
@endsection
@section('heading', 'Homepage Sections')
@section('subheading', 'Manage visibility and order of homepage sections.')

@section('content')

    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/50">
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Section
                            Name</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Type</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Position
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">
                            Visibility</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Last
                            Updated</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Actions
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ([['name' => 'Hero Banner', 'type' => 'Hero', 'position' => 1, 'visible' => true, 'updated' => '15 Feb 2025'], ['name' => 'Featured Properties', 'type' => 'Featured', 'position' => 2, 'visible' => true, 'updated' => '15 Feb 2025'], ['name' => 'Popular Areas', 'type' => 'Popular', 'position' => 3, 'visible' => true, 'updated' => '14 Feb 2025'], ['name' => 'Recent Listings', 'type' => 'Recent', 'position' => 4, 'visible' => true, 'updated' => '15 Feb 2025'], ['name' => 'Testimonials', 'type' => 'Testimonials', 'position' => 5, 'visible' => true, 'updated' => '10 Feb 2025'], ['name' => 'Newsletter CTA', 'type' => 'CTA', 'position' => 6, 'visible' => true, 'updated' => '12 Feb 2025'], ['name' => 'Partners', 'type' => 'Partners', 'position' => 7, 'visible' => false, 'updated' => '8 Feb 2025']] as $row)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-5 py-3.5 font-medium text-gray-800">{{ $row['name'] }}</td>
                            <td class="px-5 py-3.5 text-gray-600">{{ $row['type'] }}</td>
                            <td class="px-5 py-3.5">
                                <div class="flex items-center gap-1">
                                    <button type="button"
                                        class="p-1 text-gray-400 hover:text-gray-600 rounded hover:bg-gray-100"
                                        title="Move up">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="m4.5 15.75 7.5-7.5 7.5 7.5" />
                                        </svg>
                                    </button>
                                    <span class="text-gray-600 font-medium w-6 text-center">{{ $row['position'] }}</span>
                                    <button type="button"
                                        class="p-1 text-gray-400 hover:text-gray-600 rounded hover:bg-gray-100"
                                        title="Move down">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                            <td class="px-5 py-3.5">
                                <button type="button"
                                    class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 {{ $row['visible'] ? 'bg-primary-500' : 'bg-gray-200' }}">
                                    <span
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {{ $row['visible'] ? 'translate-x-5' : 'translate-x-1' }}"></span>
                                </button>
                            </td>
                            <td class="px-5 py-3.5 text-gray-500">{{ $row['updated'] }}</td>
                            <td class="px-5 py-3.5">
                                <button type="button"
                                    class="px-2.5 py-1.5 text-xs font-medium text-primary-600 hover:bg-primary-50 rounded-lg transition-colors">Edit</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

@endsection