@extends('layouts.admin')

@section('title', 'Application Assignments')

@section('breadcrumbs')
    <li class="breadcrumb-item active">Application Assignments</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Application Assignments</h1>
            <p class="text-muted">Assign applications to evaluators for review</p>
        </div>
        <div>
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bulkAssignModal">
                <i class="fas fa-layer-group me-2"></i>Bulk Assignment
            </button>
            <a href="{{ route('admin.application-assignments.evaluator-dashboard') }}" class="btn btn-outline-info">
                <i class="fas fa-tachometer-alt me-2"></i>Evaluator Dashboard
            </a>
            <a href="{{ route('admin.application-assignments.history') }}" class="btn btn-outline-secondary">
                <i class="fas fa-history me-2"></i>Assignment History
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Applications
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $stats['total_applications'] }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Assigned Applications
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $stats['assigned_applications'] }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Unassigned Applications
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $stats['unassigned_applications'] }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Total Evaluators
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $stats['total_evaluators'] }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filters</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.application-assignments.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="advertisement_id" class="form-label">Advertisement</label>
                    <select class="form-select" id="advertisement_id" name="advertisement_id">
                        <option value="">All Advertisements</option>
                        @foreach($advertisements as $advertisement)
                            <option value="{{ $advertisement->id }}" {{ request('advertisement_id') == $advertisement->id ? 'selected' : '' }}>
                                {{ $advertisement->title }} ({{ $advertisement->department->name }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="department_id" class="form-label">Department</label>
                    <select class="form-select" id="department_id" name="department_id">
                        <option value="">All Departments</option>
                        @foreach($departments as $department)
                            <option value="{{ $department->id }}" {{ request('department_id') == $department->id ? 'selected' : '' }}>
                                {{ $department->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">All Statuses</option>
                        <option value="submitted" {{ request('status') === 'submitted' ? 'selected' : '' }}>Submitted</option>
                        <option value="under_review" {{ request('status') === 'under_review' ? 'selected' : '' }}>Under Review</option>
                        <option value="shortlisted" {{ request('status') === 'shortlisted' ? 'selected' : '' }}>Shortlisted</option>
                        <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="assigned_status" class="form-label">Assignment Status</label>
                    <select class="form-select" id="assigned_status" name="assigned_status">
                        <option value="">All</option>
                        <option value="assigned" {{ request('assigned_status') === 'assigned' ? 'selected' : '' }}>Assigned</option>
                        <option value="unassigned" {{ request('assigned_status') === 'unassigned' ? 'selected' : '' }}>Unassigned</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <a href="{{ route('admin.application-assignments.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i> Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Applications Table -->
    <div class="card shadow">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                Applications ({{ $applications->total() }} total)
            </h6>
            <div>
                <button type="button" class="btn btn-sm btn-success" onclick="showBulkAssignModal()">
                    <i class="fas fa-tasks me-1"></i>Bulk Assign
                </button>
            </div>
        </div>
        <div class="card-body">
            @if($applications->count() > 0)
                <form id="bulkAssignForm">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th width="30">
                                        <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                    </th>
                                    <th>Application</th>
                                    <th>Advertisement</th>
                                    <th>Department</th>
                                    <th>Status</th>
                                    <th>Assignment Status</th>
                                    <th>Assigned Evaluators</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($applications as $application)
                                <tr>
                                    <td>
                                        <input type="checkbox" name="selected_applications[]" value="{{ $application->id }}" class="application-checkbox">
                                    </td>
                                    <td>
                                        <div>
                                            <div class="fw-bold">{{ $application->application_number }}</div>
                                            <div class="text-muted small">{{ $application->user->name }}</div>
                                            <div class="text-muted small">{{ $application->user->email }}</div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 200px;" title="{{ $application->advertisement->title }}">
                                            {{ $application->advertisement->title }}
                                        </div>
                                        <div class="text-muted small">{{ $application->advertisement->position_type }}</div>
                                    </td>
                                    <td>{{ $application->advertisement->department->name }}</td>
                                    <td>
                                        <span class="badge bg-{{ $application->status_color }}">
                                            {{ ucfirst(str_replace('_', ' ', $application->status)) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($application->isAssignedToEvaluators())
                                            <span class="badge bg-success">Assigned</span>
                                        @else
                                            <span class="badge bg-warning">Unassigned</span>
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $assignedEvaluators = $application->getAssignedEvaluators();
                                        @endphp
                                        @if($assignedEvaluators->count() > 0)
                                            @foreach($assignedEvaluators->take(2) as $evaluator)
                                                <span class="badge bg-info me-1">{{ $evaluator->name }}</span>
                                            @endforeach
                                            @if($assignedEvaluators->count() > 2)
                                                <span class="badge bg-secondary">+{{ $assignedEvaluators->count() - 2 }} more</span>
                                            @endif
                                        @else
                                            <span class="text-muted">None</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.application-assignments.show', $application) }}" 
                                               class="btn btn-sm btn-outline-primary" title="View & Assign">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.applications.show', $application) }}" 
                                               class="btn btn-sm btn-outline-info" title="View Application">
                                                <i class="fas fa-file-alt"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </form>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $applications->appends(request()->query())->links() }}
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No applications found</h5>
                    <p class="text-muted">No applications match your current filters.</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Bulk Assignment Modal -->
<div class="modal fade" id="bulkAssignModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Application Assignment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('admin.application-assignments.bulk-assign') }}">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="assignment_criteria" class="form-label">Assignment Criteria</label>
                                <select class="form-select" id="assignment_criteria" name="assignment_criteria" required>
                                    <option value="">Select Criteria</option>
                                    <option value="department">By Department</option>
                                    <option value="advertisement">By Advertisement</option>
                                    <option value="position_type">By Position Type</option>
                                    <option value="random">Random Assignment</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3" id="criteria_options" style="display: none;">
                                <label class="form-label">Criteria Value</label>
                                <select class="form-select" id="criteria_value" name="criteria_value">
                                    <option value="">Select Value</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Evaluator Assignments</label>
                        <div id="evaluator_assignments">
                            <div class="row mb-2 evaluator-assignment">
                                <div class="col-md-8">
                                    <select class="form-select" name="evaluator_assignments[0][evaluator_id]" required>
                                        <option value="">Select Evaluator</option>
                                        @foreach($evaluators as $evaluator)
                                            <option value="{{ $evaluator->id }}">{{ $evaluator->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="number" class="form-control" name="evaluator_assignments[0][count]" 
                                           placeholder="Count" min="1" required>
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeEvaluatorAssignment(this)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="addEvaluatorAssignment()">
                            <i class="fas fa-plus"></i> Add Evaluator
                        </button>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Note:</strong> Applications will be assigned based on the selected criteria. 
                        Only unassigned applications matching the criteria will be considered.
                    </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-success">Assign Applications</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let evaluatorAssignmentIndex = 1;

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.application-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
}

function showBulkAssignModal() {
    const selectedCheckboxes = document.querySelectorAll('.application-checkbox:checked');
    
    if (selectedCheckboxes.length === 0) {
        alert('Please select at least one application to assign.');
        return;
    }
    
    const modal = new bootstrap.Modal(document.getElementById('bulkAssignModal'));
    modal.show();
}

function addEvaluatorAssignment() {
    const container = document.getElementById('evaluator_assignments');
    const newAssignment = document.querySelector('.evaluator-assignment').cloneNode(true);
    
    // Update names and clear values
    newAssignment.querySelectorAll('select, input').forEach(element => {
        element.name = element.name.replace('[0]', `[${evaluatorAssignmentIndex}]`);
        element.value = '';
    });
    
    container.appendChild(newAssignment);
    evaluatorAssignmentIndex++;
}

function removeEvaluatorAssignment(button) {
    const assignments = document.querySelectorAll('.evaluator-assignment');
    if (assignments.length > 1) {
        button.closest('.evaluator-assignment').remove();
    }
}

// Handle assignment criteria change
document.getElementById('assignment_criteria').addEventListener('change', function() {
    const criteriaOptions = document.getElementById('criteria_options');
    const criteriaValue = document.getElementById('criteria_value');
    
    if (this.value === 'department') {
        criteriaOptions.style.display = 'block';
        criteriaValue.innerHTML = '<option value="">Select Department</option>';
        @foreach($departments as $department)
            criteriaValue.innerHTML += '<option value="{{ $department->id }}">{{ $department->name }}</option>';
        @endforeach
        criteriaValue.name = 'department_id';
    } else if (this.value === 'advertisement') {
        criteriaOptions.style.display = 'block';
        criteriaValue.innerHTML = '<option value="">Select Advertisement</option>';
        @foreach($advertisements as $advertisement)
            criteriaValue.innerHTML += '<option value="{{ $advertisement->id }}">{{ $advertisement->title }}</option>';
        @endforeach
        criteriaValue.name = 'advertisement_id';
    } else if (this.value === 'position_type') {
        criteriaOptions.style.display = 'block';
        criteriaValue.innerHTML = '<option value="">Select Position Type</option>' +
                                 '<option value="Professor">Professor</option>' +
                                 '<option value="Associate Professor">Associate Professor</option>' +
                                 '<option value="Assistant Professor">Assistant Professor</option>';
        criteriaValue.name = 'position_type';
    } else {
        criteriaOptions.style.display = 'none';
    }
});
</script>
@endsection