@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save"
                            onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i>Simpan</button>
                        @if ($tandaTerima->status == 'E')
                            <a id="editButton" class="btn btn-warning mb-0">
                                <span class="fa fa-edit me-1"></span>Edit</a>
                            <form id="reverseForm_{{ $tandaTerima->id_tanterima }}"
                                action="{{ url('tandaTerima/reverse/' . $tandaTerima->id_tanterima) }}" method="POST"
                                style="display: none;">
                                @csrf
                                <button type="button" class="btn btn-danger mb-0"
                                    onclick="showConfirmationReverse('{{ $tandaTerima->id_tanterima }}')">
                                    <span class="fa fa-trash me-1"></span>Hapus
                                </button>
                            </form>
                        @elseif ($tandaTerima->status === 'F')
                            <form id="reverseForm_{{ $tandaTerima->id_tanterima }}"
                                action="{{ url('tandaTerima/reverse/' . $tandaTerima->id_tanterima) }}" method="POST"
                                style="display: none;">
                                @csrf
                                <button type="button" class="btn btn-danger mb-0"
                                    onclick="showConfirmationReverse('{{ $tandaTerima->id_tanterima }}')">
                                    <span class="fa fa-trash me-1"></span>Reverse
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form role="form" method="POST">
        @csrf
        @method('PUT')
        <div class="container-fluid py-4">
            <!-- Header -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h5>Header</h5>
                            <hr>
                            {{-- checkbox pelunasan --}}
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" value="1" id="isPelunasan"
                                    name="is_pelunasan" disabled>
                                <label class="form-check-label" for="isPelunasan">
                                    Tagihan Pelunasan
                                </label>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="id_tanterima">ID Tanda Terima</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="id_tanterima" name="id_tanterima"
                                                placeholder="ID Tanda Terima" readonly
                                                value="{{ $tandaTerima->id_tanterima }}">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="nama_vendor">Vendor</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="nama_vendor" name="nama_vendor"
                                                required readonly value="{{ $tandaTerima->nama_vendor }}">
                                            <!-- Ubah vendorid menjadi nama_vendor -->
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="tanggal_terima">Tanggal Terima</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="date" class="form-control" id="tanggal_terima"
                                                name="tanggal_terima" required readonly
                                                value="{{ $tandaTerima->tanggal_terima }}">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="top">TOP</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="top" name="top"
                                                required readonly value="{{ $tandaTerima->top }}">
                                        </div>
                                    </div>
                                </div>


                                <div class="col-md-6">
                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="curr">Curr</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="curr" name="curr"
                                                required readonly value="{{ $tandaTerima->curr }}">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="nama_dept">Departemen</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" id="nama_dept" name="nama_dept"
                                                required readonly value="{{ $tandaTerima->nama_dept }}">
                                            <!-- Tambahkan nama_dept -->
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="note_kasir">Note Kasir</label>
                                        </div>
                                        <div class="col-lg-9">
                                            <textarea class="form-control" id="note_kasir" name="note_kasir" readonly rows="4">{{ $tandaTerima->note_kasir }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Detail DP Request --}}
            <div class="col-12" id="cardPelunasan" style="display: none;">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Detail DP Request</h6>
                    </div>
                    <div class="card-body">
                        {{-- <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal"
                            data-bs-target="#modalDPRequest">
                            <i class="fa fa-search me-1"></i> Pilih DP Request
                        </button> --}}

                        <div id="listDPSelected">
                            <!-- List hasil pilihan -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- Detail Kuitansi -->
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h5>Detail Tanda Terima</h5>
                            <hr>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" style="width:100%">
                                    <thead style="background-color: #daecff;">
                                        <tr>
                                            <th scope="col" width="100px">No Kuitansi</th>
                                            <th scope="col" width="100px" style="display:none;">No PO</th>
                                            <th scope="col" width="80px" style="display:none;">TOP</th>
                                            <th scope="col" width="100px">Total Nominal</th>
                                            <th scope="col" width="100px">Tanggal Jatuh Tempo</th>
                                            <th scope="col" width="50px">Kategori Pembayaran</th>
                                            <th scope="col" width="100px">Tanggal Estimasi Pembayaran</th>
                                            <th scope="col" width="50px">Jumlah Invoice</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table-kuitansi">
                                        @foreach ($detail_tt as $d)
                                            <tr>
                                                <td>{{ $d->no_kuitansi }}</td>
                                                <td style="display:none;">
                                                    <div class="input-group overflow-hidden">
                                                        <input type="text" class="form-control" readonly
                                                            value="{{ $d->no_po }}" style="padding-left: 15px">
                                                        <span class="input-group-text bg-primary text-light"
                                                            style="margin-right: 5px;">
                                                            <i class="fas fa-search"></i>
                                                        </span>
                                                    </div>
                                                </td>
                                                <td style="display:none;">{{ $d->top_po }}</td>
                                                <td>{{ number_format($d->nominal, 2, ',', '.') }}</td>
                                                <td>{{ $d->tanggal_jatuh_tempo }}</td>
                                                <td>{{ $d->kategori_pembayaran }}</td>
                                                <td>{{ $d->tanggal_estimasi_pembayaran }}</td>
                                                <td>{{ $d->jumlah_invoice }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
@endsection
@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkbox = document.getElementById('isPelunasan');
            const cardPelunasan = document.getElementById('cardPelunasan');
            const listDPSelected = document.getElementById('listDPSelected');

            const dpSelected = (`{{ $tandaTerima->id_dprequest ?? '' }}`).split(',').filter(Boolean);
            const dpList = @json($dpRequestList); // dari controller

            if (dpSelected.length > 0) {
                checkbox.checked = true;
                cardPelunasan.style.display = 'block';

                dpSelected.forEach(id => {
                    const match = dpList.find(dp => dp.id == id);
                    const nama = match ? match.nama_vendor : 'Nama tidak ditemukan';
                    const nominal = match.total_nominal || '0';
                    const html = `
                        <div class="mb-2 border rounded p-2 bg-light">
                            <span><strong>${id}</strong> - ${nama} - <span class="text-primary">Rp ${nominal}</span></span>
                        </div>
                    `;
                    listDPSelected.insertAdjacentHTML('beforeend', html);
                });
            }
        });

        function showConfirmationReverse(id_tanterima) {
            var reverseUrl = "{{ url('tandaTerima/reverse') }}/" + id_tanterima;
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Ingin membatalkan data 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
                    reverseTanTerima(reverseUrl);
                }
            });
        }

        function reverseTanTerima(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,
                        // timer: 1500
                    }).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);
                }
            });
        }
        document.addEventListener('DOMContentLoaded', function() {
            var id = "{{ $tandaTerima->id_tanterima }}"; // Mengambil ID penerimaan
            if ("{{ $tandaTerima->status }}" == 'E') {
                document.getElementById('editButton').style.display = 'inline-block';
                var editButton = document.getElementById('editButton');
                editButton.href = "{{ url($url_menu . '/edit' . '/') }}/" + id;
            }
        });
    </script>
@endpush