dashboard-admin/resources/views/User/refund/new-refund.blade.php

144 lines
7.0 KiB
PHP

@extends('layouts.main')
@section('content')
<div class="main-content">
<section class="section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<form action="javascript:void(0);" id="formPengajuan" enctype="multipart/form-data">
@csrf
<div class="card"
style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; background: linear-gradient(45deg, #f3f3f3, #e0e0e0);">
<div class="card-header d-flex justify-content-center">
<h2>Form Refund Pesanan</h2>
</div>
<input type="hidden" name="id" value="{{ $id }}">
<div class="card-body">
<div class="section-title mt-0">Alasan Komplain</div>
<div class="col-md-12">
<label for="complaint" class="form-label">Berikan Alasan Mengapa
Melakukan Pengembalian</label>
<textarea class="form-control" aria-label="With textarea" required id="complaint" name='complaint'></textarea>
</div>
<div class="section-title">Unggah Foto dan Video</div>
<div class="custom-file">
<label for="uploadBukti" class="form-label">Sertakan bukti seperti foto atau
video
barang</label>
<input type="file" class="form-control" name="bukti[]" id="fileInput"
accept="image/*,video/*" required multiple>
<div id="previewContainer">
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn-info open-detail-modal" type="submit">Ajukan
Pengembalian</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- awal modal konfirmasi --}}
<div class="modal fade" id="confirmtransaction" aria-hidden="true" aria-labelledby="myModalLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-header d-flex justify-content-center">
<h5 class="modal-title" id="transaksiberhasil">Transaksi Berhasil Dilakukan!</h5>
<a type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></a>
</div>
<div class="modal-footer">
<a type="button" class="btn btn-primary" data-bs-dismiss="modal">OK!</a>
</div>
</div>
</div>
</div>
{{-- akhir modal konfirmasi --}}
<script>
$(document).ready(function() {
$('#formPengajuan').on('submit', function(e) {
e.preventDefault();
let form = this;
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
fileInput.addEventListener('change', function() {
previewContainer.innerHTML = ''; // Hapus pratinjau sebelumnya
const files = fileInput.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function(e) {
const preview = document.createElement('div');
preview.classList.add('preview-item');
if (file.type.startsWith('image/')) {
preview.innerHTML =
`<img src="${e.target.result}" alt="${file.name}" class="preview-img">`;
} else if (file.type.startsWith('video/')) {
var video = document.createElement('video');
var videoUrl = URL.createObjectURL(file);
video.src = videoUrl;
video.onloadedmetadata = function() {
var duration = video.duration;
if (duration > 60) {
Swal.fire({
title: 'Salah Inputan',
text: 'Inputan anda bukan foto atau video',
icon: 'error',
});
} else {
preview.innerHTML = `
<video controls class="preview-video">
<source src="${e.target.result}" type="${file.type}">
Your browser does not support the video tag.
</video>
`;
}
}
previewContainer.appendChild(preview);
} else {
Swal.fire({
title: 'Salah Inputan',
text: 'Inputan anda bukan foto atau video',
icon: 'error',
});
}
};
reader.readAsDataURL(file);
}
});
});
</script>
@endsection