

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

<?php $__env->startSection('content'); ?>
<div class="row justify-content-center gy-4">
    <div class="col-12">
        <div class="page-heading mb-4">
            <h3 class="mb-2"><?php echo e(__($pageTitle)); ?></h3>
            <p><?php echo e(__('Upload bulk payout files and track their processing status.')); ?></p>
        </div>
        <hr>
    </div>

    <!-- Upload Box Section -->
<div class="col-md-12">
    <div class="card custom--card border-0 shadow">
        <div class="card-body text-center">
            <form action="<?php echo e(route('payout.payout.bulkupload')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <div class="upload-box">
                    <input type="file" name="file" id="fileInput" class="upload-input" hidden>
                    <label for="fileInput" class="upload-label">
                        <i class="las la-cloud-upload-alt upload-icon"></i>
                        <p class="upload-text"><?php echo app('translator')->get('Click or drag a file to upload'); ?></p>
                    </label>
                    <p id="fileName" class="mt-2 text-muted"></p> 
                </div>
                <button type="submit" class="btn btn-primary mt-3" id="uploadButton" disabled>
                    <i class="las la-upload"></i> <?php echo app('translator')->get('Upload File'); ?>
                </button>
                <div id="uploadLoader" class="mt-3" style="display: none;">
    <span class="spinner-border text-primary" role="status"></span>
    <p class="mt-2"><?php echo app('translator')->get('Uploading... Please wait.'); ?></p>
</div>
            </form>
        </div>
    </div>
</div>   


    <!-- Uploaded Files List -->
<div class="col-md-12">
    <div class="card custom--card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped text-center align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th><?php echo app('translator')->get('File Name'); ?></th>
                            <th><?php echo app('translator')->get('Date'); ?></th>
                            <th><?php echo app('translator')->get('Total'); ?></th>
                            <th><?php echo app('translator')->get('Pending'); ?></th>
                            <th><?php echo app('translator')->get('Success'); ?></th>
                            <th><?php echo app('translator')->get('Rejected'); ?></th>
                            <th><?php echo app('translator')->get('Action'); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $withdraws; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $withdraw): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr>
                                <td class="fw-bold"><?php echo e(__(@$withdraw->filename)); ?></td>
                                <td><?php echo e(showDateTime(@$withdraw->created_at, 'M d Y @ g:i A')); ?></td>
                                <td class="text-primary fw-bold"><?php echo e($withdraw->total_count ?? 0); ?></td>
                                <td class="text-warning fw-bold"><?php echo e(($withdraw->pending_count + $withdraw->inprogress_count) ?? 0); ?></td>
                                <td class="text-success fw-bold"><?php echo e($withdraw->success_count ?? 0); ?></td>
                                <td class="text-danger fw-bold"><?php echo e($withdraw->rejected_count ?? 0); ?></td>
                                <td>
                                    <a href="<?php echo e(route('payout.payout.data-download', Crypt::encryptString($withdraw->uploadId))); ?>" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-download"></i> <?php echo app('translator')->get('Download'); ?>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="7" class="text-center text-muted"><?php echo app('translator')->get('No payouts found'); ?></td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    <div class="col-12">
        <div class="mt-3 d-flex justify-content-center">
            <?php if($withdraws->hasPages()): ?>
                <?php echo e(paginatelinks($withdraws)); ?>

            <?php endif; ?>
        </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>

.table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.table th {
    background-color: #343a40;
    color: #ffffff;
    padding: 12px;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.table td {
    padding: 1px;
    vertical-align: middle;
}

.btn-outline-primary {
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
}

.btn-outline-primary:hover {
    background-color: #007bff;
    color: white;
}


    .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>
<?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 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'><?php echo app('translator')->get('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"><?php echo app('translator')->get('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>
 <script>
    document.getElementById('fileInput').addEventListener('change', function () {
        const fileName = this.files[0] ? this.files[0].name : '<?php echo app('translator')->get("No file selected"); ?>';
        document.getElementById('fileName').textContent = fileName;

        // Enable the submit button if a file is selected
        document.getElementById('uploadButton').disabled = this.files.length === 0;
    });

    document.querySelector('form').addEventListener('submit', function () {
        // Show loader
        document.getElementById('uploadLoader').style.display = 'block';

        // Disable upload button to prevent resubmission
        document.getElementById('uploadButton').disabled = true;

        // Optionally disable file input
        document.getElementById('fileInput').disabled = true;
    });
</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/load-withdraws.blade.php ENDPATH**/ ?>