@extends('layouts.app')
@section('title', 'Fund Transfer List')

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <x-breadcrumb :langArray="['account.account', 'Transfer List']"/>
        
        <div class="card radius-10">
            <div class="card-header bg-transparent border-bottom-0 p-4 d-flex align-items-center">
                <h5 class="mb-0 text-uppercase">Fund Transfer History <small class="text-muted ms-2">(Total: {{ \App\Models\Accounts\AccountTransfer::count() }})</small></h5>
                <div class="ms-auto">
                    <x-anchor-tag href="{{ route('account.transfer.create') }}" text="New Transfer" class="btn btn-primary px-4" />
                </div>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table id="transfer-datatable" class="table table-striped table-bordered align-middle" style="width:100%">
                        <thead class="bg-light">
                            <tr>
                                <th>#</th>
                                <th>Date</th>
                                <th>From Account</th>
                                <th>To Account</th>
                                <th class="text-end">Amount</th>
                                <th>Note</th>
                                <th>Reference</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{ versionedAsset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ versionedAsset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<script>
$(document).ready(function() {
    "use strict";

    if ($.fn.DataTable.isDataTable('#transfer-datatable')) {
        $('#transfer-datatable').DataTable().destroy();
    }

    const table = $('#transfer-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('account.transfer.datatable.list') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'date', name: 'transaction_date'},
            {data: 'from_account', name: 'fromAccount.name'},
            {data: 'to_account', name: 'toAccount.name'},
            {data: 'amount', name: 'amount', className: 'text-end fw-bold'},
            {data: 'note', name: 'note'},
            {data: 'reference_no', name: 'reference_no'},
            {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center'},
        ],
        order: [[0, 'desc']],
        pageLength: 25
    });

    $(document).on('click', '.delete-transfer', function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Reverse Transfer?',
            text: "This will reverse the amount and update account balances!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, reverse it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('account.transfer.delete') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: id
                    },
                    success: function(response) {
                        if (response.status) {
                            iziToast.success({title: 'Success', message: response.message});
                            table.ajax.reload();
                        } else {
                            iziToast.error({title: 'Error', message: response.message});
                        }
                    },
                    error: function(xhr) {
                        iziToast.error({title: 'Error', message: xhr.responseJSON.message || 'Operation failed'});
                    }
                });
            }
        });
    });
});
</script>
@endsection