@extends('layouts.admin')
@section('title', $pageTitle)

@section('content')
    @include('include.admin.toast')

    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    @include('include.admin.breadcrumbs', ['module' => 'meeting'])
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.meeting.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        {{-- Basic details --}}
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ __('Title') }} *</label>
                                <input type="text" name="title" value="{{ old('title') }}"
                                    class="form-control @error('title') is-invalid @enderror"
                                    maxlength="100" required>
                                @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ __('Meeting Type') }} *</label>
                                <select name="type" class="form-select @error('type') is-invalid @enderror" required>
                                    <option value="live" {{ old('type') == 'live' ? 'selected' : '' }}>
                                        {{ __('Live (regular meeting)') }}
                                    </option>
                                    <option value="automated" {{ old('type') == 'automated' ? 'selected' : '' }}>
                                        {{ __('Automated (prerecorded video)') }}
                                    </option>
                                </select>
                                @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label">{{ __('Description') }}</label>
                                <textarea name="description" class="form-control @error('description') is-invalid @enderror"
                                    maxlength="1000" rows="2">{{ old('description') }}</textarea>
                                @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">{{ __('Date') }}</label>
                                <input type="date" name="date" value="{{ old('date') }}" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ __('Time') }}</label>
                                <input type="time" name="time" value="{{ old('time') }}" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ __('Password') }}</label>
                                <input type="text" name="password" value="{{ old('password') }}"
                                    class="form-control @error('password') is-invalid @enderror"
                                    minlength="4" maxlength="8">
                                @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">{{ __('Timezone') }}</label>
                            <select name="timezone" class="form-select">
                                <option value="">{{ __('Select Timezone') }}</option>
                                @foreach ($timezones as $tz)
                                    <option value="{{ $tz['value'] }}" {{ old('timezone') == $tz['value'] ? 'selected' : '' }}>
                                        {{ $tz['value'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <hr>

                        {{-- Moderators section --}}
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h4 class="m-0">{{ __('Moderators') }}</h4>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addModeratorBtn">
                                <i class="bi bi-plus-lg me-1"></i>{{ __('Add Moderator') }}
                            </button>
                        </div>

                        <div id="moderatorRows">
                            {{-- dynamic rows injected here --}}
                        </div>

                        <div id="noModeratorsMsg" class="text-muted small mb-3">
                            {{ __('No moderators added yet. Click "Add Moderator" to assign one.') }}
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">{{ __('Create Meeting') }}</button>
                            <a href="{{ route('admin.meeting') }}" class="btn btn-link ms-2">{{ __('Cancel') }}</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Moderator row template (hidden) --}}
    <template id="moderatorRowTemplate">
        <div class="moderator-row card mb-3 p-3">
            <div class="row g-3 align-items-end">
                <div class="col-md-5">
                    <label class="form-label">{{ __('User') }}</label>
                    <select class="form-select" name="moderators[__INDEX__][user_id]" required>
                        <option value="">{{ __('— Select user —') }}</option>
                        @foreach($users as $u)
                            <option value="{{ $u->id }}">{{ $u->username }} ({{ $u->email }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label">
                        {{ __('Prerecorded Video') }}
                        <span class="text-muted">(MP4 / WebM, max 500 MB)</span>
                    </label>
                    <input type="file" class="form-control" name="moderators[__INDEX__][video]"
                        accept="video/mp4,video/webm">
                </div>
                <div class="col-md-2 text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-moderator-btn">
                        <i class="bi bi-trash"></i> {{ __('Remove') }}
                    </button>
                </div>
            </div>
        </div>
    </template>
@endsection

@section('script')
<script>
    let moderatorIndex = 0;

    function updateNoModeratorsMsg() {
        const rows = document.querySelectorAll('.moderator-row');
        document.getElementById('noModeratorsMsg').style.display = rows.length ? 'none' : '';
    }

    function attachRowEvents(row) {
        row.querySelector('.remove-moderator-btn').addEventListener('click', function () {
            row.remove();
            updateNoModeratorsMsg();
        });
    }

    document.getElementById('addModeratorBtn').addEventListener('click', function () {
        const template = document.getElementById('moderatorRowTemplate');
        const clone    = template.content.cloneNode(true);
        const row      = clone.querySelector('.moderator-row');

        row.innerHTML = row.innerHTML.replaceAll('__INDEX__', moderatorIndex++);

        document.getElementById('moderatorRows').appendChild(row);
        attachRowEvents(document.querySelector('.moderator-row:last-child'));
        updateNoModeratorsMsg();
    });

    updateNoModeratorsMsg();
</script>
@endsection