@extends('layouts.app')

@section('title', 'Claim Credit Points')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Claim Credit Points</h1>
                    <p class="text-gray-600 mt-1">{{ $activity->activity_name }}</p>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-500">Application #{{ $application->application_number }}</div>
                </div>
            </div>
        </div>

        <!-- Activity Details -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Activity Details</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500">Category</label>
                    <p class="text-gray-900 font-medium">{{ $activity->category_label }}</p>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-500">Points Range</label>
                    <p class="text-gray-900 font-medium">{{ $activity->point_range }}</p>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-500">Unit Type</label>
                    <p class="text-gray-900 font-medium">{{ $activity->unit_type_label }}</p>
                </div>
                
                @if($activity->max_claimable_instances)
                <div>
                    <label class="block text-sm font-medium text-gray-500">Maximum Claimable</label>
                    <p class="text-gray-900 font-medium">{{ $activity->max_claimable_instances }} instances</p>
                </div>
                @endif
            </div>
            
            @if($activity->description)
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-500">Description</label>
                <p class="text-gray-900">{{ $activity->description }}</p>
            </div>
            @endif
            
            @if($activity->applicable_conditions)
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-500">Applicable Conditions</label>
                <p class="text-gray-900">{{ $activity->applicable_conditions }}</p>
            </div>
            @endif
        </div>

        <!-- Tabular Claim Form -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <form action="{{ route('applicant.credit-points.store', $application) }}" method="POST" enctype="multipart/form-data" id="credit-points-form">
                @csrf
                <input type="hidden" name="credit_point_activity_id" value="{{ $activity->id }}">

                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-star"></i>
                        Credit Point Claims
                    </h3>
                    
                    <div class="info-box mb-4">
                        <i class="fas fa-info-circle"></i>
                        <p>You can add multiple claims for this activity. Each claim should represent a separate instance or occurrence.</p>
                    </div>
                    
                    <div id="claims-container">
                        @php
                            $claims = old('claims', []);
                            if (empty($claims)) {
                                $claims = [[]]; // Start with one empty claim
                            }
                        @endphp
                        
                        @foreach($claims as $index => $claim)
                        <div class="claim-entry" data-index="{{ $index }}">
                            <div class="entry-header">
                                <h4 class="entry-title">
                                    <i class="fas fa-award"></i>
                                    Claim {{ $index + 1 }}
                                </h4>
                                @if($index > 0)
                                    <button type="button" class="btn-remove" onclick="removeClaim({{ $index }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                @endif
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <!-- Claimed Instances -->
                                <div>
                                    <label for="claim_{{ $index }}_instances" class="block text-sm font-medium text-gray-700 mb-2">
                                        Number of {{ $activity->unit_type_label }} <span class="text-red-500">*</span>
                                    </label>
                                    <input type="number" name="claims[{{ $index }}][claimed_instances]" 
                                           id="claim_{{ $index }}_instances" 
                                           value="{{ old("claims.{$index}.claimed_instances", $claim['claimed_instances'] ?? 1) }}" 
                                           required min="1"
                                           @if($activity->max_claimable_instances) max="{{ $activity->max_claimable_instances }}" @endif
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           onchange="calculatePoints({{ $index }})">
                                    @error("claims.{$index}.claimed_instances")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                
                                <!-- Date/Period -->
                                <div>
                                    <label for="claim_{{ $index }}_date" class="block text-sm font-medium text-gray-700 mb-2">
                                        Date/Period
                                    </label>
                                    <input type="text" name="claims[{{ $index }}][date_period]" 
                                           id="claim_{{ $index }}_date" 
                                           value="{{ old("claims.{$index}.date_period", $claim['date_period'] ?? '') }}"
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           placeholder="e.g., Jan 2023, 2022-2023">
                                    @error("claims.{$index}.date_period")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                
                                <!-- Points Calculation Display -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Calculated Points
                                    </label>
                                    <div id="points-calculation-{{ $index }}" class="w-full border border-gray-200 rounded-md px-3 py-2 bg-gray-50 text-sm text-gray-600">
                                        <!-- Points will be calculated here -->
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Supporting Details -->
                            <div class="mt-4">
                                <label for="claim_{{ $index }}_details" class="block text-sm font-medium text-gray-700 mb-2">
                                    Supporting Details <span class="text-red-500">*</span>
                                </label>
                                <textarea name="claims[{{ $index }}][supporting_details]" 
                                          id="claim_{{ $index }}_details" rows="3" required
                                          class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                          placeholder="Provide detailed information about this specific claim, including dates, institutions, outcomes, etc.">{{ old("claims.{$index}.supporting_details", $claim['supporting_details'] ?? '') }}</textarea>
                                @error("claims.{$index}.supporting_details")
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <!-- Applicant Remarks -->
                            <div class="mt-4">
                                <label for="claim_{{ $index }}_remarks" class="block text-sm font-medium text-gray-700 mb-2">
                                    Additional Remarks
                                </label>
                                <textarea name="claims[{{ $index }}][applicant_remarks]" 
                                          id="claim_{{ $index }}_remarks" rows="2"
                                          class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                          placeholder="Any additional information for this claim">{{ old("claims.{$index}.applicant_remarks", $claim['applicant_remarks'] ?? '') }}</textarea>
                                @error("claims.{$index}.applicant_remarks")
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <!-- Document Upload -->
                            @if($activity->requires_documents)
                            <div class="mt-4">
                                <label for="claim_{{ $index }}_documents" class="block text-sm font-medium text-gray-700 mb-2">
                                    Supporting Documents @if($index === 0)<span class="text-red-500">*</span>@endif
                                </label>
                                <div class="border-2 border-dashed border-gray-300 rounded-lg p-4">
                                    <div class="text-center">
                                        <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                                        <div class="text-sm text-gray-600 mb-2">
                                            Upload certificates, letters, or other supporting documents
                                        </div>
                                        <input type="file" name="claims[{{ $index }}][documents][]" 
                                               id="claim_{{ $index }}_documents" multiple
                                               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                                        <div class="text-xs text-gray-500 mt-1">
                                            Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB each)
                                        </div>
                                    </div>
                                </div>
                                @error("claims.{$index}.documents")
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                                @error("claims.{$index}.documents.*")
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    
                    <div class="add-more-container">
                        <button type="button" class="btn btn-outline" onclick="addClaim()">
                            <i class="fas fa-plus"></i>
                            Add Another Claim
                        </button>
                    </div>
                    
                    <!-- Total Points Summary -->
                    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                        <h4 class="text-lg font-semibold text-blue-900 mb-2">
                            <i class="fas fa-calculator"></i>
                            Total Points Summary
                        </h4>
                        <div id="total-points-summary" class="text-blue-800">
                            <!-- Total will be calculated here -->
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-between mt-8">
                    <a href="{{ route('applicant.credit-points.index', $application) }}" 
                       class="bg-gray-600 text-white px-6 py-2 rounded-md hover:bg-gray-700 transition-colors">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors">
                        Submit All Claims
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

.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;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-outline {
    background: white;
    color: #4f46e5;
    border: 2px solid #4f46e5;
}

.btn-outline:hover {
    background: #4f46e5;
    color: white;
}

.btn i {
    margin-right: 0.5rem;
}

.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    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;
}

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

@push('scripts')
<script>
let claimIndex = {{ count($claims) }};
const minPoints = {{ $activity->min_points }};
const maxPoints = {{ $activity->max_points }};
const pointsPerUnit = {{ $activity->points_per_unit }};
const requiresDocuments = {{ $activity->requires_documents ? 'true' : 'false' }};

function addClaim() {
    const container = document.getElementById('claims-container');
    const newEntry = createClaimEntry(claimIndex);
    container.appendChild(newEntry);
    calculatePoints(claimIndex);
    claimIndex++;
    updateTotalPoints();
}

function removeClaim(index) {
    const entry = document.querySelector(`[data-index="${index}"]`);
    if (entry) {
        entry.remove();
        updateTotalPoints();
    }
}

function calculatePoints(index) {
    const instancesInput = document.getElementById(`claim_${index}_instances`);
    if (!instancesInput) return;
    
    const instances = instancesInput.value;
    const calculationDiv = document.getElementById(`points-calculation-${index}`);
    
    if (instances && instances > 0) {
        const calculatedPoints = instances * pointsPerUnit;
        const finalPoints = Math.min(Math.max(calculatedPoints, minPoints), maxPoints);
        
        calculationDiv.innerHTML = `<strong>${finalPoints} points</strong> (${instances} × ${pointsPerUnit})`;
        calculationDiv.setAttribute('data-points', finalPoints);
    } else {
        calculationDiv.innerHTML = '0 points';
        calculationDiv.setAttribute('data-points', 0);
    }
    
    updateTotalPoints();
}

function updateTotalPoints() {
    const allCalculations = document.querySelectorAll('[id^="points-calculation-"]');
    let totalPoints = 0;
    let totalClaims = 0;
    
    allCalculations.forEach(calc => {
        const points = parseInt(calc.getAttribute('data-points') || 0);
        totalPoints += points;
        if (points > 0) totalClaims++;
    });
    
    const summaryDiv = document.getElementById('total-points-summary');
    summaryDiv.innerHTML = `
        <div class="flex justify-between items-center">
            <span><strong>Total Claims:</strong> ${totalClaims}</span>
            <span><strong>Total Points:</strong> ${totalPoints}</span>
        </div>
    `;
}

function createClaimEntry(index) {
    const div = document.createElement('div');
    div.className = 'claim-entry';
    div.setAttribute('data-index', index);
    
    const documentsSection = requiresDocuments ? `
        <div class="mt-4">
            <label for="claim_${index}_documents" class="block text-sm font-medium text-gray-700 mb-2">
                Supporting Documents
            </label>
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4">
                <div class="text-center">
                    <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                    <div class="text-sm text-gray-600 mb-2">
                        Upload certificates, letters, or other supporting documents
                    </div>
                    <input type="file" name="claims[${index}][documents][]" 
                           id="claim_${index}_documents" multiple
                           accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                           class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    <div class="text-xs text-gray-500 mt-1">
                        Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB each)
                    </div>
                </div>
            </div>
        </div>
    ` : '';
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-award"></i>
                Claim ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removeClaim(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
                <label for="claim_${index}_instances" class="block text-sm font-medium text-gray-700 mb-2">
                    Number of {{ $activity->unit_type_label }} <span class="text-red-500">*</span>
                </label>
                <input type="number" name="claims[${index}][claimed_instances]" 
                       id="claim_${index}_instances" 
                       value="1" required min="1"
                       ${@if($activity->max_claimable_instances) 'max="{{ $activity->max_claimable_instances }}"' @endif}
                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                       onchange="calculatePoints(${index})">
            </div>
            
            <div>
                <label for="claim_${index}_date" class="block text-sm font-medium text-gray-700 mb-2">
                    Date/Period
                </label>
                <input type="text" name="claims[${index}][date_period]" 
                       id="claim_${index}_date" 
                       class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="e.g., Jan 2023, 2022-2023">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Calculated Points
                </label>
                <div id="points-calculation-${index}" class="w-full border border-gray-200 rounded-md px-3 py-2 bg-gray-50 text-sm text-gray-600" data-points="0">
                    0 points
                </div>
            </div>
        </div>
        
        <div class="mt-4">
            <label for="claim_${index}_details" class="block text-sm font-medium text-gray-700 mb-2">
                Supporting Details <span class="text-red-500">*</span>
            </label>
            <textarea name="claims[${index}][supporting_details]" 
                      id="claim_${index}_details" rows="3" required
                      class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Provide detailed information about this specific claim, including dates, institutions, outcomes, etc."></textarea>
        </div>
        
        <div class="mt-4">
            <label for="claim_${index}_remarks" class="block text-sm font-medium text-gray-700 mb-2">
                Additional Remarks
            </label>
            <textarea name="claims[${index}][applicant_remarks]" 
                      id="claim_${index}_remarks" rows="2"
                      class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Any additional information for this claim"></textarea>
        </div>
        
        ${documentsSection}
    `;
    
    return div;
}

// Initialize calculations on page load
document.addEventListener('DOMContentLoaded', function() {
    // Calculate points for existing claims
    for (let i = 0; i < claimIndex; i++) {
        calculatePoints(i);
    }
    updateTotalPoints();
});
</script>
@endpush
@endsection