@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 Episode</h1>
          <small>{{ $series->title }} / Season {{ $season->season_number }}</small>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <form action="{{ route('admin.episodes.update', [$series->id, $season->id, $episode->id]) }}" method="post" enctype="multipart/form-data">
              @csrf
              <div class="card-body">
                @if($errors->any())
                  <div class="alert alert-danger">
                    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                  </div>
                @endif

                <div class="form-group">
                  <label>Episode Number <span class="text-danger">*</span></label>
                  <input type="number" class="form-control" name="episode_number" value="{{ old('episode_number', $episode->episode_number) }}" min="1">
                </div>

                <div class="form-group">
                  <label>Title <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="title" value="{{ old('title', $episode->title) }}">
                </div>

                <div class="form-group">
                  <label>Thumbnail Image</label>
                  @if($episode->thumbnail_image)
                    <div class="mb-2"><img src="{{ asset($episode->thumbnail_image) }}" style="height:70px;object-fit:cover"></div>
                  @endif
                  <input type="file" class="form-control" name="thumbnail_image">
                </div>

                <div class="form-group">
                  <label>Video Type <span class="text-danger">*</span></label>
                  <select name="video_type" id="videoType" class="form-control">
                    <option value="upload"  {{ old('video_type', $episode->video_type) == 'upload'  ? 'selected' : '' }}>Upload</option>
                    <option value="youtube" {{ old('video_type', $episode->video_type) == 'youtube' ? 'selected' : '' }}>YouTube URL</option>
                    <option value="other"   {{ old('video_type', $episode->video_type) == 'other'   ? 'selected' : '' }}>Other URL</option>
                  </select>
                </div>

                <div class="form-group" id="videoField">
                  <label>Upload New Video (leave blank to keep existing)</label>
                  <input type="file" class="form-control" name="video">
                </div>
                <div class="form-group" id="youtubeField" style="display:none">
                  <label>YouTube URL</label>
                  <input type="text" class="form-control" name="youtube_url" value="{{ old('youtube_url', $episode->youtube_url) }}">
                </div>
                <div class="form-group" id="otherField" style="display:none">
                  <label>Other URL (HLS/MP4)</label>
                  <input type="text" class="form-control" name="other_url" value="{{ old('other_url', $episode->other_url) }}">
                </div>

                <div class="form-group">
                  <label>Duration (seconds)</label>
                  <input type="number" class="form-control" name="duration_seconds" value="{{ old('duration_seconds', $episode->duration_seconds) }}" min="0">
                </div>

                <div class="form-group">
                  <label>Description</label>
                  <textarea name="description" class="form-control" rows="4">{{ old('description', $episode->description) }}</textarea>
                </div>

                <div class="form-group">
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="isPremium" name="is_premium" value="1"
                      {{ old('is_premium', $episode->is_premium) ? 'checked' : '' }}>
                    <label class="custom-control-label" for="isPremium">Premium episode (requires subscription)</label>
                  </div>
                </div>

                <div class="form-group">
                  <label>Status</label>
                  <select name="status" class="form-control" style="width:100%">
                    <option value="0" {{ $episode->status == 0 ? 'selected' : '' }}>Active</option>
                    <option value="1" {{ $episode->status == 1 ? 'selected' : '' }}>Inactive</option>
                  </select>
                </div>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-primary">Update Episode</button>
                <a href="{{ url('admin/series/'.$series->id.'/seasons/'.$season->id.'/episodes') }}" class="btn btn-secondary ml-2">Cancel</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var sel = document.getElementById('videoType');
  var vf  = document.getElementById('videoField');
  var yf  = document.getElementById('youtubeField');
  var of  = document.getElementById('otherField');

  function update() {
    vf.style.display = sel.value === 'upload'  ? 'block' : 'none';
    yf.style.display = sel.value === 'youtube' ? 'block' : 'none';
    of.style.display = sel.value === 'other'   ? 'block' : 'none';
  }
  update();
  sel.addEventListener('change', update);
});
</script>
@endsection