@extends('layouts.app')

@section('title', 'Approval Transaksi: ' . $approval->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">Transaksi: {{ $approval->no_referensi }}</h3>
                            <div class="nk-block-des text-soft">
                                <p>Formulir untuk menyetujui transaksi {{ str_replace('_', ' ', $approval->tipe_transaksi) }}.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            <a href="{{ route('yayasan.transaksi.approval.index') }}" class="btn btn-outline-light bg-white d-sm-inline-flex">
                                <em class="icon ni ni-arrow-left"></em>
                                <span>Kembali ke Daftar Transaksi</span>
                            </a>
                            @if ($approval->status ==='draft' || $approval->status === 'process')
                            <button type="button" class="btn btn-success ml-2" data-bs-toggle="modal" data-bs-target="#modalApproval">
                                <em class="icon ni ni-check-circle"></em>
                                <span>Proses Transaksi</span>
                            </button>
                            @endif
                        </div>

                        <div class="modal fade" tabindex="-1" id="modalApproval">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#modalApproval').modal('hide'); return false;">
                                        <em class="icon ni ni-cross"></em>
                                    </a>
                                    <div class="modal-header">
                                        <h5 class="modal-title">Transaksi: {{ $approval->no_referensi }}</h5>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-2"><strong>Tanggal Transaksi:</strong> {{ $approval->tanggal->format('d M Y') }}</div>
                                                    <div class="mb-2"><strong>Nomor Referensi:</strong> {{ $approval->no_referensi ?? '-' }}</div>
                                                    <div class="mb-2"><strong>Unit Terkait:</strong> {{ $approval->unit->nama_unit ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-2"><strong>Nominal:</strong> {{ number_format($approval->nominal, 0, ',', '.') }}</div>
                                                    @if ($approval->is_revisi == '1')
                                                    <div class="mb-2"><strong>Revisi Nominal:</strong> {{ number_format($approval->revisi_nominal, 0, ',', '.') }}</div>
                                                    @endif
                                                    <div class="mb-2"><strong>Jenis Pengeluaran:</strong> {{ $approval->jenis_transaksi ?? '-' }}</div>
                                                    <div class="mb-2"><strong>Deskripsi Transaksi:</strong> {{ $approval->deskripsi }}</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <form action="{{ route('yayasan.transaksi.approval.approval-process', $approval->id) }}" method="POST" class="w-100" id="approvalForm">
                                                        @csrf
                                                        <div class="row mb-3">
                                                            <div class="col-md-6">
                                                                <div class="form-group mb-0">
                                                                    <label for="approval_status" class="form-label">Status Persetujuan</label>
                                                                    <select name="approval_status" id="approval_status" class="form-select" required>
                                                                        <option value="">-- Pilih Status --</option>
                                                                        <option value="approval">Setujui</option>
                                                                        <option value="reject">Tolak</option>
                                                                        <option value="revision">Revisi</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group mb-0" id="reject_note_group">
                                                                    <label for="reject_note" class="form-label">Catatan</label>
                                                                    <input type="text" name="reject_note" id="reject_note" class="form-control" placeholder="Catatan (wajib)" disabled>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="text-end">
                                                            <button type="submit" class="btn btn-primary">Simpan</button>
                                                        </div>
                                                        <script>
                                                            document.getElementById('approval_status').addEventListener('change', function() {
                                                                var status = this.value;
                                                                var noteGroup = document.getElementById('reject_note_group');
                                                                var noteInput = document.getElementById('reject_note');
                                                                if (status === 'reject' || status === 'revision') {
                                                                    noteInput.disabled = false;
                                                                    noteInput.setAttribute('required', 'required');
                                                                } else {
                                                                    noteInput.disabled = true;
                                                                    noteInput.removeAttribute('required');
                                                                    noteInput.value = '';
                                                                }
                                                            });
                                                                // Initialize state on page load
                                                                (function() {
                                                                    var status = document.getElementById('approval_status').value;
                                                                    var noteInput = document.getElementById('reject_note');
                                                                    if (status === 'reject') {
                                                                        noteInput.disabled = false;
                                                                        noteInput.setAttribute('required', 'required');
                                                                    } else {
                                                                        noteInput.disabled = true;
                                                                        noteInput.removeAttribute('required');
                                                                        noteInput.value = '';
                                                                    }
                                                                })();
                                                            </script>
                                                        </form>
                                                        <script>
                                                            document.getElementById('approvalForm').addEventListener('submit', function(e) {
                                                                const status = document.getElementById('approval_status').value;
                                                                let msg = '';
                                                                if (status === 'approval') {
                                                                    msg = 'Yakin ingin menyetujui transaksi ini?';
                                                                } else if (status === 'reject') {
                                                                    msg = 'Yakin ingin menolak transaksi ini?';
                                                                } else if (status === 'revision') {
                                                                    msg = 'Yakin ingin meminta revisi transaksi ini?';
                                                                } else {
                                                                    msg = 'Silakan pilih status terlebih dahulu.';
                                                                    Swal.fire({
                                                                        icon: 'warning',
                                                                        title: 'Peringatan',
                                                                        text: msg,
                                                                    });
                                                                    e.preventDefault();
                                                                    return false;
                                                                }
                                                                e.preventDefault();
                                                                Swal.fire({
                                                                    title: 'Konfirmasi',
                                                                    text: msg,
                                                                    icon: 'question',
                                                                    showCancelButton: true,
                                                                    confirmButtonText: 'Ya',
                                                                    cancelButtonText: 'Batal'
                                                                }).then((result) => {
                                                                    if (result.isConfirmed) {
                                                                        e.target.submit();
                                                                    }
                                                                });
                                                            });
                                                        </script>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-block">
                        <div class="card card-bordered">
                            <div class="card-inner">
                                @if (session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('success') }}
                                </div>
                                @elseif (session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ session('error') }}
                                </div>
                                @elseif (session('warning'))
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    {{ session('warning') }}
                                </div>
                                @endif

                                @if ($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <h5>Terjadi Kesalahan Validasi:</h5>
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                @endif


                                <form action="{{ route('yayasan.transaksi.pengeluaran-kas.update', $approval->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <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">{{ $approval->tanggal->format('d M 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">{{ $approval->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">{{ $approval->unit->nama_unit ?? '-' }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Nominal:</label>
                                                    <div class="form-control-plaintext">{{ number_format($approval->nominal, 0, ',', '.') }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Jenis Pengeluaran:</label>
                                                    <div class="form-control-plaintext">{{ $approval->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">{{ $approval->deskripsi }}</div>
                                                </div>
                                            </div>
                                            @if ($riwayatTransaksi)
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <hr>
                                                    <br>
                                                    <br>
                                                    <div class="md-12">
                                                        @if ($riwayatTransaksi->status_after === 'approval')
                                                        <div class="alert alert-success mb-2 py-2 px-3" role="alert">
                                                            Transaksi telah  <strong>disetujui</strong> pada {{ \Carbon\Carbon::parse($riwayatTransaksi->created_at) ? \Carbon\Carbon::parse($riwayatTransaksi->created_at)->format('d F Y') : '-' }} oleh {{ $riwayatTransaksi->user->name ?? '' }}
                                                        </div>
                                                        @elseif ($riwayatTransaksi->status_after === 'draft')
                                                        <div class="alert alert-secondary mb-2 py-2 px-3" role="alert">
                                                            Transaksi masih dalam  <strong>draft</strong> 
                                                        </div>
                                                        @elseif ($riwayatTransaksi->status_after === 'process')
                                                        <div class="alert alert-info mb-2 py-2 px-3" role="alert">
                                                            Transaksi sedang dalam  <strong>proses</strong> pada {{ \Carbon\Carbon::parse($riwayatTransaksi->created_at) ? \Carbon\Carbon::parse($riwayatTransaksi->created_at)->format('d F Y') : '-' }} oleh {{ $riwayatTransaksi->user->name ?? '' }}
                                                        </div>
                                                        @elseif ($riwayatTransaksi->status_after === 'reject')
                                                        <div class="alert alert-danger mb-2 py-2 px-3" role="alert">
                                                            Transaksi telah  <strong>ditolak</strong> pada {{ \Carbon\Carbon::parse($riwayatTransaksi->created_at) ? \Carbon\Carbon::parse($riwayatTransaksi->created_at)->format('d F Y') : '-' }} oleh {{ $riwayatTransaksi->user->name ?? '' }}
                                                            dengan catatan: <strong>{{ $riwayatTransaksi->notes ?? '-' }}</strong>
                                                        </div>
                                                        @elseif ($riwayatTransaksi->status_after === 'revision')
                                                        <div class="alert alert-warning mb-2 py-2 px-3" role="alert">
                                                            Transaksi menunggu  <strong>revisi</strong> pada {{ \Carbon\Carbon::parse($riwayatTransaksi->created_at) ? \Carbon\Carbon::parse($riwayatTransaksi->created_at)->format('d F Y') : '-' }} oleh {{ $riwayatTransaksi->user->name ?? '' }}
                                                            dengan catatan: <strong>{{ $riwayatTransaksi->notes ?? '-' }}</strong>
                                                        </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>
                                        @endif
                                    </div>
                                </div>


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

                    <form method="GET" action="{{ route('yayasan.transaksi.approval.show-approval', $approval->id) }}" class="mt-4">
                        <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">
                                <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>
                            <div class="col-md-2">
                                <a href="{{ route('yayasan.transaksi.approval.show-approval', $approval->id) }}" class="btn btn-secondary float-end mr-2">Reset</a>
                                <button type="submit" class="btn btn-primary float-end me-2">Cari</button>
                            </div>
                        </div>
                    </form>
                    <div class="card card-bordered mt-4">
                        <div class="card-inner">
                            <div class="card-inner">
                                <div class="detail-transaksi">
                                    <hr class="preview-hr">

                                    <h5 class="title mb-3">Detail Transaksi</h5>
                                    <hr>

                                    @error('details')
                                    <div class="alert alert-danger">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                    @enderror

                                    <div id="detail-container">
                                        <div class="nk-tb-list nk-tb-ulog">
                                            <div class="nk-tb-item nk-tb-head">
                                                <div class="nk-tb-col"><span>No</span></div>
                                                <div class="nk-tb-col"><span><strong>Periode</strong></span></div>
                                                <!--  <div class="nk-tb-col"><span>Akun COA</span></div> -->
                                                <div class="nk-tb-col"><span>Deskripsi Item</span></div>
                                                <div class="nk-tb-col"><span>Catatan</span></div>
                                                <div class="nk-tb-col tb-col-md"><span>Unit</span></div>
                                                <div class="nk-tb-col tb-col-md"><span>Program/Kegiatan</span></div>
                                                <div class="nk-tb-col tb-col-md"><span>Qty / Satuan</span></div>
                                                <div class="nk-tb-col tb-col-md"><span>Harga Satuan</span></div>
                                                <div class="nk-tb-col tb-col-md text-end"><span>Nominal</span></div>
                                                <!-- nominal revisi  -->
                                                @if ($approval->is_revisi == '1')
                                                <div class="nk-tb-col tb-col-md text-end"><span>Detail Revisi</span></div>
                                                @endif
                                                <div class="nk-tb-col"><span>Detail Catatan</span></div>
                                                
                                                <!--  <div class="nk-tb-col tb-col-md text-center"><span><strong>Upload / Download</strong></span></div> -->
                                            </div>
                                            @foreach ($detailTransaksi as $index => $detail)
                                            <div class="nk-tb-item">
                                                <div class="nk-tb-col">
                                                    <span>{{ ($detailTransaksi->currentPage() - 1) * $detailTransaksi->perPage() + $index + 1 }}</span>
                                                </div>
                                                <div class="nk-tb-col">
                                                    <span>{{ $detail->bulan ?? '' }} - {{ $detail->periode ?? '' }}</span>
                                                </div>
                                                <div class="nk-tb-col">
                                                    <span>{{ $detail->deskripsi_item ?? '-' }}</span>
                                                </div>
                                                <div class="nk-tb-col">
                                                    <span>
                                                        {!! \Illuminate\Support\Str::limit(strip_tags($detail->catatan ?? '-'), 20, '...') !!}
                                                    </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->programKegiatan->nama ?? '-' }}</span>
                                                </div>
                                                <div class="nk-tb-col tb-col-md">
                                                    <span>{{ $detail->vol ?? '0' }} {{ $detail->satuan ?? '' }}</span>
                                                </div>
                                                <div class="nk-tb-col tb-col-md">
                                                    <span>{{ number_format($detail->harga_satuan, 0, ',', '.') }}</span>
                                                </div>
                                                <div class="nk-tb-col tb-col-md text-end">
                                                    <span>{{ number_format($detail->nominal, 0, ',', '.') }}</span>
                                                </div>
                                                @if ($approval->is_revisi == '1')
                                                <div class="nk-tb-col tb-col-md">
                                                    <span>
                                                        @if ($detail->revisi_vol)
                                                        <strong>Vol:</strong> {{ $detail->revisi_vol ?? '0' }} <br>
                                                        @endif
                                                        
                                                        @if ($detail->revisi_satuan)
                                                        <strong>Satuan:</strong> {{ $detail->revisi_satuan ?? '' }} <br>
                                                        @endif
                                                        
                                                        @if ($detail->revisi_harga_satuan)
                                                        <strong>Harga Satuan:</strong> {{ number_format($detail->revisi_harga_satuan ?? 0, 0, ',', '.') }} <br>
                                                        @endif

                                                        @if ($detail->revisi_nominal)
                                                        <strong>Nominal:</strong> {{ number_format($detail->revisi_nominal ?? 0, 0, ',', '.') }}
                                                        @endif
                                                    </span>
                                                </div>
                                                @endif
                                                <div class="nk-tb-col">
                                                    <span>
                                                        <a type="button" class="btn btn-xs btn-primary" onclick="showRincian({{ $detail->id }})">
                                                            <em class="icon ni ni-eye" style="font-size: 12px;"></em>
                                                        </a>
                                                    </span>
                                                        <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">
                                                                    <h5 class="modal-title" id="rincianModalLabel{{ $detail->id }}">Detail Catatan</h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <span name="catatan" id="catatan{{ $detail->id }}" rows="10" class="form-control">{!! $detail->catatan !!}</span>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--  <div class="nk-tb-col tb-col-md text-center">
                                                    @if($detail->file)
                                                    <a href="{{ route('yayasan.transaksi.pengeluaran-kas.download', $detail->id) }}" class="download-btn success">
                                                        <em class="icon ni ni-download" style="font-size: 32px; color: #28a745;"></em>
                                                    </a>
                                                        @else
                                                        -
                                                        @endif
                                                    </div> -->
                                                </div>
                                                @endforeach
                                            </div>
                                            <div class="d-flex justify-content-end mt-3">
                                                {{ $detailTransaksi->links('pagination::bootstrap-4') }}
                                            </div>
                                            <hr class="preview-hr">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

    @push('scripts')
    <script>
        function showRincian(id) {
            const rincianModal = document.getElementById('rincianModal' + id);
            const textarea = rincianModal.querySelector('.modal-body textarea');
            // Set the modal body content with the catatan value (HTML)
            const catatanSpan = document.getElementById('catatan' + id);
            if (catatanSpan) {
                rincianModal.querySelector('.modal-body').innerHTML = catatanSpan.innerHTML;
            }

            const modal = new bootstrap.Modal(rincianModal);
            modal.show();
        }
        $(document).ready(function() {
            $('.form-select-2').select2({
                placeholder: "-- Pilih Akun --",
                allowClear: true
            });

            let detailRowIndex = $('#detail-container').children('.detail-row').length;
        });
    </script>
    @endpush