@extends('admin.layout')
@section('content')
<div class="content-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
        <h3 style="margin: 0; border: none; padding: 0;">Manage Sliders</h3>
        <a href="{{ route('admin.sliders.create') }}" style="background-color: #0170B9; color: white; padding: 10px 18px; text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 14px;"><i class="fa-solid fa-plus"></i> Add New Slider</a>
    </div>

    @if(session('success'))
        <div style="background-color: #e8f5e9; color: #2e7d32; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
            {{ session('success') }}
        </div>
    @endif

    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; min-width: 600px;">
            <thead>
                <tr style="background-color: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                    <th style="padding: 12px 15px; text-align: left; color: #495057; font-weight: 600;">Image</th>
                    <th style="padding: 12px 15px; text-align: left; color: #495057; font-weight: 600;">Title</th>
                    <th style="padding: 12px 15px; text-align: left; color: #495057; font-weight: 600;">Status</th>
                    <th style="padding: 12px 15px; text-align: right; color: #495057; font-weight: 600;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sliders as $slider)
                <tr style="border-bottom: 1px solid #e9ecef;">
                    <td style="padding: 12px 15px;"><img src="{{ asset('storage/' . $slider->image) }}" style="height: 50px; border-radius: 4px;"></td>
                    <td style="padding: 12px 15px; font-weight: 500; color: #222;">{{ $slider->title ?: 'N/A' }}</td>
                    <td style="padding: 12px 15px;">
                        @if($slider->is_active)
                            <span style="background: #e8f5e9; color: #2e7d32; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold;">Active</span>
                        @else
                            <span style="background: #ffebee; color: #c62828; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold;">Inactive</span>
                        @endif
                    </td>
                    <td style="padding: 12px 15px; text-align: right;">
                        <a href="{{ route('admin.sliders.edit', $slider->id) }}" style="color: #0170B9; text-decoration: none; margin-right: 15px; font-weight: 500;"><i class="fa-solid fa-pen-to-square"></i> Edit</a>
                        <form action="{{ route('admin.sliders.destroy', $slider->id) }}" method="POST" style="display: inline-block;" onsubmit="return confirm('Are you sure you want to delete this slider?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="color: #dc3545; background: none; border: none; padding: 0; font-weight: 500; cursor: pointer; font-size: 15px; font-family: inherit;"><i class="fa-solid fa-trash"></i> Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
                @if($sliders->isEmpty())
                <tr><td colspan="4" style="text-align: center; padding: 30px; color: #666;">No sliders found.</td></tr>
                @endif
            </tbody>
        </table>
    </div>
</div>
@endsection