@extends('applicant.applications.step-layout')

@section('title', 'References')
@section('step-title', 'Professional References')
@section('step-description', 'Provide details of professional references who can vouch for your qualifications')

@section('step-content')
<form id="step-form" method="POST" action="{{ route('applicant.applications.update-step', [$application->id, 'references']) }}">
    @csrf
    @method('PUT')
    
    <div class="form-section">
        <h3 class="section-title">
            <i class="fas fa-users"></i>
            Professional References
        </h3>
        
        <div class="info-box">
            <i class="fas fa-info-circle"></i>
            <p>Provide at least 3 professional references who can speak to your qualifications, work ethic, and character. Include supervisors, colleagues, or academic mentors.</p>
        </div>
        
        <div id="references-container">
            @php
                $references = old('references', $formData['references'] ?? []);
                if (empty($references)) {
                    $references = [[], [], []]; // Start with three empty entries
                }
                while (count($references) < 3) {
                    $references[] = []; // Ensure at least 3 references
                }
            @endphp
            
            @foreach($references as $index => $reference)
            <div class="reference-entry" data-index="{{ $index }}">
                <div class="entry-header">
                    <h4 class="entry-title">
                        <i class="fas fa-user-tie"></i>
                        Reference {{ $index + 1 }} @if($index < 3)<span class="required">*</span>@endif
                    </h4>
                    @if($index >= 3)
                        <button type="button" class="btn-remove" onclick="removeReference({{ $index }})">
                            <i class="fas fa-trash"></i>
                        </button>
                    @endif
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-md">
                        <label for="reference_{{ $index }}_name" class="form-label">
                            Full Name <span class="required">*</span>
                        </label>
                        <input type="text" name="references[{{ $index }}][name]" 
                               id="reference_{{ $index }}_name" class="form-control" 
                               value="{{ old("references.{$index}.name", $reference['name'] ?? '') }}" 
                               placeholder="Full name of the reference" required>
                        @error("references.{$index}.name")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="reference_{{ $index }}_designation" class="form-label">
                            Designation/Title <span class="required">*</span>
                        </label>
                        <input type="text" name="references[{{ $index }}][designation]" 
                               id="reference_{{ $index }}_designation" class="form-control" 
                               value="{{ old("references.{$index}.designation", $reference['designation'] ?? '') }}" 
                               placeholder="Job title or designation" required>
                        @error("references.{$index}.designation")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="reference_{{ $index }}_organization" class="form-label">
                        Organization/Institution <span class="required">*</span>
                    </label>
                    <input type="text" name="references[{{ $index }}][organization]" 
                           id="reference_{{ $index }}_organization" class="form-control" 
                           value="{{ old("references.{$index}.organization", $reference['organization'] ?? '') }}" 
                           placeholder="Name of organization or institution" required>
                    @error("references.{$index}.organization")
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-md">
                        <label for="reference_{{ $index }}_email" class="form-label">
                            Email Address <span class="required">*</span>
                        </label>
                        <input type="email" name="references[{{ $index }}][email]" 
                               id="reference_{{ $index }}_email" class="form-control" 
                               value="{{ old("references.{$index}.email", $reference['email'] ?? '') }}" 
                               placeholder="Email address" required>
                        @error("references.{$index}.email")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="reference_{{ $index }}_phone" class="form-label">
                            Phone Number
                        </label>
                        <input type="tel" name="references[{{ $index }}][phone]" 
                               id="reference_{{ $index }}_phone" class="form-control" 
                               value="{{ old("references.{$index}.phone", $reference['phone'] ?? '') }}" 
                               placeholder="Phone number">
                        @error("references.{$index}.phone")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group form-col-md">
                        <label for="reference_{{ $index }}_relationship" class="form-label">
                            Relationship
                        </label>
                        <select name="references[{{ $index }}][relationship]" 
                                id="reference_{{ $index }}_relationship" class="form-control">
                            <option value="">Select Relationship</option>
                            <option value="Supervisor" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Supervisor' ? 'selected' : '' }}>Supervisor</option>
                            <option value="Manager" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Manager' ? 'selected' : '' }}>Manager</option>
                            <option value="Colleague" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Colleague' ? 'selected' : '' }}>Colleague</option>
                            <option value="Academic Advisor" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Academic Advisor' ? 'selected' : '' }}>Academic Advisor</option>
                            <option value="Research Supervisor" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Research Supervisor' ? 'selected' : '' }}>Research Supervisor</option>
                            <option value="Department Head" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Department Head' ? 'selected' : '' }}>Department Head</option>
                            <option value="Client" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Client' ? 'selected' : '' }}>Client</option>
                            <option value="Other" {{ old("references.{$index}.relationship", $reference['relationship'] ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error("references.{$index}.relationship")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    
                    <div class="form-group form-col-md">
                        <label for="reference_{{ $index }}_duration" class="form-label">
                            Duration of Association
                        </label>
                        <input type="text" name="references[{{ $index }}][duration]" 
                               id="reference_{{ $index }}_duration" class="form-control" 
                               value="{{ old("references.{$index}.duration", $reference['duration'] ?? '') }}" 
                               placeholder="e.g., 2019-2023, 3 years">
                        @error("references.{$index}.duration")
                            <div class="input-error">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="reference_{{ $index }}_address" class="form-label">
                        Address
                    </label>
                    <textarea name="references[{{ $index }}][address]" 
                              id="reference_{{ $index }}_address" class="form-control" rows="2" 
                              placeholder="Complete address of the reference">{{ old("references.{$index}.address", $reference['address'] ?? '') }}</textarea>
                    @error("references.{$index}.address")
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="reference_{{ $index }}_context" class="form-label">
                        Context of Association
                    </label>
                    <textarea name="references[{{ $index }}][context]" 
                              id="reference_{{ $index }}_context" class="form-control" rows="3" 
                              placeholder="Briefly describe how you know this person and in what capacity they can provide a reference...">{{ old("references.{$index}.context", $reference['context'] ?? '') }}</textarea>
                    @error("references.{$index}.context")
                        <div class="input-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label class="checkbox-container">
                        <input type="checkbox" name="references[{{ $index }}][permission_to_contact]" 
                               id="reference_{{ $index }}_permission" value="1"
                               {{ old("references.{$index}.permission_to_contact", $reference['permission_to_contact'] ?? false) ? 'checked' : '' }}>
                        <span class="checkmark"></span>
                        I have obtained permission from this person to be contacted as a reference
                    </label>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="add-more-container">
            <button type="button" class="btn btn-outline" onclick="addReference()">
                <i class="fas fa-plus"></i>
                Add Additional Reference
            </button>
        </div>
        
        <div class="form-section">
            <div class="info-box">
                <i class="fas fa-exclamation-triangle"></i>
                <p><strong>Important:</strong> Please ensure you have obtained permission from all references before listing them. The hiring committee may contact them during the evaluation process.</p>
            </div>
        </div>
    </div>
</form>

@php
    $currentStep = 'references';
    $previousStep = 'awards';
    $nextStep = 'documents';
@endphp
@endsection

@push('styles')
<style>
.reference-entry {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.reference-entry:nth-child(-n+3) {
    border-left: 4px solid #10b981;
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.entry-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
}

.entry-title i {
    margin-right: 0.5rem;
    color: #667eea;
}

.btn-remove {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-remove:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.add-more-container {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
}

.info-box i {
    color: #3b82f6;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.info-box p {
    margin: 0;
    color: #1e40af;
    font-size: 0.875rem;
    line-height: 1.5;
}

.info-box i.fa-exclamation-triangle {
    color: #f59e0b;
}

@media (max-width: 768px) {
    .reference-entry {
        padding: 1rem;
    }
    
    .entry-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}
</style>
@endpush

@push('scripts')
<script>
let referenceIndex = {{ count($references) }};

function addReference() {
    const container = document.getElementById('references-container');
    const newEntry = createReferenceEntry(referenceIndex);
    container.appendChild(newEntry);
    referenceIndex++;
}

function removeReference(index) {
    if (index >= 3) { // Only allow removal of additional references
        const entry = document.querySelector(`[data-index="${index}"]`);
        if (entry) {
            entry.remove();
        }
    }
}

function createReferenceEntry(index) {
    const div = document.createElement('div');
    div.className = 'reference-entry';
    div.setAttribute('data-index', index);
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-user-tie"></i>
                Reference ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removeReference(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="reference_${index}_name" class="form-label">
                    Full Name <span class="required">*</span>
                </label>
                <input type="text" name="references[${index}][name]" 
                       id="reference_${index}_name" class="form-control" 
                       placeholder="Full name of the reference" required>
            </div>
            
            <div class="form-group form-col-md">
                <label for="reference_${index}_designation" class="form-label">
                    Designation/Title <span class="required">*</span>
                </label>
                <input type="text" name="references[${index}][designation]" 
                       id="reference_${index}_designation" class="form-control" 
                       placeholder="Job title or designation" required>
            </div>
        </div>
        
        <div class="form-group">
            <label for="reference_${index}_organization" class="form-label">
                Organization/Institution <span class="required">*</span>
            </label>
            <input type="text" name="references[${index}][organization]" 
                   id="reference_${index}_organization" class="form-control" 
                   placeholder="Name of organization or institution" required>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="reference_${index}_email" class="form-label">
                    Email Address <span class="required">*</span>
                </label>
                <input type="email" name="references[${index}][email]" 
                       id="reference_${index}_email" class="form-control" 
                       placeholder="Email address" required>
            </div>
            
            <div class="form-group form-col-md">
                <label for="reference_${index}_phone" class="form-label">
                    Phone Number
                </label>
                <input type="tel" name="references[${index}][phone]" 
                       id="reference_${index}_phone" class="form-control" 
                       placeholder="Phone number">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group form-col-md">
                <label for="reference_${index}_relationship" class="form-label">
                    Relationship
                </label>
                <select name="references[${index}][relationship]" 
                        id="reference_${index}_relationship" class="form-control">
                    <option value="">Select Relationship</option>
                    <option value="Supervisor">Supervisor</option>
                    <option value="Manager">Manager</option>
                    <option value="Colleague">Colleague</option>
                    <option value="Academic Advisor">Academic Advisor</option>
                    <option value="Research Supervisor">Research Supervisor</option>
                    <option value="Department Head">Department Head</option>
                    <option value="Client">Client</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            
            <div class="form-group form-col-md">
                <label for="reference_${index}_duration" class="form-label">
                    Duration of Association
                </label>
                <input type="text" name="references[${index}][duration]" 
                       id="reference_${index}_duration" class="form-control" 
                       placeholder="e.g., 2019-2023, 3 years">
            </div>
        </div>
        
        <div class="form-group">
            <label for="reference_${index}_address" class="form-label">
                Address
            </label>
            <textarea name="references[${index}][address]" 
                      id="reference_${index}_address" class="form-control" rows="2" 
                      placeholder="Complete address of the reference"></textarea>
        </div>
        
        <div class="form-group">
            <label for="reference_${index}_context" class="form-label">
                Context of Association
            </label>
            <textarea name="references[${index}][context]" 
                      id="reference_${index}_context" class="form-control" rows="3" 
                      placeholder="Briefly describe how you know this person and in what capacity they can provide a reference..."></textarea>
        </div>
        
        <div class="form-group">
            <label class="checkbox-container">
                <input type="checkbox" name="references[${index}][permission_to_contact]" 
                       id="reference_${index}_permission" value="1">
                <span class="checkmark"></span>
                I have obtained permission from this person to be contacted as a reference
            </label>
        </div>
    `;
    
    return div;
}
</script>
@endpush