
<?php $__env->startSection('title'); ?> Complaint <?php $__env->stopSection(); ?>
<?php $__env->startSection('css'); ?>
<!--datatable css-->
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<!--datatable responsive css-->
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<?php $__env->startComponent('components.breadcrumb'); ?>
<?php $__env->slot('li_1'); ?> Complaint <?php $__env->endSlot(); ?>
<?php $__env->slot('title'); ?> New <?php $__env->endSlot(); ?>
<?php echo $__env->renderComponent(); ?>
    <style>
        .custom-file-upload {
            border: 2px dashed #007bff;
            padding: 30px;
            width: 100%;
            text-align: center;
            background-color: #f8f9fa;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            color: #6c757d;
            position: relative;
        }

        .custom-file-upload:hover {
            background-color: #e9ecef;
        }

        .custom-file-upload input[type="file"] {
            display: none; /* Hide the default file input */
        }

        .preview-container {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .preview-image {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }
    </style>
    
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Transaction Complaint Form (<?php echo e($data->paymentID); ?>)</h5>
            </div>
            <div class="card-body">
                <form role="form" method="POST" action="<?php echo e(route('collection.collection.update')); ?>" enctype="multipart/form-data" class="needs-validation" novalidate>
                    <?php echo csrf_field(); ?>
        <input type="hidden" name="keyId" value='<?php echo e(Crypt::encryptString($data->id)); ?>'>
        <input type="hidden" name="type" value='P2C_SU'>
        <div class="mb-3">
            <label for="wallet">Wallet from the payment sent</label>
            <input type="text" class="form-control" id="wallet" name="wallet" required>
            <?php $__errorArgs = ['wallet'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <span class="invalid-feedback" role="alert">
                            <strong><?php echo e($message); ?></strong>
                        </span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>
<div class="mb-3">
            <label for="transactionId">Transaction ID</label>
            <input type="text" class="form-control" id="transactionId" name="transactionId" required>
            <?php $__errorArgs = ['transactionId'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <span class="invalid-feedback" role="alert">
                            <strong><?php echo e($message); ?></strong>
                        </span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>
        <div class="mb-3">
            <label for="description">Description</label>
            <textarea id="description" class="form-control" name="description" placeholder="Describe your complaint..." required></textarea>
            <?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <span class="invalid-feedback" role="alert">
                            <strong><?php echo e($message); ?></strong>
                        </span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        </div>
        <div class="mb-3">
            <label for="imageProof">Image Proof (e.g., screenshots)</label>
            <label class="custom-file-upload">
                <i class="fas fa-cloud-upload-alt"></i>
                <span>Drag & Drop or Click to Upload Images</span>
                <input type="file" id="imageProof" name="imageProof[]" accept="image/*" multiple onchange="previewImages()" required>
                <?php $__errorArgs = ['imageProof'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <span class="invalid-feedback" role="alert">
                            <strong><?php echo e($message); ?></strong>
                        </span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            </label>
            <div class="preview-container" id="previewContainer"></div>
        </div>
        <div class="hstack gap-2 justify-content-end">
            <a href="<?php echo e(route('collection.collection.merchant')); ?>" class="btn btn-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">Submit Complaint</button>
        </div>
                </form>
            </div>
        </div>
    </div>
    <!--end col-->
</div>






<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>

<script>
    function previewImages() {
        const previewContainer = document.getElementById('previewContainer');
        previewContainer.innerHTML = ''; // Clear existing previews
        const files = document.getElementById('imageProof').files;

        Array.from(files).forEach(file => {
            const reader = new FileReader();
            reader.onload = function (e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'preview-image';
                previewContainer.appendChild(img);
            }
            reader.readAsDataURL(file);
        });
    }
</script>

<script>
function previewImages1() {
    const previewContainer = document.getElementById('previewContainer');
    const files = document.getElementById('imageProof').files;

    Array.from(files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.className = 'preview-image';
            previewContainer.appendChild(img);  // Add each image without clearing the container
        }
        reader.readAsDataURL(file);
    });
}

</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="<?php echo e(URL::asset('build/js/pages/datatables.init.js')); ?>"></script>
<script src="<?php echo e(URL::asset('build/js/app.js')); ?>"></script>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/paysafebd23/merchant.zigopay.net/resources/views/create-complaint.blade.php ENDPATH**/ ?>