@extends('layouts.app')

@section('content')

<div class="row d-flex justify-content-center">
    <div class="col-sm-12 col-md-6 col-lg-6 d-flex align-items-center float-left justify-content-center justify-content-sm-center justify-content-md-start justify-content-lg-start"><h1 class="float-left">{{ __('dashboard.contracts.title') }}</h1></div>
    <div class="col-sm-12 col-md-6 col-lg-6 d-flex align-items-center float-right justify-content-center justify-content-md-end justify-content-lg-end"><a class="btn btn-primary float-right" href="{{ route('contract', app()->getLocale()) }}">{{ __('dashboard.contracts.buttonCreateNewContract') }}</a></div>
</div>

<hr class="my-4" />

{{--<h3 class="mt-5">{{ __('dashboard.contracts.label') }}</h3>--}}
{{--@dump($demoContracts)--}}
<div style="min-height: 300px;">
    @forelse ( $contracts as $contract )
    {{-- Demo szerződés @if($contract['type'] != 'onboarding') --}}
    <div class="container contract_url pointer " data-site-url="{{ $contract['siteUrl'] }}">
        <div class="row d-flex justify-content-between border border-2 btn-contract-url  rounded-10 mb-3" style="">
            <div class="col-*-* d-flex align-items-center py-3 border-right border-2">
                <img src="{{ $contract['iconURL'] }}" class="img-fluid mx-3 draft-img" width="32px" height="32px">
            </div>
            <div class="col d-flex align-items-center" style="min-width: 50px;">
                <div class="container row m-0 p-0">
                    <div class="col col-md-8">
                        <div class="container">
                            <div class="row col-*-* font-weight-bold font-family-catamaran font-size-18 d-block text-truncate contractName" style="">
                                {{ $contract['name'] }}
                            </div>
                            <div class="row col-*-*">
                                <div class='content-dashboard-url font-family-catamaran font-size-14 font-weight-bold'>{{ $contract['statusLabel'] ? $contract['statusLabel'] : $contract['status'] }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-*-* col-md-4 d-flex justify-content-end">
                        <div class="container m-0 p-0">
                            <div class="row col d-flex justify-content-lg-end justify-content-md-end font-size-12 m-0 p-0">
                                {{ __('dashboard.contracts.since') }}
                                @if( $contract['urgency'] )
                                    <div class="contracts-urgency-icon rounded-circle d-flex justify-content-center align-items-center">
                                    @switch( $contract['urgency'] )
                                        @case('action-required')
                                            <i class="fas fa-exclamation"></i>
                                        @break
                                        @case('pending')
                                            <i class="fas fa-redo-alt p-1"></i>
                                        @break
                                        @case('ok')
                                            <i class="fas fa-check p-1"></i>
                                        @break
                                    @endswitch
                                    </div>
                                @endif
                            </div>
                            <div class="row col d-flex justify-content-lg-end justify-content-md-end m-0 p-0 content-dashboard-url font-family-catamaran font-size-12 font-weight-bold">
                                {{ date('Y-m-d', strtotime($contract['date'])) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Demo szerződés 
    @else
    <div class="container contract_url pointer <!--?php if( $contract['showInitially'] === false ) echo 'hide-initially d-none'; ?-->" data-site-url="{{ $contract['siteUrl'] }}">
        <div class="row d-flex justify-content-between border border-2 btn-contract-url <!--?php if($contract['urgency']) echo 'active-urgency'; ?--> rounded-10 mb-3" style="border-style: dashed !important">
            <div class="col-*-* d-flex align-items-center py-3 border-right border-2">
                <img src="{{ $contract['iconURL'] }}" class="img-fluid mx-3 <!--?php if( ! $contract['urgency']) echo 'draft-img'; ?-->" width="32px" height="32px">
            </div>
            <div class="col d-flex align-items-center" style="min-width: 50px;">
                <div class="container row m-0 p-0">
                    <div class="col col-md-8">
                        <div class="container">
                            <div class="row col-*-* font-weight-bold font-family-catamaran font-size-18 d-block text-truncate" style="max-width: 100%;">
                                {{ $contract['name'] }}
                            </div>
                            <div class="row col-*-*">
                                <div class='content-dashboard-url font-family-catamaran font-size-14 font-weight-bold'>{{ $contract['statusLabel'] ? $contract['statusLabel'] : $contract['status'] }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-*-* col-md-4 d-flex justify-content-end">
                        <div class="container m-0 p-0">
                            <div class="row col d-flex justify-content-lg-end justify-content-md-end font-size-12 m-0 p-0">
                                {{ __('dashboard.contracts.since') }}
                                @if( $contract['urgency'] )
                                    <div class="contracts-urgency-icon rounded-circle d-flex justify-content-center align-items-center">
                                    @switch( $contract['urgency'] )
                                        @case('action-required')
                                            <i class="fas fa-exclamation"></i>
                                        @break
                                        @case('pending')
                                            <i class="fas fa-redo-alt p-1"></i>
                                        @break
                                        @case('ok')
                                            <i class="fas fa-check p-1"></i>
                                        @break
                                    @endswitch
                                    </div>
                                @endif
                            </div>
                            <div class="row col d-flex justify-content-lg-end justify-content-md-end m-0 p-0 content-dashboard-url font-family-catamaran font-size-12 font-weight-bold">
                                {{ date('Y-m-d', strtotime($contract['date'])) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif--}}
    @empty
    <div class="mb-3">{{ __('dashboard.contracts.noContracts') }}</div>
    @endforelse
    @foreach ((array)$demoContracts as $template)
    {{--<div style="position: relative;">
        <a class="d-inline-block template mb-4" href="{{ route('contract.create', array( app()->getLocale(), $template['contractTemplateID'])) }}">
            <img style="max-width:72px;" src="{{ $template['iconURL'] }}" alt="devices">
            <div class="title">
                <div class="mb-2">{{ $template['name'] }}</div>
            </div>
        </a>          
        @if( isset( $template['tooltip']) && $template['tooltip'] != '' )
        <div class="contract-template-tooltip" data-toggle="popover" data-placement="bottom" data-trigger="click hover" data-content="{{ $template['tooltip'] }}" data-original-title="" title="">
            <i class="far fa-question-circle pointer" style="font-size:16pt; color: #3d64b8;"></i>
        </div>
        @endif
    </div>--}}

    <div class="container contract_url pointer" data-site-url="{{ route('contract.create', array( app()->getLocale(), $template['contractTemplateID'])) }}" onclick="takeTour();">
        <div class="row d-flex justify-content-between border border-2 btn-contract-url rounded-10 mb-3 active-urgency" style="border-style: dashed !important">
            <div class="col-*-* d-flex align-items-center py-3 border-right border-2">
                <img src="https://i.imgur.com/i7kgkbM.png" class="img-fluid mx-3" width="32px" height="32px">
            </div>
            <div class="col d-flex align-items-center" style="min-width: 50px;">
                {{-- Bezárás ikon a jobb felső sarokba fixen --}}
                {{--<i class="fas fa-times-circle" style="position: absolute; z-index: 1; top: -10px; right: -10px; font-size: 18pt"></i>--}}
                <div class="container row m-0 p-0">
                    <div class="col col-md-8">
                        <div class="container">
                            <div class="row col-*-* font-weight-bold font-family-catamaran font-size-18 d-block text-truncate" style="max-width: 100%;">
                                {{ __('dashboard.contracts.demoContractTitle') }}
                            </div>
                            <div class="row col-*-*">
                                <div class='content-dashboard-url font-family-catamaran font-size-14 font-weight-bold'>{{ $template['tooltip'] }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-*-* col-md-4 d-flex justify-content-end">
                        <div class="container m-0 p-0 d-none d-sm-none d-md-block d-lg-block">
                            {{--<div class="row col d-flex justify-content-lg-end justify-content-md-end font-size-12 m-0 p-0">                            
                                @if( $contract['urgency'] )
                                    <div class="contracts-urgency-icon rounded-circle d-flex justify-content-center align-items-center">
                                    @switch( $contract['urgency'] )
                                        @case('action-required')
                                            <i class="fas fa-exclamation"></i>
                                        @break
                                        @case('pending')
                                            <i class="fas fa-redo-alt p-1"></i>
                                        @break
                                        @case('ok')
                                            <i class="fas fa-check p-1"></i>
                                        @break
                                        @case('demo')
                                            <i class="fas fa-times-circle"></i>
                                    @endswitch
                                    </div>
                                @endif
                            </div>--}}
                            <div class="row col d-flex justify-content-lg-end justify-content-md-end m-0 p-0 content-dashboard-url font-family-catamaran font-size-12 font-weight-bold h-100">
                                <i class="fas fa-arrow-alt-circle-right my-auto" style="font-size: 30px; color: #1fa6cf;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach

    @if(!empty($contracts))
    <div id="showMore" class="show-link pointer">{{ __('dashboard.contracts.showAllContracts') }}<i class="fas fa-caret-down"></i></div>
    <div id="hideSome" class="show-link pointer d-none">{{ __('dashboard.contracts.hideAllContracts') }}<i class="fas fa-caret-up"></i></div>
    @endif

</div>

<div class="col text-lg-right text-center">
    <div class="d-block mx-auto mx-md-0"><a class="btn btn-primary" href="{{ route('contract', app()->getLocale()) }}">{{ __('dashboard.contracts.buttonCreateNewContract') }}</a></div>
</div>
@endsection

@section('title')
{{ __('meta.title.contracts') }}
@endsection

@section('description')
{{ __('meta.description.contracts') }}
@endsection