@extends('backend.layouts.app')

@section('title', app_name() . ' | ' .'View clipart')


@section('content')
{{--    {{dd($clipart)}}--}}
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    Clipart management
                    <small class="text-muted">View clipart</small>
                </h4>
            </div><!--col-->
        </div><!--row-->

        <div class="row mt-4 mb-4">
            <div class="col">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-expanded="true"><i class="fas fa-image"></i> @lang('labels.backend.access.users.tabs.titles.overview')</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="overview" role="tabpanel" aria-expanded="true">
                        <div class="row no-gutters" style="border-bottom: 1px solid darkgrey; padding-bottom: 10px">
                            <div class="col">
                                <h4 class="mb-4" style="font-weight: bold">{{$clipart->name}}</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-4" style="font-weight: bold" >Colourways</div>
                            </div>
                        </div>
                        <div class="row no-gutters" style="border-bottom: 1px solid darkgrey; padding-bottom: 10px">

                            @foreach($clipart->colourways as $colourway)
                                <div class="col" >
                                    <div class="row" >
                                        <div class="col" >
                                            <div style="width: 20px; height: 20px; display: inline-block; background-color: {{$colourway->colour}};"></div> {{$colourway->colour_name}}
                                        </div>
                                    </div>
                                    <div class="row" style="padding: 0; margin: 0">
                                        <div class="col" style="padding: 0; margin: 0">
                                            <a href="#" data-toggle="modal" style="cursor:  zoom-in;" data-target="#image_zoom_popup" data-name="{{$clipart->name.'|'.$colourway->colour_name}}" data-src="{{$colourway->path()}}">
                                                <img src="{{$colourway->path()}}"
                                                 alt="{{$clipart->name.' '.$colourway->colour}}"
                                                 style="width: 50px; height: auto">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="row no-gutters" style="border-bottom: 1px solid darkgrey; padding-bottom: 10px">
                            <div class="col">
                                <div class="mb-4" style="font-weight: bold">Description</div>
                                {{$clipart->description}}
                            </div>
                        </div>
                        <div class="row no-gutters" style="border-bottom: 1px solid darkgrey; padding-bottom: 10px">
                            <div class="col">
                                <div class="mb-4" style="font-weight: bold">Citations</div>
                                {{$clipart->citations}}
                            </div>
                        </div>

                        <div class="row no-gutters" style="border-bottom: 1px solid darkgrey; padding-bottom: 10px">
                            <div class="col" >
                                <div class="mb-4" style="font-weight: bold" >Tags</div>
                                <ul>
                                    @foreach($clipart->tags as $tag)
                                        <li>{{$tag->text}}</li>
                                    @endforeach
                                </ul>
                            </div>

                        </div>
                        <div class="row no-gutters" style="border-bottom: 1px solid darkgrey; padding-bottom: 10px">
                            <div class="col" >
                                <div class="mb-4" style="font-weight: bold; color: {!! $clipart->paid=='1'?'Darkred':'Darkgreen' !!}" >  {!! $clipart->paid=='1'?'Paid':'Free' !!}</div>

                            </div>

                        </div>
                        <div class="row no-gutters" style="border-bottom: 1px solid darkgrey; padding-bottom: 10px">
                            <div class="col" >
                                <div class="mb-4" style="font-weight: bold" >Created by</div>
                                {{$clipart->owner->full_name}}
                            </div>

                        </div>

                    </div><!--tab-->
                </div><!--tab-content-->
            </div><!--col-->
        </div><!--row-->
    </div><!--card-body-->

    <div class="card-footer">
        <div class="row">
            <div class="col">
                <small class="float-right text-muted">
                    <strong>@lang('labels.backend.access.users.tabs.content.overview.created_at'):</strong> {{ timezone()->convertToLocal($clipart->created_at) }} ({{ $clipart->created_at->diffForHumans() }}),
                    <strong>@lang('labels.backend.access.users.tabs.content.overview.last_updated'):</strong> {{ timezone()->convertToLocal($clipart->updated_at) }} ({{ $clipart->updated_at->diffForHumans() }})
                    @if($clipart->trashed())
                        <strong>@lang('labels.backend.access.users.tabs.content.overview.deleted_at'):</strong> {{ timezone()->convertToLocal($clipart->deleted_at) }} ({{ $clipart->deleted_at->diffForHumans() }})
                    @endif
                </small>
            </div><!--col-->
        </div><!--row-->
    </div><!--card-footer-->
</div><!--card-->
@endsection
@section('dialogs')
    <div id="image_zoom_popup" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="itemtitle"></h4>

                </div>
                <div class="modal-body">
                    <img id="zoomed" src=""

                         style="width: 100%; height: auto">
                </div>
            </div>
        </div>
    </div>


@endsection
@push('after-scripts')
    <script>
        $(document).ready(function () {

            $('#image_zoom_popup').on('show.bs.modal', function (event) {

                var button = $(event.relatedTarget) // Button that triggered the modal
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this)
                modal.find('.modal-title').text(button.data('name'))
                $('#zoomed').attr('src', button.data('src'));
            })
        })
    </script>
@endpush