@extends('layouts.admin')

@section('title', 'Training Calendar')

@section('content_header')
    <h1>Training Calendar</h1>
@stop


@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Training Calendar</h3>
            <div class="card-tools">
                <a href="{{ route('admin.training.upload') }}" class="btn btn-success btn-sm">
                    Upload Excel
                </a>
                <a href="{{ route('admin.training.upload-logs') }}" class="btn btn-secondary btn-sm">
                    Upload Logs
                </a>
            </div>
        </div>
        <div class="card-body">
            <!-- Filter Form -->
            <div class="card mb-4 filter-card">
                <div class="card-body">
                    <form id="searchForm" method="GET" action="" class="row g-3">
                        <div class="col-md-3">
                            <label for="search" class="form-label">Search</label>
                            <input type="text" class="form-control" id="search" name="search"
                                value="{{ request('search') }}" placeholder="Search training courses...">
                        </div>
                        <div class="col-md-3">
                            <label for="course_type" class="form-label">Course Type</label>
                            <select class="form-control" id="course_type" name="course_type">
                                <option value="">All Course Types</option>
                                @foreach ($courseTypes as $type)
                                    <option value="{{ $type }}" @if (request('course_type') == $type) selected @endif>
                                        {{ $type }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="batch_type" class="form-label">Batch Type</label>
                            <select class="form-control" id="batch_type" name="batch_type">
                                <option value="">All Batch Types</option>
                                @foreach ($batchTypes as $type)
                                    <option value="{{ $type }}" @if (request('batch_type') == $type) selected @endif>
                                        {{ $type }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="from_date" class="form-label">From Date</label>
                            <input type="date" class="form-control" id="from_date" name="from_date"
                                value="{{ request('from_date') }}"
                                min="2020-01-01"
                                max="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="to_date" class="form-label">To Date</label>
                            <input type="date" class="form-control" id="to_date" name="to_date"
                                value="{{ request('to_date') }}"
                                min="{{ request('from_date') ?: '2020-01-01' }}"
                                max="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="col-12 mt-3">
                            <button type="submit" class="btn btn-primary btn-filter">
                                Filter
                            </button>
                            <a href="{{ route('admin.training.index') }}" class="btn btn-secondary btn-filter">
                                Clear
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Results Count -->
            <div class="mb-3">
                <span class="badge badge-secondary">
                    Showing {{ $trainings->count() }} of {{ $trainings->total() }} training entries
                </span>
                @php
                    $hasActiveFilters = false;
                    $filterParams = request()->only(['search', 'course_type', 'batch_type', 'from_date', 'to_date']);
                    foreach ($filterParams as $value) {
                        if ($value !== '' && $value !== null) {
                            $hasActiveFilters = true;
                            break;
                        }
                    }
                @endphp
                @if ($hasActiveFilters)
                    <span class="badge badge-warning ml-2">
                        <i class="fas fa-filter"></i> Filtered Results
                    </span>
                @endif
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-striped training-calendar-table">
                <thead>
                        <tr>
                            <th class="sr-no-column">Sr. No.</th>
                            <th>Course Type</th>
                            <th>Training Course</th>
                            <th>Batch Type</th>
                            <th>Duration</th>
                            <th>From Date</th>
                            <th>To Date</th>
                            <th>Holidays</th>
                            <th>Effective Duration</th>
                            <th>Standard Price</th>
                            <th>Promotional Offer</th>
                            <th>Note</th>
                            <th class="column-image">Image</th>
                            <th class="column-actions">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse($trainings as $index => $training)
                        <tr>
                            <td class="sr-no-column">{{ ($trainings->currentPage() - 1) * $trainings->perPage() + $index + 1 }}</td>
                            <td>{{ $training->course_type }}</td>
                            <td>{{ $training->training_course }}</td>
                            <td>{{ $training->batch_type ?? '-' }}</td>
                            <td>{{ $training->duration ?? '-' }}</td>
                            <td>{{ $training->from_date ? $training->from_date->format('M d, Y') : '-' }}</td>
                            <td>{{ $training->to_date ? $training->to_date->format('M d, Y') : '-' }}</td>
                            <td>
                                    @if ($training->holidays)
                                        <span class="text-truncate d-inline-block text-truncate-holidays"
                                            title="{{ $training->holidays_display }}">
                                        {{ Str::limit($training->holidays_display, 30) }}
                                    </span>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                    @if ($training->from_date && $training->to_date)
                                    <span class="badge badge-success">{{ $training->effective_duration }} days</span>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                    {{ $training->standard_price ? '₹' . number_format($training->standard_price, 2) : '-' }}
                                </td>
                            <td>
                                    {{ $training->promotional_offer ? '₹' . number_format($training->promotional_offer, 2) : '-' }}
                                </td>
                            <td>
                                    @if ($training->note)
                                        <span class="text-truncate d-inline-block text-truncate-note"
                                            title="{{ $training->note }}">
                                        {{ Str::limit($training->note, 50) }}
                                    </span>
                                @else
                                    -
                                @endif
                            </td>
                            <!-- Image Column -->
                            <td class="image-column">
                                <div class="image-container" data-training-id="{{ $training->id }}">
                                    @if ($training->image_path)
                                        <img src="{{ asset('storage/' . $training->image_path) }}" 
                                             alt="Training Image" class="img-thumbnail training-image"
                                             onclick="openImageModal('{{ asset('storage/' . $training->image_path) }}')"
                                             onerror="handleImageError(this)">
                                        <div class="text-muted small no-image-placeholder">
                                            <i class="fas fa-image text-muted"></i>
                                            <br><small>No Image</small>
                                    </div>
                                @else
                                        <div class="text-muted small no-image-placeholder">
                                            <i class="fas fa-image text-muted"></i>
                                            <br><small>No Image</small>
                                    </div>
                                @endif
                                    </div>
                                
                                <!-- Image Upload Controls -->
                                <div class="mt-2 d-flex justify-content-center gap-3">
                                    <label for="image-upload-{{ $training->id }}" class="btn btn-sm btn-outline-primary" 
                                           title="{{ $training->image_path ? 'Replace Image' : 'Upload Image' }}">
                                            <i class="fas fa-upload"></i>
                                    </label>
                                        <input type="file" id="image-upload-{{ $training->id }}" class="d-none"
                                           accept="image/jpeg,image/png,image/webp"
                                           data-training-id="{{ $training->id }}">
                                    
                                        @if ($training->image_path)
                                            <button type="button" class="btn btn-sm btn-outline-danger delete-image-btn"
                                                data-training-id="{{ $training->id }}" 
                                                title="Delete Image">
                                                <i class="fas fa-trash"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                                    
                            <!-- Actions Column -->
                            <td>
                                        <form action="{{ route('admin.training.destroy', $training->id) }}"
                                      method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger"
                                                onclick="return confirm('Are you sure you want to delete this training entry?')">
                                            <i class="fas fa-trash"></i> Delete Entry
                                        </button>
                                    </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="14" class="text-center">No training calendar entries found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
            
            @include('admin.partials.pagination', ['items' => $trainings, 'itemName' => 'training entries'])
        </div>
    </div>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Training Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                      <img id="modalImage" src="" alt="Training Image" class="img-fluid modal-image">
            </div>
        </div>
    </div>
</div>

<script>
    // Date range validation
    document.addEventListener('DOMContentLoaded', function() {
        const fromDateInput = document.getElementById('from_date');
        const toDateInput = document.getElementById('to_date');
        const today = new Date().toISOString().split('T')[0];
        
        // When from_date changes, update to_date min value
        fromDateInput.addEventListener('change', function() {
            if (this.value) {
                toDateInput.min = this.value;
                
                // If to_date is already set and is before from_date, clear it
                if (toDateInput.value && toDateInput.value < this.value) {
                    toDateInput.value = '';
                    alert('To Date cannot be before From Date. Please select a valid To Date.');
                }
            } else {
                toDateInput.min = '2020-01-01';
            }
        });
        
        // Initialize on page load if dates are already set
        if (fromDateInput.value) {
            toDateInput.min = fromDateInput.value;
        }
    });
    
    // Prevent empty search/filter fields from being submitted
    document.getElementById('searchForm').addEventListener('submit', function(e) {
        let hasValue = false;
        Array.from(this.elements).forEach(function(el) {
            if ((el.type === 'text' || el.type === 'date' || el.tagName === 'SELECT') && el.value) {
                hasValue = true;
            }
            if ((el.type === 'text' || el.type === 'date' || el.tagName === 'SELECT') && !el.value) {
                el.name = '';
            }
        });
        if (!hasValue) {
            e.preventDefault();
            window.location.href = window.location.pathname;
        }
    });

    // Image modal functionality
    function openImageModal(imageSrc) {
        document.getElementById('modalImage').src = imageSrc;
        const modal = new bootstrap.Modal(document.getElementById('imageModal'));
        modal.show();
    }
    
    // Handle image error - show placeholder
    function handleImageError(img) {
        img.style.display = 'none';
        const placeholder = img.nextElementSibling;
        if (placeholder && placeholder.classList.contains('no-image-placeholder')) {
            placeholder.style.display = 'flex';
        }
    }
    
    // Function to show image modal
    function showImageModal(imageUrl) {
        const modal = document.createElement('div');
        modal.className = 'modal fade';
        modal.setAttribute('tabindex', '-1');
        modal.innerHTML = `
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Training Image</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center">
                        <img src="${imageUrl}" class="img-fluid modal-image" alt="Training Image">
                    </div>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        // Show modal
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
        
        // Remove modal from DOM when hidden
        modal.addEventListener('hidden.bs.modal', function() {
            document.body.removeChild(modal);
        });
    }
    
    // Function to show "No Image" placeholder (used in error cases only)
        function showNoImagePlaceholder(container) {
            container.innerHTML = `
                <div class="text-muted small no-image-placeholder">
                    <i class="fas fa-image text-muted"></i>
                    <br><small>No Image</small>
                </div>
            `;
        }

    // Image upload functionality
    document.addEventListener('DOMContentLoaded', function() {
        // Handle image uploads
        document.querySelectorAll('input[type="file"]').forEach(function(input) {
            input.addEventListener('change', function(e) {
                const file = e.target.files[0];
                const trainingId = this.dataset.trainingId;
                
                if (!file) return;
                
                // Validate file type
                const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
                if (!allowedTypes.includes(file.type)) {
                    alert('Please select a valid image file (JPG, PNG, or WebP).');
                    this.value = '';
                    return;
                }
                
                // Validate file size (10MB max)
                if (file.size > 10 * 1024 * 1024) {
                    alert('Image file size must be less than 10MB.');
                    this.value = '';
                    return;
                }
                
                // Show loading state
                const uploadBtn = this.previousElementSibling;
                const originalIcon = uploadBtn.querySelector('i');
                const originalTitle = uploadBtn.title;
                originalIcon.className = 'fas fa-spinner fa-spin';
                uploadBtn.title = 'Uploading...';
                uploadBtn.disabled = true;
                
                // Show loading state on image preview area
                const tableCell = this.closest('td');
                const imageContainer = tableCell.querySelector('.image-container');
                if (imageContainer) {
                    imageContainer.innerHTML = `
                                <div class="text-center no-image-placeholder">
                            <i class="fas fa-spinner fa-spin text-primary"></i>
                        </div>
                    `;
                }
                
                // Upload image
                const formData = new FormData();
                formData.append('image', file);
                formData.append('_token', '{{ csrf_token() }}');
                
                fetch(`/admin/training/${trainingId}/upload-image`, {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        
                        // Reset button state
                        const uploadBtn = this.previousElementSibling;
                        const uploadIcon = uploadBtn.querySelector('i');
                        uploadIcon.className = 'fas fa-upload';
                        uploadBtn.title = 'Upload Image';
                        uploadBtn.disabled = false;
                        
                        // Reset file input
                        this.value = '';
                        
                        // Show success toast and trigger immediate refresh
                        if (window.AdminToastManager) {
                            window.AdminToastManager.showToast('success', 'Image uploaded successfully! Refreshing page...');
                        }
                        
                        // Immediate refresh - multiple attempts for reliability
                        try {
                            window.location.reload();
                        } catch (e1) {
                            // Attempt 2: Href method
                            try {
                                window.location.href = window.location.href;
                            } catch (e2) {
                                // Attempt 3: Location method
                                try {
                                    window.location = window.location;
                                } catch (e3) {
                                    // Attempt 4: Replace method
                                    try {
                                        window.location.replace(window.location.href);
                                    } catch (e4) {
                                        if (window.AdminToastManager) {
                                            window.AdminToastManager.showToast('warning', 'Auto-refresh failed. Please refresh the page manually.');
                                        }
                                    }
                                }
                            }
                        }
                        
                        // Backup refresh after 500ms
                        setTimeout(() => {
                            try {
                                window.location.reload();
                            } catch (error) {
                                // Silent fail for backup
                            }
                        }, 500);
                    } else {
                        
                        // Reset button state on failure
                        const uploadBtn = this.previousElementSibling;
                        const uploadIcon = uploadBtn.querySelector('i');
                        uploadIcon.className = 'fas fa-upload';
                        uploadBtn.title = 'Upload Image';
                        uploadBtn.disabled = false;
                        
                        // Reset file input
                        this.value = '';
                        
                        if (window.AdminToastManager) {
                            window.AdminToastManager.showToast('error', data.message);
                        }
                    }
                })
                .catch(error => {
                    
                    if (window.AdminToastManager) {
                        window.AdminToastManager.showToast('error', 'Failed to upload image. Please try again.');
                    }
                    
                    // Reset button state on error
                    const uploadBtn = this.previousElementSibling;
                    const uploadIcon = uploadBtn.querySelector('i');
                    uploadIcon.className = 'fas fa-upload';
                    uploadBtn.title = 'Upload Image';
                    uploadBtn.disabled = false;
                    
                    // Reset file input
                    this.value = '';
                    
                    // Restore original image preview state on error
                    const tableCell = this.closest('td');
                    const imageContainer = tableCell.querySelector('.image-container');
                    if (imageContainer) {
                        const originalImage = imageContainer.querySelector('img');
                        if (!originalImage) {
                            // If there was no original image, show "No Image" placeholder
                            showNoImagePlaceholder(imageContainer);
                        }
                    }
                })
                .finally(() => {
                    // Don't reset button state if page is about to refresh
                    // The page refresh will reset everything anyway
                });
            });
        });
        
        // Handle image deletion
        document.querySelectorAll('.delete-image-btn').forEach(function(btn) {
            btn.addEventListener('click', handleDeleteImage);
        });
        
        function handleDeleteImage() {
            const trainingId = this.dataset.trainingId;
            
            if (!confirm('Are you sure you want to delete this image?')) {
                return;
            }
            
            // Show loading state
            const originalIcon = this.querySelector('i');
            const originalTitle = this.title;
            originalIcon.className = 'fas fa-spinner fa-spin';
            this.title = 'Deleting...';
            this.disabled = true;
            
            fetch(`/admin/training/${trainingId}/delete-image`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    
                    // Reset button state
                    const deleteIcon = this.querySelector('i');
                    deleteIcon.className = 'fas fa-trash';
                    this.title = 'Delete Image';
                    this.disabled = false;
                    
                    // Show success toast and trigger immediate refresh
                    if (window.AdminToastManager) {
                        window.AdminToastManager.showToast('success', 'Image deleted successfully! Refreshing page...');
                    }
                    
                    // Immediate refresh - multiple attempts for reliability
                    try {
                        window.location.reload();
                    } catch (e1) {
                        // Attempt 2: Href method
                        try {
                            window.location.href = window.location.href;
                        } catch (e2) {
                            // Attempt 3: Location method
                            try {
                                window.location = window.location;
                            } catch (e3) {
                                // Attempt 4: Replace method
                                try {
                                    window.location.replace(window.location.href);
                                } catch (e4) {
                                    if (window.AdminToastManager) {
                                        window.AdminToastManager.showToast('warning', 'Auto-refresh failed. Please refresh the page manually.');
                                    }
                                }
                            }
                        }
                    }
                    
                    // Backup refresh after 500ms
                    setTimeout(() => {
                        try {
                            window.location.reload();
                        } catch (error) {
                            // Silent fail for backup
                        }
                    }, 500);
                } else {
                    // Reset button state on failure
                    const deleteIcon = this.querySelector('i');
                    deleteIcon.className = 'fas fa-trash';
                    this.title = 'Delete Image';
                    this.disabled = false;
                    
                    if (window.AdminToastManager) {
                        window.AdminToastManager.showToast('error', data.message);
                    }
                }
            })
            .catch(error => {
                
                // Reset button state on error
                const deleteIcon = this.querySelector('i');
                deleteIcon.className = 'fas fa-trash';
                this.title = 'Delete Image';
                this.disabled = false;
                
                if (window.AdminToastManager) {
                    window.AdminToastManager.showToast('error', 'Failed to delete image. Please try again.');
                }
            })
            .finally(() => {
                // Don't reset button state if page is about to refresh
                // The page refresh will reset everything anyway
            });
        }
        
        function showAlert(type, message) {
            // Create alert element
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
            
            // Handle HTML content in message
            const messageSpan = document.createElement('span');
            messageSpan.innerHTML = message;
            
            const closeButton = document.createElement('button');
            closeButton.type = 'button';
            closeButton.className = 'btn-close';
            closeButton.setAttribute('data-bs-dismiss', 'alert');
            closeButton.setAttribute('aria-label', 'Close');
            
            alertDiv.appendChild(messageSpan);
            alertDiv.appendChild(closeButton);
            
            // Insert at the top of the card
            const card = document.querySelector('.card');
            card.insertBefore(alertDiv, card.firstChild);
            
            // Auto-dismiss after 8 seconds (longer for HTML content)
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 8000);
            
            return alertDiv;
        }
        
    });
    
    
</script>

@endsection