@extends('layouts.app') {{-- Assuming you have an admin layout --}}

@section('page-title', 'About-Hero-Sections')

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3>About Hero Sections</h3>
        <a href="{{ route('hero.create') }}" class="main-butn px-3">Add New Hero Section</a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if($heros->count())
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Sr No.</th>
                    <th>Banner Image</th>
                    <th>Heading</th>
                    <th>Title</th>
                    <th>Icon</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($heros as $hero)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>
                        @if($hero->banner_img)
                            <img src="{{ asset($hero->banner_img) }}" alt="Banner" width="120">
                        @endif
                    </td>
                    <td>{{ $hero->heading }}</td>
                    <td>{{ $hero->title }}</td>
                    <td>
                        @if($hero->icon)
                            <img src="{{ asset($hero->icon) }}" alt="Icon" width="50">
                        @endif
                    </td>
                    <td class="d-flex gap-2">
                        <a href="{{ route('hero.edit', $hero->id) }}" class="p-btn px-2">Edit</a>

                        <form action="{{ route('hero.delete', $hero->id) }}" method="POST" onsubmit="return confirm('Are you sure?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-btn px-2">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <p>No hero sections found. <a href="{{ route('hero.create') }}">Create one now.</a></p>
    @endif

</div>
@endsection