@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Transaksi'])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0">Transaksi Tanda Terima</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        @if (Session::has('message'))
                            <div class="alert alert-{{ Session::get('class') }} alert-dismissible fade show text-light"
                                role="alert">
                                <span class="alert-icon"><i class="ni ni-like-2"></i></span>
                                <span class="alert-text"><strong>{{ Session::get('class') }}</strong>
                                    {{ Session::get('message') }}</span>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        {{-- button add --}}
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                    @endif
                                    <a id="editButton" class="btn btn-warning mb-0" style="display: none;">
                                        <span class="fa fa-edit me-1"></span>Edit</a>

                                    {{-- Single reusable reverse form (dynamically set via JS) --}}
                                    <form id="reverseForm_dynamic" method="POST" style="display: none;">
                                        @csrf
                                        <button type="button" class="btn btn-danger mb-0" id="btnReverseDynamic">
                                            <span class="fa fa-trash me-1"></span>Hapus
                                        </button>
                                    </form>

                                    {{-- Single reusable print form (dynamically set via JS) --}}
                                    <form id="printForm_dynamic" style="display: none;">
                                        @csrf
                                        <a href="#" class="btn btn-secondary mb-0" id="btnPrintDynamic">
                                            <span class="fa fa-print me-1"></span>Print
                                        </a>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="col-lg-6">
                                <div class="row px-2">
                                    <div class="card">
                                        <div class="row">
                                            <div class="card-header col-md-auto">
                                                <h5 class="mb-0">Input ID Tanda Terima</h5>
                                            </div>
                                            <hr class="horizontal dark">
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" id="trs_tanterima"
                                                    name="trs_tanterima" placeholder="ID Tanda Terima" required>
                                                <span class="input-group-text bg-primary btn-search text-light"
                                                    data-bs-toggle="modal" data-bs-target="#listTandaTerimaModal"
                                                    style="cursor: pointer; margin-right: 5px;">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                                <span class="input-group-text bg-success text-light"
                                                    onclick="viewSelectedTandaTerima()" style="cursor: pointer;">
                                                    <i class="fas fa-eye"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Modal untuk menampilkan list tanda terima -->
                            <div class="modal fade" id="listTandaTerimaModal" tabindex="-1" role="dialog"
                                aria-labelledby="listTandaTerimaModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <!-- Tambahkan modal-lg untuk ukuran besar -->
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="listTandaTerimaModalLabel">List Tanda Terima</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body" id="TandaTerima">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-striped"
                                                    id="list_{{ $dmenu }}">
                                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                        <tr>
                                                            <th scope="col">Action</th>
                                                            <th scope="col">ID Tanda Terima</th>
                                                            <th scope="col">Vendor</th>
                                                            <th scope="col">Tanggal Terima</th>
                                                            <th scope="col">Curr</th>
                                                            <th scope="col">Department</th>
                                                            <th scope="col">Note Kasir</th>
                                                            <th scope="col">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {{-- Data will be loaded via AJAX server-side --}}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        // Initialize DataTable with server-side AJAX
        var tandaTerimaTable = $('#list_{{ $dmenu }}').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ url('trtand/get-list-data') }}",
                "type": "GET"
            },
            "columns": [{
                    "data": null,
                    "orderable": false,
                    "searchable": false,
                    "render": function(data, type, row) {
                        if (row.status !== 'C') {
                            return '<span class="btn badge bg-success" onclick="select_pro_id(\'' + row
                                .id_tanterima + '\', \'' + row.nama_vendor.replace(/'/g, "\\'") + '\', \'' +
                                row.status + '\')">Select</span>';
                        } else {
                            return '<span class="btn badge bg-secondary"><i class="fa fa-check-circle-o me-1"></i> Select</span>';
                        }
                    }
                },
                {
                    "data": "id_tanterima"
                },
                {
                    "data": "nama_vendor"
                },
                {
                    "data": "tanggal_terima"
                },
                {
                    "data": "curr"
                },
                {
                    "data": "nama_dept"
                },
                {
                    "data": "note_kasir"
                },
                {
                    "data": "status",
                    "render": function(data) {
                        if (data === 'E') return '<span class="badge bg-info">Entry</span>';
                        if (data === 'C') return '<span class="badge bg-danger">Cancel</span>';
                        return '<span class="badge bg-success">Finish</span>';
                    }
                }
            ],
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Menampilkan _TOTAL_ Data",
                "infoEmpty": "Menampilkan 0 Data",
                "infoFiltered": "",
                "processing": "Memuat data..."
            },
            "order": [
                [1, 'desc']
            ],
            "responsive": true,
            "deferLoading": 0 // Don't load on page load, only when modal opens
        });

        // Load data only when modal opens (lazy loading)
        var modalOpened = false;
        $('#listTandaTerimaModal').on('shown.bs.modal', function() {
            if (!modalOpened) {
                tandaTerimaTable.ajax.reload();
                modalOpened = true;
            }
        });

        // Track selected tanda terima ID and status
        var selectedId = null;
        var selectedStatus = null;

        function select_pro_id(id_tanterima, vendorid, status) {
            selectedId = id_tanterima;
            selectedStatus = status;

            // Update input value
            document.getElementsByName('trs_tanterima')[0].value = id_tanterima + ' - ' + vendorid;

            $('#listTandaTerimaModal').modal('hide');

            // Hide all dynamic buttons first
            $('#reverseForm_dynamic').hide();
            $('#printForm_dynamic').hide();
            $('#editButton').hide();

            if (status === 'E') {
                // Show Edit button
                var editButton = document.getElementById('editButton');
                editButton.style.display = 'inline-block';
                editButton.href = "{{ url($url_menu . '/edit' . '/') }}/" + id_tanterima;

                // Show Reverse button
                var reverseForm = document.getElementById('reverseForm_dynamic');
                reverseForm.style.display = 'inline-block';
                document.getElementById('btnReverseDynamic').onclick = function() {
                    showConfirmationReverse(id_tanterima);
                };

                // Show Print button
                var printForm = document.getElementById('printForm_dynamic');
                printForm.style.display = 'inline-block';
                document.getElementById('btnPrintDynamic').onclick = function() {
                    printReport(id_tanterima);
                };
            }
            // For non-Entry status, all buttons remain hidden
        }
    </script>
    <script>
        function printReport(id_tanterima) {
            var url = "{{ url($url_menu) . '/print' }}/" + id_tanterima;
            console.log('url: ', url);

            // Buat sebuah iframe tersembunyi
            var iframe = document.createElement('iframe');
            iframe.style.position = 'absolute';
            iframe.style.width = '0px';
            iframe.style.height = '0px';
            iframe.style.border = 'none';

            iframe.onload = function() {
                window.frames[this.id].focus();
                window.frames[this.id].print();
                document.body.removeChild(iframe); // Hapus iframe setelah selesai mencetak
            };

            iframe.src = url;
            iframe.id = 'pdfFrame';

            document.body.appendChild(iframe);
        }
    </script>
    <script>
        function viewSelectedTandaTerima() {
            var selectedTandaTerimaId = document.getElementById('trs_tanterima').value;
            if (selectedTandaTerimaId) {
                // Memisahkan ID Rekam Medis dan lainnya
                var tandaTerimaArray = selectedTandaTerimaId.split(' - ');
                var TandaTerimaId = tandaTerimaArray[0]; // Mengambil hanya ID Prolanis
                window.location.href = "{{ url($url_menu . '/show' . '/') }}/" + TandaTerimaId;
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih tanda terima dengan tepat!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }
    </script>
    <script>
        function showConfirmationReverse(id_tanterima) {
            var reverseUrl = "{{ url('tandaTerima/reverse') }}/" + id_tanterima;
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Ingin membatalkan tanda terima dengan ID ' + id_tanterima + ' ?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, batalkan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Jika konfirmasi diterima, kirim permintaan pembatalan
                    reversePenerimaan(reverseUrl);
                }
            });
        }

        function reversePenerimaan(reverseUrl) {
            $.ajax({
                url: reverseUrl,
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Sukses',
                        text: 'Tanda terima berhasil dibatalkan.',
                        icon: 'success',
                        showConfirmButton: true,
                    }).then((result) => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Gagal',
                        text: 'Terjadi kesalahan saat membatalkan tanda terima.',
                        icon: 'error',
                        showConfirmButton: true
                    });
                    console.error(textStatus, errorThrown);
                }
            });
        }
    </script>
    <script>
        $(document).ready(function() {
            $('.btn-search').on('click', function() {
                var index = $(this).closest('tr').index();
                $('#listTandaTerimaModal').modal('show');
                $('#listTandaTerimaModal').data('trigger-source', index);
            });
        });
        // Event listener untuk input form
        $('#trs_tanterima').on('click', function() {
            // Tampilkan modal ketika input form diklik
            $('#listTandaTerimaModal').modal('show');

            // Optional: Store index or other data
            var index = $(this).closest('tr').index();
            $('#listTandaTerimaModal').data('trigger-source', index);
        });
    </script>
@endpush