@extends('layouts.app')

@section('title', ($issue->department_id && $issue->assigned_to_id ? 'Re-assign' : 'Assign') . ' Issue - ' . $issue->serial_no)

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">{{ $issue->department_id && $issue->assigned_to_id ? 'Re-assign' : 'Assign' }} Issue</h4>
            <p class="text-muted mb-0">Issue {{ $issue->serial_no }} - {{ $issue->school?->name }}</p>
        </div>
        <a href="{{ route('issues.show', $issue) }}" class="btn btn-outline-secondary">
            <i class="icon-base ti tabler-arrow-left me-1"></i>
            Back to Issue
        </a>
    </div>

    @include('partials.alerts')

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Current Assignment</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label text-muted mb-1">Current Department</label>
                            <p class="mb-0 fw-medium">{{ $issue->department?->name ?? 'Not assigned' }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted mb-1">Current Assignee</label>
                            <p class="mb-0 fw-medium">{{ $issue->assignee?->name ?? 'Not assigned' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ $issue->department_id && $issue->assigned_to_id ? 'Re-assignment' : 'Assignment' }} Details</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('issues.assign.store', $issue) }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Department <span class="text-danger">*</span></label>
                                <select name="department_id" class="form-select js-department-select" required>
                                    <option value="">Select department</option>
                                    @foreach($departments as $department)
                                        <option value="{{ $department->id }}" 
                                                @selected(old('department_id', $issue->department_id) == $department->id)>
                                            {{ $department->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('department_id')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Assign To <span class="text-danger">*</span></label>
                                <select name="assigned_to_id" class="form-select js-employee-select" 
                                        @if(empty(old('department_id', $issue->department_id))) disabled @endif required>
                                    <option value="">Select department first</option>
                                    @php
                                        $selectedDeptId = old('department_id', $issue->department_id);
                                        $selectedDept = $departments->firstWhere('id', $selectedDeptId);
                                    @endphp
                                    @if($selectedDept)
                                        @foreach($selectedDept->employees as $employee)
                                            <option value="{{ $employee->id }}" 
                                                    @selected(old('assigned_to_id', $issue->assigned_to_id) == $employee->id)>
                                                {{ $employee->name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                @error('assigned_to_id')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                                <small class="text-muted d-block mt-1">Select a department to see available employees</small>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Remarks</label>
                                <textarea name="remarks" class="form-control" rows="3" 
                                          placeholder="Add any remarks about this assignment (optional)">{{ old('remarks') }}</textarea>
                                <small class="text-muted d-block mt-1">This remark will be permanently recorded with the assignment history</small>
                            </div>
                            <div class="col-12">
                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-base ti tabler-check me-1"></i>
                                        {{ $issue->department_id && $issue->assigned_to_id ? 'Re-assign' : 'Assign' }}
                                    </button>
                                    <a href="{{ route('issues.show', $issue) }}" class="btn btn-outline-secondary">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Assignment History</h5>
                </div>
                <div class="card-body">
                    @if($issue->assignment_history && count($issue->assignment_history) > 0)
                        <div class="timeline">
                            @foreach(array_reverse($issue->assignment_history) as $index => $record)
                                <div class="timeline-item mb-3 pb-3 {{ !$loop->last ? 'border-bottom' : '' }}">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <small class="text-muted">{{ \Carbon\Carbon::parse($record['assigned_at'])->format('d M Y, H:i') }}</small>
                                        <span class="badge bg-label-info">{{ $record['assigned_by'] }}</span>
                                    </div>
                                    <div class="mb-2">
                                        <strong>From:</strong> 
                                        <span class="text-muted">{{ $record['old_assignee_name'] }}</span>
                                        @if($record['old_department_name'] !== 'Unassigned')
                                            <span class="text-muted">({{ $record['old_department_name'] }})</span>
                                        @endif
                                    </div>
                                    <div class="mb-2">
                                        <strong>To:</strong> 
                                        <span class="fw-medium">{{ $record['new_assignee_name'] }}</span>
                                        <span class="text-muted">({{ $record['new_department_name'] }})</span>
                                    </div>
                                    @if(!empty($record['remarks']))
                                        <div class="mt-2 p-2 bg-light rounded">
                                            <small class="text-muted d-block mb-1">Remarks:</small>
                                            <p class="mb-0 small">{{ $record['remarks'] }}</p>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted text-center py-3 mb-0">No assignment history yet.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const departmentSelect = document.querySelector('.js-department-select');
        const employeeSelect = document.querySelector('.js-employee-select');

        // Store departments data from server
        const departmentsData = @json($departments->mapWithKeys(function($dept) {
            return [$dept->id => $dept->employees->map(function($emp) {
                return ['id' => $emp->id, 'name' => $emp->name];
            })];
        }));

        if (departmentSelect && employeeSelect) {
            departmentSelect.addEventListener('change', function() {
                const departmentId = parseInt(this.value);
                const currentValue = employeeSelect.value;
                
                // Clear and disable employee select
                employeeSelect.innerHTML = '<option value="">Loading...</option>';
                employeeSelect.disabled = true;

                if (!departmentId) {
                    employeeSelect.innerHTML = '<option value="">Select department first</option>';
                    employeeSelect.disabled = true;
                    return;
                }

                // Get employees from pre-loaded data
                const employees = departmentsData[departmentId] || [];
                
                employeeSelect.innerHTML = '<option value="">Select employee</option>';
                if (employees.length === 0) {
                    employeeSelect.innerHTML = '<option value="">No employees available</option>';
                } else {
                    employees.forEach(employee => {
                        const option = document.createElement('option');
                        option.value = employee.id;
                        option.textContent = employee.name;
                        if (employee.id == currentValue) {
                            option.selected = true;
                        }
                        employeeSelect.appendChild(option);
                    });
                }
                employeeSelect.disabled = false;
            });

            // Initialize if department is already selected
            if (departmentSelect.value) {
                departmentSelect.dispatchEvent(new Event('change'));
            }
        }
    });
</script>
@endpush