{{-- resources/views/yayasan/transaksi/pengeluaran-kas/show.blade.php --}}

@extends('layouts.app')

@section('title', 'Detail Ajuan Pengeluaran Kas: ' . $pengeluaranKa->no_referensi)

@section('content')

<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Detail Pengeluaran Kas: {{ $pengeluaranKa->no_referensi }}</h3>
                            <div class="nk-block-des text-soft">
                                <p>Informasi lengkap transaksi pengeluaran kas.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            <a href="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.index') }}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex">
                                <em class="icon ni ni-arrow-left"></em>
                                <span>Kembali ke Daftar Pengeluaran Kas</span>
                            </a>
                            @if ($pengeluaranKa->status == 'draft' || $pengeluaranKa->status == 'revision')
                            <a href="javascript:void(0)" class="btn btn-outline-light bg-primary d-none d-sm-inline-flex text-white" onclick="event.preventDefault();
                                Swal.fire({
                                    title: 'Submit Transaksi?',
                                    text: 'Apakah Anda yakin ingin mengajukan transaksi ini?',
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonText: 'Ya, ajukan!',
                                    cancelButtonText: 'Batal'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        document.getElementById('submit-form-{{ $pengeluaranKa->id }}').submit();
                                    }
                                });
                                ">
                                <em class="icon ni ni-telegram"></em><span>Submit Transaksi</span>
                            </a>
                            <form id="submit-form-{{ $pengeluaranKa->id }}" action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.approval-process', $pengeluaranKa->id) }}" method="POST" class="d-none">
                                @csrf
                            </form>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Notif --}}
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @elseif (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            <h5 class="card-title">Informasi Transaksi</h5>
                            <hr>
                            <div class="row gy-4">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Tanggal Transaksi:</label>
                                        <div class="form-control-plaintext">{{ $pengeluaranKa->tanggal->format('d F Y') }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Nomor Referensi:</label>
                                        <div class="form-control-plaintext">{{ $pengeluaranKa->no_referensi ?? '-' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Unit Terkait:</label>
                                        <div class="form-control-plaintext">{{ $pengeluaranKa->unit->nama_unit ?? '-' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Metode Pembayaran:</label>
                                        <div class="form-control-plaintext">{{ $pengeluaranKa->metode_pembayaran ?? '-' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Jenis Pengeluaran:</label>
                                        <div class="form-control-plaintext">{{ $pengeluaranKa->jenis_transaksi ?? '-' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">Deskripsi Transaksi:</label>
                                        <div class="form-control-plaintext">{{ $pengeluaranKa->deskripsi }}</div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <br><br>
                            <div class="mt-4 md-12">
                                @if ($pengeluaranKa->status === 'approval')
                                <div class="alert alert-success mb-2 py-2 px-3" role="alert">
                                    Transaksi telah <strong>disetujui</strong> pada {{ $pengeluaranKa->updated_at ? $pengeluaranKa->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                                </div>
                                @elseif ($pengeluaranKa->status === 'draft')
                                <div class="alert alert-secondary mb-2 py-2 px-3" role="alert">
                                    Transaksi masih dalam <strong>draft</strong>
                                </div>
                                @elseif ($pengeluaranKa->status === 'process')
                                <div class="alert alert-info mb-2 py-2 px-3" role="alert">
                                    Transaksi sedang dalam <strong>proses</strong> pada {{ $pengeluaranKa->updated_at ? $pengeluaranKa->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                                </div>
                                @elseif ($pengeluaranKa->status === 'reject')
                                <div class="alert alert-danger mb-2 py-2 px-3" role="alert">
                                    Transaksi telah <strong>ditolak</strong> pada {{ $pengeluaranKa->updated_at ? $pengeluaranKa->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                                </div>
                                @elseif ($pengeluaranKa->status === 'revision')
                                <div class="alert alert-warning mb-2 py-2 px-3" role="alert">
                                    Transaksi menunggu <strong>revisi</strong> pada {{ $pengeluaranKa->updated_at ? $pengeluaranKa->updated_at->format('d F Y') : '-' }} oleh {{ $lastRiwayat->created_by ?? '' }}
                                </div>
                                @else
                                <div class="alert alert-dark mb-2 py-2 px-3" role="alert">
                                    <strong>Status tidak diketahui</strong>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">

                <form method="GET" action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.show', $pengeluaranKa->id) }}" class="mb-3">
                    <div class="row g-3 align-items-center justify-content-end">
                        <div class="col-md-3">
                            <input type="text" id="deskripsi_item" name="deskripsi_item" class="form-control float-end" placeholder="Cari Deskripsi Item" value="{{ request('deskripsi_item') }}" autocomplete="off">
                        </div>
                        <div class="col-md-2">
                            <input type="text" id="periode" name="periode" class="form-control float-end" placeholder="Pilih Bulan & Tahun" value="{{ request('periode') }}" autocomplete="off">
                        </div>
                        <div class="col-md-2">
                            <a href="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.show', $pengeluaranKa->id) }}" class="btn btn-secondary float-end me-2">Reset</a>
                            <button type="submit" class="btn btn-primary float-end me-2">Cari</button>
                        </div>
                    </div>
                </form>

                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        if (window.flatpickr) {
                            flatpickr("#periode", {
                                plugins: [
                                    new monthSelectPlugin({
                                        shorthand: true,
                                        dateFormat: "m-Y",
                                        altFormat: "F Y"
                                    })
                                ],
                                allowInput: true
                            });
                        }
                    });
                </script>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
                <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
                <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">

                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            <h5 class="card-title">Detail Transaksi</h5>
                            <hr>
                            <div class="nk-tb-list nk-tb-ulog">
                                <div class="nk-tb-item nk-tb-head">
                                    <div class="nk-tb-col"><span><strong>No</strong></span></div>
                                    <div class="nk-tb-col"><span><strong>Periode</strong></span></div>
                                    <div class="nk-tb-col"><span><strong>Akun COA</strong></span></div>
                                    <div class="nk-tb-col"><span><strong>Deskripsi Item</strong></span></div>
                                    <div class="nk-tb-col tb-col-md"><span><strong>Unit</strong></span></div>
                                    <div class="nk-tb-col tb-col-md"><span><strong>Pendanaan</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Nominal</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Upload / Download</strong></span></div>
                                </div>
                                @foreach ($detailTransaksi as $detail)
                                    <div class="nk-tb-item">
                                        <div class="nk-tb-col">
                                            <span>{{ ($detailTransaksi->currentPage() - 1) * $detailTransaksi->perPage() + $loop->iteration }}</span>
                                        </div>
                                        <div class="nk-tb-col">
                                            <span>{{ $detail->bulan ?? '' }} - {{ $detail->periode ?? '' }}</span>
                                        </div>
                                        <div class="nk-tb-col">
                                            <span>{{ $detail->akun->kode_akun }} - {{ $detail->akun->nama_akun }}</span>
                                        </div>
                                        <div class="nk-tb-col">
                                            <span>{{ $detail->deskripsi_item ?? '-' }}</span>
                                        </div>
                                        <div class="nk-tb-col tb-col-md">
                                            <span>{{ $detail->unit->nama_unit ?? '-' }}</span>
                                        </div>
                                        <div class="nk-tb-col tb-col-md">
                                            <span>{{ $detail->jenisPendanaan->nama ?? '-' }}</span>
                                        </div>
                                        <div class="nk-tb-col tb-col-md text-end">
                                            <span>Rp. {{ number_format($detail->nominal, 0, ',', '.') }}</span>
                                        </div>
                                        <div class="nk-tb-col tb-col-md text-center">
                                            @if ($pengeluaranKa->status == 'draft')
                                            <a href="javascript:void(0)" class="upload-btn" data-bs-toggle="modal" data-bs-target="#uploadModal" data-detail-id="{{ $detail->id }}">
                                                <em class="icon ni ni-upload" style="font-size: 32px; color: #FFA500;"></em>
                                            </a>
                                            @endif
                                            @if($detail->file)
                                            <br />
                                            <a href="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.download', $detail->id) }}" class="download-btn success">
                                                <b>Download File</b>
                                            </a>
                                            @else
                                                -
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <hr>
                            <div class="d-flex justify-content-end mt-3">
                                {{ $detailTransaksi->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="uploadForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="detail_id" id="detail_id" value="">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">Unggah File</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="formFile" class="form-label">Pilih file</label>
                        <input class="form-control" type="file" id="formFile" name="file" accept=".pdf,image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Unggah</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var uploadModal = document.getElementById('uploadModal');

    uploadModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget; // Button that triggered the modal
        var detailId = button.getAttribute('data-detail-id');
        document.getElementById('detail_id').value = detailId;
        // Clear previous file input
        document.getElementById('formFile').value = '';
    });

    document.getElementById('uploadForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const fileInput = document.getElementById('formFile');
        const file = fileInput.files[0];

        if (!file) {
            Swal.fire({
                    icon: 'warning',
                    title: 'Oops!',
                    text: 'Silakan pilih file terlebih dahulu.',
            });
            return;
        }


        const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif'];
        if (!allowedTypes.includes(file.type)) {
            Swal.fire({
                icon: 'warning',
                title: 'Oops!',
                text: 'Hanya file PDF atau gambar (JPG, PNG, GIF) yang diperbolehkan.',
            });
            return;
        }

        const formData = new FormData();
        formData.append('file', file);
        formData.append('detail_id', document.getElementById('detail_id').value);
        formData.append('_token', '{{ csrf_token() }}');
            fetch('{{ route("yayasan.transaksi.pengeluaran-kas-gaji.upload") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => {
                if (response.ok) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: 'File berhasil diunggah!',
                    }).then(() => {
                        var modal = bootstrap.Modal.getInstance(uploadModal);
                        modal.hide();
                        fileInput.value = '';
                        location.reload(); // or update UI dynamically here instead
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: 'Gagal mengunggah file.',
                    });
                }
            })
            .catch(error => {
                console.error('Terjadi kesalahan:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Kesalahan!',
                    text: 'Terjadi kesalahan saat mengunggah file.',
                });
            });

    });
});
</script>

@endsection