@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>Edit Slider</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.sliders.update') }}" 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', $slider->title) }}" placeholder="Title">
                    <input type="hidden" class="form-control" name="slider_id" value="{{ $slider->id }}">
                  </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($slider->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>
                  <!-- Thumbnail Preview -->
                  <div class="form-group">
                    <img src="{{ asset($slider->thumbnail_image) }}" alt="Thumbnail Preview" style="width: 300px; height: 160px;">
                  </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" @if($slider && $slider->video_type == 'upload1') selected @endif>Video (Upload)</option>
                      <option value="youtube" @if($slider && $slider->video_type == 'youtube') selected @endif>Video (Youtbe URL)</option>
                      <option value="radio" @if($slider && $slider->video_type == 'radio') selected @endif>Video (Radio URL)</option>
                      <option value="other" @if($slider && $slider->video_type == 'other') selected @endif>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">
                    @if(!empty($slider->video))
                      <video width="480" height="240" controls style="margin-top: 10px;">
                        <source src="{{ asset($slider->video) }}" type="video/mp4">
                        <source src="{{ asset($slider->video) }}" type="video/webm">
                        Your browser does not support the video tag.
                      </video>
                    @endif
                  </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', $slider->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', $slider->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('youtube_url', $slider->other_url) }}" placeholder="Other URL">
                  </div>
                  <div class="form-group">
                    <label>Description</label>
                    <textarea
                      name="description"
                      class="form-control"
                      rows="5"
                    >
                      {!! old('description', $slider->description) !!}
                    </textarea>
                  </div>
                  <div class="form-group">
                    <label>Status</label>
                    <select name="status" class="form-control">
                      <option value="0" @if($slider->status == '0') selected @endif>Active</option>
                      <option value="1" @if($slider->status == '1') selected @endif>Inactive</option>
                    </select>
                  </div>
                </div>
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">Update</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