@extends('layouts.app')

@section('content')

<div class="">
    <main>
        <div class="w-full px-4 pb-60">
            <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">

                <div class="gap-4 lg:col-span-2 lg:row-span-2 lg:row-end-2">

                    {{--FINANSAL OZET--}}
                    <div
                        class="p-4 mx-auto bg-white shadow ring-1 ring-stone-300 sm:mx-0 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2">
                        <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                currency_lira
                            </span>
                            Finansal Durum
                            {{--
                            <button onclick="toggleVisibility()"
                                class="pl-2 transition-all material-symbols-rounded text-stone-300 hover:text-stone-700">
                                visibility
                            </button>
                            --}}
                        </h2>
                        <div class="grid grid-cols-1 gap-5 mt-3 sm:grid-cols-2 lg:grid-cols-3">
                            <!-- INCOMES -->
                            <div
                                class="overflow-hidden bg-white rounded-lg shadow pattern-charlie-emerald ring-1 ring-emerald-200">
                                <div
                                    class="p-5 bg-gradient-to-b from-emerald-100/80 to-emerald-100/30 border-emerald-100">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            <span class="text-4xl material-symbols-rounded text-emerald-600">
                                                expand_less
                                            </span>
                                        </div>
                                        <div class="flex-1 w-0 ml-5">
                                            <dl>
                                                <dt class="text-sm font-medium truncate text-emerald-600">Alacaklar
                                                </dt>
                                                <dd>
                                                    <div id="total_balance" class="text-xl font-bold text-emerald-600">
                                                        {{ number_format($total_balance, 2, ',', '.') }}<span
                                                            class="pl-1 text-sm">TRL</span>
                                                    </div>
                                                    <div id="total_cash" class="text-sm text-emerald-500">
                                                        {{ number_format($total_balance / $ex_rate['USD']->rate, 2, ',',
                                                        '.') }}<span class="pl-1 text-xs">USD</span>
                                                    </div>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- SPENDS -->
                            <div
                                class="overflow-hidden bg-white rounded-lg shadow pattern-charlie-rose ring-1 ring-rose-200">
                                <div class="p-5 bg-gradient-to-b from-rose-100/80 to-rose-100/30">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            <span class="text-4xl material-symbols-rounded text-rose-600">
                                                expand_more
                                            </span>
                                        </div>
                                        <div class="flex-1 w-0 ml-5">
                                            <dl>
                                                <dt class="text-sm font-medium truncate text-rose-600">Borçlar</dt>
                                                <dd>
                                                    <div id="total_balance_negative"
                                                        class="text-xl font-bold text-rose-600">{{
                                                        number_format($total_balance_negative, 2, ',', '.') }}<span
                                                            class="pl-1 text-sm">TRL</span>
                                                    </div>
                                                    <div id="total_cash" class="text-sm text-rose-500">
                                                        {{ number_format($total_balance_negative /
                                                        $ex_rate['USD']->rate, 2, ',', '.') }}<span
                                                            class="pl-1 text-xs">USD</span>
                                                    </div>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- CASH & BANKS -->
                            <div
                                class="overflow-hidden bg-white rounded-lg shadow pattern-charlie-brown ring-1 ring-stone-300">
                                <div
                                    class="p-5 border-b bg-gradient-to-b from-stone-100/80 to-stone-100/30 border-stone-100">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            <span class="text-3xl material-symbols-rounded text-stone-400">
                                                account_balance
                                            </span>
                                        </div>
                                        <div class="flex-1 w-0 ml-5">
                                            <dl>
                                                <dt class="text-sm font-medium truncate text-stone-500">Nakit Kasası
                                                </dt>
                                                <dd>
                                                    <div id="total_cash" class="text-lg font-bold text-stone-600">
                                                        {{ number_format($cash_vault->getBankBalance(), 2, ',', '.')
                                                        }}<span class="pl-1 text-sm">TRL</span>
                                                    </div>
                                                    <div id="total_cash" class="text-sm text-stone-500">
                                                        {{ number_format($cash_vault->getBankBalance() /
                                                        $ex_rate['USD']->rate, 2, ',', '.') }}<span
                                                            class="pl-1 text-xs">USD</span>
                                                    </div>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--KASA VE BANKALAR--}}
                    <div class="grid gap-3 p-4 mt-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="material-symbols-rounded mr-1.5">
                                account_balance
                            </span>
                            Kasa ve Bankalar
                        </h2>
                        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
                            @foreach($bank_accounts as $bank)
                            <ul class="grid content-start gap-2">
                                <li
                                    class="content-center h-12 text-xs tracking-tight transition-all rounded-lg bg-slate-50 hover:bg-slate-100 hover:shadow ring-1 ring-slate-200">
                                    <a href="#" class="flex items-center justify-between flex-1 px-2 truncate">
                                        <div class="flex-1 truncate py-1.5">
                                            <p class="font-medium text-stone-900">{{ $bank->name }}</p>
                                            <p class="text-stone-500">{{ $bank->currency }} {{ $bank->number }}</p>
                                        </div>
                                        <div class="flex-shrink-0 text-sm font-bold">
                                            <p>{{ number_format($bank->getBankBalance(), 0, ',', '.') }}<span
                                                    class="pl-0.5">₺</span></p>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            @endforeach
                        </div>
                    </div>
                    {{--KASA HAREKETLERİ--}}
                    <div class="grid gap-4 mt-4 lg:col-start-1 lg:col-end-3">
                        @if(count($current_month_invoices) > 0)
                        <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                            <h2 class="flex items-center mb-2 text-lg leading-6 font-jbmono-bold text-stone-700">
                                <span class="mr-1 material-symbols-rounded">
                                    swap_vert
                                </span>
                                Bu Ay
                            </h2>
                            <div class="grid grid-cols-1">
                                <ul role="list" class="divide-y divide-stone-100">

                                    @foreach($current_month_invoices as $item)
                                    <a href="{{ route('invoices.show', $item->id) }}"
                                        class="flex items-center justify-start px-4 py-2 transition-all hover:bg-stone-50 hover:ring-1 hover:ring-stone-200 hover:shadow hover:rounded-xl">
                                        <div class="min-w-0 grow">
                                            <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>
                                                @endif
                                                <span class="text-xs text-stone-600">#{{ $item->company->name }}</span>
                                                <span class="text-xs text-stone-400">{{ $item->bank->name }}</span>
                                            </div>
                                            <div class="text-xs leading-5 text-stone-500">
                                                <date class="text-stone-500">{{ date('d.m.Y', strtotime($item->date)) }}
                                                </date>
                                            </div>
                                        </div>
                                        <div class="items-center flex-none text-right gap-x-2">
                                            @if($item->type == 'paid')
                                            <p class="font-semibold text-rose-600 sm:block">
                                                <span
                                                    class="text-sm material-symbols-rounded text-rose-600">north_east</span>
                                                {{ number_format($item->amount, 2, ',', '.') }}<span
                                                    class="pl-0.5 text-xs font-normal">{{ $item->currency }}</span>
                                            </p>
                                            @elseif($item->type == 'received')
                                            <p class="font-semibold text-emerald-600 sm:block">
                                                <span
                                                    class="text-sm material-symbols-rounded text-emerald-600">south_west</span>
                                                {{ number_format($item->amount, 2, ',', '.') }}<span
                                                    class="pl-0.5 text-xs font-normal">{{ $item->currency }}</span>
                                            </p>
                                            @endif
                                        </div>
                                    </a>
                                    @endforeach

                                </ul>
                            </div>

                        </div>
                        @else
                        <x-alert-standard color="stone">
                            Bu aya ait belge bulunmuyor.
                        </x-alert-standard>
                        @endif
                        @if(count($previous_month_invoices) > 0)
                        <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                            <h2 class="flex items-center mb-2 text-lg leading-6 font-jbmono-bold text-stone-700">
                                <span class="mr-1 material-symbols-rounded">
                                    swap_vert
                                </span>
                                Geçen Ay
                            </h2>
                            <div class="grid grid-cols-1">
                                <ul role="list" class="divide-y divide-stone-100">

                                    @foreach($previous_month_invoices as $item)
                                    <a href="{{ route('invoices.show', $item->id) }}"
                                        class="flex items-center justify-start px-4 py-2 transition-all hover:bg-stone-50 hover:ring-1 hover:ring-stone-200 hover:shadow hover:rounded-xl">
                                        <div class="min-w-0 grow">
                                            <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>
                                                @endif
                                                <span class="text-xs text-stone-600">#{{ $item->company->name }}</span>
                                                <span class="text-xs text-stone-400">{{ $item->bank->name }}</span>
                                            </div>
                                            <div class="text-xs leading-5 text-stone-500">
                                                <date class="text-stone-500">{{ date('d.m.Y', strtotime($item->date)) }}
                                                </date>
                                            </div>
                                        </div>
                                        <div class="items-center flex-none text-right gap-x-2">
                                            @if($item->type == 'paid')
                                            <p class="font-semibold text-rose-600 sm:block">
                                                <span
                                                    class="text-sm material-symbols-rounded text-rose-600">north_east</span>
                                                {{ number_format($item->amount, 2, ',', '.') }}<span
                                                    class="pl-0.5 text-xs font-normal">{{ $item->currency }}</span>
                                            </p>
                                            @elseif($item->type == 'received')
                                            <p class="font-semibold text-emerald-600 sm:block">
                                                <span
                                                    class="text-sm material-symbols-rounded text-emerald-600">south_west</span>
                                                {{ number_format($item->amount, 2, ',', '.') }}<span
                                                    class="pl-0.5 text-xs font-normal">{{ $item->currency }}</span>
                                            </p>
                                            @endif
                                        </div>
                                    </a>
                                    @endforeach

                                </ul>
                            </div>

                        </div>
                        @else
                        <x-alert-standard color="stone">
                            Geçen aya ait belge bulunmuyor.
                        </x-alert-standard>
                        @endif
                    </div>
                </div>
            </div>

    </main>
</div>

@endsection

@section('scripts')
<script>
    /*
                let isHidden = true;

                document.addEventListener('DOMContentLoaded', (event) => {
                    setInitialHiddenState();
                });

                function setInitialHiddenState() {
                    const balanceElements = [
                        {id: 'total_balance', value: "{{ number_format($total_balance, 2, ',', '.') }}₺"},
                {id: 'total_balance_negative', value: "{{ number_format($total_balance_negative, 2, ',', '.') }}₺"},
                {id: 'total_cash', value: "0,00₺"}
            ];

            balanceElements.forEach(element => {
                document.getElementById(element.id).textContent = "**,**₺";
            });
        }

        function toggleVisibility() {
            const balanceElements = [
                {id: 'total_balance', value: "{{ number_format($total_balance, 2, ',', '.') }}₺"},
                {id: 'total_balance_negative', value: "{{ number_format($total_balance_negative, 2, ',', '.') }}₺"},
                {id: 'total_cash', value: "0,00₺"}
            ];

            balanceElements.forEach(element => {
                document.getElementById(element.id).textContent = element.value;
            });

            setTimeout(() => {
                setInitialHiddenState();
            }, 5000);
        }
*/
</script>
@endsection