@extends('layouts.app')
@section('title', 'Data Simpanan')

@section('content')
<a href="{{ url('admin/simpanan/create') }}" class="btn btn-success mb-3"><i class="bi bi-plus-lg"></i> Tambah Simpanan</a>

<div class="card shadow border-0">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover data-table">
                <thead class="table-light">
                    <tr>
                        <th>No</th>
                        <th>No. Simpanan</th>
                        <th>Anggota</th>
                        <th>Jenis</th>
                        <th>Nominal</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($simpanan as $key => $s)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td><span  class="fw-semibold d-block">{{ $s->tanggal->format('d/m/Y') }}</span> <span class="small text-muted">{{ $s->no_simpanan }}</span> </td>                        
                        <td>{{ $s->anggota->nama }}</td>
                        <td>
                            @if($s->jenis_simpanan == 'pokok')
                                <span class="badge bg-primary">Pokok</span>
                            @elseif($s->jenis_simpanan == 'wajib')
                                <span class="badge bg-warning text-dark">Wajib</span>
                            @else
                                <span class="badge bg-info text-dark">Sukarela</span>
                            @endif
                        </td>
                        <td>Rp {{ number_format($s->nominal, 0, ',', '.') }}</td>
                        <td>
                            @if($s->status == 'pending')
                                <span class="badge bg-warning text-dark">Pending</span>
                            @elseif($s->status == 'disetujui')
                                <span class="badge bg-success">Disetujui</span>
                            @else
                                <span class="badge bg-danger">Ditolak</span>
                            @endif
                        </td>
                        <td>
                            <a href="{{ url('admin/simpanan/'.$s->id.'/cetak') }}" target="_blank" class="btn btn-secondary btn-sm" title="Cetak Kwitansi"><i class="bi bi-printer"></i></a>
                            <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#statusModal"
                                data-id="{{ $s->id }}"
                                data-no="{{ $s->no_simpanan }}"
                                data-anggota="{{ $s->anggota->nama }}"
                                data-nominal="Rp {{ number_format($s->nominal, 0, ',', '.') }}"
                                data-jenis="{{ $s->jenis_simpanan }}"
                                data-status="{{ $s->status }}">
                                <i class="bi bi-check-circle"></i> Approve
                            </button>
                            <a href="{{ url('admin/simpanan/'.$s->id.'/edit') }}" class="btn btn-warning btn-sm"><i class="bi bi-pencil"></i></a>
                            <form method="POST" action="{{ url('admin/simpanan/'.$s->id) }}" class="d-inline" onsubmit="return confirm('Hapus simpanan?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Status -->
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Status Simpanan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-1"><strong>No. Simpanan:</strong> <span id="modalNo"></span></p>
                <p class="mb-1"><strong>Anggota:</strong> <span id="modalAnggota"></span></p>
                <p class="mb-1"><strong>Jenis:</strong> <span id="modalJenis"></span></p>
                <p class="mb-1"><strong>Nominal:</strong> <span id="modalNominal"></span></p>
                <p class="mb-1"><strong>Status Saat Ini:</strong> <span id="modalStatus"></span></p>
                <hr>
                <p class="mb-2">Pilih aksi untuk mengubah status:</p>
                <form id="formPending" method="POST" action="">
                    @csrf @method('PUT')
                    <input type="hidden" name="status" value="pending">
                </form>
                <form id="formDisetujui" method="POST" action="">
                    @csrf @method('PUT')
                    <input type="hidden" name="status" value="disetujui">
                </form>
                <form id="formDitolak" method="POST" action="">
                    @csrf @method('PUT')
                    <input type="hidden" name="status" value="ditolak">
                </form>
                <div class="d-flex gap-2 justify-content-center">
                    <button type="submit" form="formPending" class="btn btn-warning px-4">Pending</button>
                    <button type="submit" form="formDisetujui" class="btn btn-success px-4">Disetujui</button>
                    <button type="submit" form="formDitolak" class="btn btn-danger px-4">Ditolak</button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const statusModal = document.getElementById('statusModal');
    statusModal.addEventListener('show.bs.modal', function (event) {
        const btn = event.relatedTarget;
        const id = btn.getAttribute('data-id');
        const no = btn.getAttribute('data-no');
        const anggota = btn.getAttribute('data-anggota');
        const nominal = btn.getAttribute('data-nominal');
        const jenis = btn.getAttribute('data-jenis');
        const status = btn.getAttribute('data-status');

        document.getElementById('modalNo').textContent = no;
        document.getElementById('modalAnggota').textContent = anggota;
        document.getElementById('modalNominal').textContent = nominal;
        document.getElementById('modalJenis').textContent = jenis.charAt(0).toUpperCase() + jenis.slice(1);
        document.getElementById('modalStatus').textContent = status.charAt(0).toUpperCase() + status.slice(1);

        const baseUrl = '{{ url("admin/simpanan") }}';
        document.getElementById('formPending').action = baseUrl + '/' + id + '/status';
        document.getElementById('formDisetujui').action = baseUrl + '/' + id + '/status';
        document.getElementById('formDitolak').action = baseUrl + '/' + id + '/status';
    });
</script>
@endpush
@endsection