463 lines
31 KiB
PHP
463 lines
31 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Sirkulasi Peminjaman')
|
|
|
|
@section('content')
|
|
<div x-data="{
|
|
isModalPeminjamanOpen: {{ ($errors->any() && !old('_method')) ? 'true' : 'false' }},
|
|
isModalKembaliOpen: false,
|
|
isModalEditOpen: {{ ($errors->any() && old('_method') == 'PUT') ? 'true' : 'false' }},
|
|
isModalDeleteOpen: false,
|
|
deleteId: '',
|
|
editData: {
|
|
id: '{{ old('peminjaman_id_edit') ?? '' }}',
|
|
id_anggota: '{{ old('id_anggota') ?? '' }}',
|
|
id_buku: '{{ old('id_buku') ?? '' }}',
|
|
tanggal_pinjam: '{{ old('tanggal_pinjam') ?? '' }}',
|
|
tanggal_kembali: '{{ old('tanggal_kembali') ?? '' }}'
|
|
},
|
|
openEditModal(id, anggotaId, buku, pinjam, kembali) {
|
|
this.editData = { id: id, id_anggota: anggotaId, id_buku: buku, tanggal_pinjam: pinjam, tanggal_kembali: kembali };
|
|
this.isModalEditOpen = true;
|
|
},
|
|
openDeleteModal(id) {
|
|
this.deleteId = id;
|
|
this.isModalDeleteOpen = true;
|
|
},
|
|
kembaliData: { id: '', judul: '', tgl_pinjam: '', tgl_tenggat: '', denda: 0 },
|
|
uangDibayar: '',
|
|
get kembalian() {
|
|
if (!this.uangDibayar) return 0;
|
|
return Math.max(0, this.uangDibayar - this.kembaliData.denda);
|
|
},
|
|
openKembaliModal(id, judul, pinjam, tenggat, denda) {
|
|
this.kembaliData = { id: id, judul: judul, tgl_pinjam: pinjam, tgl_tenggat: tenggat, denda: denda };
|
|
this.uangDibayar = '';
|
|
this.isModalKembaliOpen = true;
|
|
}
|
|
}" x-cloak>
|
|
<x-page-header title="Sirkulasi Peminjaman Buku">
|
|
<x-slot name="actions">
|
|
<div class="flex flex-col sm:flex-row gap-2 items-center">
|
|
<!-- Search Form -->
|
|
<form action="{{ route('admin.peminjaman.index') }}" method="GET" class="relative w-full sm:w-auto flex">
|
|
<div class="relative flex-grow min-w-[200px]">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
<i class="fas fa-search text-gray-400"></i>
|
|
</div>
|
|
<input type="text" name="search" value="{{ $search ?? '' }}"
|
|
class="bg-white border border-gray-200 border-r-0 text-gray-900 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-9 px-3 py-2.5 shadow-sm transition-all outline-none"
|
|
placeholder="Cari judul/anggota...">
|
|
</div>
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 text-sm rounded-r-lg font-bold shadow-sm transition-colors border-y border-r border-blue-600 focus:ring-2 focus:ring-blue-300">
|
|
Cari
|
|
</button>
|
|
@if(request('search'))
|
|
<a href="{{ route('admin.peminjaman.index') }}" class="ml-2 bg-gray-100 hover:bg-red-50 border border-gray-200 text-gray-500 hover:text-red-500 px-3 flex items-center justify-center rounded-lg shadow-sm transition-colors" title="Reset Pencarian">
|
|
<i class="fas fa-times"></i>
|
|
</a>
|
|
@endif
|
|
</form>
|
|
|
|
<button @click="isModalPeminjamanOpen = true" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-lg border border-transparent shadow-[0_4px_10px_rgba(37,99,235,0.2)] hover:shadow-[0_6px_15px_rgba(37,99,235,0.3)] transition-all font-semibold flex items-center gap-2 transform hover:translate-y-[-1px]">
|
|
<i class="fas fa-plus mr-1"></i> Catat Peminjaman Baru
|
|
</button>
|
|
</div>
|
|
</x-slot>
|
|
</x-page-header>
|
|
|
|
<x-alert type="success" :message="session('success')" />
|
|
|
|
<x-card>
|
|
<x-table>
|
|
<x-slot name="head">
|
|
<x-th>Anggota</x-th>
|
|
<x-th>Buku</x-th>
|
|
<x-th>Durasi Pinjam</x-th>
|
|
<x-th class="text-center">Status</x-th>
|
|
<x-th class="text-right">Aksi</x-th>
|
|
</x-slot>
|
|
|
|
@forelse ($peminjaman as $item)
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
@if($item->anggota)
|
|
<div class="text-sm font-bold text-gray-900">{{ $item->anggota->nama }}</div>
|
|
<div class="text-xs text-gray-500 mt-0.5">ID: {{ $item->anggota->no_identitas }}</div>
|
|
<div class="inline-flex items-center gap-1.5 px-2 py-1 mt-1.5 rounded bg-green-50 text-green-700 text-[11px] font-bold border border-green-200">
|
|
<i class="fab fa-whatsapp text-green-600"></i> {{ $item->anggota->no_hp ?? '-' }}
|
|
</div>
|
|
@else
|
|
<div class="text-sm font-bold text-gray-900">{{ $item->user?->name ?? 'Anonim' }}</div>
|
|
<div class="text-[10px] text-amber-600 font-bold uppercase italic">Riwayat User Lama</div>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm font-bold text-gray-900 line-clamp-1">{{ $item->buku->judul ?? 'Buku Dihapus' }}</div>
|
|
<div class="text-sm text-gray-500">{{ $item->buku->nomor_panggil ?? '-' }}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }} -
|
|
{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center">
|
|
@if($item->status_peminjaman == 'Dipinjam')
|
|
@if(\Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay()->lt(\Carbon\Carbon::now()->startOfDay()))
|
|
@php
|
|
$selisihHari = \Carbon\Carbon::now()->startOfDay()->diffInDays(\Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay());
|
|
$estimasiDenda = $selisihHari * 1000;
|
|
@endphp
|
|
<x-badge color="red"><i class="fas fa-exclamation-triangle mr-1"></i> Terlambat</x-badge>
|
|
<div class="text-[10px] text-red-600 mt-1 font-bold animate-pulse">Denda berjalan: Rp {{ number_format($estimasiDenda, 0, ',', '.') }}</div>
|
|
@else
|
|
<x-badge color="yellow">Aktif Dipinjam</x-badge>
|
|
@endif
|
|
@else
|
|
<x-badge color="green">Selesai</x-badge>
|
|
@if($item->denda > 0)
|
|
<div class="text-xs text-red-600 font-bold mt-1">Denda: Rp {{ number_format($item->denda, 0, ',', '.') }}</div>
|
|
@endif
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div class="flex items-center justify-end gap-2">
|
|
@if($item->status_peminjaman == 'Dipinjam')
|
|
@php
|
|
$dendaItem = 0;
|
|
$tglTenggat = \Carbon\Carbon::parse($item->tanggal_kembali)->startOfDay();
|
|
$tglSekarang = \Carbon\Carbon::now()->startOfDay();
|
|
if ($tglSekarang->gt($tglTenggat)) {
|
|
$dendaItem = $tglSekarang->diffInDays($tglTenggat) * 1000;
|
|
}
|
|
@endphp
|
|
<button type="button"
|
|
@click="openKembaliModal('{{ $item->id_peminjaman }}', '{{ addslashes($item->buku->judul ?? 'Buku Dihapus') }}', '{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }}', '{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}', {{ $dendaItem }})"
|
|
class="bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1.5 rounded text-xs font-bold transition">
|
|
Kembalikan
|
|
</button>
|
|
@else
|
|
<span class="text-green-600 font-bold px-3 py-1.5 text-xs bg-green-50 rounded border border-green-200 flex items-center">Tuntas</span>
|
|
@endif
|
|
<a href="{{ route('admin.peminjaman.struk', $item->id_peminjaman) }}" target="_blank" class="bg-gray-800 text-white hover:bg-gray-900 px-3 py-1.5 rounded text-xs font-bold transition flex items-center">Cetak Struk</a>
|
|
@if($item->status_peminjaman == 'Dipinjam')
|
|
<button type="button" @click="openEditModal('{{ $item->id_peminjaman }}', '{{ $item->id_anggota ?? $item->id_user }}', '{{ $item->id_buku }}', '{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('Y-m-d') }}', '{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('Y-m-d') }}')" class="bg-yellow-100 text-yellow-700 hover:bg-yellow-200 px-2 py-1.5 rounded text-xs font-bold transition flex items-center" title="Edit Transaksi">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
@endif
|
|
<button type="button" @click="openDeleteModal('{{ $item->id_peminjaman }}')" class="bg-red-100 text-red-700 hover:bg-red-200 px-2 py-1.5 rounded text-xs font-bold transition flex items-center" title="Hapus Permanen">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
|
|
Belum ada rekam jejak transaksi.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</x-table>
|
|
|
|
<div class="mt-4">
|
|
{{ $peminjaman->links() }}
|
|
</div>
|
|
</x-card>
|
|
|
|
<!-- MODAL TAMBAH PEMINJAMAN -->
|
|
<div x-show="isModalPeminjamanOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<!-- Background overlay -->
|
|
<div x-show="isModalPeminjamanOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalPeminjamanOpen = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<!-- Modal panel -->
|
|
<div x-show="isModalPeminjamanOpen"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-blue-500/10 sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-8 border border-gray-100">
|
|
|
|
<div class="flex justify-between items-center mb-6 pl-2">
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900" id="modal-title">Formulir Peminjaman Buku</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Pilih anggota dan judul buku yang akan dipinjamkan.</p>
|
|
</div>
|
|
<button @click="isModalPeminjamanOpen = false" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
|
|
<i class="fas fa-times text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
@if ($errors->any())
|
|
<div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm" role="alert">
|
|
<p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
|
|
<ul class="list-disc ml-5 space-y-1">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('admin.peminjaman.store') }}" method="POST" class="space-y-6">
|
|
@csrf
|
|
|
|
<div>
|
|
<x-input-label value="Pilih Anggota / Member" />
|
|
<select name="id_anggota" x-init="new TomSelect($el, {maxOptions: null})" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
|
|
<option value="">-- Pilih Member --</option>
|
|
@foreach($anggota as $a)
|
|
<option value="{{ $a->id }}" {{ old('id_anggota') == $a->id ? 'selected' : '' }}>
|
|
{{ $a->nama }} ({{ $a->no_identitas }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label value="Pilih Buku (Hanya yang tersedia)" />
|
|
<select name="id_buku" x-init="new TomSelect($el, {maxOptions: null})" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
|
|
<option value="">-- Pilih Buku --</option>
|
|
@foreach($buku as $b)
|
|
<option value="{{ $b->id_buku }}" {{ old('id_buku') == $b->id_buku ? 'selected' : '' }}>
|
|
{{ $b->bibid }} - {{ $b->judul }} (Stok: {{ $b->eksemplar }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<x-input-label value="Tanggal Pinjam" />
|
|
<x-text-input type="date" name="tanggal_pinjam" value="{{ old('tanggal_pinjam', date('Y-m-d')) }}" class="mt-1 block w-full bg-gray-50/50" required />
|
|
</div>
|
|
<div>
|
|
<x-input-label value="Tanggal Kembali (Tenggat)" />
|
|
<x-text-input type="date" name="tanggal_kembali" value="{{ old('tanggal_kembali', date('Y-m-d', strtotime('+7 days'))) }}" class="mt-1 block w-full bg-gray-50/50" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
|
|
<button type="button" @click="isModalPeminjamanOpen = false" class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
|
|
Batal
|
|
</button>
|
|
<button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105">
|
|
<i class="fas fa-check-circle mr-2"></i> Eksekusi Transaksi
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- MODAL PENGEMBALIAN & PEMBAYARAN DENDA -->
|
|
<div x-show="isModalKembaliOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-kembali-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div x-show="isModalKembaliOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalKembaliOpen = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div x-show="isModalKembaliOpen"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-blue-500/10 sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-8 border border-gray-100">
|
|
|
|
<div class="flex justify-between items-center mb-6 pl-2 border-b pb-4">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-900" id="modal-kembali-title">Detail Pengembalian</h3>
|
|
<p class="text-xs text-gray-500 mt-1">Selesaikan transaksi peminjaman buku ini.</p>
|
|
</div>
|
|
<button @click="isModalKembaliOpen = false" class="w-8 h-8 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
|
|
<i class="fas fa-times text-sm"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-3 mb-5 bg-gray-50 p-4 rounded-xl border border-gray-100">
|
|
<div class="flex justify-between border-b border-gray-200 pb-2">
|
|
<span class="text-xs font-semibold text-gray-500">Judul Buku</span>
|
|
<span class="text-xs font-bold text-gray-900 text-right" x-text="kembaliData.judul"></span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-gray-200 pb-2">
|
|
<span class="text-xs font-semibold text-gray-500">Tanggal Peminjaman</span>
|
|
<span class="text-xs font-bold text-gray-900" x-text="kembaliData.tgl_pinjam"></span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-gray-200 pb-2">
|
|
<span class="text-xs font-semibold text-gray-500">Tenggat Pengembalian</span>
|
|
<span class="text-xs font-bold text-gray-900" x-text="kembaliData.tgl_tenggat"></span>
|
|
</div>
|
|
<div class="flex justify-between items-center pt-2">
|
|
<span class="text-xs font-bold text-red-600">Total Denda</span>
|
|
<span class="text-lg font-black text-red-700" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(kembaliData.denda)"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<template x-if="kembaliData.denda > 0">
|
|
<div class="bg-red-50 p-4 rounded-xl border border-red-100 mb-5">
|
|
<h4 class="text-xs font-bold text-red-800 mb-2"><i class="fas fa-money-bill-wave mr-1"></i>Pembayaran Denda</h4>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label class="block text-[10px] font-semibold text-red-700 mb-1 uppercase tracking-wider">Uang yang Dibayar (Rp)</label>
|
|
<input type="number" x-model.number="uangDibayar" min="0" class="w-full text-sm border-red-200 focus:border-red-500 focus:ring-red-500 rounded-lg shadow-sm bg-white" placeholder="Nominal uang...">
|
|
</div>
|
|
<div class="flex justify-between items-center bg-white p-2.5 rounded-lg border border-red-100 shadow-sm">
|
|
<span class="text-xs font-bold text-gray-600">Kembalian:</span>
|
|
<span class="text-base font-black text-green-600" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(kembalian)"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template x-if="kembaliData.denda == 0">
|
|
<div class="bg-green-50 text-green-700 p-3 rounded-lg text-center font-bold text-xs mb-5 border border-green-100">
|
|
<i class="fas fa-check-circle mr-1"></i> Tidak ada denda keterlambatan.
|
|
</div>
|
|
</template>
|
|
|
|
<form :action="'/admin/peminjaman/' + kembaliData.id + '/kembali'" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="flex items-center justify-end gap-2 pt-3 border-t border-gray-100">
|
|
<button type="button" @click="isModalKembaliOpen = false" class="px-4 py-2 text-xs text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold transition-colors">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-xs font-bold shadow-md transition-all"
|
|
:disabled="kembaliData.denda > 0 && uangDibayar < kembaliData.denda"
|
|
:class="(kembaliData.denda > 0 && uangDibayar < kembaliData.denda) ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105'">
|
|
<i class="fas fa-save mr-1"></i> Selesaikan Transaksi
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL EDIT PEMINJAMAN -->
|
|
<div x-show="isModalEditOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div x-show="isModalEditOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalEditOpen = false"></div>
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
<div x-show="isModalEditOpen"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-8 border border-gray-100">
|
|
|
|
<div class="flex justify-between items-center mb-6 pl-2">
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900">Ubah Data Peminjaman</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Perbarui informasi transaksi peminjaman.</p>
|
|
</div>
|
|
<button @click="isModalEditOpen = false" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
|
|
<i class="fas fa-times text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form :action="'/admin/peminjaman/' + editData.id" method="POST" class="space-y-6">
|
|
@csrf
|
|
@method('PUT')
|
|
<input type="hidden" name="peminjaman_id_edit" :value="editData.id">
|
|
|
|
<div>
|
|
<x-input-label value="Pilih Anggota / Member" />
|
|
<select name="id_anggota" x-model="editData.id_anggota" x-init="let tsA = null; $watch('isModalEditOpen', value => { if(value && !tsA && $el.offsetHeight) setTimeout(() => { try { tsA = new TomSelect($el, {maxOptions: null}); } catch(e){} }, 100) })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
|
|
<option value="">-- Pilih Member --</option>
|
|
@foreach($anggota as $a)
|
|
<option value="{{ $a->id }}">{{ $a->nama }} ({{ $a->no_identitas }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label value="Pilih Buku" />
|
|
<select name="id_buku" x-model="editData.id_buku" x-init="let tsB = null; $watch('isModalEditOpen', value => { if(value && !tsB && $el.offsetHeight) setTimeout(() => { try { tsB = new TomSelect($el, {maxOptions: null}); } catch(e){} }, 100) })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
|
|
<option value="">-- Pilih Buku --</option>
|
|
@foreach($buku as $b)
|
|
<option value="{{ $b->id_buku }}">{{ $b->bibid }} - {{ $b->judul }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<x-input-label value="Tanggal Pinjam" />
|
|
<x-text-input type="date" name="tanggal_pinjam" x-model="editData.tanggal_pinjam" class="mt-1 block w-full bg-gray-50/50" required />
|
|
</div>
|
|
<div>
|
|
<x-input-label value="Tanggal Kembali (Tenggat)" />
|
|
<x-text-input type="date" name="tanggal_kembali" x-model="editData.tanggal_kembali" class="mt-1 block w-full bg-gray-50/50" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
|
|
<button type="button" @click="isModalEditOpen = false" class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-xl font-semibold transition-colors">Batal</button>
|
|
<button type="submit" class="bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg transition-all transform hover:scale-105">
|
|
<i class="fas fa-save mr-2"></i> Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL KONFIRMASI HAPUS PREMIUM -->
|
|
<div x-show="isModalDeleteOpen"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm" @click="isModalDeleteOpen = false"></div>
|
|
|
|
<div x-show="isModalDeleteOpen"
|
|
x-transition:enter="transition ease-out duration-300 transform"
|
|
x-transition:enter-start="opacity-0 scale-95 translate-y-4"
|
|
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
|
|
class="relative bg-white rounded-[2rem] shadow-2xl max-w-md w-full p-8 overflow-hidden border border-gray-100">
|
|
|
|
<div class="absolute top-0 right-0 p-4">
|
|
<button @click="isModalDeleteOpen = false" class="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="mx-auto flex items-center justify-center h-20 w-20 rounded-full bg-red-50 mb-6">
|
|
<div class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center animate-pulse">
|
|
<i class="fas fa-trash-alt text-2xl text-red-600"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-black text-gray-900 mb-2">Hapus Transaksi?</h3>
|
|
<p class="text-gray-500 mb-8 px-4 leading-relaxed">Data peminjaman ini akan dihapus permanen. Stok buku akan otomatis dikembalikan jika status masih dipinjam.</p>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<form :action="'/admin/peminjaman/' + deleteId" method="POST" class="w-full m-0">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="w-full py-4 bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white rounded-2xl font-bold shadow-lg shadow-red-500/30 transition-all transform hover:scale-[1.02] active:scale-95">
|
|
Ya, Hapus Sekarang
|
|
</button>
|
|
</form>
|
|
<button @click="isModalDeleteOpen = false" class="w-full py-4 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-2xl font-bold transition-all">
|
|
Batalkan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection |