@extends(!session('nebula', 0) ? 'layouts/web' : 'layouts/nebula')

@section('content')

    <div class="container-fluid">
        @include(!session('nebula', 0) ? 'customer.partials.header' : 'customer.nebula.header')

        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h4 class="page-title">{{ __('WITHDRAWAL') }}</h4>
                </div>
            </div>
        </div>

        <Withdrawal :storeroute="'{{ route('customer.withdrawals.store') }}'"
                 :nebula="{{ session('nebula', 0) }}"
                 :csrf="'{{ csrf_token() }}'"
        ></Withdrawal>

        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h4 class="page-title">{{ __('History') }}</h4>
                </div>
            </div>
        </div>
        <div class="card mt-2 bg-transparent">
            @forelse ($withdrawals as $withdrawal)
                <div class="bg-black bg-gradient bg-opacity-75 mb-2 px-3 py-2 shadow" style="border-radius: 15px">
                    <div class="row">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-6 d-flex align-items-center">
                                    <h5 class="text-white mb-0">{{ number_format($withdrawal->amount - $withdrawal->transaction_fee_held, 2) }}</h5>
                                </div>
                                <div class="col-6 d-flex align-items-center justify-content-end">
                                    <h6 class="text-white mb-0 text-end">{{ $withdrawal->status_text }}</h6>
                                </div>
                                <div class="col-6">
                                    <small>{{ __('Type') }}:</small> <small class="text-white">{{ $withdrawal->type_text }}</small>
                                </div>
                                <div class="col-6 text-end">
                                    <small class="text-white">{{ $withdrawal->created_at }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <h5 class="text-center text-white">{{ __('There are no withdrawals yet') }}</h5>
            @endforelse
            <div class="mt-2 text-end">
                {{ $withdrawals->links() }}
            </div>
        </div>
    </div>
@endsection
<script>
    import Withdrawal from "../../../js/components/Withdrawal";
    export default {
        components: {Withdrawal}
    }
</script>