@extends('backend.layouts.app')
@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Add New Video</h1>
          </div>
        </div>
      </div>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <form action="{{ route('admin.videos.insert') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                  <div class="form-group">
                    <label>Title</label>
                    <input type="text"  class="form-control" name="title" value="{{ old('title') }}" placeholder="Title">
                  </div>
                  <div class="form-group">
                    <label class="d-block">Select Category</label>
                    <select name="category_id" class="form-control select2" style="width: 100%">
                      <option selected disabled>Select Category</option>
                      @foreach($categories as $category)
                        <option value="{{ $category->id }}" @if(old('category_id') == $category->id) selected @endif>{{ $category->name }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group">
                    <label>Thumbnail Image</label>
                    <input type="file"  class="form-control" name="thumbnail_image">
                  </div>
                  <div class="form-group">
                    <label class="d-block">Video Type</label>
                    <select name="video_type" id="videoType" class="form-control" style="width: 100%">
                      <option value="upload" {{ old('video_type') == 'upload' ? 'selected' : '' }}>Video (Upload)</option>
                      <option value="youtube" {{ old('video_type') == 'youtube' ? 'selected' : '' }}>Video (Youtbe URL)</option>
                      <option value="radio" {{ old('video_type') == 'radio' ? 'selected' : '' }}>Video (Radio URL)</option>
                      <option value="other" {{ old('video_type') == 'other' ? 'selected' : '' }}>Video (Other URL)</option>
                    </select>
                  </div>
                  <div class="form-group" id="videoField" style="display: none;">
                    <label>Upload Video</label>
                    <input type="file"  class="form-control" name="video" placeholder="Upload Video">
                  </div>
                  <div class="form-group" id="youTubeUrlField" style="display: none;">
                    <label>YouTube URL</label>
                    <input type="text"  class="form-control" name="youtube_url" value="{{ old('youtube_url') }}" placeholder="YouTube URL">
                  </div>
                  <div class="form-group" id="radioUrlField" style="display: none;">
                    <label>Radio URL</label>
                    <input type="text"  class="form-control" name="radio_url" value="{{ old('radio_url') }}" placeholder="Radio URL">
                  </div>
                  <div class="form-group" id="otherUrlField" style="display: none;">
                    <label>Other URL</label>
                    <input type="text"  class="form-control" name="other_url" value="{{ old('other_url') }}" placeholder="Other URL">
                  </div>
                  <div class="form-group">
                    <label>Description</label>
                    <textarea
                      name="description"
                      class="form-control"
                      rows="5"
                    >
                      {!! old('description') !!}
                    </textarea>
                  </div>
                </div>
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script src="{{asset('assets/backend/plugins/ckeditor/ckeditor.js')}}"></script>
  <script>
    var editor = CKEDITOR.replace( 'description' , {
      toolbar: [
        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
        { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
        { name: 'links', items: ['Link', 'Unlink'] },
        { name: 'document', items: ['Source'] } // Source code view
      ],
      customConfig: "{{ asset('assets/backend/plugins/ckeditor/config.js') }}",
      removeButtons: 'Image',
      allowedContent: true,
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var videoTypeSelect = document.getElementById('videoType');
      var youTubeUrlField = document.getElementById('youTubeUrlField');
      var radioUrlField = document.getElementById('radioUrlField');
      var otherUrlField = document.getElementById('otherUrlField');
      var videoField = document.getElementById('videoField');

      function updateFieldVisibility() {
        if (videoTypeSelect.value === 'upload') {
          videoField.style.display = 'block';
          youTubeUrlField.style.display = 'none';
          radioUrlField.style.display = 'none';
          otherUrlField.style.display = 'none';
        } else if (videoTypeSelect.value === 'youtube') {
          videoField.style.display = 'none';
          youTubeUrlField.style.display = 'block';
          radioUrlField.style.display = 'none';
          otherUrlField.style.display = 'none';
        } else if (videoTypeSelect.value === 'radio') {
          videoField.style.display = 'none';
          youTubeUrlField.style.display = 'none';
          radioUrlField.style.display = 'block';
          otherUrlField.style.display = 'none';
        } else if (videoTypeSelect.value === 'other') {
          videoField.style.display = 'none';
          youTubeUrlField.style.display = 'none';
          radioUrlField.style.display = 'none';
          otherUrlField.style.display = 'block';
        } else {
          videoField.style.display = 'block';
          youTubeUrlField.style.display = 'none';
          radioUrlField.style.display = 'none';
          otherUrlField.style.display = 'none';
        }
      }

      // Update visibility based on the default selected value
      updateFieldVisibility();

      // Add event listener for when the select value changes
      videoTypeSelect.addEventListener('change', updateFieldVisibility);
    });
  </script>
@endsection