@extends('layouts.applicant.applicant')

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('title', 'Referees and Vision Statement')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.show', $application) }}">{{ $application->application_number }}</a></li>
    <li class="breadcrumb-item active">Referees and Vision Statement</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">Referees and Vision Statement</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            @php
                $previousStep = $currentStep->getPreviousStep();
            @endphp
            @if($previousStep)
                <a href="{{ route('applicant.applications.step', [$application, $previousStep->slug]) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Previous Step
                </a>
            @endif
        </div>
    </div>

    <!-- Dynamic Progress Indicator -->
    @include('applicant.applications.partials.progress-indicator')

    @php
        $referees = $application->referees()->orderBy('serial_no')->get();
        $visionStatement = $application->visionStatement;
        $totalReferees = $referees->count();
        $maxReferees = 2;
        $canAddMore = $totalReferees < $maxReferees;
        $remainingSlots = $maxReferees - $totalReferees;
    @endphp

    <!-- Instructions -->
    <div class="alert alert-info mb-4">
        <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Referee Requirements</h6>
        <div class="row">
            <div class="col-md-6">
                <strong>General Requirements:</strong>
                <ul class="mb-0">
                    <li>Maximum {{ $maxReferees }} referees allowed</li>
                    <li>Must not be relatives of the applicant</li>
                    <li>Must be Indian residents</li>
                    <li>Must know applicant's work personally</li>
                </ul>
            </div>
            <div class="col-md-6">
                <strong>Position Requirements:</strong>
                <ul class="mb-0">
                    <li>Must hold responsible positions</li>
                    <li>Preferably from academic institutions</li>
                    <li>Should be able to evaluate applicant's capabilities</li>
                    <li>Valid contact information required</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Referees Section -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-users me-2"></i>Referees ({{ $totalReferees }}/{{ $maxReferees }})
                </h6>
                @if($application->isEditable() && $canAddMore)
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRefereeModal">
                    <i class="fas fa-plus me-1"></i>Add Referee
                </button>
                @endif
            </div>
        </div>
        <div class="card-body">
            @if($referees->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Sr. No</th>
                                <th>Name</th>
                                <th>Designation</th>
                                <th>Contact Information</th>
                                <th>Address</th>
                                @if($application->isEditable())
                                <th>Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($referees as $referee)
                            <tr>
                                <td class="text-center">{{ $referee->serial_no }}</td>
                                <td class="fw-bold">
                                    {{ $referee->name_of_referee }}
                                </td>
                                <td>
                                    <span class="badge badge-designation">
                                        {{ $referee->designation_short }}
                                    </span>
                                </td>
                                <td>
                                    <div class="contact-info">
                                        <div class="mb-1">
                                            <i class="fas fa-phone text-primary me-1"></i>
                                            <span class="font-monospace">{{ $referee->formatted_mobile }}</span>
                                            @if($referee->is_valid_mobile)
                                                <i class="fas fa-check-circle text-success ms-1" title="Valid mobile number"></i>
                                            @else
                                                <i class="fas fa-exclamation-triangle text-warning ms-1" title="Invalid mobile number"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <i class="fas fa-envelope text-primary me-1"></i>
                                            <span class="text-break">{{ $referee->email_id }}</span>
                                            @if($referee->is_valid_email)
                                                <i class="fas fa-check-circle text-success ms-1" title="Valid email"></i>
                                            @else
                                                <i class="fas fa-exclamation-triangle text-warning ms-1" title="Invalid email"></i>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <small class="text-muted" title="{{ $referee->complete_address }}">
                                        {{ $referee->address_short }}
                                    </small>
                                </td>
                                @if($application->isEditable())
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                onclick="editReferee({{ $referee->id }})" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                onclick="deleteReferee({{ $referee->id }})" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                @if($canAddMore)
                <div class="mt-3">
                    <div class="alert alert-warning">
                        <i class="fas fa-info-circle me-2"></i>
                        You can add {{ $remainingSlots }} more referee{{ $remainingSlots > 1 ? 's' : '' }}.
                    </div>
                </div>
                @else
                <div class="mt-3">
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        You have added the maximum number of referees ({{ $maxReferees }}).
                    </div>
                </div>
                @endif
            @else
                <div class="text-center py-5">
                    <i class="fas fa-users fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">No Referees Added</h5>
                    <p class="text-muted">Add up to {{ $maxReferees }} referees who can vouch for your professional capabilities.</p>
                    @if($application->isEditable())
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRefereeModal">
                            <i class="fas fa-plus me-2"></i>Add First Referee
                        </button>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <!-- Vision Statement Section -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-success">
                <i class="fas fa-lightbulb me-2"></i>Vision Statement
            </h6>
        </div>
        <div class="card-body">
            @if($application->isEditable())
            <form id="visionStatementForm">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="short_term" class="form-label">Short Term Vision</label>
                            <textarea class="form-control" id="short_term" name="short_term" 
                                      rows="8" maxlength="2000" 
                                      placeholder="Describe your short-term professional goals and vision...">{{ $visionStatement->short_term ?? '' }}</textarea>
                            <div class="form-text">
                                <span id="short_term_count">{{ $visionStatement ? $visionStatement->short_term_char_count : 0 }}</span>/2000 characters
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="long_term" class="form-label">Long Term Vision</label>
                            <textarea class="form-control" id="long_term" name="long_term" 
                                      rows="8" maxlength="2000" 
                                      placeholder="Describe your long-term professional goals and vision...">{{ $visionStatement->long_term ?? '' }}</textarea>
                            <div class="form-text">
                                <span id="long_term_count">{{ $visionStatement ? $visionStatement->long_term_char_count : 0 }}</span>/2000 characters
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-end">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-1"></i>Save Vision Statement
                    </button>
                </div>
            </form>
            @else
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-muted">Short Term Vision</h6>
                    <div class="border rounded p-3 bg-light">
                        {{ $visionStatement->short_term ?? 'Not provided' }}
                    </div>
                </div>
                <div class="col-md-6">
                    <h6 class="text-muted">Long Term Vision</h6>
                    <div class="border rounded p-3 bg-light">
                        {{ $visionStatement->long_term ?? 'Not provided' }}
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Navigation -->
    <div class="d-flex justify-content-between mt-4">
        <div>
            @if($previousStep)
                <a href="{{ route('applicant.applications.step', [$application, $previousStep->slug]) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i>Previous: {{ $previousStep->name }}
                </a>
            @endif
        </div>
        
        <div>
            @php
                $nextStep = $currentStep->getNextStep();
            @endphp
            @if($nextStep)
                <a href="{{ route('applicant.applications.step', [$application, $nextStep->slug]) }}" class="btn btn-primary">
                    Next: {{ $nextStep->name }} <i class="fas fa-arrow-right ms-1"></i>
                </a>
            @endif
        </div>
    </div>
</div>

<!-- Add/Edit Referee Modal -->
@if($application->isEditable())
<div class="modal fade" id="addRefereeModal" tabindex="-1" aria-labelledby="addRefereeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRefereeModalLabel">Add Referee</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="refereeForm" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="referee_id" name="referee_id">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name_of_referee" class="form-label">Name of Referee <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name_of_referee" name="name_of_referee" 
                                       required maxlength="255" placeholder="Enter referee's full name">
                                <small class="text-muted">Enter the complete name of the referee</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="designation" class="form-label">Designation <span class="text-danger">*</span></label>
                                <select class="form-select" id="designation" name="designation" required>
                                    <option value="">Select Designation</option>
                                    <option value="Professor">Professor</option>
                                    <option value="Associate Professor">Associate Professor</option>
                                    <option value="Assistant Professor">Assistant Professor</option>
                                    <option value="Director">Director</option>
                                    <option value="Dean">Dean</option>
                                    <option value="Head of Department">Head of Department</option>
                                    <option value="Principal">Principal</option>
                                    <option value="Vice Chancellor">Vice Chancellor</option>
                                    <option value="Registrar">Registrar</option>
                                    <option value="Chief Executive Officer">Chief Executive Officer</option>
                                    <option value="General Manager">General Manager</option>
                                    <option value="Deputy General Manager">Deputy General Manager</option>
                                    <option value="Assistant General Manager">Assistant General Manager</option>
                                    <option value="Chief Technology Officer">Chief Technology Officer</option>
                                    <option value="Chief Operating Officer">Chief Operating Officer</option>
                                    <option value="Senior Manager">Senior Manager</option>
                                    <option value="Manager">Manager</option>
                                    <option value="Deputy Manager">Deputy Manager</option>
                                    <option value="Assistant Manager">Assistant Manager</option>
                                    <option value="Senior Engineer">Senior Engineer</option>
                                    <option value="Chief Engineer">Chief Engineer</option>
                                    <option value="Superintendent Engineer">Superintendent Engineer</option>
                                    <option value="Executive Engineer">Executive Engineer</option>
                                    <option value="Assistant Engineer">Assistant Engineer</option>
                                    <option value="Research Scientist">Research Scientist</option>
                                    <option value="Senior Research Scientist">Senior Research Scientist</option>
                                    <option value="Principal Research Scientist">Principal Research Scientist</option>
                                    <option value="Other">Other</option>
                                </select>
                                <small class="text-muted">Select the referee's current designation</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="mobile_no" class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                <input type="tel" class="form-control" id="mobile_no" name="mobile_no" 
                                       required pattern="[6-9][0-9]{9}" maxlength="10" 
                                       placeholder="Enter 10-digit mobile number">
                                <small class="text-muted">Enter valid 10-digit Indian mobile number</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email_id" class="form-label">Email ID <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="email_id" name="email_id" 
                                       required maxlength="255" placeholder="Enter email address">
                                <small class="text-muted">Enter valid email address</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="complete_address" class="form-label">Complete Address <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="complete_address" name="complete_address" 
                                  rows="4" required maxlength="1000" 
                                  placeholder="Enter complete postal address"></textarea>
                        <small class="text-muted">Enter complete address including city, state, and PIN code</small>
                    </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-primary">Save Referee</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<script>
function editReferee(refereeId) {
    // Fetch referee data and populate modal
    fetch(`{{ route("applicant.referees.show", [$application, "REFEREE_ID"]) }}`.replace('REFEREE_ID', refereeId), {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('referee_id').value = data.id;
        document.getElementById('name_of_referee').value = data.name_of_referee;
        document.getElementById('designation').value = data.designation;
        document.getElementById('mobile_no').value = data.mobile_no;
        document.getElementById('email_id').value = data.email_id;
        document.getElementById('complete_address').value = data.complete_address;
        
        document.getElementById('addRefereeModalLabel').textContent = 'Edit Referee';
        
        // Show modal
        new bootstrap.Modal(document.getElementById('addRefereeModal')).show();
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error loading referee data');
    });
}

function deleteReferee(refereeId) {
    if (confirm('Are you sure you want to delete this referee?')) {
        fetch(`{{ route("applicant.referees.destroy", [$application, "REFEREE_ID"]) }}`.replace('REFEREE_ID', refereeId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deleting referee');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting referee');
        });
    }
}

// Reset modal when opening for new referee
document.querySelector('[data-bs-target="#addRefereeModal"]').addEventListener('click', function() {
    document.getElementById('refereeForm').reset();
    document.getElementById('referee_id').value = '';
    document.getElementById('addRefereeModalLabel').textContent = 'Add Referee';
});

// Handle referee form submission
document.getElementById('refereeForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const refereeId = document.getElementById('referee_id').value;
    
    // Determine if this is an update or create
    const url = refereeId ? 
        `{{ route('applicant.referees.update', [$application, '__REFEREE_ID__']) }}`.replace('__REFEREE_ID__', refereeId) :
        `{{ route('applicant.referees.store', $application) }}`;
    
    if (refereeId) {
        formData.append('_method', 'PUT');
    }
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (response.ok) {
            location.reload();
        } else {
            return response.json().then(data => {
                throw new Error(data.message || 'An error occurred');
            });
        }
    })
    .catch(error => {
        alert('Error: ' + error.message);
        console.error('Error:', error);
    });
});

// Handle vision statement form submission
document.getElementById('visionStatementForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(`{{ route('applicant.applications.update-vision-statement', $application) }}`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Vision statement saved successfully!');
        } else {
            alert('Error saving vision statement: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error saving vision statement');
    });
});

// Character count for vision statement
function updateCharCount(textareaId, countId) {
    const textarea = document.getElementById(textareaId);
    const counter = document.getElementById(countId);
    
    textarea.addEventListener('input', function() {
        counter.textContent = this.value.length;
    });
}

// Initialize character counters
updateCharCount('short_term', 'short_term_count');
updateCharCount('long_term', 'long_term_count');
</script>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.table th {
    background-color: #f8f9fc;
    border-color: #e3e6f0;
    font-weight: 600;
    color: #5a5c69;
    font-size: 0.875rem;
}

.table td {
    vertical-align: middle;
    font-size: 0.875rem;
}

.btn-group .btn {
    margin-right: 2px;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.badge-designation {
    background-color: #6f42c1;
    color: white;
}

.contact-info {
    font-size: 0.85rem;
}

.font-monospace {
    font-family: 'Courier New', monospace;
}

.modal-content {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.alert {
    border: none;
    border-radius: 0.5rem;
}
</style>
@endsection