MIF_E31221305/TA_website/resources/views/admin/withdrawals/history.blade.php

363 lines
22 KiB
PHP

@extends('admin.layouts.app')
@section('title', 'Riwayat Penarikan Dana')
@section('content')
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Riwayat Penarikan Dana</h2>
@if (session('success'))
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
<p>{{ session('success') }}</p>
</div>
@endif
@if (session('error'))
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
<p>{{ session('error') }}</p>
</div>
@endif
<div class="mb-6">
<form action="{{ route('admin.withdrawals.history') }}" method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div>
<label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
<select id="status" name="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="">Semua</option>
<option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Selesai</option>
<option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Ditolak</option>
</select>
</div>
<div>
<label for="search" class="block text-sm font-medium text-gray-700 mb-1">Cari</label>
<input type="text" id="search" name="search" value="{{ request('search') }}" placeholder="Nama, no rekening, bank..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="from_date" class="block text-sm font-medium text-gray-700 mb-1">Dari Tanggal</label>
<input type="date" id="from_date" name="from_date" value="{{ request('from_date') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="to_date" class="block text-sm font-medium text-gray-700 mb-1">Sampai Tanggal</label>
<input type="date" id="to_date" name="to_date" value="{{ request('to_date') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="sort_by" class="block text-sm font-medium text-gray-700 mb-1">Urutkan Berdasarkan</label>
<select id="sort_by" name="sort_by" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="processed_at" {{ request('sort_by') == 'processed_at' || !request('sort_by') ? 'selected' : '' }}>Tanggal Diproses</option>
<option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Tanggal Dibuat</option>
<option value="amount" {{ request('sort_by') == 'amount' ? 'selected' : '' }}>Jumlah</option>
</select>
</div>
<div>
<label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">Arah Urutan</label>
<select id="sort_order" name="sort_order" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="desc" {{ request('sort_order') == 'desc' || !request('sort_order') ? 'selected' : '' }}>Turun (Z-A)</option>
<option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Naik (A-Z)</option>
</select>
</div>
<div>
<label for="per_page" class="block text-sm font-medium text-gray-700 mb-1">Item per Halaman</label>
<select id="per_page" name="per_page" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="15" {{ request('per_page') == '15' || !request('per_page') ? 'selected' : '' }}>15</option>
<option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>25</option>
<option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
<option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
</select>
</div>
<div class="md:col-span-2 flex items-end">
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
Filter
</button>
<a href="{{ route('admin.withdrawals.history') }}" class="ml-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
Reset
</a>
</div>
</form>
</div>
@if(empty($withdrawalHistory['data']))
<div class="text-center py-8">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">Tidak ada riwayat penarikan</h3>
<p class="mt-1 text-sm text-gray-500">Tidak ada data penarikan yang selesai atau ditolak.</p>
</div>
@else
<div class="overflow-x-auto">
<table class="min-w-full bg-white">
<thead class="bg-gray-100">
<tr>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Penjahit</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bank</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No. Rekening</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jumlah</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tgl. Diproses</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tgl. Dibuat</th>
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Detail</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
@foreach($withdrawalHistory['data'] as $withdrawal)
<tr>
<td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['id'] }}</td>
<td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['wallet']['user']['name'] }}</td>
<td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['bank_account']['bank_name'] }}</td>
<td class="py-4 px-4 text-sm text-gray-900">{{ $withdrawal['bank_account']['account_number'] }}</td>
<td class="py-4 px-4 text-sm text-gray-900">Rp {{ number_format($withdrawal['amount'], 0, ',', '.') }}</td>
<td class="py-4 px-4 text-sm">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
@if($withdrawal['status'] == 'completed') bg-green-100 text-green-800
@elseif($withdrawal['status'] == 'rejected') bg-red-100 text-red-800
@endif">
@if($withdrawal['status'] == 'completed') Selesai
@elseif($withdrawal['status'] == 'rejected') Ditolak
@else {{ ucfirst($withdrawal['status']) }}
@endif
</span>
</td>
<td class="py-4 px-4 text-sm text-gray-900">{{ \Carbon\Carbon::parse($withdrawal['processed_at'])->format('d M Y H:i') }}</td>
<td class="py-4 px-4 text-sm text-gray-900">{{ \Carbon\Carbon::parse($withdrawal['created_at'])->format('d M Y H:i') }}</td>
<td class="py-4 px-4 text-sm text-gray-900">
<button
type="button"
class="text-blue-600 hover:text-blue-900"
onclick="showWithdrawalDetail({{ json_encode($withdrawal) }})"
>
Lihat
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="mt-4">
<nav class="flex items-center justify-between">
<div class="flex-1 flex justify-between sm:hidden">
@if($withdrawalHistory['prev_page_url'])
<a href="{{ $withdrawalHistory['prev_page_url'] }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
Sebelumnya
</a>
@else
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-500 bg-gray-100 cursor-not-allowed">
Sebelumnya
</span>
@endif
@if($withdrawalHistory['next_page_url'])
<a href="{{ $withdrawalHistory['next_page_url'] }}" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
Selanjutnya
</a>
@else
<span class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-500 bg-gray-100 cursor-not-allowed">
Selanjutnya
</span>
@endif
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
Menampilkan
<span class="font-medium">{{ $withdrawalHistory['from'] ?? 0 }}</span>
sampai
<span class="font-medium">{{ $withdrawalHistory['to'] ?? 0 }}</span>
dari
<span class="font-medium">{{ $withdrawalHistory['total'] ?? 0 }}</span>
hasil
</p>
</div>
<div>
<span class="relative z-0 inline-flex shadow-sm rounded-md">
@foreach($withdrawalHistory['links'] as $link)
@if($link['url'] === null)
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-gray-100 text-sm font-medium text-gray-500 cursor-not-allowed">
{!! $link['label'] !!}
</span>
@else
<a
href="{{ $link['url'] }}"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium {{ $link['active'] ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-50' }}"
aria-current="{{ $link['active'] ? 'page' : '' }}"
>
{!! $link['label'] !!}
</a>
@endif
@endforeach
</span>
</div>
</div>
</nav>
</div>
@endif
</div>
</div>
<!-- Modal Detail Penarikan -->
<div id="withdrawalDetailModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Detail Penarikan Dana
</h3>
<div class="mt-4 border-t border-gray-200 pt-4">
<div class="grid grid-cols-1 gap-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm text-gray-500">ID Penarikan</p>
<p class="font-medium" id="withdrawal-id"></p>
</div>
<div>
<p class="text-sm text-gray-500">Status</p>
<p class="font-medium" id="withdrawal-status"></p>
</div>
</div>
<div>
<p class="text-sm text-gray-500">Nama Penjahit</p>
<p class="font-medium" id="tailor-name"></p>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm text-gray-500">Bank</p>
<p class="font-medium" id="bank-name"></p>
</div>
<div>
<p class="text-sm text-gray-500">Nomor Rekening</p>
<p class="font-medium" id="account-number"></p>
</div>
</div>
<div>
<p class="text-sm text-gray-500">Atas Nama</p>
<p class="font-medium" id="account-holder"></p>
</div>
<div>
<p class="text-sm text-gray-500">Jumlah Penarikan</p>
<p class="font-medium" id="amount"></p>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm text-gray-500">Tanggal Dibuat</p>
<p class="font-medium" id="created-at"></p>
</div>
<div>
<p class="text-sm text-gray-500">Tanggal Diproses</p>
<p class="font-medium" id="processed-at"></p>
</div>
</div>
<div id="rejection-container" class="hidden">
<p class="text-sm text-gray-500">Alasan Penolakan</p>
<p class="font-medium text-red-600" id="rejection-reason"></p>
</div>
<div id="proof-container" class="hidden">
<p class="text-sm text-gray-500">Bukti Pembayaran</p>
<div class="mt-2">
<img id="proof-img" src="" alt="Bukti Pembayaran" class="w-full h-auto object-cover rounded-md">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="closeWithdrawalDetail()">
Tutup
</button>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script>
function showWithdrawalDetail(withdrawal) {
// Set data pada modal
document.getElementById('withdrawal-id').textContent = withdrawal.id;
// Set status
const statusEl = document.getElementById('withdrawal-status');
statusEl.textContent = withdrawal.status === 'completed' ? 'Selesai' : 'Ditolak';
statusEl.className = 'font-medium ' + (withdrawal.status === 'completed' ? 'text-green-600' : 'text-red-600');
// Set informasi penjahit dan bank
document.getElementById('tailor-name').textContent = withdrawal.wallet.user.name;
document.getElementById('bank-name').textContent = withdrawal.bank_account.bank_name;
document.getElementById('account-number').textContent = withdrawal.bank_account.account_number;
document.getElementById('account-holder').textContent = withdrawal.bank_account.account_holder_name;
// Set jumlah penarikan
document.getElementById('amount').textContent = 'Rp ' + new Intl.NumberFormat('id-ID').format(withdrawal.amount);
// Set tanggal
document.getElementById('created-at').textContent = new Date(withdrawal.created_at).toLocaleString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
document.getElementById('processed-at').textContent = new Date(withdrawal.processed_at).toLocaleString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
// Tampilkan alasan penolakan jika ada
const rejectionContainer = document.getElementById('rejection-container');
if (withdrawal.status === 'rejected' && withdrawal.rejection_reason) {
document.getElementById('rejection-reason').textContent = withdrawal.rejection_reason;
rejectionContainer.classList.remove('hidden');
} else {
rejectionContainer.classList.add('hidden');
}
// Tampilkan bukti pembayaran jika ada
const proofContainer = document.getElementById('proof-container');
if (withdrawal.status === 'completed' && withdrawal.proof_of_payment) {
// Gunakan URL API langsung
const proofUrl = `https://api.tailors.stuffly.my.id/storage/${withdrawal.proof_of_payment}`;
document.getElementById('proof-img').src = proofUrl;
proofContainer.classList.remove('hidden');
} else {
proofContainer.classList.add('hidden');
}
// Tampilkan modal
document.getElementById('withdrawalDetailModal').classList.remove('hidden');
}
function closeWithdrawalDetail() {
document.getElementById('withdrawalDetailModal').classList.add('hidden');
}
</script>
@endpush