@extends('layouts.app')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<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">

                <!-- ================= HEADER ================= -->
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">

                        <span class="fw-bold">Home Images</span>

                        <div class="d-flex flex-wrap gap-2">

                            <a href="{{ route('ads.index') }}" class="btn btn-success">
                                <i class="fas fa-ad"></i> Create Ads
                            </a>

                            <!-- Single Ad Button -->
                            <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#singleAdModal">
                                <i class="fas fa-bullhorn"></i> Single Ad
                            </button>

                            <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>

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

                            <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>

                <!-- ================= BODY ================= -->
                <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) }}" width="100">
                                        </td>
                                        <td>
                                            <span class="badge bg-primary">
                                                {{ $homeImage->image_type }}
                                            </span>
                                        </td>
                                        <td>
                                            <a href="{{ route('home_images.edit', $homeImage->id) }}" class="btn btn-sm btn-primary">
                                                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">
                                                    Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="pagination justify-content-center">
                            {{ $homeImages->links() }}
                        </div>

                    @else
                        <p>No home images available.</p>
                    @endif

                </div>
            </div>
        </div>
    </div>
</div>

<!-- ================= SINGLE AD MODAL ================= -->

<div class="modal fade" id="singleAdModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content shadow">

            <form action="{{ route('single_ads.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-bullhorn"></i>
                        Upload / Update Single Advertisement
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center">

                    <!-- CURRENT IMAGE DISPLAY -->
                    @if(isset($singleAd) && ($singleAd->image || $singleAd->image_url))
                        <div class="mb-4">
                            <label class="fw-bold text-success">Current Advertisement</label><br>
                            @if($singleAd->image_url)
                                <img src="{{ $singleAd->image_url }}"
                                     class="img-fluid rounded shadow border"
                                     style="max-height:250px">
                            @else
                                <img src="https://api.nextcinemaflix.com/public/images/{{ $singleAd->image }}?v={{ time() }}"
                                     class="img-fluid rounded shadow border"
                                     style="max-height:250px">
                            @endif
                            <hr>
                        </div>
                    @endif

<!-- IMAGE URL INPUT -->
<div class="mb-3 text-start">
    <label class="form-label fw-bold">Click URL (Required)</label>
    <input type="url"
           name="click_url"
           id="clickUrlInput"
           class="form-control"
           placeholder="https://example.com"
           value="{{ $singleAd->click_url ?? '' }}"
           required>
    <small class="text-muted">When user clicks the ad, this URL will open.</small>
</div>

                    <!-- FILE INPUT -->
                    <div class="mb-3 text-start">
                        <label class="form-label fw-bold">Upload Image (Optional)</label>
                        <input type="file"
                               name="image"
                               id="imageInput"
                               class="form-control"
                               accept="image/*">
                        <small class="text-muted">JPG, PNG, GIF | Max 2MB</small>
                    </div>

                    <!-- LIVE PREVIEW -->
                    <div class="mt-3">
                        <img id="previewImage"
                             class="img-fluid rounded shadow d-none"
                             style="max-height:200px;">
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="fas fa-save"></i>
                        Save Advertisement
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>

@endsection

<!-- ================= SCRIPTS ================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const fileInput = document.getElementById('imageInput');
    const urlInput = document.getElementById('imageUrlInput');
    const preview = document.getElementById('previewImage');

    fileInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = e => {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
            };
            reader.readAsDataURL(file);
        }
    });

    urlInput.addEventListener('input', function() {
        if (this.value) {
            preview.src = this.value;
            preview.classList.remove('d-none');
        }
    });
});
</script>

<style>
svg.w-5.h-5 { width: 25px; }
.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>