@extends('layouts.app')

@section('styles')
    <style>
        /* Add CSS to hide the print button during printing */
        @media print {
            .no-print {
                display: none;
            }
        }
    </style>
@endsection

@section('content')

    <div class="">
        <main>
            <div class="px-4 pt-4 mx-auto max-w-screen-2xl pb-60 sm:px-6 lg:px-8">
                <div
                    class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-3">

                    {{-- BREADCRUMB --}}
                    <nav class="flex py-2" aria-label="Breadcrumb">
                        <ol role="list" class="flex items-center space-x-4 uppercase">
                            <li>
                                <div>
                                    <a href="{{ route('dashboard') }}" class="text-gray-400 hover:text-gray-500">
                                        <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor"
                                            aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                                clip-rule="evenodd" />
                                        </svg>
                                        <span class="sr-only">Home</span>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <svg class="flex-shrink-0 w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"
                                        aria-hidden="true">
                                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                    </svg>
                                    <a href="{{ route('companies.show', $company->slug) }}"
                                        class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                                        aria-current="page">{{ $company->name }}</a>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <svg class="flex-shrink-0 w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"
                                        aria-hidden="true">
                                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                    </svg>
                                    <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                                        aria-current="page">CARİ DÖKÜM</a>
                                </div>
                            </li>
                        </ol>
                    </nav>

                    <div id="printableArea" class="grid gap-4 lg:col-start-1 lg:col-end-3">
                        {{-- ANA BAŞLIK --}}
                        <div class="overflow-hidden bg-white rounded-lg ring-1 ring-stone-300">
                            <h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
                            <div class="p-6 bg-white">
                                <div class="sm:flex sm:items-center sm:justify-between">
                                    <div class="sm:flex sm:space-x-5">
                                        <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                                            <p class="text-xl font-bold text-gray-900 uppercase sm:text-2xl">
                                                {{ $company->name }}</p>
                                            @if ($billing_address != null)
                                                <li class="relative flex mt-3">
                                                    <div class="flex-auto uppercase">
                                                        <div class="flex justify-between">
                                                            <div class="py-0.5 text-xs leading-5 text-gray-500"><span
                                                                    class="font-medium text-gray-900">{{ $billing_address->title }}</span>
                                                            </div>
                                                        </div>
                                                        <p class="text-sm leading-6 text-gray-500">
                                                            {{ $billing_address->line_1 }} {{ $billing_address->line_2 }}
                                                        </p>
                                                        <p class="text-sm leading-6 text-gray-500">
                                                            {{ $billing_address->district }}{{ $billing_address->city != '' ? '/' . $billing_address->city : '' }}{{ $billing_address->country != '' ? '/' . $billing_address->country : '' }}{{ $billing_address->zip != '' ? ' - PK.' . $billing_address->zip : '' }}
                                                        </p>
                                                        <p class="text-sm leading-6 text-gray-500">
                                                            {{ $billing_address->tax_office != '' ? 'VD.' . $billing_address->tax_office : '' }}{{ $billing_address->vat_number != '' ? ' - VN.' . $billing_address->vat_number : '' }}
                                                        </p>
                                                        <p class="text-sm leading-6 text-gray-500">
                                                            {{ $billing_address->email != '' ? $billing_address->email : '' }}{{ $billing_address->phone != '' ? $billing_address->phone : '' }}
                                                        </p>
                                                    </div>
                                                </li>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="justify-center gap-3 mt-5 sm:mt-0">
                                        <dt class="text-base font-normal text-right text-gray-900">Bakiye</dt>
                                        <dd class="flex items-baseline justify-end mt-1 md:block lg:flex">
                                            <div class="flex items-baseline text-2xl font-bold gap-x-2 text-stone-600">
                                                <span class="text-sm font-medium text-gray-500">
                                                    {{ $company->getCompanyBalance() < 0 ? 'Borç' : 'Alacak' }} </span>
                                                {{ number_format($company->getCompanyBalance(), 2, ',', '.') }}<span>₺</span>
                                            </div>
                                        </dd>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if (count($company->invoices) > 0)
                            {{-- FATURA & FİŞLER --}}
                            <div class="p-4 bg-white rounded-lg ring-1 ring-stone-300">
                                <h2 class="flex items-center mb-4 text-lg leading-6 font-jbmono-bold text-stone-700">
                                    <span class="mr-1 material-symbols-rounded">
                                        receipt_long
                                    </span>
                                    Hareketler
                                    {{--
                            <span class="ml-2 text-xs font-normal text-stone-400">*en yeni en üstte</span>
                            --}}
                                </h2>
                                <div class="grid grid-cols-1">
                                    <ul role="list" class="divide-y divide-gray-100">

                                        <div
                                            class="grid items-center justify-start grid-cols-5 col-start-1 px-4 py-2 col-2">
                                            <div class="min-w-0 grow">
                                                <p class="text-sm text-stone-400">İŞLEM</p>
                                            </div>
                                            <div class="items-center col-start-3 text-right gap-x-2">
                                                <p class="text-sm text-stone-400">BORÇ</p>
                                            </div>
                                            <div class="items-center flex-none text-right gap-x-2">
                                                <p class="text-sm text-stone-400">ALACAK</p>
                                            </div>
                                            <div class="items-center flex-none text-right gap-x-2">
                                                <p class="text-sm text-stone-400">BAKİYE</p>
                                            </div>
                                        </div>

                                        @foreach ($invoicesWithBalance as $item)
                                            <a href="{{ isset($item->document_type) && $item->document_type == 'bank_transaction' ? '#' : route('invoices.show', $item->id) }}"
                                                class="grid items-center justify-start grid-cols-5 col-start-1 px-4 py-1 col-2">
                                                <div class="grow min-w-80">
                                                    <div class="flex items-center gap-x-3">
                                                        @if ($item->type == 'received')
                                                            <p class="text-sm font-semibold leading-6 text-emerald-600">
                                                                TAHSİLAT</p>
                                                        @elseif($item->type == 'paid')
                                                            <p class="text-sm font-semibold leading-6 text-rose-600">ÖDEME
                                                            </p>
                                                        @elseif($item->type == 'sales_invoice')
                                                            <p class="text-sm font-semibold leading-6 text-stone-800">SATIŞ
                                                                FATURASI
                                                                @if(isset($item->lines) && is_iterable($item->lines))
                                                                @foreach ($item->lines as $line)
                                                                    @if(isset($line->product))
                                                                    <span
                                                                        class="text-xs font-normal tracking-tighter text-gray-400 truncate whitespace-nowrap">{{ $line->product->name }}</span>
                                                                    @endif
                                                                @endforeach
                                                                @endif
                                                            </p>
                                                        @elseif($item->type == 'purchase_invoice')
                                                            <p class="text-sm font-semibold leading-6 text-stone-500">ALIŞ
                                                                FATURASI</p>
                                                        @elseif($item->type == 'sales_receipt')
                                                            <p class="text-sm font-semibold leading-6 text-stone-800">
                                                                SATIŞ FİŞİ <span
                                                                    class="text-xs font-normal text-stone-400">{{ $item->note }}</span>
                                                            </p>
                                                        @elseif($item->type == 'purchase_receipt')
                                                            <p class="text-sm font-semibold leading-6 text-stone-500">
                                                                ALIŞ FİŞİ <span
                                                                    class="text-xs font-normal text-stone-400">{{ $item->note }}</span>
                                                            </p>
                                                        @endif
                                                    </div>
                                                    <div class="flex text-xs leading-5 text-gray-500 gap-x-2">
                                                        <p class="whitespace-nowrap">
                                                            <date class="text-gray-500">
                                                                {{ date('d.m.Y', strtotime($item->date)) }}
                                                            </date>
                                                            @if (isset($item->document_type) && $item->document_type == 'bank_transaction')
                                                                <span class="text-gray-400">{{ $item->bank->name }}</span>
                                                            @endif
                                                        </p>
                                                    </div>

                                                </div>
                                                <div class="items-center col-start-3 text-right gap-x-2">
                                                    @if ($item->type == 'received' || $item->type == 'purchase_invoice' || $item->type == 'purchase_receipt')
                                                        <p class="font-semibold text-stone-600 sm:block">
                                                            {{ number_format($item->total_amount, 2, ',', '.') }}<span
                                                                class="pl-0.5 font-normal text-xs">TRL</span>
                                                        </p>
                                                    @endif
                                                </div>
                                                <div class="items-center flex-none text-right gap-x-2">
                                                    @if ($item->type == 'paid' || $item->type == 'sales_invoice' || $item->type == 'sales_receipt')
                                                        <p class="font-semibold text-stone-600 sm:block">
                                                            {{ number_format($item->total_amount, 2, ',', '.') }}<span
                                                                class="pl-0.5 font-normal text-xs">TRL</span>
                                                        </p>
                                                    @endif
                                                </div>
                                                <div class="items-center flex-none text-right gap-x-2">
                                                    <p class="text-sm text-stone-400">
                                                        {{ number_format($item->balance, 2, ',', '.') }}<span
                                                            class="pl-0.5 font-normal text-xs">TRL</span>
                                                    </p>
                                                </div>
                                            </a>
                                        @endforeach

                                    </ul>
                                </div>

                            </div>
                        @else
                            <x-alert-standard color="stone">
                                İşletmeye ait belge bulunmuyor.
                            </x-alert-standard>
                        @endif
                    </div>

                    {{-- SAĞ PANEL --}}
                    <div class="p-4 bg-white shadow ring-1 ring-stone-400/20 sm:mx-0 sm:rounded-lg lg:col-start-3">
                        <!-- Main -->
                        <div class="py-4">
                            <div class="sm:flex sm:items-end">
                                <div class="sm:flex-1">
                                    <div>
                                        <div class="flex items-center">
                                            <h3 class="text-xl font-bold text-gray-900 uppercase sm:text-2xl">
                                                {{ $company->name }}</h3>
                                        </div>
                                        <p class="text-sm text-gray-500">{{ $company->slug }}</p>
                                    </div>
                                    <div class="flex flex-wrap mt-5 space-y-3 sm:space-x-3 sm:space-y-0">
                                        <button onclick="printSelectedContent()" type="button"
                                            class="inline-flex items-center px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out bg-gray-800 border border-transparent rounded-md hover:bg-gray-700 hover:ring-2 hover:ring-amber-400 hover:ring-offset-2 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                                            YAZDIR/İNDİR
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </main>
    </div>

@endsection

@section('scripts')
    <script>
        // Add JavaScript Function
        function printSelectedContent() {
            var printContents = document.getElementById('printableArea').innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
        }
    </script>
@endsection