@extends('layouts.main-app')

@php
    $request = request();
@endphp 

@section('content')
<div class="row justify-content-center gy-4">
    <div class="col-12">
        <div class="page-heading mb-4">
            <h3 class="mb-2">{{ __($pageTitle) }}</h3>
            <p>
             {{ __('View all your withdrawal transactions and their statuses.') }}
            </p>
        </div>
        <hr>
    </div>
<div class="row mb-4">
    <div class="col-md-4">
        <div class="custom-box text-center p-3 border rounded">
            <h5 class="text-warning">@lang('Pending Amount')</h5>
            <h4 class="text-warning">{{ number_format($totals['pendingAmount'], 2) }} {{ strtoupper(auth()->user()->currency) }}</h4>
        </div>
    </div>
    <div class="col-md-4">
        <div class="custom-box text-center p-3 border rounded">
            <h5 class="text-success">@lang('Success Amount')</h5>
            <h4 class="text-success">{{ number_format($totals['successAmount'], 2) }} {{ strtoupper(auth()->user()->currency) }}</h4>
        </div>
    </div>
    <div class="col-md-4">
        <div class="custom-box text-center p-3 border rounded">
            <h5 class="text-danger">@lang('Rejected Amount')</h5>
            <h4 class="text-danger">{{ number_format($totals['rejectedAmount'], 2) }} {{ strtoupper(auth()->user()->currency) }}</h4>
        </div>
    </div>
</div>

        <div class="col-12 mt-0">
            <div class="filter-area mb-3">
                <form action="" class="form">
                    <div class="d-flex flex-wrap gap-4">
                        <div class="flex-grow-1">
                            <div class="custom-input-box trx-search">
                                <label>@lang('Search')</label>
                                <input type="text" name="search" value="{{ $request->search }}" placeholder="@lang('Search')">
                                <button type="submit" class="icon-area">
                                    <i class="las la-search"></i>
                                </button>
                            </div>
                        </div> 
                        <div class="flex-grow-1">
                            <div class="custom-input-box trx-search">
                                <label>@lang('Date')</label>
                                <input name="date" type="search" class="datepicker-here date-range" placeholder="@lang('Start Date - End Date')" autocomplete="off" value="{{ request()->date }}">
                                <button type="submit" class="icon-area">
                                    <i class="las la-search"></i>
                                </button>
                            </div>
                        </div> 
                 <div class="flex-grow-1"> 
                        <div class="custom-input-box">
                            <label>@lang('Gateway')</label> 
                            <select name="method_code">
                                <option value="">@lang('All')</option> 
                                    <option value="bkash">bKash</option>
                                    <option value="nagad">nagad</option>
                                    <option value="upay">upay</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <div class="custom-input-box">
                            <label>@lang('Status')</label>
                            <select name="status">
                                <option value="">@lang('All')</option> 
                                <option value="PENDING" >@lang('Pending')</option> 
                                <option value="COMPLETED">@lang('Succeed')</option> 
                                <option value="REJECTED">@lang('Canceled')</option> 
                            </select>
                        </div>
                    </div>
                </div>
                    </div>
                </form>
            </div>
            <div class="row text-end mb-3">
                <div class="col-lg-12 d-flex flex-wrap justify-content-end">
             
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card custom--card border-0">
    <div class="card-body p-0">
        <div class="accordion table--acordion" id="transactionAccordion">
            @forelse ($withdraws as $withdraw)
            <div class="accordion-item transaction-item 
                @if($withdraw->status == 'PENDING' || $withdraw->status == 'INPROGRESS')
                    trx-warning-badge
                @elseif($withdraw->status == 'COMPLETED')
                    trx-success-badge
                @elseif($withdraw->status == 'REJECTED')
                    trx-danger-badge
                @endif">
                
                <h2 class="accordion-header" id="h-{{ $loop->iteration }}">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#c-{{ $loop->iteration }}" aria-expanded="false"
                        aria-controls="c-{{ $loop->iteration }}">
                        
                        <div class="col-lg-3 col-sm-4 col-6 order-1 icon-wrapper">
                            <div class="left">
                                <div class="icon rotate-none">
                                    @if($withdraw->status == 'PENDING')
                                        <i class="las la-spinner text--warning"></i>
                                    @elseif($withdraw->status == 'INPROGRESS')
                                        <i class="las la-sync text--primary"></i>
                                    @elseif($withdraw->status == 'COMPLETED')
                                        <i class="las la-check text--success"></i>
                                    @elseif($withdraw->status == 'REJECTED')
                                        <i class="las la-times text--danger"></i>
                                    @endif
                                </div>
                                <div class="content">
                                    <h8 class="trans-title">{{ $withdraw->paymentID }}</h8>
                                    <span class="text-muted font-size--14px mt-2">
                                        {{ showDateTime(@$withdraw->created_at, 'M d Y @g:i:a') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-6 col-sm-5 col-12 order-sm-2 order-3 content-wrapper mt-sm-0 mt-3">
                            <p class="text-muted font-size--14px">
                                <b>
                                    @if(in_array($withdraw->status, ['PENDING', 'INPROGRESS', 'REJECTED']))
                                        @lang('Withdrawal requested through') 
                                    @else
                                        @lang('Withdrawal processed through') 
                                    @endif
                                    {{ __(@$withdraw->channel) }}
                                </b>
                                <p class="mt-1"><small>@lang($withdraw->option2 ? 'Requested by System' : 'Requested by API')</small></p>
                            </p>
                        </div>
                        <div class="col-lg-3 col-sm-3 col-6 order-sm-3 order-2 text-end amount-wrapper">
                            <p><b>{{ showAmount(@$withdraw->amount) }}</b></p>
                        </div>
                    </button>
                </h2>

                <div id="c-{{ $loop->iteration }}" class="accordion-collapse collapse" aria-labelledby="h-{{ $loop->iteration }}" data-bs-parent="#transactionAccordion">
                    <div class="accordion-body">
                        <ul class="caption-list">
                            <li>
                                <span class="caption">@lang('Gateway')</span>
                                <span class="value">{{ __(@$withdraw->channel) }}</span>
                            </li>  
                            <li>
                                <span class="caption">@lang('Wallet')</span>
                                <span class="value">{{ __(@$withdraw->wallet) }}</span>
                            </li> 
                            
                            @if ($withdraw->status == 'COMPLETED')
                            <li>
                                <span class="caption">@lang('Transaction ID')</span>
                                <span class="value">{{ __(@$withdraw->txid) }}</span>
                            </li> 
                            @endif
                            
                            <li>
                                <span class="caption">@lang('Amount')</span>
                                <span class="value">{{ showAmount($withdraw->amount) }}</span>
                            </li>
                            <li>
                                <span class="caption">@lang('Charge')</span>
                                <span class="value">{{ showAmount($withdraw->fees) }}</span>
                            </li>
                            <li>
                                <span class="caption">@lang('After Charge')</span>
                                <span class="value">{{ showAmount($withdraw->final_amount) }}</span>
                            </li>

                            @if ($withdraw->status == 'REJECTED')
                            <li>
                                <span class="caption">@lang('Details')</span>
                                <span class="value">{{ __(@$withdraw->error) }}</span>
                            </li> 
                            @endif
                            @if ($withdraw->is_priority == 'Y')
                            <li>
                                <span class="caption">@lang('Processing')</span>
                                <span class="value">
                                        <span class="badge badge--success">Prioritized</span>
                                </span>
                            </li>
                                   @endif
                            <li>
                                <span class="caption">@lang('Status')</span>
                                <span class="value">
                                    @if($withdraw->status == 'COMPLETED')
                                        <span class="badge badge--success">Succeed</span>
                                    @elseif($withdraw->status == 'REJECTED')
                                        <span class="badge badge--danger">Rejected</span>
                                    @else 
                                        <span class="badge badge--dark">Pending</span>
                                    @endif
                                </span>
                            </li>
                            <li>
                                <span class="caption">@lang('Created')</span>
                                <span class="value">
                               {{ showDateTime(@$withdraw->created_at, 'M d Y @g:i:a') }}
                               </span>
                            </li> 
                            @if ($withdraw->status == 'COMPLETED')
                            <li>
                                <span class="caption">@lang('Updated')</span>
                                <span class="value">
                               {{ showDateTime(@$withdraw->updated_at, 'M d Y @g:i:a') }}
                               </span>
                            </li> 
@if (!empty($withdraw->error))
    <li>
        <span class="caption">@lang('Info')</span>
        <span class="value">
            @php
                $proofText = $withdraw->error;

                if ($withdraw->channel == 'nagad') {
                    // Remove everything from "Balance" onward
                    $cleanedText = Str::before($proofText, 'Balance');
                } elseif ($withdraw->channel == 'bkash') {
                    // Mask the balance amount only
                    $cleanedText = preg_replace('/Balance\s*:?\s*Tk\s*[\d,]+\.\d{2}/i', 'Balance: Tk ****', $proofText);
                } else {
                    $cleanedText = $proofText;
                }
            @endphp

            {{ $cleanedText }}
        </span>
    </li>
@endif
                            @endif
                        </ul>

                        <div class="d-flex justify-content-end gap-2 mt-3">
                    
                        @if($withdraw->status == 'PENDING')
                            <!-- Cancel Request -->
                            <form action="{{ route('payout.payout.cancel', Crypt::encryptString($withdraw->id)) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-danger">
                                    <i class="las la-times"></i> Cancel
                                </button>
                            </form>
                        @endif
                    
                        @if($withdraw->status == 'PENDING' && $withdraw->is_priority == 'N')
                            <!-- Push Faster -->
                            <form action="{{ route('payout.payout.faster', Crypt::encryptString($withdraw->id)) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-primary">
                                    <i class="las la-bell"></i> Push Faster
                                </button>
                            </form>
                        @endif
                    
                        @if($withdraw->status == 'COMPLETED' || $withdraw->status == 'REJECTED')
                            <!-- Pushback -->
                            <form action="{{ route('data.push', ['type' => 'payout', 'id' => Crypt::encryptString($withdraw->id)]) }}" method="GET">
                                @csrf
                                  <button type="submit" class="btn btn-sm btn-warning">
                                    <i class="las la-paper-plane"></i> Push Callback
                                </button>
                            </form>

                        @endif
                    
                    </div>


                    </div>
                </div>
            </div>
            @empty
            <div class="accordion-body text-center">
                <p class="text-muted">@lang('No payouts found')</p>
            </div>
            @endforelse
        </div>
    </div>
</div><!-- custom--card end -->
        <div class="col-12">
        <div class="mt-3">
            @if ($withdraws->hasPages())
                {{ paginatelinks($withdraws) }}
            @endif
        </div>
    </div>
        </div>

</div>

@endsection

@push('style-lib')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/css/daterangepicker.css') }}">
@endpush

@push('style')
<style>
    .border-line-area.style-two{
        text-align: center;
        position: relative;
        z-index: 1;
    }
    .border-line-area.style-two .border-line-title {
        display: inline-block;
        margin-bottom: 0 !important;
        background: #fff;
        padding: 10px;
        padding-bottom: 5px;
    }
    .border-line-title-wrapper {
        position: relative;
    }
    .border-line-title-wrapper::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.1px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #e5e5e5;
        z-index: -1;
    }

    .withdraw-detail__balance {
        font-size: 36px; 
    }
    .withdraw-detail-border {
        border-right: 1px solid #dee2e6; 
    }
    @media (max-width: 1399px) {
        .withdraw-detail__desc {
            font-weight: 500;
            font-size: 17px
        }
        .text-muted.title {
            font-size: 20px;
        }
        .withdraw-detail__balance {
            font-size: 32px; 
        }
    }
    @media (max-width: 767px) {
        .withdraw-detail-border {
            border-right: 0; 
            border-bottom: 1px solid #dee2e6!important; 
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
        .withdraw-detail__desc {
            font-size: 16px
        }
    }
    .withdraw-method-image img{
        max-width: 80px;
        max-height: 80px;
    }


</style>
@endpush

@push('script-lib')
    <script src="{{ asset('assets/admin/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/daterangepicker.min.js') }}"></script>
@endpush

@push('script')
    <script>

        (function ($) {
            "use strict";



            $('.detailBtn').on('click', function () {
                var modal = $('#detailModal');
                var userData = $(this).data('user_data');
                var html = ``;
                userData.forEach(element => {
                    if(element.type != 'file'){
                        html += `
                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                            <span class='fw-bold'>${element.name}</span>
                            <span">${element.value}</span>
                        </li>`;
                    }
                });

                if(!html){
                    html = `<span class='text-center'>@lang('No data found')</span>`;
                }

                modal.find('.userData').html(html);

                if($(this).data('admin_feedback') != undefined){
                    var adminFeedback = `
                        <div class="ms-3 border-line-area style-two">
                            <div class="border-line-title-wrapper">
                                <strong class="border-line-title">@lang('Admin Feedback')</strong>
                            </div>
                            <p class="text-start">${$(this).data('admin_feedback')}</p>
                        </div>
                    `;
                }else{
                    var adminFeedback = '';
                }

                modal.find('.feedback').html(adminFeedback);
                modal.modal('show');
            });

            $('[name=method_code], [name=status]').on('change', function(){
                $('.form').submit();
            })

            const datePicker = $('.date-range').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                },
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 15 Days': [moment().subtract(14, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(30, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 6 Months': [moment().subtract(6, 'months').startOf('month'), moment().endOf('month')],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                },
                maxDate: moment()
            });

            const changeDatePickerText = (event, startDate, endDate) => {
                $(event.target).val(startDate.format('MMMM DD, YYYY') + ' - ' + endDate.format('MMMM DD, YYYY'));
            }

            $('.date-range').on('apply.daterangepicker', (event, picker) => changeDatePickerText(event, picker.startDate, picker.endDate));

            if ($('.date-range').val()) {
                let dateRange = $('.date-range').val().split(' - ');
                $('.date-range').data('daterangepicker').setStartDate(new Date(dateRange[0]));
                $('.date-range').data('daterangepicker').setEndDate(new Date(dateRange[1]));
            }
        })(jQuery);
    </script>
@endpush

