@extends('layouts.admin')

@section('title', 'Banners')

@section('content')
<div class="admin-page-header">
    <h1>Homepage Banners</h1>
    <div>
        @php
            $bannerCount = \App\Models\Banner::count();
        @endphp
        @if($bannerCount < 3)
            @can('banners.create')
            <a href="{{ route('admin.banners.create') }}" class="admin-btn-primary">
                <i class="bi bi-plus"></i> Add Banner ({{ $bannerCount }}/3)
            </a>
            @endcan
        @else
            <span class="badge-modern badge-modern-warning">Maximum limit reached (3/3)</span>
        @endif
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Link</th>
                        <th>Sort Order</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($banners as $banner)
                        <tr>
                            <td>
                                @if($banner->image_path)
                                    <img src="{{ asset('storage/' . $banner->image_path) }}" alt="{{ $banner->title }}" class="admin-image-preview" style="width: 150px; height: 80px; object-fit: cover;">
                                @else
                                    <div class="bg-secondary rounded d-flex align-items-center justify-content-center admin-image-preview" style="width: 150px; height: 80px;">
                                        <i class="bi bi-image text-white"></i>
                                    </div>
                                @endif
                            </td>
                            <td>{{ $banner->title ?? '-' }}</td>
                            <td>
                                @if($banner->link)
                                    <a href="{{ $banner->link }}" target="_blank">{{ \Illuminate\Support\Str::limit($banner->link, 30) }}</a>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>{{ $banner->sort_order }}</td>
                            <td>
                                <span class="badge-modern {{ $banner->is_active ? 'badge-modern-success' : 'badge-modern-danger' }}">
                                    {{ $banner->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    @can('banners.update')
                                    <a href="{{ route('admin.banners.edit', $banner->id) }}" class="admin-action-btn admin-action-btn-sm admin-btn-primary">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    @endcan
                                    @can('banners.delete')
                                    <form action="{{ route('admin.banners.destroy', $banner->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="admin-action-btn admin-action-btn-sm" style="background: #ef4444; height: -webkit-fill-available; color: white;">
                                            <i class="bi bi-trash"></i> Delete
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($banners->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $banners->firstItem() ?? 0 }}</strong>–<strong>{{ $banners->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $banners->total() }}</strong> banners
                </div>
                <div class="pagination-controls">
                    {{ $banners->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection