@extends('menu/index')
@section('konten-list-transaksi-lunas')

<main class="app-main"> 
@include('flash-message')
@include('Transaksi/layout-transaksi/navbar-transaksi')
    <div class="flex items-center justify-center row m-2">
        <table class="table table-transaksi">
            <thead>
                <tr>

                    
                    <style>
                        .table thead tr th {
                            text-align: center;
                            font-size: 9px;
                        }
                        .table tbody tr td {
                            text-align: center;
                            font-size: 8px;
                        }
                    </style>
                    <th class="text-center" scope="col">No</th>
                    <th class="text-center" scope="col">Kode Pesanan</th>
                    <th scope="col">Pemesan</th>
                    <th scope="col">Nomor Meja</th>
                    <th scope="col">Metode Bayar</th>
                    <th scope="col">Jenis Pesanan</th>
                    <th scope="col">Status Bayar</th>
                    <th scope="col">Total Harga</th>
                    <th scope="col">PPN 10%</th>
                    <th class="text-center" scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($dataTransaksiLunas as $dTL)
                <tr>
                        <td>{{ $dataTransaksiLunas->firstItem() + $loop->index }}</td>
                        <td style="vertical-align: middle; color: green; font-weight: 500; text-align: center; align-items: center;">
                            <a class="text-xs btn fa-xl" href="#" onclick="konfirmasiCetak(event, '{{ route('print-nota-transaksi', ['id' => $dTL->id]) }}')"><i class="fa-solid fa-print"></i></a>
                            @if(!empty($dTL->id))
                            <a href="{{ route('TambahPesananPadaListTransaksi',['kode_pesanan' => $dTL->kode_pesanan]) }}">
                                {{$dTL->kode_pesanan}}
                            </a>
                        @else
                            <span style="color:red;">ID tidak ditemukan</span>
                        @endif
                        </td>
                        <td style="vertical-align: middle; color: green; font-weight: 600; text-align: center; align-items: center;">
                            {{ $dTL->nama_pemesan }}
                        </td>
                        <td style="vertical-align: middle; color: green; font-weight: 600; text-align: center; align-items: center;">
                            {{ $dTL->nomor_meja }}
                        </td>
                        <td style="vertical-align: middle; color: {{ $dTL->metode_bayar == 'On Process' ? 'gold' : ($dTL->metode_bayar == 'Lunas' ? 'green' : 'black') }}; font-weight: 600; text-align: center; align-items: center;">
                            <a href="{{ route('updatemetodebayar', ['id' => $dTL->id]) }}">
                                {{$dTL->metode_bayar}}
                                <i class="fa-solid fa-circle-check"></i>
                            </a>
                        </td>
                        <td style="vertical-align: middle; color: green; font-weight: 600; text-align: center; align-items: center;">
                            {{ $dTL->jenis_pesanan }}
                        </td>
                        <td style="vertical-align: middle; color: {{ $dTL->status_bayar == 'On Process' ? 'gold' : ($dTL->status_bayar == 'Lunas' ? 'green' : 'black') }}; font-weight: 600; text-align: center; align-items: center;">
                            <a href="{{ route('statusListTransaksiUpdate', ['id' => $dTL->id]) }}">
                                {{$dTL->status_bayar}}
                                <i class="fa-solid fa-circle-check"></i>
                            </a>
                        </td>
                        <td style="vertical-align: middle; color: green; font-weight: 600; text-align: center; align-items: center;">
                            Rp {{ number_format($dTL->total_harga_pesanan, 2, ',', '.') }}
                        </td>
                        <td style="vertical-align: middle; color: green; font-weight: 600; text-align: center; align-items: center;">
                            Rp {{ number_format($dTL->ppn, 2, ',', '.') }}
                        </td>
                        <td style="vertical-align: middle; text-align: center;" class="text-center">
                            <button>
                                <a class="text-xs btn" href="{{ route('hapus-list-transaksi', ['id' => $dTL->id]) }}" onclick="return confirmationDelete()"><i class="fa-solid fa-circle-xmark"></i></a>
                                <a class="text-xs btn" href="{{ route('print-nota-kitchen', ['id' => $dTL->id]) }}"><i class="fa-solid fa-clipboard"></i></a>
                               {{-- <a data-bs-toggle="modal" data-bs-target="#validasiVoid" 
                                id="voidBtn" class="btn" style="background-color: red; font-size:7px; margin:2px;" 
                                data-kode_pesanan="{{ $dTL->kode_pesanan }}">
                                    <Span style="font-weight: 700;">Void</Span>
                                </a> --}}

                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
            {{-- pesan konfirmasi void transaksi star --}}
                    <div  class="modal" id="validasiVoid" tabindex="-1">
                    <div class="modal-dialog" 
                    style="text-align: center;">
                        <div class="modal-content" style="background-color: rgb(55, 194, 148);">
                        <div  class="modal-header"
                        style="justify-content:center;">
                            <h5 class="modal-title"
                            style="font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">Void Transaksi</h5>
                        </div>
                        <div class="modal-body">
                            <div id="formContainer">
                            <input autofocus autocomplete="off" style="border: 5px; border-radius:5px; padding:10px; background-color:rgb(10, 107, 78);" 
                            placeholder="input kode void" type="text" id="userInput" />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button class="btn btn-primary" onclick="validateInput()">Submit</button>
                        </div>
                        </div>
                    </div>
                    </div>
                  

                    {{-- js start void --}}
                                    <script>
                                        document.querySelectorAll('#voidBtn').forEach(button => {
                            button.addEventListener('click', function() {
                                document.getElementById('formContainer').style.display = 'block';
                                document.getElementById('validasiVoid').setAttribute('data-kode_pesanan', this.getAttribute('data-kode_pesanan'));
                            });
                        });

                        function validateInput() {
                            var correctNumber = 555; // Ubah sesuai angka valid
                            var userNumber = document.getElementById('userInput').value;
                            var kodePesanan = document.getElementById('validasiVoid').getAttribute('data-kode_pesanan');

                            if (parseInt(userNumber) === correctNumber) {
                                var route = "{{ route('voidView', ['kode_pesanan' => ':kode_pesanan']) }}".replace(':kode_pesanan', kodePesanan);
                                window.location.href = route;
                            } else {
                                alert("Kode void anda salah");
                            }
                        }
                </script>


                    {{-- js end void --}}
            {{-- pesan konfirmasi void transaksi end --}}
                   



        </table>
        {{ $dataTransaksiLunas->links('pagination::bootstrap-4') }}
    </div>
    <script>
        function confirmationDelete(){
            return confirm("Apakah anda mau menghapus data ini ?")
        }
    </script>
{{-- konfirmasi nota start --}}
    <script>
    // Fungsi untuk konfirmasi cetak PPN
    function konfirmasiCetak(event, url) {
        event.preventDefault(); // Mencegah tautan langsung dibuka

        // Tampilkan dialog konfirmasi
        var tampilkanPpn = confirm("Apakah PPN (10%) akan ditampilkan pada nota transaksi?");

        var finalUrl = url;

        // Tambahkan parameter 'ppn' ke URL berdasarkan jawaban
        if (tampilkanPpn) {
            finalUrl += '?ppn=yes';
        } else {
            finalUrl += '?ppn=no';
        }

        // Arahkan ke URL yang telah dimodifikasi
        window.location.href = finalUrl;
    }

    function confirmationDelete(){
        return confirm("Apakah anda mau menghapus data ini ?")
    }
    
</script>
{{-- konfirmasi nota end --}}
</main>

@endsection