{{-- 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.index') }}" class="btn btn-outline-light bg-white 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.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.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.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>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 text-center"><span><strong>Vol, Satuan & Harga</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Nominal Diajukan</strong></span></div>
                                    <div class="nk-tb-col tb-col-md text-end"><span><strong>Nominal Diacc</strong></span></div>
                                    @if ($pengeluaranKa->status === 'draft')
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Edit Catatan</strong></span></div>
                                    @else
                                    <div class="nk-tb-col tb-col-md text-center"><span><strong>Detail Catatan</strong></span></div>
                                    @endif
                                </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->deskripsi_item ?? '-' }}</span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md">
                                        <div>
                                            <strong>Unit:</strong> {{ $detail->unit->nama_unit ?? '-' }}
                                        </div>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-center">
                                        <div>
                                            <strong>Vol:</strong> {{ $detail->vol ?? '-' }}
                                        </div>
                                        <div>
                                            <strong>Satuan:</strong> {{ $detail->satuan ?? '-' }}
                                        </div>
                                        <div>
                                            <strong>Harga:</strong> {{ $detail->harga_satuan ? 'Rp ' . number_format($detail->harga_satuan, 0, ',', '.') : '-' }}
                                        </div>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-end">
                                        <span><strong>{{ $detail->nominal_diajukan && $detail->nominal_diajukan > 0 ? 'Rp ' . number_format($detail->nominal_diajukan, 0, ',', '.') : '-' }}</strong></span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-end">
                                        <span><strong>{{ $detail->nominal && $detail->nominal > 0 ? 'Rp ' . number_format($detail->nominal, 0, ',', '.') : '-' }}</strong></span>
                                    </div>
                                    <div class="nk-tb-col tb-col-md text-center">
                                        <span>
                                        @if ($pengeluaranKa->status === 'draft')
                                        <a type="button" class="btn btn-xs btn-primary" onclick="editRincian({{ $detail->id }})">
                                            <em class="icon ni ni-edit" style="font-size: 12px;"></em>
                                        </a>
                                        @else 
                                        <a type="button" class="btn btn-xs btn-primary" onclick="editRincian({{ $detail->id }})">
                                            <em class="icon ni ni-eye" style="font-size: 12px;"></em>
                                        </a>
                                        @endif
                                        <!-- modal rincian -->
                                        <div class="modal fade" id="rincianModal{{ $detail->id }}" tabindex="-1" aria-labelledby="rincianModalLabel{{ $detail->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        @if ($pengeluaranKa->status === 'draft')
                                                        <h5 class="modal-title" id="rincianModalLabel{{ $detail->id }}">Edit Catatan</h5>
                                                        @else
                                                        <h5 class="modal-title" id="rincianModalLabel{{ $detail->id }}">Detail Catatan</h5>
                                                        @endif
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <textarea name="catatan" id="catatan{{ $detail->id }}" rows="10" class="form-control">{{ $detail->catatan }}</textarea>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                                        @if ($pengeluaranKa->status === 'draft')
                                                        <button type="button" class="btn btn-primary" onclick="saveRincian({{ $detail->id }})">Simpan</button>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        </span>
                                    </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>

<!-- Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagePreviewModalLabel">Preview Gambar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body text-center">
                <img id="previewImage" src="" alt="Preview" class="img-fluid" style="max-height: 500px;">
                <div class="mt-3">
                    <small class="text-muted" id="fileName"></small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- PDF Preview Modal -->
<div class="modal fade" id="pdfPreviewModal" tabindex="-1" aria-labelledby="pdfPreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfPreviewModalLabel">Preview PDF</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
                <iframe id="pdfPreviewFrame" src="" width="100%" height="600px" frameborder="0"></iframe>
                <div class="mt-3">
                    <small class="text-muted" id="pdfFileName"></small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    function editRincian(id) {
        const rincianModal = document.getElementById('rincianModal' + id);
        const textarea = rincianModal.querySelector('.modal-body textarea');
        textarea.value = document.getElementById('catatan' + id).value;

        const modal = new bootstrap.Modal(rincianModal);
        modal.show();

        // Destroy old editor if exists
        if (textarea._ckeditorInstance) {
            textarea._ckeditorInstance.destroy();
        }

        // Initialize CKEditor 5
        ClassicEditor.create(textarea, {
            height: '200px'
        }).then(editor => {
            textarea._ckeditorInstance = editor;
        }).catch(error => {
            console.error(error);
        });
    }

    // saveRincian
    function saveRincian(id) {
        const rincianModal = document.getElementById('rincianModal' + id);
        const textarea = rincianModal.querySelector('.modal-body textarea');
        let data;

        if (textarea._ckeditorInstance) {
            data = textarea._ckeditorInstance.getData();
        } else {
            data = textarea.value;
        }

        // AJAX update to server
        fetch("{{ url('yayasan/transaksi/pengeluaran-kas/update-rincian') }}/" + id, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ catatan: data })
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                document.getElementById('catatan' + id).value = data;
                Swal.fire('Berhasil!', 'Rincian item berhasil diperbarui.', 'success');
                //reload
                location.reload();
            } else {
                Swal.fire('Gagal!', 'Gagal memperbarui rincian item.', 'error');
                location.reload();
            }
        })
        .catch(() => {
            Swal.fire('Gagal!', 'Terjadi kesalahan saat memperbarui rincian.', 'error');
            location.reload();
        });

        const modal = bootstrap.Modal.getInstance(rincianModal);
        modal.hide();
    }

    document.addEventListener('DOMContentLoaded', function () {
        var uploadModal = document.getElementById('uploadModal');
        var imagePreviewModal = document.getElementById('imagePreviewModal');
        var pdfPreviewModal = document.getElementById('pdfPreviewModal');

        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 = '';
    });

        imagePreviewModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget; // Button that triggered the modal
        var imageUrl = button.getAttribute('data-image-url');
        var fileName = button.getAttribute('data-file-name');
        
        document.getElementById('previewImage').src = imageUrl;
        document.getElementById('fileName').textContent = fileName;
    });

        pdfPreviewModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget; // Button that triggered the modal
        var pdfUrl = button.getAttribute('data-pdf-url');
        var fileName = button.getAttribute('data-file-name');
        
        document.getElementById('pdfPreviewFrame').src = pdfUrl;
        document.getElementById('pdfFileName').textContent = fileName;
    });

        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.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