

<?php
    $request = request();
?>

<?php $__env->startSection('content'); ?>
<div class="row justify-content-center">

    <div class="col-12">
        <div class="page-heading mb-4">
            <h3 class="mb-2"><?php echo e(__($pageTitle)); ?></h3>
            <p>
                <?php echo app('translator')->get('View and manage your transaction history with ease, and keep track of your payment over time. Stay informed and in control of your finances with our comprehensive payment history page.'); ?>
            </p>
        </div>
        <hr>
    </div>

    <div class="col-12">
        <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><?php echo app('translator')->get('Trx Number'); ?></label>
                            <input type="text" name="search" value="<?php echo e($request->search); ?>" placeholder="<?php echo app('translator')->get('Trx Number'); ?>">
                            <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><?php echo app('translator')->get('Date'); ?></label>
                                <input name="date" type="search" class="datepicker-here date-range" placeholder="<?php echo app('translator')->get('Start Date - End Date'); ?>" autocomplete="off" value="<?php echo e(request()->date); ?>">
                                <button type="submit" class="icon-area">
                                    <i class="las la-search"></i>
                                </button>
                            </div>
                        </div>  
                </div>
            </form>
        </div>
<div class="row mb-3">
            <div class="col-lg-12 justify-content-end d-flex">
                <div class="dropdown">
    <button class="btn btn-sm btn-outline--base dropdown-toggle d-flex align-items-center" type="button" id="exportMenuButton" data-bs-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
        Export as    </button>
    <div class="dropdown-menu p-0" aria-labelledby="exportMenuButton" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 36.8px, 0px);">
        <a class="dropdown-item" href="">
            <i class="las la-file-excel"></i> Excel        </a>
        <a class="dropdown-item" href="">
            <i class="las la-file-csv"></i> Csv        </a>
        <a class="dropdown-item" href="">
            <i class="las la-file-pdf"></i> PDF        </a>
    </div>
</div>

            </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">
                    <?php $__empty_1 = true; $__currentLoopData = $deposits; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $deposit): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="accordion-item transaction-item
                    <?php if($deposit->status == 'COMPLETED'): ?>
                    trx-success-badge
                    <?php elseif($deposit->status == 'REJECTED'): ?>
                    trx-danger-badge
                    <?php else: ?> 
                    trx-dark-badge
                    <?php endif; ?>
                    ">
                        <h2 class="accordion-header" id="h-<?php echo e($loop->iteration); ?>">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#c-<?php echo e($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">
                                            <?php if($deposit->status == 'COMPLETED'): ?>
                                                <i class="las la-check text--success"></i>
                                            <?php elseif($deposit->status == 'REJECTED'): ?>
                                                <i class="las la-times text--danger"></i>
                                            <?php else: ?> 
                                                <i class="las la-plus text--dark"></i>
                                            <?php endif; ?>
                                        </div>
                                        <div class="content">
                                            <h6 class="trans-title"><?php echo e($deposit->paymentID); ?></h6>
                                            <span class="text-muted font-size--14px mt-2"><?php echo e(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><?php echo app('translator')->get('Payment processed via'); ?> <?php echo e(__(@$deposit->channel)); ?></b>
                                        <p class="mt-1"><small><?php echo app('translator')->get('Requestd by'); ?> (<a href="mailto:<?php echo e(@$deposit->email); ?>"><?php echo e(@$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><?php echo e(showAmount(@$deposit->amount)); ?></b></p>
                                </div>
                            </button>
                        </h2>
                        <div id="c-<?php echo e($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"><?php echo app('translator')->get('Gateway | Currency'); ?></span>
                                        <span class="value"><?php echo e(__(@$deposit->channel)); ?> </span>
                                    </li>
                                    <li>
                                        <span class="caption"><?php echo app('translator')->get('Amount'); ?></span>
                                        <span class="value"><?php echo e(showAmount($deposit->amount)); ?></span>
                                    </li>
                                    <li>
                                        <span class="caption"><?php echo app('translator')->get('Charge'); ?></span>
                                        <span class="value"><?php echo e(showAmount($deposit->fees)); ?></span>
                                    </li>
                                    <li>
                                        <span class="caption"><?php echo app('translator')->get('After Charge'); ?></span>
                                        <span class="value"><?php echo e(showAmount($deposit->final_amount)); ?></span>
                                    </li>
                                    <li>
                                        <span class="caption"><?php echo app('translator')->get('Payment Details'); ?></span>
                                        <span class="value"><a href="javascript:void(0)" class="detailBtn" data-payment="<?php echo e($deposit->paymentID); ?>"><?php echo app('translator')->get('See Payment Details'); ?></a></span>
                                    </li>
                                    <li>
                                        <span class="caption"><?php echo app('translator')->get('Status'); ?></span>
                                        <span class="value">
                                                 <?php if($deposit->status == 'COMPLETED'): ?>
                                                 <span class="badge badge--success">Succeed</span>
                                            <?php elseif($deposit->status == 'REJECTED'): ?>
                                            <span class="badge badge--danger">Rejected</span>
                                            <?php else: ?> 
                                            <span class="badge badge--dark">Initiated</span>
                                            <?php endif; ?>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="accordion-body text-center">
             
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div><!-- custom--card end -->
    </div>
    
    <div class="col-12">
        <div class="mt-3">
          <?php if($deposits->hasPages()): ?>
                <?php echo e(paginatelinks($deposits)); ?>

            <?php 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"><?php echo app('translator')->get('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">
                            <?php echo app('translator')->get('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">
                            <?php echo app('translator')->get('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">
                            <?php echo app('translator')->get('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"><?php echo app('translator')->get('Close'); ?></button>
            </div>
        </div>
    </div>
</div> 
<?php $__env->stopSection(); ?>

<?php $__env->startPush('style-lib'); ?>
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/admin/css/daterangepicker.css')); ?>">
<?php $__env->stopPush(); ?>

<?php $__env->startPush('style'); ?>
<style>
    .capitalize{
        text-transform: capitalize;
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script-lib'); ?>
    <script src="<?php echo e(asset('assets/admin/js/moment.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/admin/js/daterangepicker.min.js')); ?>"></script>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script'); ?>
    <script>
        (function ($) {
            "use strict";

  $('.detailBtn').on('click', function () {
                var modal = $('#detailModal');

                var customer = $(this).data('payment').customer;
                var shippingInfo = $(this).data('payment').shipping_info;
                var billingInfo = $(this).data('payment').billing_info;

                var customerData = $('.customerData');
                var shippingData = $('.shippingData');
                var billingData = $('.billingData');

                customerData.html('');
                shippingData.html('');
                billingData.html('');

                $.each(customer, function(key, value) {
                    var data = `
                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                            <span class='fw-bold capitalize'>${key.replaceAll('_', ' ')}</span>
                            <span">${value}</span>
                        </li>`;

                    customerData.append(data);
                });

                $.each(shippingInfo, function(key, value) {
                    var data = `
                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                            <span class='fw-bold capitalize'>${key.replaceAll('_', ' ')}</span>
                            <span">${value ?? 'N/A'}</span>
                        </li>`;

                    shippingData.append(data);
                });

                $.each(billingInfo, function(key, value) {
                    var data = `
                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                            <span class='fw-bold capitalize'>${key.replaceAll('_', ' ')}</span>
                            <span">${value ?? 'N/A'}</span>
                        </li>`;

                    billingData.append(data);
                });

                modal.modal('show');
            });

            $('[name=method_currency], [name=method_id], [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>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.main-app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/paysafebd23/ovimanager.store/resources/views/merchant-lists.blade.php ENDPATH**/ ?>