@extends('layouts/layoutMaster')

@section('title', 'Select Kanban Board')

@section('head')
<style>
.board-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.board-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.board-card.selected {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.create-board-card {
    border: 2px dashed #dee2e6;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.create-board-card:hover {
    border-color: #007bff;
    background-color: #e3f2fd;
    transform: translateY(-2px);
}

.empty-state {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px;
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="text-center">
                <h2 class="mb-3">
                    <i class="bx bx-grid-alt me-2 text-primary"></i>
                    Select Your Kanban Board
                </h2>
                <p class="text-muted">Choose a board to start managing your tasks, or create a new one</p>
            </div>
        </div>
    </div>

    <!-- Board Selection -->
    <div class="row justify-content-center">
        <div class="col-12">
            @if($boards->count() > 0)
                <div class="row">
                    @foreach($boards as $board)
                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                        <a href="/tasks/board/{{ $board->id }}" class="text-decoration-none">
                            <div class="card board-card h-100" 
                                 style="border-left: 4px solid {{ $board->color ?? '#3B82F6' }};"
                                 data-board-id="{{ $board->id }}">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <h5 class="card-title mb-0 text-truncate" style="max-width: 200px;" title="{{ $board->name }}">
                                        {{ $board->name }}
                                    </h5>
                                    <span class="badge bg-primary">
                                        {{ $board->task_count }} tasks
                                    </span>
                                </div>
                                
                                @if($board->description)
                                <p class="card-text text-muted small mb-3 flex-grow-1" 
                                   style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">
                                    {{ $board->description }}
                                </p>
                                @endif
                                
                                <div class="mt-auto">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">
                                            <i class="bx bx-calendar me-1"></i>
                                            {{ \Carbon\Carbon::parse($board->created_at)->format('M d, Y') }}
                                        </small>
                                        <button class="btn btn-sm btn-outline-primary edit-board-btn" 
                                                data-board-id="{{ $board->id }}"
                                                onclick="event.preventDefault(); event.stopPropagation(); editBoard({{ $board->id }})">
                                            <i class="bx bx-edit"></i>
                                        </button>
                                    </div>
                                    
                                    <div class="mt-2">
                                        <div class="btn btn-primary w-100">
                                            <i class="bx bx-right-arrow-alt me-1"></i>Click to Open Board
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                    
                    <!-- Create New Board Card -->
                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                        <div class="card create-board-card h-100" 
                             onclick="showCreateBoardModal()">
                            <div class="card-body d-flex flex-column align-items-center justify-content-center text-center">
                                <div class="mb-3">
                                    <i class="bx bx-plus-circle" style="font-size: 3rem; color: #6c757d;"></i>
                                </div>
                                <h5 class="card-title text-muted">Create New Board</h5>
                                <p class="card-text text-muted small">Start a new project or workflow</p>
                                <button class="btn btn-outline-primary" onclick="event.stopPropagation(); showCreateBoardModal()">
                                    <i class="bx bx-plus me-1"></i>Create Board
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <!-- Empty State -->
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6">
                        <div class="card empty-state">
                            <div class="card-body text-center py-5">
                                <div class="mb-4">
                                    <i class="bx bx-grid-alt" style="font-size: 4rem; opacity: 0.8;"></i>
                                </div>
                                <h4 class="mb-3">No Kanban Boards Yet</h4>
                                <p class="mb-4 opacity-75">Create your first kanban board to start organizing and managing your tasks efficiently.</p>
                                <button class="btn btn-light btn-lg" onclick="showCreateBoardModal()">
                                    <i class="bx bx-plus me-2"></i>Create Your First Board
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Create Board Modal -->
<div class="modal fade" id="createBoardModal" tabindex="-1" aria-labelledby="createBoardModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createBoardModalLabel">
                    <i class="bx bx-plus me-2"></i>Create New Board
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createBoardForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="boardName" class="form-label">Board Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="boardName" name="name" required 
                               placeholder="Enter board name..." maxlength="255">
                    </div>
                    <div class="mb-3">
                        <label for="boardDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="boardDescription" name="description" rows="3" 
                                  placeholder="Enter board description..." maxlength="1000"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="boardColor" class="form-label">Board Color</label>
                        <div class="d-flex align-items-center">
                            <input type="color" class="form-control form-control-color" id="boardColor" name="color" value="#3B82F6">
                            <span class="ms-2 text-muted small">Choose a color for your board</span>
                        </div>
                    </div>
                </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" id="createBoardBtn">
                        <span class="spinner-border spinner-border-sm d-none" id="createBoardSpinner"></span>
                        <i class="bx bx-plus" id="createBoardIcon"></i>
                        Create Board
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Board Modal -->
<div class="modal fade" id="editBoardModal" tabindex="-1" aria-labelledby="editBoardModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editBoardModalLabel">
                    <i class="bx bx-edit me-2"></i>Edit Board
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editBoardForm">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editBoardName" class="form-label">Board Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="editBoardName" name="name" required 
                               placeholder="Enter board name..." maxlength="255">
                    </div>
                    <div class="mb-3">
                        <label for="editBoardDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="editBoardDescription" name="description" rows="3" 
                                  placeholder="Enter board description..." maxlength="1000"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="editBoardColor" class="form-label">Board Color</label>
                        <div class="d-flex align-items-center">
                            <input type="color" class="form-control form-control-color" id="editBoardColor" name="color" value="#3B82F6">
                            <span class="ms-2 text-muted small">Choose a color for your board</span>
                        </div>
                    </div>
                </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" id="editBoardBtn">
                        <span class="spinner-border spinner-border-sm d-none" id="editBoardSpinner"></span>
                        <i class="bx bx-save" id="editBoardIcon"></i>
                        Update Board
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Define functions globally first
window.selectBoard = function(boardId) {
    console.log('Selecting board:', boardId);
    const url = `/tasks/board/${boardId}`;
    console.log('Redirecting to:', url);
    window.location.href = url;
};

window.showCreateBoardModal = function() {
    console.log('Showing create board modal');
    const modal = document.getElementById('createBoardModal');
    if (modal) {
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
    }
};

window.editBoard = function(boardId) {
    console.log('Edit board clicked for board ID:', boardId);
    
    // Validate board ID
    if (!boardId) {
        console.error('No board ID provided for editing');
        alert('Error: No board selected for editing');
        return;
    }
    
    // Find the board data
    const boards = @json($boards);
    const board = boards.find(b => b.id == boardId);
    
    if (!board) {
        console.error('Board not found with ID:', boardId);
        alert('Error: Board not found');
        return;
    }
    
    console.log('Found board data:', board);
    
    try {
        // Populate the form with board data
        const nameField = document.getElementById('editBoardName');
        const descField = document.getElementById('editBoardDescription');
        const colorField = document.getElementById('editBoardColor');
        const form = document.getElementById('editBoardForm');
        
        if (!nameField || !descField || !colorField || !form) {
            console.error('Required form elements not found');
            alert('Error: Form elements not found');
            return;
        }
        
        // Set form values
        nameField.value = board.name || '';
        descField.value = board.description || '';
        colorField.value = board.color || '#3B82F6';
        
        // Set the board ID for the form submission
        form.setAttribute('data-board-id', boardId);
        
        // Update modal title to show which board is being edited
        const modalTitle = document.getElementById('editBoardModalLabel');
        if (modalTitle) {
            modalTitle.innerHTML = `<i class="bx bx-edit me-2"></i>Edit Board: ${board.name}`;
        }
        
        console.log('Form populated successfully for board:', board.name);
        
        // Show the modal
        const modal = document.getElementById('editBoardModal');
        if (modal) {
            const bsModal = new bootstrap.Modal(modal);
            bsModal.show();
            console.log('Edit modal opened for board:', board.name);
        } else {
            console.error('Edit modal not found');
            alert('Error: Edit modal not found');
        }
        
    } catch (error) {
        console.error('Error in editBoard function:', error);
        alert('Error opening edit form: ' + error.message);
    }
};


// jQuery ready function
$(document).ready(function() {
    console.log('Board selection page loaded');
    
    // Add click handlers for better compatibility
    $('.board-card').on('click', function() {
        const boardId = $(this).data('board-id');
        if (boardId) {
            selectBoard(boardId);
        }
    });
    
    $('.create-board-card').on('click', function() {
        showCreateBoardModal();
    });
    
    $('.edit-board-btn').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const boardId = $(this).data('board-id');
        const boardName = $(this).closest('.card').find('.card-title').text().trim();
        
        console.log('Edit button clicked:', {
            boardId: boardId,
            boardName: boardName,
            button: this
        });
        
        if (!boardId) {
            console.error('No board ID found on edit button');
            alert('Error: No board ID found');
            return;
        }
        
        editBoard(boardId);
    });
    
    // Create Board Form
    $('#createBoardForm').on('submit', function(e) {
        e.preventDefault();
        
        const $btn = $('#createBoardBtn');
        const $spinner = $('#createBoardSpinner');
        const $icon = $('#createBoardIcon');
        
        // Show loading state
        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $icon.addClass('d-none');
        
        $.ajax({
            url: '{{ route("boards.store") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    // Show success message
                    if (typeof toastr !== 'undefined') {
                        toastr.success(response.message);
                    } else {
                        alert(response.message);
                    }
                    
                    // Close modal and redirect to the new board
                    $('#createBoardModal').modal('hide');
                    window.location.href = response.redirect_url;
                } else {
                    if (typeof toastr !== 'undefined') {
                        toastr.error(response.message || 'Failed to create board');
                    } else {
                        alert(response.message || 'Failed to create board');
                    }
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                if (typeof toastr !== 'undefined') {
                    toastr.error(response?.message || 'Failed to create board');
                } else {
                    alert(response?.message || 'Failed to create board');
                }
            },
            complete: function() {
                // Hide loading state
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
                $icon.removeClass('d-none');
            }
        });
    });
    
    // Edit Board Form
    $('#editBoardForm').on('submit', function(e) {
        e.preventDefault();
        
        console.log('Edit board form submitted');
        
        const $btn = $('#editBoardBtn');
        const $spinner = $('#editBoardSpinner');
        const $icon = $('#editBoardIcon');
        
        // Get board ID from the form
        const boardId = $('#editBoardForm').data('board-id');
        const formData = $(this).serialize();
        
        console.log('Edit form data:', {
            boardId: boardId,
            formData: formData,
            name: $('#editBoardName').val(),
            description: $('#editBoardDescription').val(),
            color: $('#editBoardColor').val()
        });
        
        if (!boardId) {
            console.error('No board ID found in form');
            alert('Error: No board ID found');
            return;
        }
        
        // Show loading state
        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $icon.addClass('d-none');
        
        console.log('Sending update request for board ID:', boardId);
        
        $.ajax({
            url: `/boards/${boardId}`,
            method: 'POST',
            data: formData,
            success: function(response) {
                console.log('Edit board response received:', response);
                
                if (response.success) {
                    console.log('Board updated successfully:', response.message);
                    
                    if (typeof toastr !== 'undefined') {
                        toastr.success(response.message);
                    } else {
                        alert(response.message);
                    }
                    
                    // Close modal and reload page
                    $('#editBoardModal').modal('hide');
                    console.log('Reloading page to show updated board');
                    location.reload();
                } else {
                    console.error('Board update failed:', response.message);
                    
                    if (typeof toastr !== 'undefined') {
                        toastr.error(response.message || 'Failed to update board');
                    } else {
                        alert(response.message || 'Failed to update board');
                    }
                }
            },
            error: function(xhr) {
                console.error('AJAX error updating board:', xhr);
                
                const response = xhr.responseJSON;
                const errorMessage = response?.message || 'Failed to update board';
                
                console.error('Error details:', {
                    status: xhr.status,
                    statusText: xhr.statusText,
                    response: response
                });
                
                if (typeof toastr !== 'undefined') {
                    toastr.error(errorMessage);
                } else {
                    alert(errorMessage);
                }
            },
            complete: function() {
                console.log('Edit board request completed');
                
                // Hide loading state
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
                $icon.removeClass('d-none');
            }
        });
    });
});
</script>
@endpush