@extends('layouts.app')

@section('title', 'Assign New Task')
@section('page-title', 'Assign Task to Team Member')

@section('content')
<div class="card">
    <div class="card-header">
        <h6 class="mb-0"><i class="fas fa-tasks me-2"></i>Task Details</h6>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('leader.activities.store') }}" id="taskForm">
            @csrf
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Select Client <span class="text-danger">*</span></label>
                    <select name="client_id" id="client_id" class="form-control @error('client_id') is-invalid @enderror" required>
                        <option value="">-- Select Client --</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" 
                                data-assigned-to="{{ $client->assigned_to }}"
                                data-assigned-name="{{ $client->assignedTo->name ?? 'Unassigned' }}">
                                {{ $client->company_name }} 
                                ({{ ucfirst($client->status) }}) 
                                - Assigned to: {{ $client->assignedTo->name ?? 'Unassigned' }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted" id="clientAssignedInfo"></small>
                    @error('client_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                
                <div class="col-md-6 mb-3">
                    <label class="form-label">Assign To <span class="text-danger">*</span></label>
                    <select name="assigned_to" id="assigned_to" class="form-control @error('assigned_to') is-invalid @enderror" required>
                        <option value="">-- Select Team Member --</option>
                        @foreach($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }} ({{ ucfirst($member->role) }})</option>
                        @endforeach
                    </select>
                    <div class="form-check mt-2">
                        <input type="checkbox" class="form-check-input" id="autoAssignCheckbox" checked>
                        <label class="form-check-label" for="autoAssignCheckbox">
                            Automatically assign to client's assigned member
                        </label>
                    </div>
                    @error('assigned_to') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                
                <div class="col-md-6 mb-3">
                    <label class="form-label">Activity Type <span class="text-danger">*</span></label>
                    <select name="activity_type" class="form-control @error('activity_type') is-invalid @enderror" required>
                        <option value="call">📞 Call</option>
                        <option value="meeting">🤝 Meeting</option>
                        <option value="proposal">📄 Proposal</option>
                        <option value="renewal">🔄 Renewal Follow-up</option>
                        <option value="service">🛠️ Service Coordination</option>
                        <option value="followup">📌 General Follow-up</option>
                        <option value="compliance">⚖️ Compliance Check</option>
                    </select>
                </div>
                
                <div class="col-md-6 mb-3">
                    <label class="form-label">Due Date <span class="text-danger">*</span></label>
                    <input type="date" name="due_date" class="form-control @error('due_date') is-invalid @enderror" value="{{ old('due_date', date('Y-m-d')) }}" required>
                    @error('due_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                
                <div class="col-md-12 mb-3">
                    <label class="form-label">Subject <span class="text-danger">*</span></label>
                    <input type="text" name="subject" id="subject" class="form-control @error('subject') is-invalid @enderror" placeholder="e.g., Follow up on proposal, Renewal discussion, etc." required>
                    @error('subject') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                
                <div class="col-md-12 mb-3">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="4" placeholder="Detailed instructions for the team member..."></textarea>
                </div>
            </div>
            <!-- Add Study Materials Section -->
            <div class="col-md-12 mb-3">
                <label class="form-label fw-bold mt-2">
                    <i class="fas fa-book me-1"></i> Link Study Materials (Optional)
                </label>
                <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                    @if(isset($studyMaterials) && $studyMaterials->count() > 0)
                        @foreach($studyMaterials as $material)
                            <div class="form-check">
                                <input type="checkbox" name="study_materials[]" value="{{ $material->id }}" 
                                    class="form-check-input" id="material_{{ $material->id }}">
                                <label class="form-check-label" for="material_{{ $material->id }}">
                                    <span class="badge bg-{{ $material->getCategoryBadge() }} me-1">
                                        {{ ucfirst($material->category_type) }}
                                    </span>
                                    <i class="{{ $material->getTypeIcon() }} me-1"></i>
                                    {{ Str::limit($material->title, 60) }}
                                    @if($material->isBeingUsed())
                                        <small class="text-muted">(Used in {{ $material->activities->count() }} tasks)</small>
                                    @endif
                                </label>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted text-center mb-0">
                            No study materials available. 
                            <a href="{{ route('study-materials.create') }}">Create one</a>
                        </p>
                    @endif
                </div>
                <small class="text-muted">Select relevant clauses, tariffs, or guidelines to link with this task</small>
            </div>
            
            <div class="mt-3">
                <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane me-1"></i> Assign Task</button>
                <a href="{{ route('leader.activities.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const clientSelect = document.getElementById('client_id');
        const assignedToSelect = document.getElementById('assigned_to');
        const autoAssignCheckbox = document.getElementById('autoAssignCheckbox');
        const clientAssignedInfo = document.getElementById('clientAssignedInfo');
        const subjectInput = document.getElementById('subject');
        
        // Store original options
        let originalAssignedOptions = Array.from(assignedToSelect.options).map(opt => ({
            value: opt.value,
            text: opt.text
        }));
        
        // Function to get client info
        function getClientInfo() {
            const selectedOption = clientSelect.options[clientSelect.selectedIndex];
            if (selectedOption && selectedOption.value) {
                return {
                    id: selectedOption.value,
                    assignedTo: selectedOption.dataset.assignedTo,
                    assignedName: selectedOption.dataset.assignedName
                };
            }
            return null;
        }
        
        // Function to auto-assign based on client
        function autoAssign() {
            if (!autoAssignCheckbox.checked) return;
            
            const clientInfo = getClientInfo();
            if (clientInfo && clientInfo.assignedTo) {
                assignedToSelect.value = clientInfo.assignedTo;
                clientAssignedInfo.innerHTML = `<span class="text-success">✓ Auto-assigned to: ${clientInfo.assignedName}</span>`;
                
                // Auto-suggest subject
                const clientName = clientSelect.options[clientSelect.selectedIndex]?.text.split(' (')[0];
                if (clientName && !subjectInput.value) {
                    subjectInput.placeholder = `e.g., Follow up with ${clientName}, Send proposal, etc.`;
                }
            } else if (clientInfo && !clientInfo.assignedTo) {
                assignedToSelect.value = '';
                clientAssignedInfo.innerHTML = `<span class="text-warning">⚠ This client is unassigned. Please select a team member.</span>`;
            } else {
                clientAssignedInfo.innerHTML = '';
            }
        }
        
        // Event listener for client selection
        clientSelect.addEventListener('change', function() {
            autoAssign();
        });
        
        // Reset auto-assign info when manually changing assigned_to
        assignedToSelect.addEventListener('change', function() {
            if (autoAssignCheckbox.checked) {
                const clientInfo = getClientInfo();
                if (clientInfo && clientInfo.assignedTo && assignedToSelect.value != clientInfo.assignedTo) {
                    // User manually changed, keep their selection
                    clientAssignedInfo.innerHTML = `<span class="text-info">ℹ Manually assigned to different member</span>`;
                }
            }
        });
        
        // Auto-assign on page load if client is preselected
        if (clientSelect.value) {
            autoAssign();
        }
    });
</script>
@endpush
@endsection