@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Çalışan Maaş' => '/accounting/salary-index',
            'Talimatlarım' => '/accounting/worker-salary/instructions',
        ],
    ]) !!}
@endsection
@section('content')

    {{-- @include('components.sidebar')
    @include('components.profile') --}}
    <div class="container-app">
        <div class="flex items-center justify-end">
            <div class="flex justify-end px-2">
                <a href="{{ route('accounting.workerInstructionsAdd') }}"
                    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 Oluştur
                </a>
            </div>
        </div>
        <ol
            class="officeList overflow-y-auto h-[calc(100vh-170px)] mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
            @foreach ($instructions as $instruction)
                <li class="officeRow relative flex space-x-6 py-8 bg-theme_secondary_black rounded-3xl p-8 mt-4">
                    <a href="{{ route('accounting.workerInstructionsDetails', ['instruction' => $instruction]) }}"
                        class="w-full">
                        <dl class="flex flex-auto flex-col text-gray-400 xl:flex-row">
                            <div class="flex items-center space-x-3">
                                <dt class="flex items-center h-5 w-5 fill-gray-400">
                                    <i class="fa-solid fa-calendar"></i>
                                </dt>
                                <p class="text-gray-300 text-base font-semibold">
                                    {{ $instruction ? \Carbon\Carbon::parse($instruction?->date)->isoFormat('D MMMM Y') : '' }}
                                </p>
                            </div>
                            <div
                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                <dt class="flex items-center h-5 w-5 fill-gray-400">
                                    <i class="fa-solid fa-user"></i>
                                </dt>
                                <p
                                    class="text-gray-300 font-semibold {{ $instruction->bank_file_path ? 'text-green-600' : 'text-red-600' }}">
                                    {{ $instruction->excel_file_path ? 'Dosya Yüklenmiş' : 'Dosya Yüklenmemiş' }}
                                </p>
                            </div>
                            <div
                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                <dt class="flex items-center h-5 w-5 fill-gray-400">
                                    <i class="fa-solid fa-bank"></i>
                                </dt>
                                <p
                                    class="text-gray-300 font-semibold {{ $instruction->bank_file_path ? 'text-green-600' : 'text-red-600' }}">
                                    {{ $instruction->bank_file_path ? 'Dosya Yüklenmiş' : 'Dosya Yüklenmemiş' }}
                                </p>
                            </div>
                            <div
                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                <dt class="flex items-center h-5 w-5 fill-gray-400">
                                    <i class="fa-solid fa-comment"></i>
                                </dt>
                                <p class="text-gray-300 font-semibold">
                                    {{ $instruction->description }}
                                </p>
                            </div>
                            <div
                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                <dt class="flex items-center h-5 w-5 text-green-400">
                                    <i class="fa-solid fa-circle-check"></i>
                                </dt>
                                <p class="text-gray-300 font-semibold">
                                    {{ $instruction->succesfuly ?? '0' }}
                                </p>
                            </div>
                            <div
                                class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                <dt class="flex items-center h-5 w-5 text-red-400">
                                    <i class="fa-solid fa-circle-xmark"></i>
                                </dt>
                                <p class="text-gray-300 font-semibold">
                                    {{ $instruction->unsuccesfuly ?? '0' }}
                                </p>
                            </div>
                        </dl>

                    </a>
                    <a class="bg-blue-700 py-1 px-2 rounded text-white" href="{{ route('accounting.workerInstructionsEdit', ['instruction' => $instruction]) }}">Düzenle</a>
                </li>
            @endforeach
        </ol>
    </div>
@endsection