@extends('layouts.app')

@section('content')
<div class="container">
    <h3>Search Images</h3>
    <div class="col-md-6 col-12 position-relative">
        <input type="text" id="search" class="form-control pe-5" placeholder="Cari gambar...">
        <!-- Tombol X -->
        <button type="button" 
                id="clearSearch" 
                class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent"
                style="font-size: 18px; line-height: 1; display:none;">
            &times;
        </button>
    </div>
    <div class="row mt-4" id="result"></div>
</div>

<style>
    .img-card {
        width: 100%;
        height: 200px; /* tinggi seragam */
        object-fit: cover; /* crop otomatis agar proporsional */
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const input = document.getElementById("search");
    const clearBtn = document.getElementById("clearSearch");

    function toggleClearButton() {
        clearBtn.style.display = input.value ? "block" : "none";
    }

    toggleClearButton();
    input.addEventListener("input", toggleClearButton);

    // Klik tombol X → hapus isi
    clearBtn.addEventListener("click", function() {
        input.value = "";
        toggleClearButton();
        input.dispatchEvent(new Event('keyup')); // trigger pencarian ulang kosong
    });

    // AJAX search
    input.addEventListener('keyup', function() {
        let query = this.value;

        fetch("{{ route('collection_activities.search_fotoKunjungan') }}?q=" + query)
            .then(response => response.json())
            .then(data => {
                let resultBox = document.getElementById('result');
                resultBox.innerHTML = "";

                if(data.length === 0){
                    resultBox.innerHTML = "<div class='col-12'><p class='text-center text-muted'>Tidak ada gambar ditemukan</p></div>";
                } else {
                    data.forEach(img => {
                        resultBox.innerHTML += `
                            <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                                <div class="card shadow-sm h-100">
                                    <img src="${img.stored_path}/${img.original_filename}" class="img-card" alt="${img.original_filename}">
                                    <div class="card-body text-center">
                                        <p class="card-text fw-bold">${img.created_at}</p>
                                        <a href="${img.stored_path}/${img.original_filename}" download class="btn btn-sm btn-primary">
                                            Download
                                        </a>
                                    </div>
                                </div>
                            </div>`;
                    });
                }
            });
    });
});
</script>
@endsection