@extends('base')

@section('main')
    <div>
        <div class="ui form">
            <form action="{{ route('tips.update', $tip) }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                <div class="field">
                    <label>Title</label>
                    <input name="title" placeholder="Title" value="{{ $tip->title }}"/>
                </div>
                <div class="field">
                    <label>Description</label>
                    <textarea name="description" id="description" placeholder="Description here..." rows="5">
                        {{ $tip->description }}
                    </textarea>
                </div>
                <div class="field">
                    <label>Short Description</label>
                    <textarea name="short_description" id="short_description" placeholder="Short description here..." rows="3">
                        {{ $tip->short_description }}
                    </textarea>
                </div>
                <div class="field">
                    <label>Source</label>
                    <input name="source" placeholder="Source" value="{{ $tip->source }}"/>
                </div>
                <div class="field">
                    <label>Tags</label>
                    <select name="tags[]" class="ui dropdown" multiple="">
                        <option value="">Select Tags</option>
                        @foreach($tags as $tag)
                            @php
                                $flg = 0
                            @endphp
                            @foreach($tip->tags as $tip_tag)
                                @if ($tip_tag->id == $tag->id)
                                    @php
                                        $flg = 1
                                    @endphp
                                    @break
                                @endif
                            @endforeach
                            <option value="{{ $tag->id }}" {{ $flg == 1 ? 'selected' : '' }}>{{ $tag->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <input type="hidden" name="remove_media" id="remove_media" value=""/>
                    <label>Current Media</label>
                    <table class="ui celled table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Media</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tip->media as $id => $media)
                                <tr>
                                    <td>{{ $id + 1 }}</td>
                                    <td>
                                        @if(str_starts_with($media->mime_type, 'image'))
                                            <img class="ui small image" 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
                                    </td>
                                    <td id="td_remove_media_{{$media->id}}">
                                        <button type="button" class="ui button primary" onclick="removeMedia({{ $media->id }});">Delete</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="field">
                    <label>Add New Media</label>
                    <input name="media[]" type="file" accept="image/png,image/jpg,video/mp4" multiple/>
                </div>
                <button class="ui button" type="submit">Submit</button>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function removeMedia(id) {
            let item = $('#remove_media');
            let ids = item.val().split(',');
            ids.push(id);
            item.val(ids.join(','));
            $(`#td_remove_media_${id}`).html(
                `<button class='ui button danger' onclick='reAddMedia(${id})'>Re-Add</button>`
            );
        }

        function reAddMedia(id) {
            let item = $('#remove_media');
            let ids = item.val().split(',');
            ids = ids.filter(x => parseInt(x) !== parseInt(id));
            item.val(ids.join(','));
            $(`#td_remove_media_${id}`).html(
                `<button class='ui button primary' onclick='removeMedia(${id})'>Delete</button>`
            );
        }
    </script>
@endsection