@extends('layouts.user')

@section('title', __('owner_transactions.title'))
@section('page_title', __('owner_transactions.title'))
@section('breadcrumb', __('owner_transactions.breadcrumb'))

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

    <!-- Header -->
    <div class="bg-white border border-slate-200 px-4 py-3 shadow-sm flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
        <div class="text-base font-bold text-slate-900">
            {{ __('owner_transactions.heading') }}
        </div>

        <a href="{{ route('user.owner_transactions.create') }}"
           class="inline-flex items-center gap-2 px-3 py-2 bg-slate-900 text-white text-xs font-semibold hover:bg-slate-800">
            + {{ __('owner_transactions.add_transaction') }}
        </a>
    </div>

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

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

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

    <!-- Filter -->
    <div class="bg-white border border-slate-200 px-4 py-4 shadow-sm">
        <form class="grid md:grid-cols-6 gap-3 text-xs">

            <input type="date" name="date" value="{{ request('date') }}"
                   class="border border-slate-300 px-3 py-2.5">

            <select name="month" class="border border-slate-300 px-3 py-2.5">
                <option value="">{{ __('owner_transactions.month') }}</option>
                @for($m=1;$m<=12;$m++)
                    <option value="{{ $m }}" @selected((int)request('month')===$m)>{{ $m }}</option>
                @endfor
            </select>

            <select name="year" class="border border-slate-300 px-3 py-2.5">
                <option value="">{{ __('owner_transactions.year') }}</option>
                @for($y=now()->year; $y>=now()->year-5; $y--)
                    <option value="{{ $y }}" @selected((int)request('year')===$y)>{{ $y }}</option>
                @endfor
            </select>

            <select name="type" class="border border-slate-300 px-3 py-2.5">
                <option value="">{{ __('owner_transactions.all_types') }}</option>
                <option value="investment" @selected(request('type')==='investment')>{{ __('owner_transactions.investment') }}</option>
                <option value="drawing" @selected(request('type')==='drawing')>{{ __('owner_transactions.drawing') }}</option>
            </select>

            <select name="user_account_id" class="border border-slate-300 px-3 py-2.5">
                <option value="">{{ __('owner_transactions.all_accounts') }}</option>
                @foreach($accounts as $a)
                    <option value="{{ $a->id }}" @selected((int)request('user_account_id')===$a->id)>{{ $a->name }}</option>
                @endforeach
            </select>

            <input name="search"
                   value="{{ request('search') }}"
                   placeholder="{{ __('owner_transactions.search_placeholder') }}"
                   class="border border-slate-300 px-3 py-2.5">

            <div class="md:col-span-6 flex gap-2 pt-1">
                <button class="px-4 py-2 bg-slate-900 text-white text-xs font-semibold hover:bg-slate-800">
                    {{ __('owner_transactions.filter') }}
                </button>

                <a href="{{ route('user.owner_transactions.index') }}"
                   class="px-4 py-2 border border-slate-300 bg-white text-xs font-semibold hover:bg-slate-50">
                    {{ __('owner_transactions.reset') }}
                </a>
            </div>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white border border-slate-200 shadow-sm overflow-hidden">
        <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">{{ __('owner_transactions.date') }}</th>
                        <th class="px-3 py-2.5 text-left">{{ __('owner_transactions.type') }}</th>
                        <th class="px-3 py-2.5 text-left">{{ __('owner_transactions.account') }}</th>
                        <th class="px-3 py-2.5 text-left">{{ __('owner_transactions.trx_no') }}</th>
                        <th class="px-3 py-2.5 text-right">{{ __('owner_transactions.amount') }}</th>
                        <th class="px-3 py-2.5 text-left">{{ __('owner_transactions.note') }}</th>
                        <th class="px-3 py-2.5 text-right">{{ __('owner_transactions.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-200">
                    @forelse($rows as $r)
                        <tr class="hover:bg-slate-50">
                            <td class="px-3 py-2.5 whitespace-nowrap">
                                {{ optional($r->posted_at)->format('Y-m-d H:i') }}
                            </td>

                            <td class="px-3 py-2.5">
                                @if($r->type==='investment')
                                    <span class="px-2 py-1 text-[10px] bg-emerald-100 text-emerald-700 font-semibold">
                                        {{ __('owner_transactions.investment') }}
                                    </span>
                                @else
                                    <span class="px-2 py-1 text-[10px] bg-rose-100 text-rose-700 font-semibold">
                                        {{ __('owner_transactions.drawing') }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-3 py-2.5">{{ $r->account?->name }}</td>

                            <td class="px-3 py-2.5 font-mono text-[10px]">
                                {{ $r->trx_no }}
                            </td>

                            <td class="px-3 py-2.5 text-right font-semibold">
                                {{ number_format((float)$r->amount,2) }}
                            </td>

                            <td class="px-3 py-2.5">
                                {{ $r->note }}
                            </td>

                            <td class="px-3 py-2.5 text-right">
                                <div class="inline-flex gap-2">
                                    <a href="{{ route('user.owner_transactions.edit',$r) }}"
                                       class="px-2 py-1 border text-[10px] font-semibold hover:bg-slate-100">
                                        {{ __('owner_transactions.edit') }}
                                    </a>

                                    <form id="del{{ $r->id }}" method="POST" action="{{ route('user.owner_transactions.destroy',$r) }}">
                                        @csrf
                                        @method('DELETE')
                                    </form>

                                    <a href="#"
                                       data-confirm-delete="del{{ $r->id }}"
                                       class="px-2 py-1 border border-rose-200 text-rose-600 text-[10px] font-semibold hover:bg-rose-50 js-confirm-delete">
                                        {{ __('owner_transactions.delete') }}
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-xs text-slate-500">
                                {{ __('owner_transactions.no_data_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.js-confirm-delete').forEach(btn => {
        btn.addEventListener('click', function(e){
            e.preventDefault();
            const formId = this.dataset.confirmDelete;
            const form = document.getElementById(formId);
            if (!form) return;

            if (typeof Swal === 'undefined') {
                if (confirm(@json(__('owner_transactions.delete_confirm')))) form.submit();
                return;
            }

            Swal.fire({
                title: @json(__('owner_transactions.delete_confirm')),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: @json(__('owner_transactions.yes_delete')),
                cancelButtonText: @json(__('owner_transactions.cancel'))
            }).then((r) => {
                if (r.isConfirmed) form.submit();
            });
        });
    });
});
</script>
@endsection