@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 Outgoing & DP Request</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <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>
                                    @foreach ($list as $dp)
                                        @if ($dp->status === 'E')
                                            <form id="reverseForm_{{ $dp->id }}" style="display: none;">
                                                @csrf
                                                <button type="button" class="btn btn-danger mb-0"
                                                    onclick="showConfirmationReverse('{{ $dp->id }}')">
                                                    <span class="fa fa-trash me-1"></span>Hapus
                                                </button>
                                            </form>
                                        @endif

                                        <form id="printForm_{{ $dp->id }}" style="display: none;">
                                            @csrf
                                            <a href="#" class="btn btn-secondary mb-0"
                                                onclick="printReport('{{ $dp->id }}')">
                                                <span class="fa fa-print me-1"></span>Print
                                            </a>
                                        </form>
                                    @endforeach

                                </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</h5>
                                            </div>
                                            <hr class="horizontal dark">
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" id="id" name="id"
                                                    placeholder="ID Transaksi" required>
                                                <span class="input-group-text bg-primary btn-search text-light"
                                                    data-bs-toggle="modal" data-bs-target="#searchModalTanterima"
                                                    style="cursor: pointer; margin-right: 5px;">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                                <span class="input-group-text bg-success text-light"
                                                    onclick="viewSelectedOutgoing()" style="cursor: pointer;">
                                                    <i class="fas fa-eye"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Modal untuk menampilkan list Outgoing -->
                            <div class="modal fade" id="listDpRequestModal" tabindex="-1" role="dialog"
                                aria-labelledby="listDpRequestModalLabel" 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="listDpRequestModalLabel">List Transaksi</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</th>
                                                            <th scope="col">Vendor</th>
                                                            <th scope="col">Note</th>
                                                            <th scope="col">Kategori</th>
                                                            <th scope="col">Tanggal Terima</th>
                                                            <th scope="col">Department</th>
                                                            <th scope="col">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($list as $dp)
                                                            <tr>
                                                                <td scope="row">
                                                                    @if ($dp->status !== 'C')
                                                                        <span class="btn badge bg-success"
                                                                            onclick="select_pro_id('{{ $dp->id }}', '{{ $dp->status }}')">
                                                                            Select
                                                                        </span>
                                                                    @else
                                                                        <span class="btn badge bg-secondary">
                                                                            <i class="fa fa-check-circle-o me-1"></i>
                                                                            Select
                                                                        </span>
                                                                    @endif
                                                                </td>
                                                                <td>{{ $dp->id }}</td>
                                                                <td>{{ $dp->nama_vendor }}</td>
                                                                <td>{!! nl2br(e($dp->note_kasir)) !!}</td>
                                                                <td>{{ $dp->desc }}</td>
                                                                <td>{{ $dp->tanggal_terima }}</td>
                                                                <td>{{ $dp->nama_dept }}</td>
                                                                <td>
                                                                    @if ($dp->status == 'E')
                                                                        <span class="badge bg-info">Entry</span>
                                                                    @elseif ($dp->status == 'C')
                                                                        <span class="badge bg-danger">Cancel</span>
                                                                    @else
                                                                        <span class="badge bg-success">Finish</span>
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $('#list_{{ $dmenu }}').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Menampilkan _TOTAL_ Data",
                "infoEmpty": "Menampilkan 0 Data",
                "infoFiltered": ""
            },
            responsive: true,
        });

        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }
    </script>
    <script>
        function select_pro_id(id, status) {
            document.getElementsByName('id')[0].value = id;

            $('#listDpRequestModal').modal('hide');
            // Sembunyikan semua tombol secara default
            var reverseForms = document.querySelectorAll('[id^="reverseForm_"]');
            reverseForms.forEach(function(form) {
                form.style.display = 'none';
            });

            var printForms = document.querySelectorAll('[id^="printForm_"]');
            printForms.forEach(function(form) {
                form.style.display = 'none';
            });

            // Periksa status penerimaan Outgoing
            if (status === 'E') { // Entry
                // Tampilkan tombol "Edit"
                document.getElementById('editButton').style.display = 'inline-block';
                // Perbarui URL tautan "Edit" dengan ID yang dipilih
                var editButton = document.getElementById('editButton');
                editButton.href = "{{ url($url_menu . '/edit' . '/') }}/" + id;

                // Tampilkan tombol "Print" yang sesuai
                var printForm = document.getElementById('printForm_' + id);
                // Tampilkan kedua tombol
                printForm.style.display = 'inline-block';
                // Set target _blank untuk membuka di tab baru
                printForm.target = '_blank';
            } else {
                var printForm = document.getElementById('printForm_' + id);
                // Sembunyikan tombol "Edit" dan "Print" jika status bukan 'Entry'
                document.getElementById('editButton').style.display = 'none';
                printForm.style.display = 'none';
            }

            //Tampilkan tombol "Reverse" jika status adalah 'Entry'
            if (status === 'E') {
                var reverseForm = document.getElementById('reverseForm_' + id);
                reverseForm.style.display = 'inline-block';
                reverseForm.href = "{{ url($url_menu . '/reverse' . '/') }}/" + id;
            } else {
                // Sembunyikan tombol "Reverse" jika status bukan 'Entry'
                var reverseForm = document.getElementById('reverseForm_' + id);
                reverseForm.style.display = 'none';
            }

        }
    </script>
    <script>
        function printReport(id) {
            var url = "{{ url($url_menu) . '/print' }}/" + id;
            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 viewSelectedOutgoing() {
            var selectedDPRequest = document.getElementById('id').value;
            if (selectedDPRequest) {
                // Memisahkan ID Rekam Medis dan lainnya
                var dpRequestArray = selectedDPRequest.split(' - ');
                var DpRequestId = dpRequestArray[0];
                window.location.href = "{{ url($url_menu . '/show' . '/') }}/" + DpRequestId;
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih Outgoing dengan tepat!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }
    </script>
    <script>
        function showConfirmationReverse(id) {
            const baseUrl = "{{ url($url_menu) }}";
            const reverseUrl = `${baseUrl}/reverse/${id}`;

            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Ingin membatalkan Outgoing dengan ID ' + id + '?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, batalkan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    reversePenerimaan(reverseUrl);
                }
            });
        }

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

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