@php $page = 'transfers' @endphp

@extends('includes.layout')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Transfer Fund</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a>
            </li>
            <li class="breadcrumb-item active">Transfer Fund</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="">
                            <h4 class="m-0">Wallet Balance <i id="info-icon" class="fa fa-eye text-primary"
                                    style="cursor: pointer"></i></h4>
                            @php $balance = $user->balance + $user->ref_balance @endphp
                            <h3 id="balance" class="m-0"><b class="m-0">${{ number_format($balance, 2) }}</b> </h3>
                            <h3 id="hidden-balance" class="m-0" style="display:none;"><b class="m-0">*****</b></h3>
                        </div>
                        <button data-toggle="modal" data-target="#transer-fund"
                            class="float-right btn btn-primary btn-sm">
                            <i class="mr-5 fa fa-plus"></i>Transfer Fund
                        </button>
                        <div class="modal fade" id="transer-fund">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Transfer Fund</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                    </div>
                                    <form action="{{ route('store.transfers') }}" method="POST">@csrf
                                        <div class="modal-body row">
                                            <div class="mb-2 text-center col-lg-12">
                                                <p class="m-0">Available Balance</p>
                                                <h1 class="m-0">${{ number_format($user->balance) }}</h1>
                                            </div>
                                            <div class="col-lg-12 col-12">
                                                <div class="form-group">
                                                    <label for="bank_name">
                                                        Bank Name<span class="text-danger">*</span>
                                                    </label>
                                                    <div class="controls">
                                                        <input type="text" name="bank_name" id="bank_name"
                                                            class="form-control" required placeholder="Enter Bank Name"
                                                            autofocus>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="form-group">
                                                    <label for="account_number">
                                                        Account Number<span class="text-danger">*</span>
                                                    </label>
                                                    <div class="controls">
                                                        <input type="text" name="account_number" id="account_number"
                                                            class="form-control" required
                                                            placeholder="Enter Account Number">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="form-group">
                                                    <label for="account_name">
                                                        Account Name<span class="text-danger">*</span>
                                                    </label>
                                                    <div class="controls">
                                                        <input type="text" name="account_name" id="account_name"
                                                            class="form-control" required
                                                            placeholder="Enter Account Name">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-12">
                                                <div class="form-group">
                                                    <label for="amount">Amount<span class="text-danger">*</span></label>
                                                    <!-- Info Alert -->
                                                    <div class="py-2 mb-2 alert alert-info">
                                                        <i class="fa fa-info-circle"></i>
                                                        The minimum transfer amount is <b>${{
                                                            number_format($settings->transfer_min) }}</b>
                                                        and the maximum is <b>${{ number_format($settings->transfer_max)
                                                            }}</b>.
                                                        Transfers outside this range will not be processed.
                                                    </div>
                                                    <div class="controls">
                                                        <input type="number" name="amount" id="amount"
                                                            class="form-control" required placeholder="Enter Amount">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="form-group">
                                                    <label for="swift_code">
                                                        SWIFT/BIC Code<span class="text-danger">*</span>
                                                    </label>
                                                    <div class="controls">
                                                        <input type="text" name="swift_code" id="swift_code"
                                                            class="form-control" required
                                                            placeholder="Enter Account Number">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="form-group">
                                                    <label for="iban">
                                                        IBAN<span class="text-danger">*</span>
                                                    </label>
                                                    <div class="controls">
                                                        <input type="text" name="iban" id="iban" class="form-control"
                                                            required placeholder="Enter Account Name">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-12">
                                                <div class="form-group">
                                                    <label for="narration">
                                                        Narration / Purpose <span class="text-danger">*</span>
                                                    </label>
                                                    <div class="controls">
                                                        <textarea name="narration" id="narration" class="form-control"
                                                            placeholder="Narration / Purpose" required></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="type" value="account">
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-warning"
                                                data-dismiss="modal">Cancel</button>
                                            @if($user->balance > $settings->transfer_min)
                                            <button type="submit" class="btn btn-primary">Proceed with Transfer</button>
                                            @endif
                                        </div>
                                    </form>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12">
                <div class="container">
                    <div class="row">
                        @forelse ($transactions as $item)
                        <div class="mb-4 col-lg-6 col-md-12 col-sm-12">
                            <div class="border-0 rounded-lg shadow-lg card">
                                <div class="p-4 card-body">

                                    <!-- Status Badge -->
                                    <div class="mb-3 d-flex justify-content-between align-items-center">
                                        <span class="px-3 py-2 badge badge-success">
                                            {{ Str::ucfirst($item->status) }}
                                        </span>
                                        <small class="text-muted">{{ $item->created_at->format('M d, Y h:i A')
                                            }}</small>
                                    </div>

                                    <!-- Sender / Receiver -->
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted"><i class="fa fa-paper-plane text-primary"></i>
                                            Sender</h6>
                                        <p class="h6">{{ $item->sender->name }}</p>
                                    </div>

                                    @if($item->type === 'wallet')
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted"><i class="fa fa-user text-info"></i> Receiver</h6>
                                        <p class="h6">{{ optional($item->reciever)->name }}</p>
                                    </div>
                                    @else
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted"><i class="fa fa-university text-success"></i> Bank
                                            Name</h6>
                                        <p class="h6">{{ $item->bank_name }}</p>
                                    </div>
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted"><i class="fa fa-id-card text-dark"></i> Account Name
                                        </h6>
                                        <p class="h6">{{ $item->account_name }}</p>
                                    </div>
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted"><i class="fa fa-hashtag text-secondary"></i> Account
                                            Number</h6>
                                        <p class="h6">{{ $item->account_number }}</p>
                                    </div>
                                    @if(!empty($item->iban))
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted"><i class="fa fa-globe text-info"></i> IBAN</h6>
                                        <p class="h6">{{ $item->iban }}</p>
                                    </div>
                                    @endif
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted"><i class="fa fa-random text-warning"></i> SWIFT Code
                                        </h6>
                                        <p class="h6">{{ $item->swift_code }}</p>
                                    </div>
                                    @endif
                                    <div class="mb-2">
                                        <h6 class="mb-1 text-muted">
                                            <i class="fa fa-edit text-warning"></i>
                                            Transaction Type
                                        </h6>
                                        <p class="h6">
                                            <span
                                                class="badge badge-{{ $item->payment_type == 'credit' ? 'success' : 'danger' }} px-3 py-2">
                                                {{ Str::ucfirst($item->payment_type) }}
                                            </span>
                                        </p>
                                    </div>
                                    <!-- Amount + Payment Type -->
                                    <div class="my-3 d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1 text-muted">Amount</h6>
                                            <h4 class="mb-0 text-dark">
                                                ${{ number_format($item->amount) }}
                                            </h4>
                                        </div>
                                    </div>

                                    <!-- Balances -->
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-1 text-muted">Previous Balance</h6>
                                            <p class="mb-0">${{ number_format($item->prev_balance, 2) }}</p>
                                        </div>
                                        <div>
                                            <h6 class="mb-1 text-muted">Current Balance</h6>
                                            <p class="mb-0">${{ number_format($item->cur_balance, 2) }}</p>
                                        </div>
                                    </div>

                                </div>
                                <div class="card-footer d-flex justify-content-between bg-light">
                                    <small class="text-muted">Updated {{ $item->created_at->diffForHumans() }}</small>
                                    <button type="button" class="btn btn-sm btn-outline-danger" data-toggle="modal"
                                        data-target="#delete{{ $item->id }}">
                                        <i class="fa fa-trash"></i> Delete
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Delete Modal -->
                        <div class="modal fade" id="delete{{ $item->id }}">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Delete Log</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                    </div>
                                    <div class="modal-body">
                                        <h5 class="text-danger">Are you sure you want to delete this transfer log?</h5>
                                    </div>
                                    <div class="modal-footer">
                                        <form action="{{ route('delete.transfer', $item->id) }}" method="POST">@csrf
                                            @method('delete')
                                            <button type="submit" class="btn btn-danger">Proceed</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @empty
                        <div class="col-lg-12">
                            <p class="text-center alert alert-warning">No Data Available at this Moment</p>
                        </div>
                        @endforelse
                    </div>
                    <div class="row">
                        <div class="text-center col-lg-12">
                            {{ $transactions->render("pagination::bootstrap-4") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- /.content-wrapper -->
@endsection


@push('scripts')
<script>
    $(document).ready(function() {
            // Initially hide the balance and show the hidden balance
            $("#balance").hide();
            $("#hidden-balance").show();
            // Toggle the visibility of the balance on click
            $("#info-icon").click(function() {
                $("#balance").toggle();
                $("#hidden-balance").toggle();
            });
        });
</script>
@endpush