@extends('layouts.main-app')

@php
    $request = request();
@endphp

@section('content')
<div class="row justify-content-center">

    <div class="col-12">
        <div class="page-heading mb-4">
            <h3 class="mb-2">{{ __($pageTitle) }}</h3>
            <p>
                   {{ __('Track your deposit history and processing details.') }}
            </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 ($deposits as $deposit)
                    <div class="accordion-item transaction-item
                    @if($deposit->status == 'COMPLETED')
                    trx-success-badge
                    @elseif($deposit->status == 'REJECTED')
                    trx-danger-badge
                    @else 
                    trx-dark-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-1">
                                <div class="col-lg-3 col-sm-4 col-6 order-1 icon-wrapper">
                                    <div class="left">
                                        <div class="icon rotate-none">
                                            @if($deposit->status == 'COMPLETED')
                                                <i class="las la-check text--success"></i>
                                            @elseif($deposit->status == 'REJECTED')
                                                <i class="las la-times text--danger"></i>
                                            @else 
                                               <i class="las la-spinner text--warning"></i>
                                            @endif
                                        </div>
                                        <div class="content">
                                            <h8 class="trans- title">{{ $deposit->paymentID }}</h8>
                                            <span class="text-muted font-size--14px mt-2">{{ showDateTime(@$deposit->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($deposit->status, ['PENDING', 'INPROGRESS', 'REJECTED']))
                                        @lang('Payment requested through') 
                                    @else
                                        @lang('Payment processed through') 
                                    @endif
                                    {{ __(@$deposit->channel) }}
                                </b>
                                        <p class="mt-1"><small>@lang('Requestd by') (<a href="mailto:{{ @$deposit->email }}">{{ @$deposit->email }}</a>)</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(@$deposit->amount) }}</b></p>
                                </div>
                            </button>
                        </h2>
                        <div id="c-{{ $loop->iteration }}" class="accordion-collapse collapse" aria-labelledby="h-1" data-bs-parent="#transactionAccordion">
                            <div class="accordion-body">
                                <ul class="caption-list">
                                      <li>
                                        <span class="caption">@lang('Identifier')</span>
                                        <span class="value">{{ __(@$deposit->paymentID) }} </span>
                                    </li>
                                 <li>
                                        <span class="caption">@lang('Gateway')</span>
                                        <span class="value">{{ __(@$deposit->channel) }} </span>
                                    </li>
                                 <li>
                                <span class="caption">@lang('Payee Name')</span>
                                <span class="value">{{ __(@$deposit->account) }}</span>
                                    </li>
                                    @if ($deposit->status == 'COMPLETED')
                                     <li>
                                <span class="caption">@lang('Payeer')</span>
                                <span class="value">{{ __(@$deposit->rcv_number) }}</span>
                                    </li> 
                                <li>
                                <span class="caption">@lang('Transaction ID')</span>
                                <span class="value">{{ __(@$deposit->txid) }}</span>
                            </li> 
                            @endif
                                    <li>
                                        <span class="caption">@lang('Amount')</span>
                                        <span class="value">{{ showAmount($deposit->amount) }}</span>
                                    </li>
                                         <li>
                                        <span class="caption">@lang('Received Amt')</span>
                                        <span class="value">{{ showAmount($deposit->rcv_amount) }}</span>
                                    </li>
                                    <li>
                                        <span class="caption">@lang('Charge')</span>
                                        <span class="value">{{ showAmount($deposit->fees) }}</span>
                                    </li>
                                    <li>
                                        <span class="caption">@lang('After Charge')</span>
                                        <span class="value">{{ showAmount($deposit->final_amount) }}</span>
                                    </li>
                                    <li>
                                        <span class="caption">@lang('Payment Details')</span>
                                        <span class="value"><a href="javascript:void(0)" class="detailBtn" data-payment="{{ json_encode($deposit) }}">@lang('See Payment Details')</a></span>
                                    </li>
                                    <li>
                                        <span class="caption">@lang('Status')</span>
                                        <span class="value">
                                                 @if($deposit->status == 'COMPLETED')
                                                 <span class="badge badge--success">Succeed</span>
                                            @elseif($deposit->status == 'REJECTED')
                                            <span class="badge badge--danger">Rejected</span>
                                            @else 
                                            <span class="badge badge--dark">Initiated</span>
                                            @endif
                                    </li>
                                   
                                </ul>
                                <div class="d-flex justify-content-end gap-2 mt-3">
                    
                        @if($deposit->status == 'COMPLETED' || $deposit->status == 'REJECTED')
                            <!-- Pushback -->
                            <form action="{{ route('data.push', ['type' => 'p2c', 'id' => Crypt::encryptString($deposit->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 deposit found')</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div><!-- custom--card end -->
    </div>

        <div class="col-12">
        <div class="mt-3">
            @if ($deposits->hasPages())
                {{ paginatelinks($deposits) }}
            @endif
        </div>
    </div>

</div>

<div id="detailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h6 class="modal-title">@lang('Payment Details')</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <nav>
                    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
                        <button class="nav-link active" id="customer-tab" data-bs-toggle="tab" data-bs-target="#nav-customer" type="button" role="tab" aria-controls="nav-customer" aria-selected="true">
                            @lang('Customer')
                        </button>
                        <button class="nav-link" id="shipping-tab" data-bs-toggle="tab" data-bs-target="#nav-shipping" type="button" role="tab" aria-controls="nav-shipping" aria-selected="false">
                            @lang('Shipping')
                        </button>
                        <button class="nav-link" id="billing-tab" data-bs-toggle="tab" data-bs-target="#nav-billing" type="button" role="tab" aria-controls="nav-billing" aria-selected="false">
                            @lang('Billing')
                        </button>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-customer" role="tabpanel" aria-labelledby="customer-tab">
                        <ul class="list-group list-group-flush customerData"> 
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="nav-shipping" role="tabpanel" aria-labelledby="shipping-tab">
                        <ul class="list-group list-group-flush shippingData"> 
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="nav-billing" role="tabpanel" aria-labelledby="billing-tab">
                        <ul class="list-group list-group-flush billingData"> 
                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark btn-sm" data-bs-dismiss="modal">@lang('Close')</button>
            </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>
    .capitalize{
        text-transform: capitalize;
    }
</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');

    // Get payment data (ensure it's parsed if it's a string)
    var paymentData = $(this).data('payment');
    if (typeof paymentData === 'string') {
        paymentData = JSON.parse(paymentData); // Parse if it's a stringified object
    }

    // Access customer, shipping, and billing info
    var customer = paymentData.customer || {};
    var shippingInfo = paymentData.shipping_info || {};
    var billingInfo = paymentData.billing_info || {};

    // Modal data container
    var customerData = $('.customerData');
    var shippingData = $('.shippingData');
    var billingData = $('.billingData');

    // Clear previous modal data
    customerData.html('');
    shippingData.html('');
    billingData.html('');

    // Display JSON data in the modal in a formatted way
    var formatJSON = function(data) {
        return '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
    };

    // Append formatted customer data
    customerData.append('<li class="list-group-item"><strong>Customer Information</strong><br>' + formatJSON(customer) + '</li>');

    // Append formatted shipping data
    shippingData.append('<li class="list-group-item"><strong>Shipping Information</strong><br>' + formatJSON(shippingInfo) + '</li>');

    // Append formatted billing data
    billingData.append('<li class="list-group-item"><strong>Billing Information</strong><br>' + formatJSON(billingInfo) + '</li>');

    // Show the modal
    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