@php
use App\Libraries\DateTime;
@endphp
<div class="filter">
    <ul>
        <li class="dropdown actions_dropdown">
            <a class="dropdown-toggle" id="actions" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                <i class="fas fa-filter"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="actions">
                <form id="filters-form" class="modal-body">
                    <input type="hidden" name="type" value="free">
                    <div class="row">
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="form-group">
                                <label class="el_label" for="category_id">Categories</label>
                                <select id="inputcategory" name="categories[]" class="form-select category_dropwdown" data-url="{{ route('creator.videos.getSubCategory') }}">
                                    <option value="" selected disabled>Select</option>
                                    @foreach($categories as $key => $c)
                                    <option value="{{ $c->id }}"  >{{ $c->title }} ({{ $c->time ? DateTime::secondsToTime($c->time) : "Not selected" }} hours)</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="el_label" for="sub_category_id">Sub Categories</label>
                                <select id="inputcategory" name="sub_categories[]" class="form-select sub_category_dropwdown">
                                    <option value="" selected disabled>Select</option>
                                    @if($sub_categories)
                                    @foreach($sub_categories as $key => $sc)
                                    <option value="{{ $sc->id }}"  >{{ $sc->title }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="row">
                                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <label for="">
                                        Created On
                                    </label>
                                </div>
                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                    <div class="form-group">
                                        <div class="input-group" id="start_date_box">
                                            <input type="text" class="form-control" name="created_on[]" id="start_date" placeholder="Start date" value="{{isset($_GET['created_on'][0]) && $_GET['created_on'][0] ? $_GET['created_on'][0] : ""}}" autocomplete="off">
                                            <div class="icon">
                                                <i class="fal fa-calendar-alt"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                    <div class="form-group">
                                        <div class="input-group" id="new_date_box">
                                            <input type="text" class="form-control" name="created_on[]" id="new_date" placeholder="End date" value="{{isset($_GET['created_on'][1]) && $_GET['created_on'][1] ? $_GET['created_on'][1] : ""}}" autocomplete="off">
                                            <div class="icon">
                                                <i class="fal fa-calendar-alt"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="form-group">
                                <div class="custom-control-radio custom-radio">
                                    <input class="form-check-input" type="radio" name="status" id="r-1" value="active" {{isset($_GET['status']) && $_GET['status'] == "active" ? "checked" : ""}} >
                                    <label class="form-check-label" for="r-1">
                                    Active
                                    </label>
                                    <input class="form-check-input" type="radio" name="status" id="r-2" value="non_active" {{isset($_GET['status']) && $_GET['status'] == "non_active" ? "checked" : ""}} >
                                    <label class="form-check-label" for="r-2">
                                    Inactive
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="sbt float-start">
                                <a href="{{route('creator.videos')}}"  class="btn btn-primary">Reset all</a>
                            </div>
                            <div class="sbt">
                                <button type="submit"  class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </ul>
        </li>
    </ul>
</div>