@extends('layouts.user')

@section('title', __('loans.general_ledger_title'))
@section('page_title', __('loans.general_ledger_title'))
@section('breadcrumb', __('loans.general_ledger_breadcrumb'))

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-4">

    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-[0.18em] text-slate-500 font-semibold">
                {{ __('loans.total_debit') }}
            </div>
            <div class="mt-1 text-lg font-bold text-slate-900">
                {{ number_format($sumDebit, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-[0.18em] text-slate-500 font-semibold">
                {{ __('loans.total_credit') }}
            </div>
            <div class="mt-1 text-lg font-bold text-slate-900">
                {{ number_format($sumCredit, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <div class="text-[10px] uppercase tracking-[0.18em] text-slate-500 font-semibold">
                {{ __('loans.net') }}
            </div>
            <div class="mt-1 text-lg font-bold text-slate-900">
                {{ number_format($net, 2) }}
            </div>
        </div>
    </div>

    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <form method="GET" class="border-b border-slate-200 p-4">
            <div class="grid grid-cols-1 md:grid-cols-6 gap-3">
                <div>
                    <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                        {{ __('loans.date') }}
                    </label>
                    <input
                        type="date"
                        name="date"
                        value="{{ request('date') }}"
                        class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                    >
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                        {{ __('loans.from') }}
                    </label>
                    <input
                        type="date"
                        name="from"
                        value="{{ request('from') }}"
                        class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                    >
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                        {{ __('loans.to') }}
                    </label>
                    <input
                        type="date"
                        name="to"
                        value="{{ request('to') }}"
                        class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                    >
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                        {{ __('loans.account') }}
                    </label>
                    <select
                        name="user_account_id"
                        class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                    >
                        <option value="">{{ __('loans.all') }}</option>
                        @foreach($accounts as $acc)
                            <option value="{{ $acc->id }}" @selected(request('user_account_id') == $acc->id)>
                                {{ $acc->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                        {{ __('loans.type') }}
                    </label>
                    <select
                        name="type"
                        class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                    >
                        <option value="">{{ __('loans.all') }}</option>
                        <option value="loan_in" @selected(request('type') === 'loan_in')>loan_in</option>
                        <option value="loan_payment_out" @selected(request('type') === 'loan_payment_out')>loan_payment_out</option>
                    </select>
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                        {{ __('loans.search') }}
                    </label>
                    <input
                        type="text"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="{{ __('loans.search_trx_description') }}"
                        class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs font-medium text-slate-800 outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                    >
                </div>
            </div>

            <div class="mt-3 flex flex-wrap gap-2">
                <button
                    type="submit"
                    class="bg-slate-900 px-4 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-slate-800"
                >
                    {{ __('loans.filter') }}
                </button>

                <a href="{{ route('user.reports.loan-general-ledger') }}"
                   class="border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-slate-50">
                    {{ __('loans.reset') }}
                </a>
            </div>
        </form>

        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50 text-slate-600">
                    <tr>
                        <th class="px-3 py-2.5 text-left font-semibold whitespace-nowrap">{{ __('loans.date') }}</th>
                        <th class="px-3 py-2.5 text-left font-semibold whitespace-nowrap">{{ __('loans.trx') }}</th>
                        <th class="px-3 py-2.5 text-left font-semibold whitespace-nowrap">{{ __('loans.type') }}</th>
                        <th class="px-3 py-2.5 text-left font-semibold whitespace-nowrap">{{ __('loans.account') }}</th>
                        <th class="px-3 py-2.5 text-right font-semibold whitespace-nowrap">{{ __('loans.debit') }}</th>
                        <th class="px-3 py-2.5 text-right font-semibold whitespace-nowrap">{{ __('loans.credit') }}</th>
                        <th class="px-3 py-2.5 text-left font-semibold whitespace-nowrap">{{ __('loans.description') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-200">
                    @forelse($rows as $row)
                        <tr class="hover:bg-slate-50">
                            <td class="px-3 py-2.5 whitespace-nowrap">
                                {{ optional($row->posted_at)->format('d M Y h:i A') }}
                            </td>
                            <td class="px-3 py-2.5 font-medium whitespace-nowrap">
                                {{ $row->trx_no }}
                            </td>
                            <td class="px-3 py-2.5 whitespace-nowrap">
                                {{ $row->type }}
                            </td>
                            <td class="px-3 py-2.5 whitespace-nowrap">
                                {{ $row->account->name ?? '-' }}
                            </td>
                            <td class="px-3 py-2.5 text-right whitespace-nowrap">
                                {{ number_format((float) $row->debit, 2) }}
                            </td>
                            <td class="px-3 py-2.5 text-right whitespace-nowrap">
                                {{ number_format((float) $row->credit, 2) }}
                            </td>
                            <td class="px-3 py-2.5">
                                {{ $row->description }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-xs text-slate-500">
                                {{ __('loans.no_loan_ledger_entries_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="border-t border-slate-200 px-4 py-3">
            {{ $rows->links() }}
        </div>
    </div>
</div>
@endsection