@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Recruitment Pipeline'))

@section('content')
    <div class="recruitment-page pt-3 pb-4 px-2 px-md-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
            <div>
                <h4 class="page-title mb-0">{{ __('Pipeline board') }}</h4>
                <p class="text-muted small mb-0">{{ __('Drag applications between stages. Rejections require a reason.') }}</p>
            </div>
            <a href="{{ route('admin.recruitment.applications') }}" class="btn btn-sm btn-outline-secondary">{{ __('List view') }}</a>
        </div>
        @livewire('recruitment.admin-recruitment-kanban')
    </div>
@endsection

@push('css')
<style>
    .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 1rem; min-height: 420px; }
    .kanban-col { min-width: 240px; max-width: 280px; flex: 0 0 240px; background: #f1f3f5; border-radius: 8px; }
    .kanban-col-header { padding: 10px 12px; font-weight: 600; font-size: .875rem; border-bottom: 1px solid #dee2e6; }
    .kanban-col-body { padding: 8px; min-height: 200px; }
    .kanban-card { background: #fff; border-radius: 6px; padding: 10px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: grab; }
    .kanban-card:active { cursor: grabbing; }
    .kanban-card.dragging { opacity: .5; }
    .kanban-col.drag-over { background: #e7f1ff; }
</style>
@endpush

@push('script')
<script>
document.addEventListener('livewire:init', function () {
    let draggedId = null;

    document.addEventListener('dragstart', function (e) {
        const card = e.target.closest('[data-app-id]');
        if (!card) return;
        draggedId = card.dataset.appId;
        card.classList.add('dragging');
        e.dataTransfer.setData('text/plain', draggedId);
    });

    document.addEventListener('dragend', function (e) {
        const card = e.target.closest('[data-app-id]');
        if (card) card.classList.remove('dragging');
        document.querySelectorAll('.kanban-col').forEach(c => c.classList.remove('drag-over'));
    });

    document.addEventListener('dragover', function (e) {
        const col = e.target.closest('[data-status]');
        if (col) { e.preventDefault(); col.classList.add('drag-over'); }
    });

    document.addEventListener('dragleave', function (e) {
        const col = e.target.closest('[data-status]');
        if (col) col.classList.remove('drag-over');
    });

    document.addEventListener('drop', function (e) {
        const col = e.target.closest('[data-status]');
        if (!col || !draggedId) return;
        e.preventDefault();
        col.classList.remove('drag-over');
        const status = col.dataset.status;
        Livewire.dispatch('kanban-move', { applicationId: parseInt(draggedId, 10), status: status });
        draggedId = null;
    });
});
</script>
@endpush