@extends('layouts.app')

@section('title', 'Follow Up Queries - ISP ERP System')

@section('page-title', 'Follow Up Queries')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumbs -->
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Follow Up Queries</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-question-circle me-2"></i>Follow Up Queries
                        </h5>
                        <a href="{{ route('follow_up_queries.create') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus me-1"></i>Add New Query
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <!-- Queries Tables - Side by Side -->
    <div class="row">
        <!-- Existing Client Queries -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);">
                    <h5 class="mb-0">
                        <i class="fas fa-user-check me-2"></i>Existing Client Queries
                        <span class="badge badge-light ml-2">{{ $existingQueries->count() }}</span>
                    </h5>
                </div>
                <div class="card-body">
                    @if($existingQueries->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 30px;"><i class="fas fa-grip-vertical text-muted"></i></th>
                                        <th>ID</th>
                                        <th>Query</th>
                                        <th>Sort Order</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="existingQueriesTableBody">
                                    @foreach($existingQueries as $query)
                                        <tr data-id="{{ $query->id }}" data-sort-order="{{ $query->sort_order ?? 0 }}" draggable="true" class="draggable-row" style="cursor: move;">
                                            <td class="drag-handle" style="cursor: grab;"><i class="fas fa-grip-vertical text-muted"></i></td>
                                            <td>{{ $query->id }}</td>
                                            <td>{{ Str::limit($query->query, 80) }}</td>
                                            <td class="sort-order-cell">{{ $query->sort_order ?? 0 }}</td>
                                            <td>{{ $query->created_at->format('d M Y H:i') }}</td>
                                            <td class="no-drag">
                                                <a href="{{ route('follow_up_queries.show', $query->id) }}" class="btn btn-sm btn-outline-info" title="View" draggable="false">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('follow_up_queries.edit', $query->id) }}" class="btn btn-sm btn-outline-primary" title="Edit" draggable="false">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action="{{ route('follow_up_queries.destroy', $query->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this query?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete" draggable="false">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">No existing client queries found</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- New Client Queries -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
                    <h5 class="mb-0">
                        <i class="fas fa-user-plus me-2"></i>New Client Queries
                        <span class="badge badge-light ml-2">{{ $newQueries->count() }}</span>
                    </h5>
                </div>
                <div class="card-body">
                    @if($newQueries->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 30px;"><i class="fas fa-grip-vertical text-muted"></i></th>
                                        <th>ID</th>
                                        <th>Query</th>
                                        <th>Sort Order</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="newQueriesTableBody">
                                    @foreach($newQueries as $query)
                                        <tr data-id="{{ $query->id }}" data-sort-order="{{ $query->sort_order ?? 0 }}" draggable="true" class="draggable-row" style="cursor: move;">
                                            <td class="drag-handle" style="cursor: grab;"><i class="fas fa-grip-vertical text-muted"></i></td>
                                            <td>{{ $query->id }}</td>
                                            <td>{{ Str::limit($query->query, 80) }}</td>
                                            <td class="sort-order-cell">{{ $query->sort_order ?? 0 }}</td>
                                            <td>{{ $query->created_at->format('d M Y H:i') }}</td>
                                            <td class="no-drag">
                                                <a href="{{ route('follow_up_queries.show', $query->id) }}" class="btn btn-sm btn-outline-info" title="View" draggable="false">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('follow_up_queries.edit', $query->id) }}" class="btn btn-sm btn-outline-primary" title="Edit" draggable="false">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action="{{ route('follow_up_queries.destroy', $query->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this query?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete" draggable="false">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">No new client queries found</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Empty State (if both are empty) -->
    @if($existingQueries->count() == 0 && $newQueries->count() == 0)
        <div class="row mt-3">
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No queries found</h5>
                    <p class="text-muted">Click "Add New Query" to create your first query.</p>
                    <a href="{{ route('follow_up_queries.create') }}" class="btn btn-primary mt-3">
                        <i class="fas fa-plus me-1"></i>Add New Query
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>

<style>
.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.card-header {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border-radius: 10px 10px 0 0;
    padding: 1.25rem;
}

.card-header h5 {
    margin: 0;
    font-weight: 600;
}

.table th {
    font-weight: 600;
    background-color: #f8f9fa;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.draggable-row {
    transition: background-color 0.2s;
}

.draggable-row:hover {
    background-color: #f0f0f0;
}

.draggable-row.dragging {
    opacity: 0.5;
    background-color: #e3f2fd;
}

.draggable-row.drag-over {
    border-top: 2px solid #3498db;
}

.no-drag, .no-drag * {
    cursor: default !important;
    user-select: none;
}

.drag-handle {
    cursor: grab !important;
}

.drag-handle:active {
    cursor: grabbing !important;
}
</style>

<script>
$(document).ready(function() {
    // Function to initialize drag and drop for a table body
    function initDragAndDrop(tableBodyId, clientType) {
        const tbody = document.getElementById(tableBodyId);
        if (!tbody) return;

        let draggedRow = null;
        let draggedIndex = null;

        // Make all rows draggable and add event listeners
        const rows = tbody.querySelectorAll('tr');
        rows.forEach(row => {
            row.draggable = true;
            
            // Prevent drag on buttons and links
            const noDragElements = row.querySelectorAll('.no-drag, .no-drag *, button, a, form');
            noDragElements.forEach(el => {
                el.addEventListener('mousedown', function(e) {
                    e.stopPropagation();
                });
                el.addEventListener('dragstart', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                });
            });
            
            // Drag start - use event delegation
            row.addEventListener('dragstart', function(e) {
                // Don't start drag if clicking on buttons/links
                if (e.target.closest('.no-drag') || e.target.tagName === 'BUTTON' || e.target.tagName === 'A' || e.target.closest('form')) {
                    e.preventDefault();
                    return false;
                }
                
                draggedRow = this;
                draggedIndex = Array.from(tbody.children).indexOf(draggedRow);
                draggedRow.classList.add('dragging');
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', draggedRow.getAttribute('data-id'));
                e.stopPropagation();
            });

            // Drag over
            row.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (this !== draggedRow && this.parentNode === tbody) {
                    e.dataTransfer.dropEffect = 'move';
                    // Remove drag-over from all rows
                    Array.from(tbody.children).forEach(r => r.classList.remove('drag-over'));
                    this.classList.add('drag-over');
                }
            });

            // Drag enter
            row.addEventListener('dragenter', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (this !== draggedRow && this.parentNode === tbody) {
                    this.classList.add('drag-over');
                }
            });

            // Drag leave
            row.addEventListener('dragleave', function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.remove('drag-over');
            });

            // Drop
            row.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (!draggedRow || this === draggedRow) {
                    draggedRow = null;
                    return;
                }

                const targetIndex = Array.from(tbody.children).indexOf(this);
                
                // Move the row
                if (draggedIndex < targetIndex) {
                    tbody.insertBefore(draggedRow, this.nextSibling);
                } else {
                    tbody.insertBefore(draggedRow, this);
                }

                // Remove drag-over class from all rows
                Array.from(tbody.children).forEach(r => r.classList.remove('drag-over'));
                draggedRow.classList.remove('dragging');

                // Update sort order values
                updateSortOrder(tbody, clientType);
                
                draggedRow = null;
            });

            // Drag end
            row.addEventListener('dragend', function(e) {
                this.classList.remove('dragging');
                Array.from(tbody.children).forEach(r => r.classList.remove('drag-over'));
                draggedRow = null;
            });
        });
    }

    // Function to update sort order
    function updateSortOrder(tbody, clientType) {
        const rows = Array.from(tbody.querySelectorAll('tr'));
        const orderData = [];

        rows.forEach((row, index) => {
            const id = row.getAttribute('data-id');
            const sortOrder = index + 1; // Start from 1
            row.setAttribute('data-sort-order', sortOrder);
            const sortOrderCell = row.querySelector('.sort-order-cell');
            if (sortOrderCell) {
                sortOrderCell.textContent = sortOrder;
            }
            orderData.push({ id: id, sort_order: sortOrder });
        });

        // Send AJAX request to update sort order
        $.ajax({
            url: '{{ route("follow_up_queries.updateSortOrder") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                client_type: clientType,
                orders: orderData
            },
            success: function(response) {
                if (response.success) {
                    console.log('Sort order updated successfully');
                }
            },
            error: function(xhr) {
                console.error('Error updating sort order:', xhr.responseText);
                alert('Error updating sort order. Please refresh the page.');
            }
        });
    }

    // Initialize drag and drop for both tables
    initDragAndDrop('existingQueriesTableBody', 'existing');
    initDragAndDrop('newQueriesTableBody', 'new');
});
</script>
@endsection