@extends('layouts.admin')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="brand-font text-uppercase text-secondary mb-1">Manage Hero Slides</h4>
        <p class="text-muted small mb-0">These slides power the homepage carousel. Manage ads, promos, and announcements here.</p>
    </div>
    <a href="{{ route('admin.slides.create') }}" data-turbo-frame="admin-content" class="btn btn-primary-mj rounded-pill px-4">
        <i class="bi bi-plus-lg me-1"></i> Add New Slide
    </a>
</div>

<div class="card border-0 shadow-sm rounded-4 bg-white mb-4">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr class="text-secondary small text-uppercase" style="font-size: 11px;">
                    <th scope="col" class="ps-4">Order</th>
                    <th scope="col">Image</th>
                    <th scope="col">Title</th>
                    <th scope="col">Type</th>
                    <th scope="col">Schedule</th>
                    <th scope="col">Stats</th>
                    <th scope="col">Status</th>
                    <th scope="col" class="text-end pe-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($slides as $slide)
                    @php $status = $slide->scheduleStatus(); @endphp
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center gap-1">
                                <span class="fw-bold text-muted">{{ $slide->sort_order }}</span>
                                <div class="btn-group btn-group-sm">
                                    <form action="{{ route('admin.slides.move', $slide->id) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="direction" value="up">
                                        <button type="submit" class="btn btn-outline-secondary btn-sm" title="Move up"><i class="bi bi-chevron-up"></i></button>
                                    </form>
                                    <form action="{{ route('admin.slides.move', $slide->id) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="direction" value="down">
                                        <button type="submit" class="btn btn-outline-secondary btn-sm" title="Move down"><i class="bi bi-chevron-down"></i></button>
                                    </form>
                                </div>
                            </div>
                        </td>
                        <td>
                            <img src="{{ $slide->imageUrl() }}" class="rounded-3 object-fit-cover" style="width: 80px; height: 50px;" alt="Slide"
                                 onerror="this.src='{{ asset('assets/images/hero-fallback.svg') }}'">
                        </td>
                        <td class="fw-bold text-secondary">
                            {!! $slide->title !!}
                            @if($slide->badge_text)
                                <span class="badge {{ $slide->isAdType() ? 'bg-warning text-dark' : 'bg-danger' }} ms-2">{{ $slide->badge_text }}</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-light text-secondary border text-capitalize">{{ $slide->slide_type }}</span>
                        </td>
                        <td class="small text-muted">
                            @if($slide->isScheduled())
                                @if($slide->starts_at)
                                    <div>From: {{ $slide->starts_at->format('M j, Y g:i A') }}</div>
                                @endif
                                @if($slide->ends_at)
                                    <div>Until: {{ $slide->ends_at->format('M j, Y g:i A') }}</div>
                                @endif
                            @else
                                <span class="text-muted">Always on</span>
                            @endif
                        </td>
                        <td class="small text-muted">
                            <div><i class="bi bi-eye me-1"></i>{{ number_format($slide->impressions_count) }}</div>
                            <div><i class="bi bi-cursor me-1"></i>{{ number_format($slide->clicks_count) }}</div>
                        </td>
                        <td>
                            @if($status === 'live')
                                <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-1">Live</span>
                            @elseif($status === 'upcoming')
                                <span class="badge bg-info bg-opacity-10 text-info rounded-pill px-3 py-1">Upcoming</span>
                            @elseif($status === 'expired')
                                <span class="badge bg-warning bg-opacity-10 text-warning rounded-pill px-3 py-1">Expired</span>
                            @else
                                <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-3 py-1">Hidden</span>
                            @endif
                        </td>
                        <td class="text-end pe-4">
                            @include('partials.admin-crud-actions', [
                                'view' => route('admin.slides.show', $slide->id),
                                'edit' => route('admin.slides.edit', $slide->id),
                                'destroy' => route('admin.slides.destroy', $slide->id),
                                'deleteTitle' => 'Delete this slide?',
                                'deleteText' => 'This slide will be removed from the homepage carousel.',
                                'size' => 'default',
                            ])
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <div class="text-muted fs-1 mb-3"><i class="bi bi-images"></i></div>
                            <h6 class="fw-bold text-secondary">No Slides Found</h6>
                            <p class="text-muted small mb-3">Add slides to power your homepage carousel, or run <code>php artisan slides:seed</code>.</p>
                            <a href="{{ route('admin.slides.create') }}" data-turbo-frame="admin-content" class="btn btn-primary-mj btn-sm rounded-pill px-4">Add First Slide</a>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection
