@extends('admin.layouts.app')

@section('title', 'Banners')
@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.banners') }}" class="hover:text-primary-600 transition-colors">Banners</a></li>
@endsection
@section('heading', 'Banners')
@section('subheading', 'Manage promotional banners across the platform.')

@section('content')

    {{-- Add Form --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
        <h3 class="text-base font-semibold text-gray-900 mb-5">Add Banner</h3>
        <form class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 items-end">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Title</label>
                <input type="text" placeholder="Banner title"
                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Image Upload</label>
                <input type="file" accept="image/*"
                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-600 hover:file:bg-primary-100">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Link URL</label>
                <input type="url" placeholder="https://..."
                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Position</label>
                <input type="number" placeholder="1"
                    class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all"
                    min="1">
            </div>
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                    <label class="block text-sm font-medium text-gray-700">Active</label>
                    <button type="button"
                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary-500 transition-colors duration-200 ease-in-out">
                        <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 translate-x-5"></span>
                    </button>
                </div>
                <button type="submit"
                    class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm">Add</button>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <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">Banner
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Link</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">
                            Impressions</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Clicks
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">CTR</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Active
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Date</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 ([
            ['title' => 'Summer Sale - 20% Off', 'link' => '/offers/summer-sale', 'position' => 1, 'impressions' => 45230, 'clicks' => 2847, 'ctr' => '6.3%', 'active' => true, 'date' => '15 Feb 2025'],
            ['title' => 'New Launch - Bandra Heights', 'link' => '/projects/bandra-heights', 'position' => 2, 'impressions' => 38421, 'clicks' => 1923, 'ctr' => '5.0%', 'active' => true, 'date' => '14 Feb 2025'],
            ['title' => 'Premium Villas in Goa', 'link' => '/properties/goa-villas', 'position' => 3, 'impressions' => 29156, 'clicks' => 1456, 'ctr' => '5.0%', 'active' => false, 'date' => '12 Feb 2025'],
            ['title' => 'Commercial Spaces BKC', 'link' => '/commercial/bkc', 'position' => 4, 'impressions' => 22340, 'clicks' => 892, 'ctr' => '4.0%', 'active' => true, 'date' => '11 Feb 2025'],
            ['title' => 'Diwali Special Offers', 'link' => '/offers/diwali', 'position' => 5, 'impressions' => 56780, 'clicks' => 4532, 'ctr' => '8.0%', 'active' => true, 'date' => '10 Feb 2025'],
            ['title' => 'Rental Properties Bangalore', 'link' => '/rent/bangalore', 'position' => 6, 'impressions' => 18920, 'clicks' => 756, 'ctr' => '4.0%', 'active' => false, 'date' => '8 Feb 2025'],
        ] as $row)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-5 py-3.5">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-16 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-xs text-gray-400 shrink-0">
                                        Preview</div>
                                    <p class="font-medium text-gray-800">{{ $row['title'] }}</p>
                                </div>
                            </td>
                            <td class="px-5 py-3.5 text-gray-600 text-xs truncate max-w-[120px]">{{ $row['link'] }}</td>
                            <td class="px-5 py-3.5 text-gray-600">{{ $row['position'] }}</td>
                            <td class="px-5 py-3.5 text-gray-600">{{ number_format($row['impressions']) }}</td>
                            <td class="px-5 py-3.5 text-gray-600">{{ number_format($row['clicks']) }}</td>
                            <td class="px-5 py-3.5 text-gray-600">{{ $row['ctr'] }}</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 {{ $row['active'] ? '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['active'] ? 'translate-x-5' : 'translate-x-1' }}"></span>
                                </button>
                            </td>
                            <td class="px-5 py-3.5 text-gray-500">{{ $row['date'] }}</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>
                                <button type="button"
                                    class="px-2.5 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors">Delete</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="border-t border-gray-100 px-5 py-3 flex items-center justify-between">
            <p class="text-sm text-gray-500">Showing 1 to 6 of 12 results</p>
            <div class="flex items-center gap-2">
                <button
                    class="px-3 py-1.5 border border-gray-200 text-gray-600 text-sm rounded-lg hover:bg-gray-50 disabled:opacity-50"
                    disabled>Previous</button>
                <button class="px-3 py-1.5 bg-primary-500 text-white text-sm rounded-lg">1</button>
                <button
                    class="px-3 py-1.5 border border-gray-200 text-gray-600 text-sm rounded-lg hover:bg-gray-50">Next</button>
            </div>
        </div>
    </div>

@endsection