@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'İcra takibi' => '/accounting/execution/list',
            'Ödemeler' => '/accounting/execution/detail/' . request()->segment(4),
        ],
    ]) !!}
@endsection
@section('content')
@section('content')
    <div class="container-app">
        <div class="flex justify-center gap-2 my-4">
            <button id="future" class="border-gray-300 text-gray-300 font-semibold px-2 capitalize"
                onclick="changeFragment('section_1')">ödenecekler</button>
            <button id="past" class="border-gray-300 text-gray-300 font-semibold px-2 capitalize"
                onclick="changeFragment('section_2')">ödenmişler</button>
        </div>
        <ol class="overflow-y-auto h-[calc(100vh-250px)] mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
            {{-- odenecekler --}}
            <div id="future-area">
                @foreach ($willPayAccountings as $item)
                    @php
                        $willPayAccountingTotal = 0;
                        foreach ($item as $key => $data) {
                            $willPayAccountingTotal += $data->icra_debt;
                        }
                    @endphp
                    <li class="relative flex space-x-6 py-6 bg-theme_secondary_black rounded-3xl p-8 mt-4">
                        <div class="flex-auto">
                            <h3 class="font-semibold text-base text-gray-300">
                                Toplam Ödenecek Tutar : {{ $willPayAccountingTotal }} ₺
                            </h3>
                            {{-- <dl class="mt-4 flex 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-city"></i>
                                    </dt>
                                    <p class="text-gray-300">
                                        {{ $item[0]->location }}
                                    </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-phone"></i>
                                    </dt>
                                    <p class="text-gray-300">
                                        {{ $item[0]->icra_debt }}
                                    </p>
                                </div>
                            </dl> --}}
                        </div>
                        <div class="flex gap-6 items-center text-gray-300"> 
                            <form action="{{ route('accounting.executionRecepitUpload') }}" method="POST" onsubmit="showLoading()"
                                enctype="multipart/form-data" class="flex gap-6">
                                @csrf
                                <input type="date" required name="date" hidden value="{{ $item[0]->working_date }}">
                                <input type="text" required name="execution_id" hidden
                                    value="{{ $item[0]->execution_id }}">
                                <input type="file" required name="recepit"
                                    class="file:hidden border border-teheme_third_black px-4 py-2 rounded-xl focus:outline-none">
                                <button class="button-3">
                                    Fatura Yükle
                                </button>
                            </form>
                        </div>
                    </li>
                @endforeach
            </div>
            {{-- odenmisler --}}
            <div id="past-area" class="hidden">
                @foreach ($payedAccountings as $item)
                    @php
                        $payedAccountingTotal = 0;
                        foreach ($item as $key => $data) {
                            $payedAccountingTotal += $data->icra_debt;
                        }
                    @endphp
                    <li class="relative flex space-x-6 py-6 bg-theme_secondary_black rounded-3xl p-8 mt-4">
                        <div class="flex-auto">
                            <h3 class="font-semibold text-base text-gray-300">
                                Toplam Ödenmiş Miktar: {{ $payedAccountingTotal }} ₺
                            </h3>
                            {{-- <dl class="mt-4 flex 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-city"></i>
                                </dt>
                                <p class="text-gray-300">
                                    {{ $item[0]->location }}
                                </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-phone"></i>
                                </dt>
                                <p class="text-gray-300">
                                    {{ $item[0]->icra_debt }}
                                </p>
                            </div>
                        </dl> --}}
                        </div>
                        <div class="flex gap-6 items-center text-gray-300">
                            <button class="button-3">
                                Fatura Görüntüle
                            </button>
                        </div>
                    </li>
                @endforeach
            </div>
        </ol>
    </div>
    @include('components.pdfViewer')
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $('.pdfFile').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('.close-pdf-popup').click(function() {
            $('#pdf-popup').fadeOut('slow');
        })

        function changeFragment(fragment) {
            window.location.hash = fragment;
        }

        $('#future').click(function() { // edit button
            $(this).addClass('border-b');
            $('#past').removeClass('border-b');
            $('#past-area').slideUp();
            $('#future-area').slideDown();
        });

        $('#past').click(function() { // update branch
            $(this).addClass('border-b');
            $('#future').removeClass('border-b');
            $('#future-area').slideUp();
            $('#past-area').slideDown();
        });

        $(document).ready(function() {
            var currentFragment = window.location.hash;
            if (currentFragment === '#section_2') {
                $('#past').addClass('border-b');
            } else if (currentFragment === '#section_1') {
                $('#future').addClass('border-b');
            } else {
                $('#future').addClass('border-b');
                $('#past-area').hide();
            }
        });
    </script>
@endsection