@php
    if (!empty($session->agora_settings)) {
        $session->agora_settings = json_decode($session->agora_settings);
    }
@endphp

<div class="accordion-item mt-3" data-id="{{ !empty($chapterItem) ? $chapterItem->id :'' }}">
    <h2 class="accordion-header" id="session_{{ !empty($session) ? $session->id :'record' }}">
        <button class="accordion-button p-4 {{ !empty($session) ? 'collapsed' : '' }}" type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#collapseSession{{ !empty($session) ? $session->id :'record' }}"
                aria-expanded="{{ empty($session) ? 'true' : 'false' }}"
                aria-controls="collapseSession{{ !empty($session) ? $session->id :'record' }}">
            
            <div class="d-flex align-items-center justify-content-between w-100">
                <div class="d-flex align-items-center">
                    <i class="fas fa-file-alt me-3"></i>
                    <span class="fw-bold">{{ !empty($session) ? $session->title : trans('public.add_new_sessions') }}</span>
                </div>

                <div class="d-flex align-items-center">
                    @if(!empty($session) and $session->status != \App\Models\WebinarChapter::$chapterActive)
                        <span class="badge bg-secondary me-3">{{ trans('public.disabled') }}</span>
                    @endif

                    @if(!empty($session))
                        <button type="button" data-item-id="{{ $session->id }}"
                                data-item-type="{{ \App\Models\WebinarChapterItem::$chapterSession }}"
                                data-chapter-id="{{ !empty($chapter) ? $chapter->id : '' }}"
                                class="js-change-content-chapter btn btn-sm btn-light me-3">
                            <i class="fas fa-th-large"></i>
                        </button>
                    @endif

                    <i class="fas fa-arrows-alt me-3 cursor-pointer move-icon"></i>

                    @if(!empty($session))
                        <a href="{{ getAdminPanelUrl() }}/sessions/{{ $session->id }}/delete" 
                           class="delete-action btn btn-sm btn-light me-3">
                            <i class="fas fa-trash"></i>
                        </a>
                    @endif
                </div>
            </div>
        </button>
    </h2>

    <div id="collapseSession{{ !empty($session) ? $session->id :'record' }}" 
         class="accordion-collapse collapse {{ empty($session) ? 'show' : '' }}"
         aria-labelledby="session_{{ !empty($session) ? $session->id :'record' }}">
        <div class="accordion-body p-4">
            <div class="js-content-form session-form" data-action="{{ getAdminPanelUrl() }}/sessions/{{ !empty($session) ? $session->id . '/update' : 'store' }}">
                <input type="hidden" name="ajax[{{ !empty($session) ? $session->id : 'new' }}][webinar_id]" value="{{ !empty($webinar) ? $webinar->id :'' }}">

                <!-- Session API Selection -->
                <div class="mb-4">
                    <label class="form-label">{{ trans('webinars.select_session_api') }}</label>

                    <div class="js-session-api">
                        @foreach(getFeaturesSettings("available_session_apis") as $sessionApi)
                            <div class="form-check form-check-inline">
                                <input type="radio" name="ajax[{{ !empty($session) ? $session->id : 'new' }}][session_api]" 
                                       id="{{ $sessionApi }}_api_{{ !empty($session) ? $session->id : '' }}" 
                                       value="{{ $sessionApi }}" 
                                       @if((!empty($session) and $session->session_api == $sessionApi) or (empty($session) and $sessionApi == 'local')) checked @endif 
                                       class="form-check-input js-api-input" 
                                       {{ (!empty($session) and $session->session_api != 'local') ? 'disabled' :'' }}>
                                <label class="form-check-label" for="{{ $sessionApi }}_api_{{ !empty($session) ? $session->id : '' }}">
                                    {{ trans('update.session_api_'.$sessionApi) }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 col-lg-6">
                        <!-- Language Selection -->
                        @if(!empty(getGeneralSettings('content_translate')))
                            <div class="mb-4">
                                <label class="form-label">{{ trans('auth.language') }}</label>
                                <select name="ajax[{{ !empty($session) ? $session->id : 'new' }}][locale]"
                                        class="form-select {{ !empty($session) ? 'js-webinar-content-locale' : '' }}"
                                        data-webinar-id="{{ !empty($webinar) ? $webinar->id : '' }}"
                                        data-id="{{ !empty($session) ? $session->id : '' }}"
                                        data-relation="sessions"
                                        data-fields="title,description">
                                    @foreach($userLanguages as $lang => $language)
                                        <option value="{{ $lang }}" {{ (!empty($session) and !empty($session->locale)) ? (mb_strtolower($session->locale) == mb_strtolower($lang) ? 'selected' : '') : (app()->getLocale() == $lang ? 'selected' : '') }}>
                                            {{ $language }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @else
                            <input type="hidden" name="ajax[{{ !empty($session) ? $session->id : 'new' }}][locale]" value="{{ $defaultLocale }}">
                        @endif

                        <!-- Session Form Fields -->
                        <div class="mb-4">
                            <label class="form-label">{{ trans('public.title') }}</label>
                            <input type="text" name="ajax[{{ !empty($session) ? $session->id : 'new' }}][title]" 
                                   class="form-control" 
                                   value="{{ !empty($session) ? $session->title : '' }}" 
                                   placeholder="{{ trans('forms.maximum_255_characters') }}"/>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">{{ trans('public.date') }}</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-calendar-alt"></i>
                                </span>
                                <input type="text" name="ajax[{{ !empty($session) ? $session->id : 'new' }}][date]" 
                                       class="form-control datetimepicker" 
                                       value="{{ !empty($session) ? dateTimeFormat($session->date, 'Y-m-d H:i', false, true, ($session->webinar ? $session->webinar->timezone : null)) : '' }}"
                                       {{ (!empty($session) and $session->session_api != 'local') ? 'disabled' :'' }}/>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">{{ trans('public.duration') }} <span class="text-muted">({{ trans('public.minutes') }})</span></label>
                            <input type="number" name="ajax[{{ !empty($session) ? $session->id : 'new' }}][duration]" 
                                   class="form-control" 
                                   value="{{ !empty($session) ? $session->duration : '' }}"
                                   {{ (!empty($session) and $session->session_api != 'local') ? 'disabled' :'' }}/>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">{{ trans('public.description') }}</label>
                            <textarea name="ajax[{{ !empty($session) ? $session->id : 'new' }}][description]" 
                                      class="form-control" 
                                      rows="6">{{ !empty($session) ? $session->description : '' }}</textarea>
                        </div>

                        <!-- Status Toggle -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input type="checkbox" name="ajax[{{ !empty($session) ? $session->id : 'new' }}][status]" 
                                       class="form-check-input" 
                                       id="sessionStatusSwitch{{ !empty($session) ? $session->id : '_record' }}"
                                       {{ (empty($session) or $session->status == \App\Models\Session::$Active) ? 'checked' : '' }}>
                                <label class="form-check-label" for="sessionStatusSwitch{{ !empty($session) ? $session->id : '_record' }}">
                                    {{ trans('public.active') }}
                                </label>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex gap-2 mt-4">
                            <button type="button" class="js-save-session btn btn-primary">
                                {{ trans('public.save') }}
                            </button>

                            @if(!empty($session))
                                @if(!$session->isFinished())
                                    <a href="{{ $session->getJoinLink(true) }}" target="_blank" class="btn btn-secondary">
                                        {{ trans('footer.join') }}
                                    </a>
                                @else
                                    <button type="button" class="btn btn-secondary" disabled>
                                        {{ trans('footer.join') }}
                                    </button>
                                @endif
                            @endif

                            @if(empty($session))
                                <button type="button" class="btn btn-danger cancel-accordion">
                                    {{ trans('public.close') }}
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>