@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">Create New Room</h4>
                    <p class="text-muted mb-0">Create either a regular virtual room or a BigBlueButton video conference room</p>
                </div>
                <div class="card-body">
                    <form action="{{ route('rooms.store') }}" method="POST">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Room Name *</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                           value="{{ old('name') }}" required maxlength="100" placeholder="Enter room name">
                                    @error('name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="type" class="form-label">Room Type *</label>
                                    <select class="form-select" id="type" name="type" required>
                                        <option value="virtual" selected>Virtual Room</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="capacity" class="form-label">Capacity</label>
                                    <input type="number" class="form-control" id="capacity" name="capacity"
                                           value="{{ old('capacity') }}" min="1" placeholder="Enter capacity">
                                    <div class="form-text">Maximum number of participants</div>
                                    @error('capacity')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- BBB Room Options -->
                        <div class="card mb-4 border-primary">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">
                                    <i class="fas fa-video"></i> BigBlueButton Video Conference Room
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch"
                                               id="create_bbb_room" name="create_bbb_room" value="1"
                                               {{ old('create_bbb_room') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="create_bbb_room">
                                            <strong>Enable BigBlueButton Video Conference</strong>
                                        </label>
                                        <div class="form-text">Create a video conference room with audio/video capabilities</div>
                                    </div>
                                </div>

                                <div id="bbb-options" style="{{ old('create_bbb_room') ? '' : 'display: none;' }}">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="bbb_room_type" class="form-label">Room Purpose *</label>
                                                <select class="form-select" id="bbb_room_type" name="bbb_room_type">
                                                    <option value="class" {{ old('bbb_room_type', 'class') == 'class' ? 'selected' : '' }}>
                                                        <i class="fas fa-chalkboard-teacher"></i> Lesson/Class Room
                                                    </option>
                                                    <option value="exam" {{ old('bbb_room_type') == 'exam' ? 'selected' : '' }}>
                                                        <i class="fas fa-graduation-cap"></i> Exam/Test Room
                                                    </option>
                                                    <option value="meeting" {{ old('bbb_room_type') == 'meeting' ? 'selected' : '' }}>
                                                        <i class="fas fa-users"></i> Meeting Room
                                                    </option>
                                                </select>
                                                @error('bbb_room_type')
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="bbb_duration" class="form-label">Meeting Duration (minutes) *</label>
                                                <input type="number" class="form-control" id="bbb_duration" name="bbb_duration"
                                                       value="{{ old('bbb_duration', 120) }}" min="15" max="480" required>
                                                <div class="form-text">Maximum duration in minutes (15-480)</div>
                                                @error('bbb_duration')
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="bbb_welcome_message" class="form-label">Welcome Message</label>
                                        <textarea class="form-control" id="bbb_welcome_message" name="bbb_welcome_message"
                                                  rows="2" placeholder="Welcome message for participants...">{{ old('bbb_welcome_message') }}</textarea>
                                        <div class="form-text">This message will be displayed when participants join</div>
                                        @error('bbb_welcome_message')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="bbb_scheduled_at" class="form-label">Scheduled Time</label>
                                                <input type="datetime-local" class="form-control" id="bbb_scheduled_at"
                                                       name="bbb_scheduled_at" value="{{ old('bbb_scheduled_at') }}">
                                                <div class="form-text">Optional: Schedule the room for a specific time</div>
                                                @error('bbb_scheduled_at')
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">Room Features</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="bbb_record"
                                                           name="bbb_record" value="1" {{ old('bbb_record', true) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="bbb_record">
                                                        Record Session
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="bbb_auto_start_recording"
                                                           name="bbb_auto_start_recording" value="1" {{ old('bbb_auto_start_recording') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="bbb_auto_start_recording">
                                                        Auto-start Recording
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Exam Specific Options -->
                                    <div id="exam-options" style="{{ old('bbb_room_type') == 'exam' ? '' : 'display: none;' }}">
                                        <div class="alert alert-warning">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            <strong>Exam Room Settings:</strong> These settings are for online proctored exams
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" role="switch"
                                                               id="bbb_require_webcam" name="bbb_require_webcam" value="1"
                                                               {{ old('bbb_require_webcam') ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="bbb_require_webcam">
                                                            Require Webcam
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" role="switch"
                                                               id="bbb_require_mic" name="bbb_require_mic" value="1"
                                                               {{ old('bbb_require_mic') ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="bbb_require_mic">
                                                            Require Microphone
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" role="switch"
                                                               id="bbb_lock_disable_note" name="bbb_lock_disable_note" value="1"
                                                               {{ old('bbb_lock_disable_note', true) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="bbb_lock_disable_note">
                                                            Disable Notes
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="note" class="form-label">Room Notes</label>
                            <textarea class="form-control" id="note" name="note" rows="3"
                                      placeholder="Additional notes about the room...">{{ old('note') }}</textarea>
                            @error('note')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('rooms.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to List
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Create Room
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const createBbbCheckbox = document.getElementById('create_bbb_room');
    const bbbOptions = document.getElementById('bbb-options');
    const roomTypeSelect = document.getElementById('bbb_room_type');
    const examOptions = document.getElementById('exam-options');
    const durationField = document.getElementById('bbb_duration');

    // Toggle BBB options visibility
    createBbbCheckbox.addEventListener('change', function() {
        if (this.checked) {
            bbbOptions.style.display = 'block';
            durationField.required = true;
        } else {
            bbbOptions.style.display = 'none';
            durationField.required = false;
        }
    });

    // Toggle exam options
    roomTypeSelect.addEventListener('change', function() {
        if (this.value === 'exam') {
            examOptions.style.display = 'block';
        } else {
            examOptions.style.display = 'none';
        }
    });

    // Set default values for exam room
    roomTypeSelect.addEventListener('change', function() {
        if (this.value === 'exam') {
            // Set exam-specific defaults
            document.getElementById('bbb_record').checked = true;
            document.getElementById('bbb_require_webcam').checked = true;
            document.getElementById('bbb_require_mic').checked = true;
            document.getElementById('bbb_lock_disable_note').checked = true;

            if (!document.getElementById('bbb_welcome_message').value) {
                document.getElementById('bbb_welcome_message').value =
                    'Welcome to the online exam. Please keep your webcam and microphone ON.';
            }
        } else if (this.value === 'class') {
            if (!document.getElementById('bbb_welcome_message').value) {
                document.getElementById('bbb_welcome_message').value =
                    'Welcome to our online class!';
            }
        }
    });

    // Validate scheduled time
    const scheduledInput = document.getElementById('bbb_scheduled_at');
    if (scheduledInput) {
        const now = new Date();
        const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000)
            .toISOString()
            .slice(0, 16);

        scheduledInput.min = localDateTime;

        if (!scheduledInput.value) {
            // Set default to 1 hour from now
            const oneHourLater = new Date(now.getTime() + 60 * 60000);
            const defaultDateTime = new Date(oneHourLater.getTime() - oneHourLater.getTimezoneOffset() * 60000)
                .toISOString()
                .slice(0, 16);
            scheduledInput.value = defaultDateTime;
        }
    }
});
</script>
@endpush