@extends('layouts.app')
@section('title', 'Home')
@section('content') 
<!-- BEGIN: Responsive Table -->
<div class="intro-y box mt-5">
    <div class="d-flex flex-column flex-sm-row align-items-center p-5 border-bottom border-gray-200 dark-border-dark-5">
        <h2 class="fw-medium fs-base me-auto">
            Category's List
        </h2>
    </div>
    <div id="responsive-table" class="p-5">

        <div class="preview">
            <div class="overflow-x-auto">
                <h1>Images for Category: {{ $category }} (Client: {{ $client }})</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th class="text-nowrap">#</th>
                            <th class="text-nowrap">Image</th>
                            <th class="text-nowrap">Name</th>
                            <th class="text-nowrap">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(count($imagePaths) > 0)
                            <div class="image-gallery">
                                @foreach ($imagePaths as $imagePath)
                                    <tr>
                                        <td class="text-nowrap">{{ $loop->iteration }}</td>
                                        <td class="text-nowrap">
                                            <img src="{{ $imagePath }}" alt="Image" width="150" height="150" id="image{{ $loop->iteration }}">
                                        </td>
                                        <td class="text-nowrap">{{ basename($imagePath) }}</td>
                                        <td class="text-nowrap">
                                            <!-- Replace Image Button -->
                                            <button type="button" class="btn btn-warning replace-image-btn" data-bs-toggle="modal" data-bs-target="#replaceImageModal" data-iteration="{{ $loop->iteration }}" data-image-name="{{ basename($imagePath) }}" data-image-path="{{ $imagePath }}">
                                                Replace Image
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </div>
                        @else
                            <p>No images found for this category.</p>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- END: Responsive Table -->

<!-- Modal for Replacing Image (One Modal for All Images) -->
<div class="modal fade" id="replaceImageModal" tabindex="-1" data-bs-backdrop="false"aria-labelledby="replaceImageModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="replaceImageModalLabel">Replace Image</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="replaceImageForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="prompt">Prompt</label>
                        <input type="text" class="form-control" id="prompt" name="prompt" placeholder="Enter prompt for image generation">
                    </div>
                    <div class="form-group">
                        <label for="image-name">Image Name</label>
                        <input type="text" hidden="" class="form-control" id="image-name" name="image-name" readonly>
                    </div>
                    <input type="hidden" id="image-path" name="image-path">
                    <input type="hidden" id="title" name="image-path" value="{{$category}}">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveDataBtn">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    // jQuery to dynamically set the image name and prompt input when clicking Replace Image button
    $(document).ready(function() {
        $('.replace-image-btn').on('click', function () {
            var imageName = $(this).data('image-name');
            var imagePath = $(this).data('image-path');
            var iteration = $(this).data('iteration');
            
            // Set the values in the modal
            $('#image-name').val(imageName);
            $('#image-path').val(imagePath);
            // $('#prompt').val(''); // Clear the prompt input

            // console.log(imagePath)
            var newUrl = imagePath.replace(/[^/]+$/, 'mainImg.jpg');

            var title = $('#title').val()
            title = title.replace(/-/g, ' ')
            console.log(title)
            // debugger


                $.ajax({
                url: '{{ route("generate.prompt") }}', // The route we defined earlier
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',  // CSRF token for security
                    image_url: newUrl,          // Image URL passed from the modal
                    title: title,   // Optional: Send additional context, e.g., title
                },
                success: function(response) {
                    if (response.success) {
                        console.log(response)
                        // Update the #prompt input with the generated prompt
                        $('#prompt').val(response.prompt);
                    } else {
                        alert('Failed to generate prompt.');
                    }
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                    alert('An error occurred while generating the prompt.');
                }
            });
        });
    });

    // Function to handle replacing the image
    function replaceImage() {
        var prompt = $('#prompt').val();
        var imagePath = $('#image-path').val();

        if (!prompt) {
            alert('Please enter a prompt!');
            return;
        }

       console.log(prompt )
       console.log(imagePath)
    }
</script>

<script type="text/javascript">
    $(document).ready(function() {
        // Click event for Save button in the modal
        $('#saveDataBtn').on('click', function() {
            // Get the input value from the modal
            var prompt = $('#prompt').val();
            var image = $('#image-name').val();
            console.log(prompt)
             console.log(image)

            // Perform the AJAX request
            $.ajax({
                url: '{{ route("image.replace") }}', // Your route
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}', // CSRF token for security
                    prompt: prompt, // Send data from the modal input
                    image: image
                },
                success: function(response) {
                    // Handle the response from the server
                    if(response.success) {
                        // Do something, e.g., close the modal, show a message, etc.
                        $('#replaceImageModal').modal('hide'); // Hide the modal
                        alert('Data saved successfully!'); // Show success message
                    } else {
                        alert('Failed to save data.');
                    }
                },
                error: function(xhr, status, error) {
                    // Handle any errors from the request
                    console.log(xhr.responseText); // Log the error in the console
                    alert('An error occurred while saving the data.');
                }
            });
        });
    });
</script>

@endsection