@php
$path = public_path('storage/secondary_logo.png');
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
@endphp
{{ @$setup_app->appname }} | Approval Page
L
<link href="{{ asset('/') }}assets/material.css" rel="stylesheet" rel="stylesheet" />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<!-- Nucleo Icons -->
<link href="{{ asset('/') }}assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="{{ asset('/') }}assets/css/nucleo-svg.css" rel="stylesheet" />
<!-- Font Awesome Icons -->
<link href="{{ asset('/') }}assets/css/fontawesome.css" rel="stylesheet">
<link href="{{ asset('/') }}assets/css/nucleo-svg.css" rel="stylesheet" />
<!-- CSS Files -->
<link id="pagestyle" href="{{ asset('/') }}assets/css/argon-dashboard.css" rel="stylesheet" />
<!-- SweetAlert2 -->
<link rel="stylesheet" href="{{ asset('/') }}assets/css/sweetalert2.min.css">
<!-- datatables -->
<link rel="stylesheet" href="{{ asset('/') }}assets/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('/') }}assets/css/buttons.dataTables.min.css">
{{-- Jquery --}}
<script src="{{ asset('/') }}assets/js/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script src="{{ asset('/') }}assets/js/kitfontawesome.js" crossorigin="anonymous"></script>
{{-- Select2 --}}
<link rel="stylesheet" href="{{ asset('/') }}assets/css/select2.min.css">
<script src="{{ asset('/') }}assets/js/select2.min.js" crossorigin="anonymous"></script>
</head>
<body class="g-sidenav-show bg-gray-100 ">
<div class="position-absolute w-100 min-height-300 top-0"
style="background-image: url('{{ asset('/storage' . '/' . @$setup_app->cover_in) }}'); background-size: cover;">
<span class="mask bg-primary opacity-4"></span>
</div>
<main class="main-content position-relative border-radius-lg ps">
<div class="container mt-4">
<div class="card shadow">
<div class="card-body">
<h5 class="mb-0">Pengajuan Permintaan Sampel</h5>
</div>
</div>
</div>
<div class="container mt-4">
<div class="card shadow mb-5">
<div class="card-body">
{{-- Header Section --}}
<div class="row mb-4">
<div class="col-md-6 d-flex align-items-center">
{{-- Logo --}}
<img src="{{ asset('storage/secondary_logo.png') }}" alt="Company Logo" height="60"
class="me-3">
</div>
<div class="col-md-6 text-end">
{{-- Sample number --}}
<p class="mb-2">No. <strong>1234567890</strong></p>
{{-- Sample date --}}
<p>Date: <strong>30-05-2025</strong></p>
</div>
</div>
{{-- Title --}}
<div class="text-center mb-3">
<h6 class="text-uppercase fw-bold">Permohonan Sample</h6>
</div>
{{-- Customer Details --}}
<div class="row mb-3">
<div class="col-md-6">
{{-- Customer name --}}
<p><strong>Customer:</strong> Bpk Nurfaizin</p>
{{-- Shipping address --}}
<p><strong>Alamat Pengiriman:</strong> Jalan Pasuruan No. 25, Gondang Wetan, Pasuruan</p>
{{-- Delivery date --}}
<p><strong>Tanggal Pengiriman:</strong> 20 Juni 2025</p>
{{-- Courier name --}}
<p><strong>Send By:</strong> JNE</p>
</div>
<div class="col-md-6 text-end">
{{-- Sample status --}}
<p class="fw-bold">STATUS:
<span class="text-warning">PENDING</span>
</p>
</div>
</div>
{{-- Instruction --}}
<p class="mb-4">Mohon disertakan COA pada saat pengiriman sample roll/sheet</p>
{{-- Table --}}
<div class="table-responsive">
<table class="table display" id="list_pengajuan_sampel">
<thead class="thead-light" style="background-color: #00b7bd4f;">
<tr>
<th>No</th>
<th>PP / PET</th>
<th>Gsm</th>
<th>Color</th>
<th>Width</th>
<th>Length</th>
<th>Grade</th>
<th>Qty</th>
<th>Remark</th>
</tr>
</thead>
<tbody>
{{-- Row 1 --}}
<tr>
<td>1</td>
<td>9TORATO-000W15-00019-0000660A</td>
<td>19</td>
<td>WHITE W15</td>
<td>0,660</td>
<td>5</td>
<td>5</td>
<td>1 CAS</td>
<td>ZHI9C2F016</td>
</tr>
{{-- Row 2 --}}
<tr class="bg-light">
<td>2</td>
<td>9TORATO-000B10-00019-0000660A</td>
<td>19</td>
<td>BLACK B10</td>
<td>0,660</td>
<td>5</td>
<td>5</td>
<td>1 CAS</td>
<td>ZIO8B2F009</td>
</tr>
</tbody>
</table>
</div>
{{-- Action buttons --}}
<div class="d-flex justify-content-center mt-4">
{{-- Reject button --}}
<form method="POST" action="#">
@csrf
<button type="submit" class="btn me-2"
style="background: #028284; color: white; border: none;">Reject</button>
</form>
{{-- Approve button --}}
<form method="POST" action="#">
@csrf
<button type="submit" class="btn"
style="background: #028284; color: white; border: none;">Approve</button>
</form>
</div>
</div>
</div>
</div>
<div class="container mt-4">
<div class="card shadow mb-5">
<div class="card-body">
{{-- Header Section --}}
<div class="row mb-4">
<div class="col-md-6 d-flex align-items-center">
{{-- Logo --}}
<img src="{{ asset('storage/secondary_logo.png') }}" alt="Company Logo" height="60"
class="me-3">
</div>
<div class="col-md-6 text-end">
{{-- Sample number --}}
<p class="mb-2">No. <strong>1234567890</strong></p>
{{-- Sample date --}}
<p>Date: <strong>30-05-2025</strong></p>
</div>
</div>
{{-- Title --}}
<div class="text-center mb-3">
<h6 class="text-uppercase fw-bold">Permohonan Sample</h6>
</div>
{{-- Customer Details --}}
<div class="row mb-3">
<div class="col-md-6">
{{-- Customer name --}}
<p><strong>Customer:</strong> Bpk Nurfaizin</p>
{{-- Shipping address --}}
<p><strong>Alamat Pengiriman:</strong> Jalan Pasuruan No. 25, Gondang Wetan, Pasuruan</p>
{{-- Delivery date --}}
<p><strong>Tanggal Pengiriman:</strong> 20 Juni 2025</p>
{{-- Courier name --}}
<p><strong>Send By:</strong> JNE</p>
</div>
<div class="col-md-6 text-end">
{{-- Sample status --}}
<p class="fw-bold">STATUS:
<span class="text-warning">PENDING</span>
</p>
</div>
</div>
{{-- Instruction --}}
<p class="mb-4">Mohon disertakan COA pada saat pengiriman sample roll/sheet</p>
{{-- Table --}}
<div class="table-responsive">
<table class="table display" id="list_pengajuan_sampel">
<thead class="thead-light" style="background-color: #00b7bd4f;">
<tr>
<th>No</th>
<th>PP / PET</th>
<th>Gsm</th>
<th>Color</th>
<th>Width</th>
<th>Length</th>
<th>Grade</th>
<th>Qty</th>
<th>Remark</th>
</tr>
</thead>
<tbody>
{{-- Row 1 --}}
<tr>
<td>1</td>
<td>9TORATO-000W15-00019-0000660A</td>
<td>19</td>
<td>WHITE W15</td>
<td>0,660</td>
<td>5</td>
<td>5</td>
<td>1 CAS</td>
<td>ZHI9C2F016</td>
</tr>
{{-- Row 2 --}}
<tr class="bg-light">
<td>2</td>
<td>9TORATO-000B10-00019-0000660A</td>
<td>19</td>
<td>BLACK B10</td>
<td>0,660</td>
<td>5</td>
<td>5</td>
<td>1 CAS</td>
<td>ZIO8B2F009</td>
</tr>
</tbody>
</table>
</div>
{{-- Action buttons --}}
<div class="d-flex justify-content-center mt-4">
{{-- Reject button --}}
<form method="POST" action="#">
@csrf
<button type="submit" class="btn me-2"
style="background: #028284; color: white; border: none;">Reject</button>
</form>
{{-- Approve button --}}
<form method="POST" action="#">
@csrf
<button type="submit" class="btn"
style="background: #028284; color: white; border: none;">Approve</button>
</form>
</div>
</div>
</div>
</div>
@include('layouts.footers.auth.footer')
</main>
<!-- Core JS Files -->
<script src="{{ asset('js/api-traprv.blade.js') }}"></script>
<script src="{{ asset('/') }}assets/js/core/popper.min.js"></script>
<script src="{{ asset('/') }}assets/js/core/bootstrap.min.js"></script>
<script src="{{ asset('/') }}assets/js/plugins/perfect-scrollbar.min.js"></script>
<script src="{{ asset('/') }}assets/js/plugins/smooth-scrollbar.min.js"></script>
<script>
var win = navigator.platform.indexOf('Win') > -1;
if (win && document.querySelector('#sidenav-scrollbar')) {
var options = {
damping: '0.5'
}
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
//class readonly
$('.readonly').attr('readonly', '');
$('.not').css('background-color', '#ffe9ed');
//class notspace
$('.notspace').focusout(function () {
var currentValue = $(this).val();
var newValue = currentValue.replace(/\s/g, "");
$(this).val(newValue);
});
//class notspace
$('.notspace').keyup(function () {
var currentValue = $(this).val();
var newValue = currentValue.replace(/\s/g, "");
$(this).val(newValue);
});
//custom select2
$('.select-multiple').attr('multiple', 'multiple');
$('.custom-select').select2();
//default focus input attributes key
$('input[key="true"]').focus();
//delete start-end space
$('input[type="text"]').focusout(function () {
$(this).val($(this).val().trim());
})
//upper value
$('.upper').keyup(function () {
$(this).val($(this).val().toUpperCase());
});
$('.upper').focusout(function () {
$(this).val($(this).val().toUpperCase());
});
//lower value
$('.lower').keyup(function () {
$(this).val($(this).val().toLowerCase());
});
$('.lower').focusout(function () {
$(this).val($(this).val().toLowerCase());
});
// function set color row DataTable
$('.odd').click(function () {
$('.odd').css('background-color', '');
$('.even').css('background-color', '');
$('.exp').css('background-color', '#ffe768');
$('.stock').css('background-color', '#f93c3c');
$('.not').css('background-color', '#ffe9ed');
$(this).css('background-color', '#f9f4ea');
});
$('.even').click(function () {
$('.odd').css('background-color', '');
$('.even').css('background-color', '');
$('.exp').css('background-color', '#ffe768');
$('.stock').css('background-color', '#f93c3c');
$('.not').css('background-color', '#ffe9ed');
$(this).css('background-color', '#f9f4ea');
});
var table = $('#list_{{ @$dmenu }}').DataTable();
// Add the click event to all rows on all pages
table.on('draw', function () {
$('.odd').click(function () {
$('.odd').css('background-color', '');
$('.even').css('background-color', '');
$('.exp').css('background-color', '#ffe768');
$('.stock').css('background-color', '#f93c3c');
$('.not').css('background-color', '#ffe9ed');
$(this).css('background-color', '#f9f4ea');
});
$('.even').click(function () {
$('.odd').css('background-color', '');
$('.even').css('background-color', '');
$('.exp').css('background-color', '#ffe768');
$('.stock').css('background-color', '#f93c3c');
$('.not').css('background-color', '#ffe9ed');
$(this).css('background-color', '#f9f4ea');
});
});
// end function set color row DataTable
//show password
$('.showpass').click(function () {
var clas = $(this).attr('class');
var inp = $(this).parents('.pass');
if (clas == 'fas fa-eye showpass') {
$(this).attr('class', 'fas fa-eye-slash showpass');
inp.find('input').attr('type', 'text');
inp.find('input').focus();
} else {
$(this).attr('class', 'fas fa-eye showpass');
inp.find('input').attr('type', 'password');
inp.find('input').focus();
}
});
function customMatcher(params, data) {
if ($.trim(params.term) === '') {
return data;
}
// Konversi ke huruf kecil untuk pencarian case-insensitive
let searchTerm = params.term.toLowerCase();
let text = data.text.toLowerCase();
// Mencari di mana saja dalam teks
if (text.includes(searchTerm)) {
return data;
}
return null;
}
$('#jurusan').select2({
placeholder: "Cari jurusan...",
allowClear: true,
matcher: customMatcher // Menggunakan fungsi pencarian kustom
});
$('#universitas').select2({
placeholder: "Cari universitas...",
allowClear: true,
matcher: customMatcher
});
// Auto close the alert after 2,5 seconds (2500 milliseconds)
window.setTimeout(function () {
$(".alert").alert('close');
}, 2500);
})
document.querySelector(".multisteps-form__form").addEventListener("submit", function (event) {
event.preventDefault(); // Mencegah reload halaman
let form = this;
let formData = new FormData(form);
let submitButton = form.querySelector("button[type='submit']");
// Nonaktifkan tombol untuk mencegah spam klik
submitButton.disabled = true;
submitButton.innerText = "Mengirim...";
// Hapus pesan error sebelumnya
form.querySelectorAll(".text-danger").forEach(el => el.remove());
fetch(form.action, {
method: "POST",
body: formData,
headers: {
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-TOKEN": document.querySelector("meta[name='csrf-token']").getAttribute("content")
}
})
.then(response => response.json().then(data => ({
status: response.status,
body: data
})))
.then(({
status,
body
}) => {
if (status === 200) {
// **Update Progress Bar**
document.getElementById("progressBar").style.width = "100%";
// **Tambahkan class 'active' ke step berikutnya**
document.querySelectorAll(".step")[1].classList.add("active");
// Jika berhasil, tampilkan pesan sukses
document.querySelector(".multisteps-form__content").innerHTML = `
<div class="text-center">
<h2 class="text-success">Pendaftaran Berhasil</h2>
<p>Terima kasih telah mendaftar. Kami akan segera menghubungi Anda.</p>
<a href="" class="btn" style="background: #028284; color: white; border: none;">Kembali ke Beranda</a>
</div>`;
} else if (status === 422) {
// Jika validasi gagal, tampilkan error di bawah input
for (let field in body.errors) {
let inputField = document.querySelector(`[name="${field}"]`);
if (inputField) {
let errorDiv = document.createElement("div");
errorDiv.classList.add("text-danger");
errorDiv.innerText = body.errors[field][0];
inputField.parentNode.appendChild(errorDiv);
}
}
} else {
Swal.fire({
icon: "error",
title: "Gagal mengirim data",
text: body.message || "Terjadi kesalahan saat mengirim data."
});
}
})
.catch(error => {
console.error("Error:", error);
Swal.fire({
icon: "error",
title: "Gagal mengirim data",
text: "Terjadi kesalahan saat mengirim data. Silakan coba lagi."
});
})
.finally(() => {
submitButton.disabled = false;
submitButton.innerText = "Kirim Lamaran";
});
});;
</script>
<!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
<script src="{{ asset('/') }}assets/js/argon-dashboard.js"></script>
<!-- pdf make -->
<script src="{{ asset('/') }}assets/js/pdfmake/pdfmake.min.js"></script>
<script src="{{ asset('/') }}assets/js/pdfmake/vfs_fonts.js"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('/') }}assets/js/sweetalert2.all.min.js"></script>
<!-- Data table baru -->
<script src="{{ asset('/') }}assets/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('/') }}assets/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('/') }}assets/js/buttons.html5.min.js"></script>
<script src="{{ asset('/') }}assets/js/buttons.print.min.js"></script>
<script src="{{ asset('/') }}assets/js/jszip.min.js"></script>
{{-- add js --}}
@stack('js')
@stack('addjs')
</body>