@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <!-- Subject Details -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Subject Details</h4>
                    <div class="btn-group">
                        <a href="{{ route('subjects.edit', $subject->id) }}" class="btn btn-warning">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{{ route('subjects.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <th width="40%">Code:</th>
                                    <td>{{ $subject->code }}</td>
                                </tr>
                                <tr>
                                    <th>Title:</th>
                                    <td>{{ $subject->title }}</td>
                                </tr>
                                <tr>
                                    <th>Credit Hours:</th>
                                    <td>{{ $subject->credit_hours }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <th width="40%">Created:</th>
                                    <td>{{ $subject->created_at->format('M d, Y') }}</td>
                                </tr>
                                <tr>
                                    <th>Last Updated:</th>
                                    <td>{{ $subject->updated_at->format('M d, Y') }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <h6>Description:</h6>
                        <p class="text-muted">{{ $subject->description ?? 'No description provided.' }}</p>
                    </div>
                </div>
            </div>

            <!-- Batch Assignments -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Class Schedule</h5>
                    <span class="badge bg-primary">{{ $subject->classes->count() }} Classes</span>
                </div>
                <div class="card-body">
                    @if($subject->classes->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Batch</th>
                                        <th>Teacher</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                        <th>Room</th>
                                        <th>Weekly Hours</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($subject->classes as $class)
                                        <tr>
                                            <td>{{ $class->batch->name ?? 'N/A' }}</td>
                                            <td>{{ $class->teacher->user->name ?? 'Not Assigned' }}</td>
                                            <td>{{ $class->class_date ? $class->class_date->format('M d, Y') : 'Not scheduled' }}</td>
                                            <td>
                                                @if($class->start_time)
                                                    {{ \Carbon\Carbon::parse($class->start_time)->format('h:i A') }}
                                                    @if($class->end_time)
                                                        - {{ \Carbon\Carbon::parse($class->end_time)->format('h:i A') }}
                                                    @endif
                                                @else
                                                    Not scheduled
                                                @endif
                                            </td>
                                            <td>{{ $class->room->name ?? 'N/A' }}</td>
                                            <td>{{ $class->weekly_hours }}</td>
                                            <td>
                                                @if($class->status === 'active')
                                                    <span class="badge bg-success">Active</span>
                                                @elseif($class->status === 'completed')
                                                    <span class="badge bg-primary">Completed</span>
                                                @else
                                                    <span class="badge bg-secondary">{{ ucfirst($class->status) }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="#" class="btn btn-sm btn-info" title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                            <h5>No Classes Scheduled</h5>
                            <p class="text-muted">This subject has no scheduled classes yet.</p>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#assignBatchModal">
                                <i class="fas fa-plus"></i> Schedule First Class
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    {{-- <button class="btn btn-primary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#assignBatchModal">
                        <i class="fas fa-plus"></i> Schedule Class
                    </button> --}}
                    <a href="{{ route('subjects.Classes',['subject'=>$subject->id] ) }}" 
                       class="btn btn-info w-100 mb-2">
                        <i class="fas fa-list"></i> View All Classes
                    </a>
                    <a href="{{ route('subjects.create') }}" class="btn btn-success w-100 mb-2">
                        <i class="fas fa-plus-circle"></i> Create New Subject
                    </a>
                </div>
            </div>

            <!-- Statistics -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Statistics</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Total Classes:</span>
                        <strong class="badge bg-primary rounded-pill">{{ $subject->class_count }}</strong>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Active Classes:</span>
                        <strong class="badge bg-success rounded-pill">{{ $subject->active_classes->count() }}</strong>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Assignments:</span>
                        <strong class="badge bg-info rounded-pill">{{ $subject->assignments->count() }}</strong>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span>Materials:</span>
                        <strong class="badge bg-warning rounded-pill">
                            {{ $subject->materials->count() }}
                        </strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- <!-- Schedule Class Modal -->
<div class="modal fade" id="assignBatchModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Schedule Class</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="assignBatchForm" action="{{ route('subjects.assign-to-batch', $subject->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-danger d-none" id="formError"></div>
                    
                    <div class="mb-3">
                        <label for="batch_id" class="form-label">Batch *</label>
                        <select class="form-select" id="batch_id" name="batch_id" required>
                            <option value="">Select Batch</option>
                            @foreach($batches ?? [] as $batch)
                                <option value="{{ $batch->id }}">{{ $batch->name }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="batchError"></div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="teacher_id" class="form-label">Teacher</label>
                        <select class="form-select" id="teacher_id" name="teacher_id">
                            <option value="">Select Teacher</option>
                            @foreach($teachers ?? [] as $teacher)
                                <option value="{{ $teacher->id }}">
                                    {{ $teacher->user->name ?? 'Teacher #' . $teacher->id }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="room_id" class="form-label">Room</label>
                        <select class="form-select" id="room_id" name="room_id">
                            <option value="">Select Room</option>
                            @foreach($rooms ?? [] as $room)
                                <option value="{{ $room->id }}">{{ $room->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="row">
                        {{-- <div class="col-md-6">
                            <div class="mb-3">
                                <label for="class_date" class="form-label">Date *</label>
                                <input type="date" class="form-control" id="class_date" name="class_date" required>
                                <div class="invalid-feedback" id="classDateError"></div>
                            </div>
                        </div> --}}
                        {{-- <div class="col-md-3">
                            <div class="mb-3">
                                <label for="start_time" class="form-label">Start Time *</label>
                                <input type="time" class="form-control" id="start_time" name="start_time" required>
                                <div class="invalid-feedback" id="startTimeError"></div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="end_time" class="form-label">End Time *</label>
                                <input type="time" class="form-control" id="end_time" name="end_time" required>
                                <div class="invalid-feedback" id="endTimeError"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="weekly_hours" class="form-label">Weekly Hours *</label>
                                <input type="number" class="form-control" id="weekly_hours" name="weekly_hours" 
                                       value="3" min="1" max="20" required>
                                <div class="invalid-feedback" id="weeklyHoursError"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="topic" class="form-label">Topic</label>
                                <input type="text" class="form-control" id="topic" name="topic" maxlength="255">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="2"></textarea>
                    </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" id="assignBtn">
                        <i class="fas fa-calendar-plus"></i> Schedule
                    </button>
                </div>
            </form>
        </div>
    </div> --}}
{{-- </div> - --}}
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Set today's date as default for class_date
    const today = new Date().toISOString().split('T')[0];
    $('#class_date').val(today);
    
    // Set default times (e.g., 9:00 AM - 10:00 AM)
    $('#start_time').val('09:00');
    $('#end_time').val('10:00');
    
    // Reset form when modal is hidden
    $('#assignBatchModal').on('hidden.bs.modal', function() {
        $('#formError').addClass('d-none').text('');
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    });

    // Form validation
    $('#assignBatchForm').on('submit', function(e) {
        e.preventDefault();
        
        const assignBtn = $('#assignBtn');
        const originalText = assignBtn.html();
        const formError = $('#formError');
        
        assignBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Scheduling...');
        
        // Clear previous errors
        formError.addClass('d-none').text('');
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').text('');
        
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // Show success message
                    showAlert('success', response.message || 'Class scheduled successfully!');
                    $('#assignBatchModal').modal('hide');
                    
                    // Reload page after 1.5 seconds to show new class
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    showAlert('danger', response.message || 'Failed to schedule class');
                    assignBtn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr) {
                assignBtn.prop('disabled', false).html(originalText);
                
                if (xhr.status === 422) {
                    // Validation errors
                    const errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(field => {
                        const input = $(`[name="${field}"]`);
                        const errorDiv = $(`#${field}Error`);
                        
                        input.addClass('is-invalid');
                        if (errorDiv.length) {
                            errorDiv.text(errors[field][0]);
                        }
                    });
                } else if (xhr.status === 500) {
                    // Server error
                    const error = xhr.responseJSON;
                    formError.removeClass('d-none').text(error.message || 'Server error occurred. Please try again.');
                } else {
                    // Other errors
                    console.error('AJAX Error:', xhr);
                    let errorMsg = 'Error scheduling class';
                    
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        // Try to extract error from HTML
                        const match = xhr.responseText.match(/<div class="alert alert-danger">([\s\S]*?)<\/div>/);
                        if (match && match[1]) {
                            errorMsg = match[1].replace(/<[^>]*>/g, '').trim();
                        }
                    }
                    
                    formError.removeClass('d-none').text(errorMsg);
                }
            }
        });
    });
    
    function showAlert(type, message) {
        // Create alert element
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3" style="z-index: 9999;">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        $('body').append(alertHtml);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            $('.alert').alert('close');
        }, 5000);
    }
});
</script>
@endpush

@push('styles')
<style>
    .table th {
        font-weight: 600;
    }
    .badge {
        font-size: 0.75rem;
    }
    .modal-content {
        border-radius: 10px;
    }
    .form-label {
        font-weight: 500;
    }
</style>
@endpush