@extends('base')

@section('main')
    <div>
        <h3>Search</h3>
        <div class="ui form">
            <form action="{{ route('tips.index') }}">
                <div class="two fields">
                    <div class="field">
                        <label>Title</label>
                        <input type="text" name="title" placeholder="Title" value="{{ array_key_exists('title', $queryParams) ? $queryParams['title'] : '' }}"/>
                    </div>
                    <div class="field">
                        <label>Description</label>
                        <input type="text" name="description" placeholder="Description" value="{{ array_key_exists('description', $queryParams) ? $queryParams['description'] : '' }}"/>
                    </div>
                </div>
                <div class="two fields">
                    <div class="field">
                        <label>Source</label>
                        <input type="text" name="source" placeholder="Source" value="{{ array_key_exists('source', $queryParams) ? $queryParams['source'] : '' }}"/>
                    </div>
                    <div class="field">
                        <label>Tags</label>
                        <select class="ui dropdown" multiple="" name="tags[]">
                            <option value="">Select Tags</option>
                            @foreach($tags as $tag)
                                <option value="{{ $tag->id }}" {{ array_key_exists('tags', $queryParams) && in_array($tag->id, $queryParams['tags']) ? 'selected' : '' }}>{{ $tag->title }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <button class="ui button" type="submit">Search</button>
            </form>
        </div>
        <h3>Golf Tips</h3>
        <table class="ui celled table">
            <thead>
                <tr>
                    <th>#</th>
                    <th class="four wide">Title</th>
                    <th class="four wide">Source</th>
                    <th>Tags</th>
                    <th>Media</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tips as $id => $tip)
                    <tr>
                        <td>{{ $id + 1 }}</td>
                        <td>
                            <a href="{{ route('tips.show', $tip->id) }}">
                                {{ $tip->title }}
                            </a>
                        </td>
                        <td>{{ $tip->source }}</td>
                        <td>
                            <div class="ui labels">
                                @foreach($tip->tags as $tag)
                                    <a class="ui label mini" style="margin-bottom: 5px;">{{ $tag->title }}</a>
                                @endforeach
                            </div>
                        </td>
                        <td>
                            <div class="ui small images">
                                @foreach($tip->media as $media)
                                    @if(str_starts_with($media->mime_type, 'image'))
                                        <img src="{{ route('tips.media', $media->id) }}" alt="Golf Image"/>
                                    @else
                                        <video controls height="150">
                                            <source src="{{ route('tips.media', $media->id) }}" type="{{ $media->mime_type }}"/>
                                        </video>
                                    @endif
                                @endforeach
                            </div>
                        </td>
                        <td>
                            <form action="{{ route('tips.edit', $tip) }}" method="get">
                                <button class="ui button primary" type="submit">Edit</button>
                            </form>
                            <form action="{{ route('tips.destroy', $tip->id) }}" method="post">
                                @csrf
                                @method('DELETE')
                                <button class="ui button negative" type="submit">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection