@extends('layouts.user.app')
@push('style')
    <link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
    <link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
@endpush
@section('content')
    <div class="mb-5 d-flex align-items-center justify-content-between">
        <div>
            <h4 class="pt-3 mb-1">My Accounts</h4>
        </div>
        {{-- <button type="button" data-bs-toggle="modal" data-bs-target="#createAccount" class="btn btn-sm btn-success">Create Account <i class="ti ti-plus"></i></button> --}}
    </div>
    <div class="row g-5">
            @foreach ($accounts as $account )
            <div class="col-lg-3 col-sm-6">
                <div class="card h-100">
                    @if($account->is_active)<span class="position-absolute top-0 start-100 translate-middle badge bg-success">Active</span>@endif
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-0">{{$account->name}}</h5>
                        </div>
                        @if($accounts->count() > 1)
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-primary dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" aria-expanded="false">Actions</button>
                                <ul class="dropdown-menu" style="">
                                    <li><a class="dropdown-item waves-effect transferFromAccount" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#transferModal" data-bs-balance={{number_format($account->balance, 2)}} data-bs-account-id="{{$account->id}}" data-bs-account-name="{{$account->name}}">Transfer</a></li>
                                    @if($account->is_active == 0)
                                    <li><a class="dropdown-item waves-effect activeAccount" href="javascript:void(0);" data-id="{{$account->id}}">Make Active</a></li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    @endif
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-1 me-2">{{number_format($account->balance, 2)}} $</h5>
                            <p class="mb-0">{{balaneInBTC($account->balance)}} BTC</p>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-success rounded p-2">
                                <i class="ti ti-credit-card ti-26px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        {{-- @include('User.accounts.create') --}}
        @include('User.accounts.transfer')
@endsection


@push('script')
<script src="/assets/vendor/libs/select2/select2.js"></script>

<script src="/assets/vendor/js/jquery.number.min.js"></script>
    <script>
        const transferModal = document.getElementById('transferModal');
        if (transferModal) {
            transferModal.addEventListener('show.bs.modal', event => {
                let accountTo = $('#to_account');
                const button = event.relatedTarget;
                const accountId = button.getAttribute('data-bs-account-id');
                const accountFrom = transferModal.querySelector('#from_account');
                const transactionAmount = transferModal.querySelector('#transaction_amount');
                const accountName = button.getAttribute('data-bs-account-name');
                const balance = button.getAttribute('data-bs-balance');
                const accountFromText = transferModal.querySelector('#transferAlert');
                accountFromText.textContent =  `You are trasnfering funds from account: ${accountName}`;
                accountFrom.value = accountId;
                transactionAmount.value = '';
                transactionAmount.setAttribute('placeholder', `MAX: ${balance} $`)
                transactionAmount.setAttribute('max', `${$.number(balance.replace(/,/g, ""), 2, '.', '')}`)

                accountTo.select2({
                    dropdownParent: $('#transferModal'),
                    minimumResultsForSearch: -1
                });

            })
        }
        $('.transferFromAccount').on('click', function(){
            let html = '';
            let currentAccount = $('#from_account').val();
            let accountTo = $('#to_account');
            let settings = {
                    url: '/user/accounts/'+currentAccount,
                    method: "GET",
                    timeout: 0,
                    headers: {
                        Accept: "application/json",
                    },
                };
                $.ajax(settings).done(function (response) {
                    $.each(response, function(key, account){
                        html += '<option value="'+account.id+'" data-balance="'+account.balance+'" >'+account.name+'</option>';
                    });
                    accountTo.html(html);
                    $('#transferAlert').on('click', function(){
                        console.log('asdasd');

                        console.log($('#from_account').find(':selected').attr('data-balance'));
                    });
                });
        })

        $('#transferFunds').on('click', function(){
            let modalTransfer = document.getElementById('transferModal');
            var modal = bootstrap.Modal.getInstance(modalTransfer)
            let currentAccount = $('#from_account').val();
            let accountTo = $('#to_account').val();
            let amount = $('#transaction_amount').val();
            let data = {
                from_account : currentAccount,
                to_account : accountTo,
                transaction_amount : amount
            }
            let settings = {
                url: '/user/accounts/transfer',
                method: "POST",
                timeout: 0,
                data: data,
                headers: {
                    Accept: "application/json",
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
            };

            $.ajax(settings).done(function (response) {
                new Notify ({
                    title: '',
                    text: response.message,
                    status: response.status,
                    autoclose: true,
                    effect: 'slide',
                    type: 2,
                    autotimeout: 2500
                });

                if(response.status == 'success'){
                    location.reload();
                }
            });
        })
        $('.activeAccount').on('click', function(){
            let account = $(this).data('id');
            let settings = {
                url: '/user/accounts/'+account,
                method: "PATCH",
                headers: {
                    Accept: "application/json",
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
            };
            $.ajax(settings).done(function (response) {
                new Notify ({
                    title: '',
                    text: response.message,
                    status: response.status,
                    autoclose: true,
                    effect: 'slide',
                    type: 2,
                    autotimeout: 2500
                });
                if(response.status == 'success'){
                    location.reload();
                }
            });
        })
    </script>
@endpush