@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-2 mb-2 d-flex justify-content-between align-items-center w-100 ">
        <div>{{ __('navigation.my_homeparty') }} / {{ __('navigation.overview') }}</div>
        <a href="{{route('user_homeparty_detail', ['new'])}}" class="btn btn-secondary rounded-pill d-block float-right"><span class="ion ion-md-add"></span>&nbsp; Neue Homeparty anlegen</a>
    </h4>

    <div class="row">
        <div class="col-12">

            @foreach($homepartys as $homeparty)
            <div class="card mb-4">
                <div class="card-body d-flex justify-content-between align-items-start pb-2">
                    <div>
                        <a href="{{route('user_homeparty_detail', [$homeparty->id])}}" class="text-body text-big font-weight-semibold">{{$homeparty->name}}</a>
                        @if($homeparty->completed)
                             <span class="badge badge-secondary align-text-bottom ml-1">abgeschlossen</span>
                        @endif
                    </div>
                    @if(!$homeparty->completed)

                    <div class="btn-group project-actions">
                        <button type="button" class="btn btn-sm btn-default icon-btn borderless rounded-pill md-btn-flat dropdown-toggle hide-arrow" data-toggle="dropdown">
                            <i class="ion ion-ios-more"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="{{ route('user_homeparty_delete', ['hp', $homeparty->id]) }}"
                               class=" dropdown-item" onclick="return confirm('Homeparty wirklich löschen?');">
                                <span class="ion ion-md-trash text-danger"></span> löschen
                            </a>
                        </div>
                    </div>
                     @endif
                 </div>
                 <div class="progress rounded-0" style="height: 2px;">
                     <div class="progress-bar" style="width: 100%;"></div>
                 </div>
                <div class="card-body pt-1 pb-3">
                    {{$homeparty->description}}
                </div>
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col">
                            <div class="text-muted small">Datum</div>
                            <div class="font-weight-bold">{{$homeparty->date}}</div>
                        </div>
                        <div class="col">
                            <div class="text-muted small">Ort</div>
                            <div class="font-weight-bold">{{$homeparty->place}}</div>
                        </div>
                        <div class="col">
                            <div class="text-muted small">Gäste</div>
                            <div class="font-weight-bold">{{$homeparty->homeparty_guests->count()}}</div>
                        </div>
                        <div class="col">
                            <div class="text-muted small">Umsatz</div>
                            <div class="font-weight-bold">@if(isset($homeparty->order['price'])){{Util::formatNumber($homeparty->order['price'])}}@endif</div>
                        </div>
                        <div class="col">
                            <div class="text-muted small">Points</div>
                            <div class="font-weight-bold">@if(isset($homeparty->order['points'])){{$homeparty->order['points']}}@endif</div>
                        </div>
                    </div>
                </div>
                @if(!$homeparty->completed)
                <hr class="m-0">
                <div class="card-body py-3">
                    <div class="form-group mb-0">
                        <div class="input-group">
                        <span class="input-group-prepend">
                          <button class="btn btn-sm btn-secondary" type="button" title="Kopiert!" data-clipboard-demo data-clipboard-target="#homeparty_link_{{$homeparty->id}}"><i class="ion ion-ios-copy"></i> Link kopieren</button>
                        </span>
                            <input type="text" class="form-control" name="homeparty_link_{{$homeparty->id}}" value="{{ $homeparty->getTokenLink() }}" id="homeparty_link_{{$homeparty->id}}" placeholder="">
                        </div>
                    </div>
                </div>
                @endif
                <hr class="m-0">
                <div class="card-body py-3">
                    <div class="d-flex flex-wrap">
                        @if(!$homeparty->completed)
                        <a href="{{route('user_homeparty_detail', [$homeparty->id])}}" class="btn btn-secondary mr-2 mb-2"><i class="ion ion-ios-cog"></i> Verwalten</a>
                        <a href="{{route('user_homeparty_guests', [$homeparty->id])}}" class="btn btn-secondary mr-2 mb-2"><i class="ion ion-md-person-add"></i> Gäste anlegen</a>
                            <a href="{{route('user_homeparty_order', [$homeparty->id])}}" class="btn btn-secondary mr-2 mb-2"><i class="ion ion-md-basket"></i> Bestellung</a>

                        @else
                            <a href="{{route('user_homeparty_guests', [$homeparty->id])}}" class="btn btn-secondary mr-2 mb-2"><i class="ion ion-md-person"></i> Gäste ansehen</a>
                            <a href="{{route('user_homeparty_order', [$homeparty->id])}}" class="btn btn-secondary mr-2 mb-2"><i class="ion ion-md-basket"></i> Bestellung ansehen</a>


                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    <script>
        $( document ).ready(function() {
            var clipboardDemos = new ClipboardJS('[data-clipboard-demo]');
            clipboardDemos.on('success', function (e) {
                e.clearSelection();
                $(e.trigger).tooltip('enable').tooltip('show');
            });
            clipboardDemos.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });

            $('button[data-clipboard-demo]').on('mouseout', function () {
                $(this).tooltip('disable');
            })
        });
    </script>
@endsection