@extends('layouts.app')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
<div class="card-header">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span>{{ __('Home Images') }}</span>
        
        <a href="{{ route('ads.index') }}" class="btn btn-success">
            <i class="fas fa-ad"></i> {{ __('Create Ads') }}
        </a>
        
        <a href="{{ route('home_images.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> {{ __('Create New') }}
        </a>
        
        <a href="{{ route('ads.index') }}" class="btn btn-warning">
            <i class="fas fa-plus-circle"></i> {{ __('Create New Single Ad') }}
        </a>
        
        <a href="{{ route('more_to_explore.index') }}" class="btn btn-warning">
            <i class="fas fa-plus-circle"></i> {{ __('Create New Post for Series') }}
        </a>

        {{-- ✅ Add Home GIF Images Button --}}
        <a href="{{ url('/home-gifs') }}" class="btn btn-info">
            <i class="fas fa-image"></i> {{ __('Home GIF Images') }}
        </a>

        {{-- ✅ Add Home Page Post Button --}}
        <a href="{{ route('home_page_posts.index') }}" class="btn btn-secondary">
            <i class="fas fa-file-alt"></i> {{ __('Home Page Posts') }}
        </a>
    </div>
</div>



                <div class="card-body">
                    @if ($homeImages->count())
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Image</th>
                                <th>Type</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($homeImages as $homeImage)
                            <tr>
                                <td>{{ $homeImage->id }}</td>
                                <td>{{ $homeImage->title }}</td>
                                <td><img src="{{ asset('images/' . $homeImage->uploaded_image) }}" alt="Image" width="100"></td>
                                <td><span class="badge bg-{{ getTypeColor($homeImage->image_type) }}">{{ $homeImage->image_type }}</span></td>
                                <td>
                                    <a href="{{ route('home_images.edit', $homeImage->id) }}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-edit"></i> {{ __('Edit') }}
                                    </a>
                                    <form action="{{ route('home_images.destroy', $homeImage->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">
                                            <i class="fas fa-trash"></i> {{ __('Delete') }}
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <p>No home images available.</p>
                    @endif

                   <div class="pagination">
                        {{ $homeImages->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<style>
svg.w-5.h-5 {
    width: 25px;
}
.hidden.sm\:flex-1.sm\:flex.sm\:items-center.sm\:justify-between {
    display: flex;
    position: relative;
    margin-left: 250px;
    margin-top: -30px;
}
.pagination {
    justify-content: center;
    margin-top: 20px;
}
.page-item .page-link {
    color: #000;
    border: none;
    border-radius: 50%;
    padding: 5px 10px;
    margin: 0 5px;
}
.page-item.active .page-link {
    background-color: #007bff;
    color: #fff;
}
.page-item.disabled .page-link {
    color: #ccc;
}
span.badge.bg-light {
    background-color: #b21dcd !important;
}
</style>
@php
function getTypeColor($type) {
    switch ($type) {
        case 'up_next':
            return 'success';
        case 'hot_picks':
            return 'danger';
        case 'slider':
            return 'primary';
        case 'single_page':
            return 'warning';
        case 'home_banner':
            return 'info';
        case 'new_tc':
            return 'secondary';
        case 'music':
            return 'light';
        case 'new_movies':
            return 'dark';
        case 'first_cam':
            return 'primary';
        default:
            return 'dark';
    }
}
@endphp

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>