@extends('admin.layout.app')
@section('content')
    <!-- Content -->
    <main class="grow pt-5" id="content" role="content">

        @include('admin.user.header')
        <div class="kt-container-fixed">
            <!-- begin: works -->
            <div class="flex flex-col items-stretch gap-5 lg:gap-7.5">
                <!-- begin: toolbar -->
                <div class="flex flex-wrap items-center gap-5 justify-between">
                    <h3 class="text-lg text-foreground font-semibold">
                        {{$user->training->count()}} Training
                    </h3>

                </div>
                <!-- Container -->
                <div class="kt-container-fixed">
                    @if($user->training->isEmpty())
                        <label>No Training Found!</label>
                    @else
                        <div class="grid grid-cols-1 lg:grid-cols-4 gap-5 lg:gap-7.5">
                            @foreach($user->training->take(5) as $training)

                                <div class="col-span-1 lg:col-span-2">
                                    <div class="flex flex-col gap-5 lg:gap-7.5">

                                        <div class="kt-card">
                                            <div class="kt-card-header">
                                                <h3 class="kt-card-title">
                                                    {{$training->company_name ?? ''}}
                                                </h3>
                                            </div>
                                            <div class="kt-card-content">
                                                <h3 class="text-base font-semibold text-mono leading-none mb-5">
                                                    {{$training->company_type ?? ''}}
                                                </h3>
                                                <div class="flex flex-wrap items-center gap-5 mb-10">
                                                    <div class="rounded-xl w-full md:w-80 min-h-52">
                                                        <img
                                                            src="{{$training->getFirstMediaURl('training_list_attachments') ?? ''}}">
                                                    </div>
                                                    <div class="flex flex-col gap-2.5">
                                                        <div class="flex items-center gap-2.5">
              <span class="">
               <i class="ki-filled ki-dribbble text-lg text-muted-foreground">
               </i>
              </span>
                                                            <a class="link text-sm font-medium" href="#">
                                                                {{$training->company_website ?? ''}}
                                                            </a>
                                                        </div>

                                                        <div class="flex items-center gap-2.5">
              <span class="">
               <i class="ki-filled ki-bookmark text-lg text-muted-foreground">
               </i>
              </span>
                                                            <a class="link text-sm font-medium" href="#">
                                                                {{$training->advertiser_email ?? ''}}
                                                            </a>
                                                        </div>
                                                        <div class="flex items-center gap-2.5">
              <span class="">
               <i class="ki-filled ki-phone text-lg text-muted-foreground">
               </i>
              </span>
                                                            <span class="text-sm text-mono">
                  {{$training->advertiser_phone ?? ''}}
              </span>
                                                        </div>
                                                        <div class="flex items-center gap-2.5">
              <span class="">
               <i class="ki-filled ki-map text-lg text-muted-foreground">
               </i>
              </span>
                                                            <span class="text-sm text-mono">
         {{$training->company_address ?? ''}}
              </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="grid gap-2.5 mb-7">
                                                    <div class="text-base font-semibold text-mono">
                                                        Training Details
                                                    </div>
                                                    <p class="text-sm text-foreground leading-5.5">
                                                        {{$training->training_details ?? ''}}
                                                    </p>
                                                </div>
                                                <div class="flex flex-col gap-4 mb-2.5">
                                                    <div class="text-base font-semibold text-mono">
                                                        Languages
                                                    </div>

                                                    <div class="flex flex-wrap gap-2.5">
                                                        @php
                                                            $languages = explode(',', $training->languages);

                                                        @endphp
                                                        @foreach($languages as $tag)
                                                            <span class="kt-badge kt-badge-secondary kt-badge-outline">
       {{ trim($tag ?? '') }}
             </span>

                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if($user->training->count() > 5)
                            <div class="flex grow justify-center pt-5 lg:pt-7.5">
                                <a class="kt-link kt-link-underlined kt-link-dashed"
                                   href="{{route('user.more.training',$user->id)}}">
                                    Show more Training
                                </a>
                            </div>
                        @endif
                    @endif
                </div>
                <!-- End of Container -->
            </div>
        </div>
    </main>
    <!-- End of Content -->

@endsection