@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-left">
            <form action="/explore" method="get" id="searchForm">
                <div class="d-flex mb-2 w-75" style="justify-content: space-between">
                    <input type="text" placeholder="Search for artists by name" class="form-control w-50 mr-2"
                           name="search_name_criteria"
                           value="{{ app('request')->input('search_name_criteria') ?? '' }}">
                    <select name="music_type" class="form-select w-25">
                        <option value="all">All</option>
                        @foreach($genres as $genre)
                            <option
                                value="{{ $genre->id }}" {{ $genre->id === app('request')->input('music_type') ? 'selected' : '' }}>{{ $genre->name }}</option>
                        @endforeach
                    </select>
                    <div style="width: 200px; align-items: center; justify-content: space-between" class="d-flex">
                        @foreach($artist_types as $type)
                            <div>
                                <input type="checkbox" id={{ "artist_type_" . $type->id }} class="form-check-input"
                                       name="artist_type[]"
                                       value={{$type->id}} {{ in_array($type->id, app('request')->input('artist_type') ?? []) ? 'checked' : '' }}>
                                <label class="form-check-label"
                                       for={{ "artist_type_" . $type->id }}>{{ $type->name }}</label>
                            </div>
                        @endforeach

                    </div>
                </div>
                <button class="btn btn-primary mb-4 btn-search" type="submit">Search</button>
                <button class="btn btn-danger mb-4" onclick="clearForm()" type="button">Clear</button>
            </form>
        </div>

    </div>
    <div class="container">
        <div class="row">
            @include('components.artist-small-card')
        </div>
    </div>

    <script type="text/javascript">
        function clearForm() {
            $("#searchForm :input:not(:radio):not(:checkbox)").val("");
            $('input[type="checkbox"]').prop("checked", false);

            $('.btn-search').click();
        }
    </script>
@endsection