@extends('backend.layouts.app')
@section('content')
    <div class="card page-container" id="page-container">
        <div class="card-body p-lg-25 content-wrap">
            <div class="toolbar" id="kt_toolbar">
                <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                    <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                        data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                        class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                        <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">
                            @if ($method == 'PUT') {{ TranslationManager::translate('Edit Video') }} @else {{ TranslationManager::translate('New Video') }} @endif
                        </h1>
                        <span class="h-20px bvideo-gray-200 bvideo-start mx-4"></span>
                        <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('admin.index') }}"
                                    class="text-muted text-hover-primary">{{ TranslationManager::translate('Home') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('admin.courses.index') }}"
                                    class="text-muted text-hover-primary">{{ TranslationManager::translate('Courses') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('admin.sections.index', ['course' => $section->course]) }}"
                                    class="text-muted text-hover-primary">{{ TranslationManager::translate('Sections') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('admin.videos.index', ['section' => $section]) }}"
                                    class="text-muted text-hover-primary">{{ TranslationManager::translate('Videos') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-dark">
                                @if ($method == 'PUT') {{ TranslationManager::translate('Edit Video') }} @else {{ TranslationManager::translate('New Video') }} @endif
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--begin::Layout-->
            <div class="d-flex flex-column flex-lg-row mb-17">
                <div class="flex-lg-row-fluid me-0 me-lg-20">
                    <form action="{{ $action }}" class="form mb-15" method="POST" id="kt_careers_form"
                        enctype='multipart/form-data'>
                        @csrf
                        @if ($method == 'PUT')
                            @method('put')
                        @endif

                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif >
                                    <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Video Name', $language->code) }}</label>
                                    <input type="text" class="form-control form-control-solid"
                                        value="{{ $video->getTranslation('name', $language->code, false) }}" id="name_{{ $language->code }}"
                                        placeholder="{{ TranslationManager::translate('Video Name', $language->code) }}"
                                        name="name[{{ $language->code }}]" />
                                </div>
                            @endforeach
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Type') }}</label>
                                <select name="type" id="video_type" class="form-select form-select-solid">
                                    <option value="video" {{ $video->type == 'video' ? 'selected' : '' }}>Video</option>
                                    <option value="zoom" {{ $video->type == 'zoom' ? 'selected' : '' }}>Zoom</option>
                                </select>
                            </div>
                        </div>

                        <div class="row" id="video_duration_row">
                            <div class="col-md-6 mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Duration In Minutes') }}</label>
                                <input type="number" step="0.01" min="0" class="form-control form-control-solid" name="duration"
                                    placeholder="{{ TranslationManager::translate('Duration In Minutes') }}"
                                    value="{{ $video->duration }}" id="duration" />
                            </div>
                        </div>

                        <div class="row mb-5" id="zoom_datetime_row" style="display: none;">
                            <div class="col-md-6 mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Meeting Date & Time') }}</label>
                                <input type="datetime-local" class="form-control form-control-solid" name="meeting_at"
                                    value="{{ $video->meeting_at ?? '' }}" id="meeting_at" />
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 mb-5 fv-row">
                                <label id="video_url_label" class="fs-6 fw-bold mb-2">
                                    {{ TranslationManager::translate('Video ID') }}
                                </label>
                                <input type="text" class="form-control form-control-solid mb-5" name="url" id="url"
                                    placeholder="{{ TranslationManager::translate('Video ID') }}" value="{{ $video->url }}" />
                            </div>
                            <div class="col-md-6 fv-row" id="video_preview_col">
                                @if ($video->id && $video->type == 'video')
                                    <div class="mt-5">
                                        <div class="video-container">
                                            <iframe src="{{ $video->getUrl() }}" width="640" height="360" frameborder="0"
                                                allowfullscreen allow="autoplay; fullscreen; picture-in-picture; encrypted-media"></iframe>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="separator mb-8"></div>

                        <button type="submit" class="btn btn-primary" id="kt_careers_submit_button">
                            <span class="indicator-label">{{ TranslationManager::translate('Submit') }}</span>
                        </button>
                        <a href="{{ route('admin.videos.index', ['section' => $section]) }}" class="btn btn-danger"
                            id="kt_careers_submit_button">
                            <span class="indicator-label">{{ TranslationManager::translate('Back To Section') }}</span>
                        </a>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('video_type');
    const durationRow = document.getElementById('video_duration_row');
    const datetimeRow = document.getElementById('zoom_datetime_row');
    const urlLabel = document.getElementById('video_url_label');
    const urlInput = document.getElementById('url');
    const videoPreviewCol = document.getElementById('video_preview_col');

    function toggleFields() {
        if (typeSelect.value === 'zoom') {
            durationRow.style.display = 'none';
            datetimeRow.style.display = '';
            videoPreviewCol.style.display = 'none';
            urlLabel.textContent = "{{ TranslationManager::translate('Meeting URL') }}";
            urlInput.placeholder = "{{ TranslationManager::translate('Meeting URL') }}";
        } else {
            durationRow.style.display = '';
            datetimeRow.style.display = 'none';
            videoPreviewCol.style.display = '';
            urlLabel.textContent = "{{ TranslationManager::translate('Video ID') }}";
            urlInput.placeholder = "{{ TranslationManager::translate('Video ID') }}";
        }
    }

    // Initialize on load
    toggleFields();

    // Change event
    typeSelect.addEventListener('change', toggleFields);
});
</script>
@endpush