@extends('buyer.adminlayout')

@section('title')
<title>Enquiry List</title>
@endsection

@section('frontend-content')
<div class="container main-content">
    <div class="container my-4 mx-auto">
        <h4 class="my-3">Enquiry List</h4>

        @if ($enquiries->isEmpty())
        <div class="alert alert-info">No enquiries found.</div>
        @else
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead class="table-dark text-center">
                    <tr>
                        <th>Enquiry ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>User ID</th>
                        <th>Product RFID</th>
                        <th>Enquiry</th>
                        <th>Submitted At</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($enquiries as $index => $enquiry)
                    <tr>
                        <td>{{ $enquiry->id }}</td>
                        <td>{{ $enquiry->name }}</td>
                        <td>{{ $enquiry->email }}</td>
                        <td>{{ $enquiry->user_id }}</td>
                        <td>{{ $enquiry->rfid }}</td>
                        <td>{{ $enquiry->message }}</td>
                        <td>{{ $enquiry->created_at ?? 'N/A' }}</td>
                        <td class="reply_clickable" style="cursor: pointer; color: blue">Reply</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
    <div>
        <div class="modal fade" id="replyModal" tabindex="-1" aria-labelledby="replyModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="replyForm" method="POST">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="replyModalLabel">Reply to Buyer Enquiry</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="d-none mb-3">
                                <label for="enquiry_id" class="form-label">Enquiry ID</label>
                                <input type="text" class="form-control" id="enquiry_id" name="id">
                            </div>
                            <div class="d-none mb-3">
                                <label for="user_id" class="form-label">User ID</label>
                                <input type="text" class="form-control" id="user_id" name="user_id">
                            </div>
                            <div class="d-none mb-3">
                                <label for="rfid" class="form-label">RFID</label>
                                <input type="text" class="form-control" id="rfid" name="rfid">
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">Buyer</label>
                                <input type="text" class="form-control" id="username" name="name" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="message" class="form-label">Message</label>
                                <textarea class="form-control" id="message" name="message" rows="3" readonly></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="replay_message" class="form-label">Reply</label>
                                <textarea name="replay_message" id="replay_message" class="form-control" rows="3" required></textarea>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary">Send reply</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let replyButtons = document.querySelectorAll('.reply_clickable');

        replyButtons.forEach(button => {
            button.addEventListener('click', function() {
                let row = this.closest('tr');
                let enquiryId = row.children[0].textContent.trim();
                let name = row.children[1].textContent.trim();
                let userId = row.children[3].textContent.trim();
                let rfid = row.children[4].textContent.trim();
                let message = row.children[5].textContent.trim();

                // Set values into modal hidden inputs
                document.querySelector('#replyModal #enquiry_id').value = enquiryId;
                document.querySelector('#replyModal #user_id').value = userId;
                document.querySelector('#replyModal #rfid').value = rfid;
                document.querySelector('#replyModal #username').value = name;
                document.querySelector('#replyModal #message').value = message;

                // Show modal
                let replyModal = new bootstrap.Modal(document.getElementById('replyModal'));
                replyModal.show();
            });
        });
    });

    $(document).ready(function() {
        $('#replyForm').on('submit', function(e) {

            e.preventDefault();
            let submitButton = $(this).find('button[type="submit"]');
            submitButton.text('Submitting...').attr('disabled', true);

            let formData = new FormData(this);

            // Send AJAX request
            $.ajax({
                url: '/storeReply', // Change to your actual endpoint
                type: 'POST',
                data: formData,
                processData: false, // Prevent jQuery from processing the data
                contentType: false, // Prevent jQuery from setting the content type
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                        'content') // Ensure CSRF token for Laravel
                },
                success: function(response) {

                    $('#replyForm')[0].reset(); // Clear the form
                    $('#replyModal').modal('hide'); // Hide the modal
                    toastr.success('Your message has been sent successfully!', 'Success');
                },
                error: function(xhr, status, error) {
                    alert('An error occurred. Please try again.');
                }

            });
            submitButton.text('Send Reply').attr('disabled', false);
        });
    });
</script>
@endpush