@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.update', $meeting->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                        {{-- 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', $meeting->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', $meeting->type) == 'live' ? 'selected' : '' }}>
                                        {{ __('Live (regular meeting)') }}
                                    </option>
                                    <option value="automated" {{ old('type', $meeting->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', $meeting->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', $meeting->date) }}" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ __('Time') }}</label>
                                <input type="time" name="time" value="{{ old('time', $meeting->time) }}" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{{ __('Password') }}</label>
                                <input type="text" name="password" value="{{ old('password', $meeting->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', $meeting->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">
                            @foreach ($meeting->meetingModerators as $index => $mod)
                                <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>
                                            <input type="hidden" name="moderators[{{ $index }}][user_id]"
                                                value="{{ $mod->user_id }}">
                                            <div class="form-control-plaintext fw-semibold">
                                                {{ $mod->user->username ?? '—' }}
                                                <small class="text-muted">{{ $mod->user->email ?? '' }}</small>
                                            </div>
                                            <small class="text-muted">
                                                {{ __('To change user, remove and re-add.') }}
                                            </small>
                                        </div>
                                        <div class="col-md-5">
                                            <label class="form-label">{{ __('Prerecorded Video') }}</label>
                                            @if ($mod->video_path)
                                                <div class="mb-1 small text-success">
                                                    <i class="bi bi-camera-video me-1"></i>
                                                    {{ $mod->video_original_name }}
                                                    <span class="text-muted">({{ __('Upload new to replace') }})</span>
                                                </div>
                                            @endif
                                            <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>
                            @endforeach
                        </div>

                        <div id="noModeratorsMsg" class="text-muted small mb-3"
                            style="{{ $meeting->meetingModerators->count() ? 'display:none' : '' }}">
                            {{ __('No moderators added yet.') }}
                        </div>

                        {{-- New moderator rows added dynamically will appear here --}}
                        <div id="newModeratorRows"></div>

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

    {{-- Template for new (not pre-existing) moderator rows --}}
    <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 = {{ $meeting->meetingModerators->count() }};

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

    // Attach remove to pre-existing rows
    document.querySelectorAll('#moderatorRows .remove-moderator-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            btn.closest('.moderator-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('newModeratorRows').appendChild(row);
        row.querySelector('.remove-moderator-btn').addEventListener('click', function () {
            row.remove();
            updateNoModeratorsMsg();
        });
        updateNoModeratorsMsg();
    });

    updateNoModeratorsMsg();
</script>
@endsection