@extends('admin.layouts.master')
@section('title', __('episode'))
@section('content')

<section class="oftions">
    <div class="container-fluid">
        <div class="row">
            <div class="col col-md-12">
                <div class="header-top d-flex justify-content-between align-items-center">
                    <h3 class="section-title">{{__('manage_episode') }}</h3>
                    <div class="oftions-content-right mb-12 d-flex align-items-center gap-2">
                        <button type="button" class="d-flex align-items-center justify-content-center btn sg-btn-primary gap-2" id="episode-filter-toggle" title="{{ __('filter') }}">
                            <i class="las la-filter"></i>{{ __('filter') }}
                        </button>
                        @can('admin.episode.add')
                        <a href="javascript:void(0)" class="d-flex align-items-center btn sg-btn-primary gap-2" onclick="ajaxModal('modal-xl', '{{route('admin.episode.add')}}', '{{__('episode_add')}}')">
                            <i class="las la-plus"></i>
                            <span>{{__('add_episode') }}</span>
                        </a>
                        @endcan
                    </div>
                </div>
                <form method="get" action="{{ route('admin.episodes') }}" id="episode-filters" class="mb-20 {{ ($selectedSeriesId || $selectedSeasonId) ? '' : 'd-none' }}">
                    <div class="default-tab-list default-tab-list-v2 bg-white redious-border p-20 p-sm-30">
                        <div class="row g-3 align-items-end">
                            <div class="col-12 col-md-4">
                                <label for="filter_series_id" class="form-label">{{ __('tv_series') }}</label>
                                <select name="series_id" id="filter_series_id" class="form-select form-select-lg rounded-2 without_search">
                                    <option value="">{{ __('all') }}</option>
                                    @foreach($seriesList ?? [] as $s)
                                        <option value="{{ $s->id }}" {{ (string)$s->id === (string)$selectedSeriesId ? 'selected' : '' }}>{{ $s->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-md-4">
                                <label for="filter_season_id" class="form-label">{{ __('season') }}</label>
                                <select name="season_id" id="filter_season_id" class="form-select form-select-lg rounded-2 without_search">
                                    <option value="">{{ __('all') }}</option>
                                    @foreach($seasonList ?? [] as $se)
                                        <option value="{{ $se->id }}" {{ (string)$se->id === (string)$selectedSeasonId ? 'selected' : '' }}>{{ $se->season_name ?? 'Season #'.$se->id }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-md-4 d-flex gap-2">
                                <button type="submit" class="btn sg-btn-primary w-50">{{ __('filter') }}</button>
                                <a href="{{ route('admin.episodes') }}" class="btn btn-outline-secondary w-50">{{ __('clear') }}</a>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="default-tab-list default-tab-list-v2 bg-white redious-border p-20 p-sm-30">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="default-list-table table-responsive yajra-dataTable">
                                {{ $dataTable->table() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@push('js')
{{ $dataTable->scripts() }}
<script>
    (function() {
        document.getElementById('episode-filter-toggle').addEventListener('click', function() {
            var form = document.getElementById('episode-filters');
            form.classList.toggle('d-none');
        });
    })();
</script>
@endpush