@extends('layouts.user')
@section('title', __('account_transfers.account_transfers'))

@section('content')
<div class="space-y-4 text-xs">

    <div class="bg-white border p-4 shadow-sm">
        <div class="flex items-center justify-between gap-3 flex-wrap">
            <div>
                <div class="text-[11px] text-slate-500">{{ __('account_transfers.accounts') }}</div>
                <div class="text-xl font-extrabold text-slate-900">{{ __('account_transfers.account_transfers') }}</div>
                <div class="text-xs text-slate-500 mt-1">{{ __('account_transfers.transfer_header_hint') }}</div>
            </div>

            <a href="{{ route('user.account_transfers.create') }}"
               class="px-3 py-2 bg-slate-900 text-white text-xs font-semibold hover:bg-slate-800">
                + {{ __('account_transfers.new_transfer') }}
            </a>
        </div>
    </div>
    
    <div class="bg-white border p-4 shadow-sm">
        <form class="grid grid-cols-1 md:grid-cols-7 gap-2 text-xs" method="GET">
            <select class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="from_account_id">
                <option value="">{{ __('account_transfers.from_all') }}</option>
                @foreach($accounts as $a)
                    <option value="{{ $a->id }}" @selected((string) request('from_account_id') === (string) $a->id)>
                        {{ $a->name }}
                    </option>
                @endforeach
            </select>

            <select class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="to_account_id">
                <option value="">{{ __('account_transfers.to_all') }}</option>
                @foreach($accounts as $a)
                    <option value="{{ $a->id }}" @selected((string) request('to_account_id') === (string) $a->id)>
                        {{ $a->name }}
                    </option>
                @endforeach
            </select>

            <input type="date"
                   class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none"
                   name="date"
                   value="{{ request('date') }}">

            <input type="number"
                   min="1"
                   max="12"
                   class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none"
                   name="month"
                   value="{{ request('month') }}"
                   placeholder="{{ __('account_transfers.month') }}">

            <input type="number"
                   min="2000"
                   max="2100"
                   class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none"
                   name="year"
                   value="{{ request('year') }}"
                   placeholder="{{ __('account_transfers.year') }}">

            <button class="px-3 py-2 bg-slate-900 text-white font-semibold hover:bg-slate-800">
                {{ __('account_transfers.filter') }}
            </button>

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

    <div class="bg-white border p-4 shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead>
                    <tr class="text-left text-slate-500 border-b">
                        <th class="py-2.5">{{ __('account_transfers.date') }}</th>
                        <th>{{ __('account_transfers.trx') }}</th>
                        <th>{{ __('account_transfers.from') }}</th>
                        <th>{{ __('account_transfers.to') }}</th>
                        <th>{{ __('account_transfers.amount') }}</th>
                        <th>{{ __('account_transfers.bank_charge') }}</th>
                        <th>{{ __('account_transfers.note') }}</th>
                        <th class="text-right">{{ __('account_transfers.action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transfers as $t)
                        <tr class="border-b last:border-0">
                            <td class="py-3">
                                {{ optional($t->posted_at)->format('d M Y') ?? $t->created_at->format('d M Y') }}
                            </td>
                            <td class="text-[11px] text-slate-600">{{ $t->trx_no }}</td>
                            <td class="font-semibold">{{ $t->fromAccount?->name }}</td>
                            <td class="font-semibold">{{ $t->toAccount?->name }}</td>
                            <td class="font-extrabold">{{ number_format($t->amount, 2) }}</td>
                            <td>{{ number_format((float) ($t->bank_charge ?? 0), 2) }}</td>
                            <td class="text-slate-600 max-w-[240px]">{{ $t->note }}</td>
                            <td class="text-right">
                                <form class="inline js-delete" method="POST" action="{{ route('user.account_transfers.destroy', $t) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="px-2.5 py-1 border border-rose-200 bg-rose-50 text-rose-700 text-[11px] font-semibold hover:bg-rose-100">
                                        {{ __('account_transfers.delete') }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-slate-500">
                                {{ __('account_transfers.no_transfers_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">{{ $transfers->links() }}</div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form.js-delete').forEach(form => {
        form.addEventListener('submit', function(e){
            e.preventDefault();

            if (typeof Swal === 'undefined') {
                form.submit();
                return;
            }

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