{{-- head start --}}

<style>
    .printable-area {
        width: auto; /* Atur lebar sesuai ukuran struk thermal Anda */
        height: auto;
        align-content: center;
        font-family: Arial, Helvetica, sans-serif;
        /* margin: 0 auto; Agar berada di tengah */
    }

    .table-transaksi {
        width: auto;
        page-break-inside: avoid; /* Hindari pemutusan halaman dalam tabel */
    }

    .table-transaksi thead tr th {
        width: auto;
    }

    .table-transaksi tbody tr td {
        font-size: 38px;
    }

    .conten-nota {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: px; /* Sesuaikan ukuran font */
        margin: 0; /* Hapus margin untuk menghemat ruang */
    }

    .nota-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Tambahkan properti ini untuk memastikan halaman tidak terpisah */
    @media print {
        .printable-area, .table-transaksi, .section_nama_pesanan_qty_harga, .conten-nota {
            page-break-inside: avoid; /* Hindari pemutusan halaman dalam area ini */
            page-break-after: auto; /* Tambahkan properti ini untuk menghindari pemisahan halaman */
            page-break-before: auto; /* Tambahkan properti ini untuk menghindari pemisahan halaman */
        }
        .printable-area {
            break-inside: avoid; /* Untuk mendukung berbagai browser */
        }
    }
</style>

@include('component.head')
{{-- head end --}}

<div class="printable-area">
    <!-- Isi dari nota transaksi yang ingin dicetak -->
    <div style="text-align:center;">
        <img style="width: 45vw; margin: 0 auto;"  src="{{ asset('asset-modified/image/logo-usaha.jpg') }}" alt="img warung makan">
        <p style="font-size: 37px;">Pusat  : Jln. Wahidin II No. 3A Jakarta Pusat Telp. 021-3810137</p>
        <p style="font-size: 37px;">Cabang : Jln. Raya Radar Auri No.63 Cisalak - Depok Telp. 021-8733461 Wa.0857 8888 6617</p></div>
    <h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:40px;" class="text-center">Nota transaksi</h1>
    <span style="display: flex; flex-direction:column; font-size:40px; font-style:italic; align-items:flex-end;">Kasir</span>
    
    <div class="text-center" style="font-size: 50px;">
        @foreach ($transaksiSerupa as $tS )
            <div class="col" style="font-size: 55px;">
            @if ($loop->first || $tS->jenis_pesanan != $transaksiSerupa[$loop->index - 1]->jenis_pesanan)
            <td style="vertical-align:middle; text-align:center; align-items:center;" rowspan="{{ $transaksiSerupa->where('jenis_pesanan', $tS->jenis_pesanan)->count() }}"> 
                {{ $tS->jenis_pesanan }} 
            </td>
            <br>
            <td style="vertical-align:middle; text-align:center; align-items:center;" rowspan="{{ $transaksiSerupa->where('jenis_pesanan', $tS->jenis_pesanan)->count() }}"> 
                {{ $tS->status_bayar}} 
            </td>
            @endif
        </div>
        @endforeach
    </div>
    
    <h3 class="text-center">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</h3>
    
    <div class="row">
        <div class="col" style="text-align: start;">
            <div>
                <h4 style="font-weight: 700; font-size:45px">Kode Pesanan</h4>
            </div>
            @foreach ($transaksiSerupa as $tS )            
                <div style="font-size: 45px;">
                    @if ($loop->first || $tS->kode_pesanan != $transaksiSerupa[$loop->index - 1]->kode_pesanan)
                    <td style="vertical-align:middle; font-size:30px text-align:center; align-items:center;" rowspan="{{ $transaksiSerupa->where('kode_pesanan', $tS->kode_pesanan)->count() }}"> 
                    {{ $tS->kode_pesanan }} 
                    </td>
                    @endif
                </div>
            @endforeach               
            <div>
                <h4 style="font-weight: 700; font-size:45px">Pembayaran</h4>
            </div>
            <div>
                @foreach ($transaksiSerupa as $tS )            
                <div style="font-size: 45px;">
                    @if ($loop->first || $tS->metode_bayar != $transaksiSerupa[$loop->index - 1]->metode_bayar)
                    <td style="vertical-align:middle; color:green; text-align:center; align-items:center;" rowspan="{{ $transaksiSerupa->where('metode_bayar', $tS->metode_bayar)->count() }}"> 
                    {{ $tS->metode_bayar }} 
                    </td>
                    @endif
                </div>
                @endforeach  
            </div>
        </div>
            
        <div class="col" style="text-align: end;">
            <div>
                <h4 style="font-weight: 700; font-size:45px">Kasir</h4>
            </div>
            @foreach ($transaksiSerupa as $tS )
                <div style="font-size: 45px;">
                    @if ($loop->first || $tS->nama_kasir != $transaksiSerupa[$loop->index - 1]->nama_kasir)
                    <td style="vertical-align:middle; font-size:30px text-align:center; align-items:center;" rowspan="{{ $transaksiSerupa->where('nama_kasir', $tS->nama_kasir)->count() }}"> 
                       {{ $tS->nama_kasir }} 
                    </td>
                    @endif
                </div>
            @endforeach
            <div>
                <h4 style="font-weight: 700; font-size:45px">Nama Pemesan</h4>
            </div>
            @foreach ($transaksiSerupa as $tS )
                <div style="font-size: 45px;">
                    @if ($loop->first || $tS->nama_pemesan != $transaksiSerupa[$loop->index - 1]->nama_pemesan)
                    <td style="vertical-align:middle; text-align:center; align-items:center;" rowspan="{{ $transaksiSerupa->where('nama_pemesan', $tS->nama_pemesan)->count() }}"> 
                    {{ $tS->nama_pemesan }} 
                    </td>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
    
    <h1 class="text-center">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</h1>
<div class="row section_nama_pesanan_qty_harga">
    <div class="col">
        <table style="width: 100%;">
            @foreach ($transaksiSerupa as $dT)
                <tr style="font-size:60px;">
                    <td>{{ $dT->pesanan }}</td>
                    <td style="font-size: 30px; text-align: center;">X</td>
                    <td style="text-align: center;">{{ $dT->qty }}</td>
                    @if ($dT->request_customer != 'Tidak ada request')
                        <td style="text-align: center;">{{ $dT->request_customer }}</td>
                    @endif
                </tr>
            @endforeach
        </table>
    </div>
</div>


    <h1 class="text-center">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</h1>
         <tfoot class="mt-2">
        <span style="font-size: 35px">Selamat menikmati,</span> <br>
        <span style="font-size: 35px" >Senang melayani anda,</span>
      </tfoot>
      
</div>

<script type="text/javascript">
    window.onload = function() {
        window.print();
    }
</script>

@include('component.footer-script')