@extends('layouts.admin')

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

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

@push('css')
    <style>
        .filter-card {
            border-left: 4px solid #007bff;
        }

        .form-label {
            font-weight: 600;
            color: #495057;
        }

        .btn-filter {
            margin-right: 10px;
        }

        .results-info {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .badge {
            font-size: 0.875em;
        }
    </style>
@endpush

@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-info btn-sm">
                    Upload Logs
                </a>
            </div>
        </div>
        <div class="card-body">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            <!-- 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') }}">
                        </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') }}">
                        </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-info">
                    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">
                <thead>
                        <tr>
                            <th class="p-3">Course Type</th>
                            <th class="p-3">Training Course</th>
                            <th class="p-3">Batch Type</th>
                            <th class="p-3">Duration</th>
                            <th class="p-3">From Date</th>
                            <th class="p-3">To Date</th>
                            <th class="p-3">Holidays</th>
                            <th class="p-3">Effective Duration</th>
                            <th class="p-3">Standard Price</th>
                            <th class="p-3">Promotional Offer</th>
                            <th class="p-3">Note</th>
                            <th class="p-3" style="min-width: 200px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse($trainings as $training)
                        <tr>
                            <td class="p-3">{{ $training->course_type }}</td>
                            <td class="p-3">{{ $training->training_course }}</td>
                            <td class="p-3">{{ $training->batch_type ?? '-' }}</td>
                            <td class="p-3">{{ $training->duration ?? '-' }}</td>
                                <td class="p-3">{{ $training->from_date ? $training->from_date->format('d/m/Y') : '-' }}
                                </td>
                                <td class="p-3">{{ $training->to_date ? $training->to_date->format('d/m/Y') : '-' }}
                                </td>
                            <td class="p-3">
                                    @if ($training->holidays)
                                        <span class="text-truncate d-inline-block" style="max-width: 120px;"
                                            title="{{ $training->holidays_display }}">
                                        {{ Str::limit($training->holidays_display, 30) }}
                                    </span>
                                @else
                                    -
                                @endif
                            </td>
                            <td class="p-3">
                                    @if ($training->from_date && $training->to_date)
                                    <span class="badge badge-info">{{ $training->effective_duration }} days</span>
                                @else
                                    -
                                @endif
                            </td>
                                <td class="p-3">
                                    {{ $training->standard_price ? '₹' . number_format($training->standard_price, 2) : '-' }}
                                </td>
                                <td class="p-3">
                                    {{ $training->promotional_offer ? '₹' . number_format($training->promotional_offer, 2) : '-' }}
                                </td>
                            <td class="p-3">
                                    @if ($training->note)
                                        <span class="text-truncate d-inline-block" style="max-width: 150px;"
                                            title="{{ $training->note }}">
                                        {{ Str::limit($training->note, 50) }}
                                    </span>
                                @else
                                    -
                                @endif
                            </td>
                            <td class="p-3">
                                <!-- Image Preview -->
                                    @if ($training->image_path)
                                    <div class="mb-2">
                                        <img src="{{ asset('storage/' . $training->image_path) }}" 
                                                alt="Training Image" class="img-thumbnail"
                                             style="max-width: 80px; max-height: 60px; object-fit: cover;"
                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                            <div class="text-muted small"
                                                style="display: none; max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; text-align: center; align-items: center; justify-content: center;">
                                            No Image
                                        </div>
                                    </div>
                                @else
                                    <div class="mb-2">
                                            <div class="text-muted small"
                                                style="max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center;">
                                            No Image
                                        </div>
                                    </div>
                                @endif
                                
                                <!-- Action Buttons -->
                                <div class="d-flex flex-wrap gap-1">
                                        <label for="image-upload-{{ $training->id }}"
                                            class="btn btn-sm btn-outline-primary" style="cursor: pointer;">
                                            <i class="fas fa-upload"></i>
                                            {{ $training->image_path ? 'Replace' : 'Upload' }}
                                    </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 }}">
                                            <i class="fas fa-trash"></i> Delete Image
                                        </button>
                                    @endif
                                    
                                    <!-- Delete Training Entry -->
                                        <form action="{{ route('admin.training.destroy', $training->id) }}"
                                            method="POST" style="display:inline-block;">
                                        @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>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="12" class="text-center">No training calendar entries found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
            
            <div class="d-flex justify-content-center mt-4">
                @if ($trainings->hasPages())
                    <div class="pagination-wrapper">
                        {{ $trainings->links('vendor.pagination.custom-admin') }}
                    </div>
                @endif
        </div>
    </div>
</div>

<script>
    // 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 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 originalText = uploadBtn.innerHTML;
                uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
                uploadBtn.disabled = true;
                
                // Show loading state on image preview area
                const tableCell = this.closest('td');
                const imageContainer = tableCell.querySelector('.mb-2:first-child');
                if (imageContainer) {
                    imageContainer.innerHTML = `
                        <div class="text-center" style="max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; display: flex; align-items: center; justify-content: center;">
                            <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 => response.json())
                .then(data => {
                    console.log('Upload response:', data); // Debug log
                            console.log('Debug info:', data
                                .debug_info); // Additional debug info
                    if (data.success) {
                        // Update the image display
                        const tableCell = this.closest('td');
                                const existingImageContainer = tableCell.querySelector(
                                    '.mb-2:first-child');
                        
                        console.log('Table cell:', tableCell); // Debug log
                                console.log('Existing image container:',
                                    existingImageContainer); // Debug log
                        console.log('Image URL:', data.image_url); // Debug log
                        
                        // Improved image loading with polling mechanism
                                function loadImageWithRetry(imageUrl, container, maxRetries =
                                    5) {
                            let retryCount = 0;
                            
                            function attemptLoad() {
                                        console.log(
                                            `Attempting to load image (attempt ${retryCount + 1}):`,
                                            imageUrl);
                                
                                // Create a new image element to test loading
                                const testImg = new Image();
                                testImg.onload = function() {
                                            console.log(
                                                'Image loaded successfully on attempt',
                                                retryCount + 1);
                                    // Image loaded successfully, now update the container
                                    if (container) {
                                        container.innerHTML = `
                                            <img src="${imageUrl}?t=${new Date().getTime()}" 
                                                 alt="Training Image" 
                                                 class="img-thumbnail" 
                                                 style="max-width: 80px; max-height: 60px; object-fit: cover;"
                                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                            <div class="text-muted small" style="display: none; max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center;">
                                                No Image
                                            </div>
                                        `;
                                    } else {
                                        // Create new container
                                                const imageContainer = document
                                                    .createElement('div');
                                        imageContainer.className = 'mb-2';
                                        imageContainer.innerHTML = `
                                            <img src="${imageUrl}?t=${new Date().getTime()}" 
                                                 alt="Training Image" 
                                                 class="img-thumbnail" 
                                                 style="max-width: 80px; max-height: 60px; object-fit: cover;"
                                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                            <div class="text-muted small" style="display: none; max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center;">
                                                No Image
                                            </div>
                                        `;
                                                tableCell.insertBefore(imageContainer,
                                                    tableCell.firstChild);
                                    }
                                };
                                
                                testImg.onerror = function() {
                                            console.log('Image failed to load on attempt',
                                                retryCount + 1);
                                    retryCount++;
                                    if (retryCount < maxRetries) {
                                        // Retry after a delay
                                                setTimeout(attemptLoad, 200 *
                                                    retryCount); // Increasing delay
                                    } else {
                                                console.log(
                                                    'Max retries reached, showing placeholder'
                                                );
                                        // Show placeholder after max retries
                                        if (container) {
                                            container.innerHTML = `
                                                <div class="text-muted small" style="max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center;">
                                                    <small>Image Loading...</small>
                                                </div>
                                            `;
                                        }
                                        
                                        // Show a message to user that they may need to refresh
                                        setTimeout(() => {
                                                    showAlert('info',
                                                        'Image uploaded successfully but may take a moment to display. If not visible, please refresh the page.'
                                                    );
                                        }, 1000);
                                    }
                                };
                                
                                testImg.src = imageUrl + '?t=' + new Date().getTime();
                            }
                            
                            // Start the loading process
                            attemptLoad();
                        }
                        
                        // Use the improved loading function
                        loadImageWithRetry(data.image_url, existingImageContainer);
                        
                        // Update button text
                                uploadBtn.innerHTML =
                                    '<i class="fas fa-upload"></i> Replace Image';
                        
                        // Add delete image button if not exists
                        if (!tableCell.querySelector('.delete-image-btn')) {
                            const deleteBtn = document.createElement('button');
                            deleteBtn.type = 'button';
                                    deleteBtn.className =
                                        'btn btn-sm btn-outline-danger delete-image-btn';
                            deleteBtn.dataset.trainingId = trainingId;
                                    deleteBtn.innerHTML =
                                        '<i class="fas fa-trash"></i> Delete Image';
                            deleteBtn.addEventListener('click', handleDeleteImage);
                            
                                    const btnGroup = tableCell.querySelector(
                                        '.d-flex.flex-wrap');
                            btnGroup.appendChild(deleteBtn);
                        }
                        
                        // Show success message
                        showAlert('success', data.message);
                    } else {
                        showAlert('danger', data.message);
                    }
                })
                .catch(error => {
                    console.error('Upload error:', error);
                    showAlert('danger', 'Failed to upload image. Please try again.');
                    
                    // Restore original image preview state on error
                    const tableCell = this.closest('td');
                    const imageContainer = tableCell.querySelector('.mb-2:first-child');
                    if (imageContainer) {
                        const originalImage = imageContainer.querySelector('img');
                        if (!originalImage) {
                            // If there was no original image, show "No Image" placeholder
                            imageContainer.innerHTML = `
                                <div class="text-muted small" style="max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center;">
                                    No Image
                                </div>
                            `;
                        }
                    }
                })
                .finally(() => {
                    // Reset button state
                    uploadBtn.innerHTML = originalText;
                    uploadBtn.disabled = false;
                    this.value = '';
                });
            });
        });
        
        // 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 originalText = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 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) {
                    // Update image display to show "No Image" placeholder
                    const tableCell = this.closest('td');
                    const imageContainer = tableCell.querySelector('.mb-2:first-child');
                    if (imageContainer) {
                        imageContainer.innerHTML = `
                            <div class="text-muted small" style="max-width: 80px; max-height: 60px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center;">
                                No Image
                            </div>
                        `;
                    }
                    
                    // Update upload button text
                    const uploadBtn = tableCell.querySelector('label');
                    uploadBtn.innerHTML = '<i class="fas fa-upload"></i> Upload Image';
                    
                    // Remove delete button
                    this.remove();
                    
                    showAlert('success', data.message);
                } else {
                    showAlert('danger', data.message);
                }
            })
            .catch(error => {
                console.error('Delete error:', error);
                showAlert('danger', 'Failed to delete image. Please try again.');
            })
            .finally(() => {
                // Reset button state
                this.innerHTML = originalText;
                this.disabled = false;
            });
        }
        
        function showAlert(type, message) {
            // Create alert element
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            
            // Insert at the top of the card
            const card = document.querySelector('.card');
            card.insertBefore(alertDiv, card.firstChild);
            
            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }
    });
</script>

<style>
/* Custom Pagination Styling */
.pagination-wrapper .pagination {
    margin-bottom: 0;
}

.pagination-wrapper .page-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    color: #495057;
    background-color: #fff;
    transition: all 0.15s ease-in-out;
}

.pagination-wrapper .page-link:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    text-decoration: none;
}

.pagination-wrapper .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.pagination-wrapper .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
    cursor: not-allowed;
}

.pagination-wrapper .page-item:first-child .page-link,
.pagination-wrapper .page-item:last-child .page-link {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.375rem 0.5rem;
}

.pagination-wrapper .page-link i {
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Responsive pagination */
@media (max-width: 576px) {
    .pagination-wrapper .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-wrapper .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        margin: 1px;
    }
}

/* Info text styling */
.pagination-wrapper .small.text-muted {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.pagination-wrapper .fw-semibold {
    font-weight: 600;
}
</style>

@endsection