@extends('layouts.app')

@section('content')    

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

<div class="templates d-flex justify-content-start flex-wrap mx-auto">
    @foreach ((array)$contractTemplates as $template)
    @php
     $url = route('contract.create', array($template['contractTemplateID']));
    
     $template_name        = $template['name'];
     
     $free        = $template['free'];
     $icon        = $template['iconURL'];
     $name        = $template['name'];
     $description = $template['tooltip'];

    @endphp
    <div class="ocean_template{{($free ? '' : ' lock')}}" data-url="{{ $url }}">
        <div class="icon">
            <img src="{{$icon}}" alt="{{$name}}"/>
        </div>
        <h3 class="name mt-2 mb-0">
            {{$name}}
        </h3>
        <p class="description">
            {{$description}}
        </p>
    </div>
    @endforeach
</div>

@if( Session::has('loginToken') )

<input type="hidden" id="searchShow" name="searchShow" value="false">
<input type="hidden" id="searchFilter" name="searchFilter" value="template">
@include('dashboard.components.search')

@endif

@endsection

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

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

@push('scripts')

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

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

$( document ).ready(function() {
    $('.ocean_template').on('click', function() {
      if( ! $(this).hasClass('lock') ) {
        window.location = $(this).data('url');
        return;
      }

      @if( !Session::has('loginToken') )
        login_modal_show();
      @else
        subscription_modal_show();
      @endif
    });
});
</script>
@endpush