@extends('layouts/contentNavbarLayout')

@section('title', 'Oxytech - Enquiry')

@section('content')
    <h4 class="py-3 mb-4"><span class="text-muted fw-light">Enquiries /</span> Manage Enquiries
    </h4>

    <hr class="my-5">
    @if (session('success') || session('error'))
        <div class="alert alert-{{ session('success') ? 'success' : 'danger' }}">
            {{ session('success') ? session('success') : session('error') }}
        </div>
    @endif
    <!-- Basic Bootstrap Table -->
    <div class="row">
        <div class="col-md-4">
    
            <div class="mb-3">
                <input type="text" id="contactSearch" class="form-control" placeholder="Search contacts..." />
            </div>
        </div>
      </div>
      <div class="card">
        <h5 class="card-header">Manage Enquiries</h5>
        <div class="table-responsive text-nowrap">
         <form id="bulkDeleteForm" action="{{ route('contacts.bulkDestroy') }}" method="POST">
                @csrf
                @method('DELETE') 
                <table class="table">
            <div class="mt-3 mb-4 card-header">
                        <button type="submit" class="btn btn-danger" id="bulkDeleteButton">Delete Selected</button>
                    </div> 
                    <thead>
                        <tr>
                        <th>
                                <input type="checkbox" id="checkAll">
                            </th> 
                            @foreach ($columns as $column)
                                @if (!in_array($column, ['id', 'middle_name', 'organization', 'address', 'website', 'last_name', 'adderess', 'message', 'subject', 'updated_at']))
                                    <th>{{ ucfirst($column) === 'image_path' ? 'Banner Image' : ucfirst($column) }}</th>
                                @endif
                            @endforeach
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                        @foreach ($paginationdata as $item)
                            <tr>
                             <td>
                                    <input type="checkbox" class="selectItem" name="selected[]" value="{{ $item->id }}">
                                </td> 
                                @foreach ($columns as $column)
                                    @if (!in_array($column, ['id', 'middle_name', 'organization', 'address', 'website', 'last_name', 'adderess', 'message', 'subject', 'updated_at']))
                                        <td>
                                            @if ($column === 'image_path')
                                                @if (!empty($item->{$column}))
                                                    <img src="{{ asset('storage/' . $item->image_path) }}"
                                                        alt="{{ $item->alt }}" class="img-thumbnail"
                                                        style="max-width: 50px; max-height: 50px;">
                                                @endif
                                            @elseif ($column === 'type')
                                                <span class="badge px-2 rounded-pill bg-label-{{ $item->type == 0 ? 'warning' : 'info' }} text-capitalize">
                                                    {{ $item->type == 0 ? 'Walking' : 'Online' }}
                                                </span>
                                            @elseif ($column === 'add_to_crm')
                                                @if ($item->add_to_crm == 0)
                                                    <form action="{{ route('contacts.updateAddToCrm', $item->id) }}" method="POST" id="addToCrmForm{{ $item->id }}" class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="button" class="btn badge px-2 rounded-pill bg-label-danger text-capitalize ml-4 add-crm-btn"
                                                            data-bs-toggle="modal" data-bs-target="#confirmModal2{{ $item->id }}">
                                                            No
                                                        </button>
                                                    </form>
                                                    <!-- Confirmation Modal -->
                                                    <div class="modal fade" id="confirmModal2{{ $item->id }}" tabindex="-1" aria-labelledby="confirmModalLabel2{{ $item->id }}" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="confirmModalLabel2{{ $item->id }}">Confirm Action</h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    Are you sure you want to add this contact to the CRM?
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                                    <button type="submit" class="btn btn-primary" form="addToCrmForm{{ $item->id }}">Confirm</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @else
                                                    <span class="badge px-2 rounded-pill bg-label-success text-capitalize ml-4">Yes</span>
                                                @endif
                                            @else
                                                {{ $item->{$column} }}
                                            @endif
                                        </td>
                                    @endif
                                @endforeach
                                <td>
                                    <div class="action-list d-flex align-items-center">
                                        <a class="btn p-0 me-3" data-bs-toggle="modal" data-bs-target="#detailsModal{{ $item->id }}"
                                            title="Detailed View">
                                            <i class="mdi mdi-file-find text-primary"></i>
                                        </a>
                                        @if (isset($userGroupPermissions['contacts']) && $userGroupPermissions['contacts']['deletes'] == 1)
                                            <form action="{{ route('contacts.destroy', $item->id) }}" method="post" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn p-0 text-danger delete-speaker-btn" type="button"
                                                    data-speaker-id="{{ $item->id }}" title="Delete">
                                                    <i class="mdi mdi-trash-can-outline"></i>
                                                </button>
                                            </form>
                                        @else
                                            <button class="btn p-0 text-muted" type="button" disabled title="No permission">
                                                <i class="mdi mdi-trash-can-outline"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            <div class="modal fade" id="detailsModal{{ $item->id }}" tabindex="-1"
                                aria-labelledby="detailsModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="detailsModalLabel">View Details
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body"
                                            style="word-break: unset !important; word-wrap: break-word !important;">
                                            <dl class="row">
                                                @foreach ($item->getTableColumns() as $column)
                                                    @if ($column !== 'id')
                                                        <dt class="col-sm-4">
                                                            {{ ucfirst(str_replace('_', ' ', $column)) }}:
                                                        </dt>
                                                        <dd class="col-sm-8">
                                                            @if ($column === 'image_path' && !empty($item->{$column}))
                                                                <img src="{{ asset('storage/' . $item->{$column}) }}"
                                                                    alt="{{ $item->image_alt }}"
                                                                    class="img-thumbnail"
                                                                    style="max-width: 50px; max-height: 50px;">
                                                            @elseif ($column === 'team')
                                                                {{ $item->teamModel->team }}
                                                            @elseif ($column === 'status')
                                                                {!! $item->{$column} == 1
                                                                    ? '<span class="badge px-2 rounded-pill bg-label-danger" text-capitalized="">closed</span>'
                                                                    : '<span class="badge px-2 rounded-pill bg-label-warning" text-capitalized="">pending</span>' !!}
                                                            @else
                                                                {{ $item->{$column} }}
                                                            @endif
                                                        </dd>
                                                    @endif
                                                @endforeach
                                            </dl>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </tbody>
                </table>
           {{--  </form> --}}
            <div class="d-flex justify-content-center col-md-2 pagination">
                {{ $paginationdata->links() }}
            </div>
        </div>
    </div>
    
    <!-- Basic Pagination -->

    <!--/ Basic Pagination -->
    <!--/ Basic Bootstrap Table -->
    <hr class="my-5">



    <!-- Assuming you have included jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete the selected items?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn1">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this Enquiry?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('contactSearch');
            const tableBody = document.querySelector('tbody');
            const pagination = document.querySelector('.pagination');
    
            // Debounce function to limit the number of AJAX requests
            function debounce(func, delay) {
                let timer;
                return function (...args) {
                    clearTimeout(timer);
                    timer = setTimeout(() => func.apply(this, args), delay);
                };
            }  
            // Function to fetch the filtered data
            function fetchContacts(query) {
                const url = new URL(window.location.href);
                url.searchParams.set('search', query);
    
                fetch(url)
                    .then(response => response.text())
                    .then(data => {
                        // Create a temporary div to hold the response HTML
                        const tempDiv = document.createElement('div');
                        tempDiv.innerHTML = data;
    
                        // Update the table body with the new filtered rows
                        const newTableBody = tempDiv.querySelector('tbody');
                        tableBody.innerHTML = newTableBody.innerHTML;
    
                        // Update pagination links
                        const newPagination = tempDiv.querySelector('.pagination');
                        pagination.innerHTML = newPagination.innerHTML;
                    })
                    .catch(error => {
                        console.error('Error fetching contacts:', error);
                    });
            }   
            // Event listener for search input (keyup event)
            searchInput.addEventListener('keyup', debounce(function() {
                const query = searchInput.value;
                fetchContacts(query);
            }, 500)); // Delay of 500ms
        });
    </script>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const deleteButtons = document.querySelectorAll('.delete-speaker-btn');
        const deleteConfirmationModal = new bootstrap.Modal(document.getElementById('deleteConfirmationModal'));

        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const speakerId = this.getAttribute('data-speaker-id');
                document.getElementById('confirmDeleteBtn').setAttribute('data-speaker-id',
                    speakerId);
                deleteConfirmationModal.show();
            });
        });

        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
        confirmDeleteBtn.addEventListener('click', function() {
            const speakerId = this.getAttribute('data-speaker-id');
            const form = document.createElement('form');
            form.action = "{{ route('contacts.destroy', ':id') }}".replace(':id', speakerId);
            form.method = 'POST';
            form.innerHTML = '@csrf @method('DELETE')';
            document.body.appendChild(form);
            form.submit();
        });
    });
</script>
 <script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkAll = document.getElementById('checkAll');
        const checkboxes = document.querySelectorAll('.selectItem');
        const bulkDeleteForm = document.getElementById('bulkDeleteForm');
        const confirmDeleteModal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
        const confirmDeleteBtn1 = document.getElementById('confirmDeleteBtn1');
        let selectedIds = [];
        // Toggle all checkboxes
        checkAll.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = checkAll.checked;
            });
            updateSelectedIds();
        });
        // Update "Check All" if all individual checkboxes are selected/deselected
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                checkAll.checked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                updateSelectedIds();
            });
        });

        // Update the selected IDs based on checked checkboxes
        function updateSelectedIds() {
            selectedIds = Array.from(checkboxes)
                .filter(checkbox => checkbox.checked)
                .map(checkbox => checkbox.value);
        }

        // Confirm deletion of selected items
        bulkDeleteForm.addEventListener('submit', function(event) {
            event.preventDefault();
            if (selectedIds.length > 0) {
                confirmDeleteModal.show();
            } else {
                alert('Please select at least one item to delete.');
            }
        });

        // Handle delete confirmation
        confirmDeleteBtn1.addEventListener('click', function() {
            // Add the selected IDs to the form
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'selected[]';
            input.value = selectedIds.join(',');
            bulkDeleteForm.appendChild(input);
            bulkDeleteForm.submit();
        });
    });
</script>