@extends('backend.layouts.app')

@section('title', app_name() . ' | ' .'Clipart management')

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col">

                    <div class="row">
                        {{ html()->form('GET', route('admin.clipart.index'))->class('form-inline')->open() }}
                        <div class="col">
                            <div class="row">
                                {{ html()->label('Tags','tags[]')
                                  }}
                            </div>
                            <div class="row">
                                {{ html()->multiselect('tags[]',$tags->pluck('text', 'id'))->class('tagsselect')->style('width:300px')->value(app('request')->input('tags'))
                                  }}
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                {{ html()->label('Search text','search')
                                            }}
                            </div>
                            <div class="row">
                                {{ html()->text('search')->class('form-control')
                         ->placeholder('Searchtext')->value(app('request')->input('search')) }}
                                &nbsp;{!!form_submit('<i class="fas fa-search"></i>','btn btn-success ') !!}
                            </div>
                        </div>

                        {{html()->form()->close()}}
                    </div>
                </div>

                <div class="col">
                    <div class="btn-toolbar float-right" role="toolbar"
                         aria-label="@lang('labels.general.toolbar_btn_groups')">
                        <a href="{{ route('admin.clipart.create') }}"
                           class="btn btn-success ml-1" data-toggle="tooltip"
                           title="@lang('labels.general.create_new')"><i class="fas fa-plus-circle"></i></a>
                        <a href="#" data-toggle="modal" data-target="#addbulkclipartdialog"
                           class="btn btn-success ml-1" data-toggle="tooltip"
                           title="Bulk import"><i class="fas fa-plus-circle"></i><i class="fas fa-paperclip"></i></a>
                    </div>
                </div><!--col-->
            </div><!--row-->

            <div class="row mt-4">
                <div class="col">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Thumbnail</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Citations</th>
                                <th>Tags</th>
                                <th>Type</th>
                                <th>Paid</th>
                                <th>Owner</th>
                                <th></th>

                            </tr>
                            </thead>
                            <tbody>
                            @foreach($clipart as $clip)
                                <tr>
                                    <td>
                                        @if($clip->id_baseline)
                                            <img
                                                src="{{\App\Models\Graphics\Clipart_colourway::find($clip->id_baseline)->path()}}"
                                                alt="{{$clip->name.' '.\App\Models\Graphics\Clipart_colourway::find($clip->id_baseline)->colour}}"
                                                style="width: 40px; height: auto">
                                        @else
                                            <span class="text-muted"> (baseline not set)</span>
                                        @endif
                                    </td>
                                    <td class="text-wrap">{{$clip->name}}</td>
                                    <td class="text-wrap">{{$clip->description}}</td>
                                    <td class="text-wrap">{!! $clip->citations!!}</td>
                                    <td class="text-wrap">@foreach($clip->tags as $tag)
                                            {{$tag->text}}@if(!$loop->last),@endif
                                        @endforeach
                                    </td>
                                    <td>{{$clip->type}}</td>
                                    <td><span
                                            style="font-weight: bold; color: {!! $clip->paid=='1'?'Darkred':'Darkgreen' !!}">  {!! $clip->paid=='1'?'Paid':'Free' !!}</span>
                                    </td>
                                    <td>{{$clip->owner->first_name}} {{$clip->owner->last_name}}</td>
                                    <td>
                                        <div class="btn-group" role="group"
                                             aria-label="@lang('labels.backend.access.users.user_actions')">
                                            <a href="{{ route('admin.clipart.show', $clip) }}" data-toggle="tooltip"
                                               data-placement="top" title="@lang('buttons.general.crud.view')"
                                               class="btn btn-info">
                                                <i class="fas fa-eye"></i>
                                            </a>

                                            <a href="{{ route('admin.clipart.edit', $clip) }}" data-toggle="tooltip"
                                               data-placement="top" title="@lang('buttons.general.crud.edit')"
                                               class="btn btn-primary">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="#" data-toggle="modal" class="btn btn-danger"
                                               data-target="#deletedialog"
                                               data-id="{{$clip->id}}"><i class="fas fa-times"></i></a>
                                            {{--                                            <a href="#" data-toggle="tooltip" data-placement="top"--}}
                                            {{--                                               title="@lang('buttons.general.crud.delete')" class="btn btn-danger">--}}
                                            {{--                                                <i class="fas fa-times"></i>--}}
                                            </a>
                                        </div>
                                    </td>

                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div><!--col-->
            </div><!--row-->
            <div class="row">
                <div class="col-7">

                </div><!--col-->

                <div class="col-5">
                    <div class="float-right">
                        {!! $clipart->render() !!}
                    </div>
                </div><!--col-->
            </div><!--row-->
        </div><!--card-body-->
    </div><!--card-->
@endsection
@section('dialogs')

    <div id="addclipartdialog" class="modal fade " role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add clipart</h4>
                    <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"
                                                                                style="color: red"></i></button>
                </div>
                <div class="modal-body">
                    @include('backend.clipart.form.newclipart')

                </div>
            </div>
        </div>
    </div>

    <div id="addbulkclipartdialog" role="dialog" class="modal fade ">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add bulk clipart</h4>
                    <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"
                                                                                style="color: red"></i></button>
                </div>
                <div class="modal-body">
                    @include('backend.clipart.form.bulkclipart')

                </div>
            </div>
        </div>
    </div>

    <div id="deletedialog" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="additemtitle">Are you sure?</h4>

                </div>
                <div class="modal-body">

                    <div class="form-group">
                        {{--<button type="submit" class="btn btn-primary">Submit</button>--}}
                        <div style="margin: 0 auto; text-align: center; ">
                            {{ html()->form('POST', route('admin.clipart.delete'))->id('delete-form')->open() }}
                            {{ csrf_field() }}
                            <button type="submit" class="btn-lg btn-warning"><i class="far fa-trash-alt"
                                                                                aria-hidden="true"></i> Delete
                            </button>
                            <button class="btn-default btn-lg" data-dismiss="modal"><i class="fa fa-undo-alt"
                                                                                       aria-hidden="true"></i> Cancel
                            </button>
                            {{ html()->form()->close() }}

                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('after-scripts')
    <script>

        var currentdeletingid = -1;
        $(document).ready(function () {
            $('.tagsselect').select2({
                placeholder: 'Filter by tags...',
            });

            $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

                console.log($(this).data('target'));
                switch ($(this).data('target')) {
                    case '#deletedialog':
                        currentdeletingid = $(this).data('id');
                        break;
                }
            })

        })


        $('#delete-form').submit(function (event) {
            //  alert('hi')
            // event.preventDefault()

            $('#deletedialog').modal('hide');

            $("#delete-form").append('<input type="hidden" name="id" value="' + currentdeletingid + '" />');
            //console.log("#delete-form");
            //form.submit();

        });
    </script>
@endpush

@push('after-styles')
    <style>
        /*.select2 {*/
        /*    width: 100% !important;*/
        /*}*/
    </style>
@endpush