@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Hizmetler' => '/root/services',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app h-[calc(100vh-130px)]">
        <div class="flex justify-end px-2">
            <a href="{{ route('root.createServiceIndex') }}"
                class="inline-flex items-center gap-3 bg-blue-700 px-4 py-2 rounded-md text-white font-semibold">
                <i class="fa-solid fa-square-plus"></i>
                Yeni Hizmet Oluştur
            </a>
        </div>
        <ol class="mt-4 gap-4 grid md:grid-cols-3 overflow-y-auto max-h-[calc(100vh-230px)]">
            @foreach ($services as $item)
                <li class="relative flex items-center bg-theme_secondary_black rounded-3xl mt-4 w-full h-24 p-4">
                    <a href="{{ route('root.serviceEdit', ['service' => $item]) }}"
                        class="w-full flex justify-center items-center">
                        <h3 class="pr-10 font-semibold xl:pr-0 text-gray-300">
                            {{ $item->title }}
                        </h3>
                    </a>
                    <button value="{{ getCdnFile($item->personel_contract_path) }}"
                        class="showContract inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600">
                        <i class="fa-solid fa-file-contract"></i>
                    </button>
                </li>
            @endforeach
        </ol>
        @if (count($services) <= 0)
            <x-noData>
                <x-slot name="message">
                    Hiç Veri Bulunamadı
                </x-slot>
            </x-noData>
        @endif
        <div class="absolute -bottom-10 bg-white rounded-md px-2 right-[48px]">
            {{ count($services) > '0' ? count($services) : '0' }} <span class="pl-1 capitalize text-xs">adet veri
                listeleniyor</span>
        </div>
    </div>
    @include('components.pdfViewer')
@endsection
@section('javascript')
    <script>
        $('.showContract').click(function() {
            $('#filePath').empty();
            if ($(this).val().length > 0) {
                $('#filePath').append(
                    '<iframe src="' + $(this).val() +
                    '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
                );
            } else {
                $('#filePath').append(
                    `<div class="p-16 flex flex-col items-center justify-center gap-4">
                        <div class="max-w-xs rounded-lg">
                            <img class="object-cover rounded-lg" src="{{ asset('assets/noData.jpg') }}">
                            <p class="capitalize text-md font-semibold mt-4 text-white text-center">
                                Sözleşme Bulunamadı
                            </p>
                        </div>
                    </div>`
                );
            }
            $('#pdf-popup').fadeIn('slow');
        })
        $('.close-pdf-popup').click(function() {
            $('#pdf-popup').fadeOut('slow');
        })
    </script>
@endsection