@extends('layouts.user.app')
@push('style')
<link rel="stylesheet" href="/assets/vendor/libs/sweetalert2/sweetalert2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/@form-validation/form-validation.css" />
<link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
@endpush
@section('content')
<h4 class="py-3 mb-4">{{$title}}</h4>
<div class="row">
    <!-- User Sidebar -->
    <div class="col-xl-3 col-lg-5 order-1 order-md-1">
        @include('User.profile.sidebar')
    </div>
    <!--/ User Sidebar -->

    <!-- User Content -->
    <div class="col-xl-9 col-lg-7 order-2 order-md-2">
        @include('User.profile.tabs')
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center inner-shadow">
                <div class="card-title m-0 me-2">
                    <h5 class="m-0 me-2">Recent Transactions</h5>
                </div>
                <a href="{{route('user.transactions.index', ['type' => 'all'])}}" class="text-white btn btn-sm btn-primary waves-effect">
                    View all <i class="ti ti-arrow-right"></i>
                </a>
            </div>
            <div class="card-body pt-3">
                <ul class="p-0 m-0">
                    @forelse ($transactions as $transaction)
                    <li class="d-flex mb-3 pb-1 align-items-center justify-content-between">
                        <div class="d-flex align-items-center col-4">
                            <div class="badge bg-label-{{$transaction->type->color}} me-3 rounded p-2">
                                <i class="ti ti-{{transactionIcon($transaction->type->id)}} ti-sm"></i>
                            </div>

                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                <div class="me-2">
                                    <h6 class="mb-0"><span class="badge bg-label-{{$transaction->type->color}}">{{ucfirst($transaction->type->name)}}</span></h6>
                                    <small class="text-muted d-block">{{Carbon\Carbon::parse($transaction->completed_at)->format('M d - H:i:s')}}</small>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center text-start justify-conetnt-start col-2">
                            <span class="badge bg-label-{{$transaction->status->color}}">{{ucfirst($transaction->status->name)}}</span>
                        </div>
                        <div class="d-flex align-items-center text-start justify-conetnt-start col-3">
                            <span class="text-white badge bg-label-info">
                                {{'#TNX'.$transaction->tnx}}
                            </span>
                        </div>

                        <div class="user-progress d-flex align-items-center gap-1 flex-wrap justify-content-end col-3">
                            <div class="me-4">
                                <h5 class="mb-0 w-100 text-end text-{{$transaction->type->color}}">{{tranactionAmount($transaction->type->id, $transaction->amount)}} $</h5>
                                <h6 class="mb-0 w-100 text-end text-white">{{number_format(($transaction->amount * 0.0000015), 5)}} BTC</h6>
                            </div>
                            @if($transaction->status->id == 2)
                                <form action="{{route('user.transactions.destroy', $transaction->id)}}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger waves-effect text-white">Cancel Request</button>
                                </form>
                            @endif
                        </div>
                    </li>
                    <hr>
                    @empty
                    <li class="d-flex mb-3 pb-1 align-items-center">
                        No transaction yet
                    </li>
                    @endforelse
                </ul>
            </div>
        </div>

    </div>
    <!--/ User Content -->
</div>

@include('User.profile.modal')

@endsection

@push('script')
<script src="/assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
<script src="/assets/vendor/libs/cleavejs/cleave.js"></script>
<script src="/assets/vendor/libs/cleavejs/cleave-phone.js"></script>
<script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/vendor/libs/@form-validation/popular.js"></script>
<script src="/assets/vendor/libs/@form-validation/bootstrap5.js"></script>
<script src="/assets/vendor/libs/@form-validation/auto-focus.js"></script>


<!-- Main JS -->


<!-- Page JS -->
<script src="/assets/js/modal-edit-user.js"></script>
<script src="/assets/js/modal-enable-otp.js"></script>
<script src="/assets/js/app-user-view.js"></script>
<script src="/assets/js/app-user-view-security.js"></script>
<script src="/assets/js/forms-pickers.js"></script>

<script>
    $('#saveUserInformation').on('click', function(e){
        e.preventDefault();
        let name = $('#name').val();
        let phone = $('#phone').val();
        let birth_date = $('input[name=birth_date]').val();
        let address = $('#address').val();
        let country = $('#country').val();
        let gender = $('#gender').val();
        $.ajax({
            url: '/user/profile/update/{{$user->id}}',
            data : {
                name : name,
                phone: phone,
                birth_date: birth_date,
                address: address,
                country: country,
                gender: gender,
            },
            success: function (response) {
                if(response.status == 'success'){
                    $('#editUser').modal('hide');
                }
                new Notify ({
                    title: '',
                    text: response.message,
                    status: response.status,
                    effect: 'slide',
                    autoclose: true,
                    type: 2,
                    autotimeout: 4000
                });
            },
        });

    });
</script>
@endpush