@extends('layouts.app')

@section('content')
@if($errors->any())
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>{!! $errors->first() !!}</strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

@if(session()->has('message'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>{!! session()->get('message') !!}</strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

@if(session()->has('warning'))
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>{!! session()->get('warning') !!}</strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

<div class="justify-content-center mb-4">
    <h1 style="text-align: center !important;">{{ __('contract.createNewContract.template') }}</h1>
    <p class="text-center font-weight-bold px-lg-5" style="color: #5C5C5C">{{ __('contract.createNewContract.templateDescription') }}</p>
</div>

<div class="templates d-flex justify-content-sm-around justify-content-md-center flex-wrap">
    @foreach ((array)$contractTemplates as $template)
    @php
     $url = route('contract.create', array( app()->getLocale(), $template['contractTemplateID']));
     $template_name = $template['name'];
     $headers = @get_headers($template['iconURL']);
     $iconURL = ($headers && strpos($headers[0], '200') !== false) ? $template['iconURL'] : "/images/default_icon.png";
    @endphp
    <div class="gtm-template m-2 m-sm-3" style="position: relative;" data-template="{{ $template_name }}" data-template_url="{{ $url }}">
        <a onclick="dataLayer.push({'category': 'Flow', 'action': 'New contract', 'label': '{{ $template['name'] }}'});" class="d-inline-block template gtm-template" href="{{ $url }}" data-template="{{ $template_name }}" data-template_url="{{ $url }}">
            <div class="template-img">
                <img class="gtm-template mt-0" src="{{ $iconURL }}" alt="devices" data-template="{{ $template_name }}" data-template_url="{{ $url }}">
            </div>
            <div class="title gtm-template" data-template="{{ $template_name }}" data-template_url="{{ $url }}">{{ $template['name'] }}</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>
    @endforeach
</div>

@if ( ! Session::has('ocean') )
<hr class="my-4" />

<div class="mb-4 mt-3">
    <h1 style="text-align: center !important;">{{ __('contract.createNewCertification.template') }}</h1>
    <p class="text-center font-weight-bold px-lg-5" style="color: #5C5C5C">{{ __('contract.createNewCertification.templateDescription') }}</p>
</div>

{{--
<div class="component container" style="">
    <div class="row justify-content-center">
        <div class="col-lg-9 p-0">
            <div class="alert alert-primary alert-dismissible fade show" role="alert">
                <strong>{{ __('contract.createNewCertification.message') }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
        </div>
    </div>
</div>
--}}

<div class="templates templates-hash d-flex justify-content-sm-around justify-content-md-center flex-wrap">
    @foreach ((array)$hashTemplates as $template)
    @php
        $headers = @get_headers($template['iconURL']);
        $iconURL = ($headers && strpos($headers[0], '200') !== false) ? $template['iconURL'] : "/images/default_icon.png";
    @endphp
    <div class="gtm-hash m-2 m-sm-3" style="position: relative;">
        <a onclick="dataLayer.push({'category': 'Flow', 'action': 'New certificate'});" class="d-inline-block template gtm-hash" href="{{ route('contract.create', array( app()->getLocale(), $template['contractTemplateID'])) }}">
            <div class="template-img"><img class="gtm-hash mt-0" src="{{ $iconURL }}" alt="devices"></div>
            <div class="title gtm-hash">
                <div class="mb-2 gtm-hash">{{ $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>
    @endforeach
    @php
        $temp_icon = __('contract.createNewCertification.validateIcon');
        $headers = @get_headers($temp_icon);
        $iconURL = ($headers && strpos($headers[0], '200') !== false) ? $temp_icon : "/images/default_icon.png";
    @endphp
    <div class="gtm-hash m-2 m-sm-3" style="position: relative;">
        <a onclick="dataLayer.push({'category': 'Flow', 'action': 'Validate certificate'});" class="d-inline-block template gtm-hash" href="{{ route('contract.hashValidation', app()->getLocale()) }}">
            <div class="template-img"><img class="gtm-hash mt-0" src="{{ $iconURL }}" alt="devices"></div>
            <div class="title gtm-hash">
                <div class="mb-2 gtm-hash">{{ __('contract.createNewCertification.validate') }}</div>
            </div>
        </a>
        <div class="contract-template-tooltip" data-toggle="popover" data-placement="bottom" data-trigger="click hover" data-content="{{ __('contract.createNewCertification.tooltipValidate') }}" data-original-title="" title="">
            <i class="far fa-question-circle pointer" style="font-size:16pt; color: #3d64b8;"></i>
        </div>
    </div>
</div>
@endif
{{--
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            <h3 class="mt-5">{{ __('contract.createNewContract.label') }}</h3>
            <p>{{ __('contract.createNewContract.text') }}</p>
            <form method="POST" action="{{ route('contract.sendTemplate', app()->getLocale()) }}">
                @csrf

                <div id="description-div" class="form-group">
                    <label for="description" class="bmd-label-floating">{{ __('contract.createNewContract.inputYourTemplateRequest') }}</label>
                    <input id="description" type="description" class="col-md-12 form-control @error('description') is-invalid @enderror" name="description" value="{{ old('description') }}" autocomplete="false">
                    @error('description')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                {{--
                <div class="form-group">
                    <label  for="templateOption" class="bmd-label-floating"></label>
                    <select class="form-control" id="templateOption" name="templateOption">
                        <option value="...">{{ __('contract.createNewContract.inputOrSelectFromThisList') }}</option>
                        @foreach ($templatesOptions as $templatesOption)
                            <option value="{{ $templatesOption['value'] }}">{{ $templatesOption['label'] }}</option>
                        @endforeach
                    </select>
                </div>
                --}}
{{--
                <div class="form-group text-center mt-5">
                    <button type="submit" class="btn btn-primary">{{ __('contract.createNewContract.buttonBeNiceAndSend') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
--}}

@endsection

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

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

@push('scripts')
{{-- task: Tutoriál és Onboarding-ot kivenni https://app.asana.com/0/1166852924659230/1199573357944757 --}}
{{--@if(isset($takeTourModal))
    @if (Session::has('loginToken') && $takeTourModal == false)
    <script>
        $( document ).ready(function() {
            $('#startTour').modal('toggle');
        });
    </script>
    @endif
@endif--}}

@if(!empty(Session::get('need_login')) && Session::get('need_login') == 1)
<script>
    // ________ Onboarding
    $( document ).ready(function() {
        setCookie('firstVisit',true, 9999);
    });
</script>
@else
<script>
    // ________ Onboarding
    $( document ).ready(function() {
        // ___ ha a firstVisit süti nem létezik akkor betölti és feldobja az onboarding modalt, majd létre hozza a firstVisit sütit
        if (!getCookie('firstVisit') && window.location.hash != "#login"){
            // ___ onboarding js betöltése és a modal feldobása
            if (window.location.hash !== '#mobilapp' && {{ (Session::has('tutorial') ? 'false' : 'true') }} ) {
             //   $('#onboardingModal').modal('toggle');    // task: Tutoriál és Onboarding-ot kivenni https://app.asana.com/0/1166852924659230/1199573357944757
            }
            // ___ firstVisit süti létrehozása, hogy többször ne induljon az onboarding
            setCookie('firstVisit',true, 9999);
        }
    });
</script>
@endif

<script>


$('#templateOption').on('change', function() {
    $('#description').val('');
});

$('#description').on('keyup', function() {
    $('#templateOption').prop('selectedIndex', 0);
});

$( document ).ready(function() {
    $('.notification-close').on('click', function() {
        var key = $(this).data('key');
        $.ajax({
            type: "POST",
            url: '{{ route('notification.close', app()->getLocale()) }}',
            data: { id: key },
        });
    });
});
</script>

{{--@if(session()->has('AcceptedTerms'))
<script>
$( document ).ready(function() {
    $('#acceptTerm').modal('toggle');
});
</script>
@endif--}}
@endpush