@extends('_layouts.app', [
    "title" => "Detail Pengiriman $receipt_number",
    "is_dashboard" => true
])

@section('content')
    <div class="row">
        <div class="col-lg-12 mb-3">
            <button type="button" class="btn btn-primary" id="print"><i class="las la-print"></i> Cetak</button>
        </div>
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="print">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script type="text/javascript">
        class Delivery extends App {
            constructor() {
                super()
            }

            show() {
                this.api({
                    url: `/api/delivery/{{ $receipt_number }}/show`,
                    success: e => {
                        let data = e.data

                        $(`.print`).html(`
                            <div class="logo d-flex justify-content-between align-items-center">
                                <div>
                                    <img style="width: 13%" src="{{ asset("") }}assets/img/TIMER.png" alt="Logo {{ env("APP_NAME") }}">
                                </div>
                                <div class="resi_url">
                                    <img src="${ data.receipt_number_url }" alt="Barcode generated by Cognex Corporation" width="300" />
                                </div>
                            </div>
                            <div class="resi">
                                No. Resi: ${ data.receipt_number }
                            </div>
                            <div class="information d-flex flex-row">
                                <div class="sender d-flex flex-column w-50">
                                    <h5 class="text-black">Pengirim</h5>
                                    <div class="name">${ data.sender.name }</div>
                                    <div class="address">
                                        ${ data.sender.address }<br />
                                        ${ data.sender.subdistrict.name },
                                        ${ data.sender.city.name },
                                        ${ data.sender.province.name }. <br />
                                        <b>Telp.</b> (+62) ${ data.sender.phone }
                                    </div>
                                </div>
                                <div class="recipient w-50">
                                    <h5 class="text-black">Penerima</h5>
                                    <div class="name">${ data.recipient.name }</div>
                                    <div class="address">
                                        ${ data.recipient.address }<br />
                                        ${ data.recipient.subdistrict.name },
                                        ${ data.recipient.city.name },
                                        ${ data.recipient.province.name }. <br />
                                        <b>Telp.</b> (+62) ${ data.recipient.phone }
                                    </div>
                                </div>
                            </div>
                            <div class="logistics">
                                <b>Logistik:</b> ${ data.logistics.name }
                            </div>
                            <div class="note">
                                <b>Catatan:</b><br />${ data.note }
                            </div>
                            <div class="delivery d-flex flex-row">
                                <div class="w-50">
                                    <h6>Nama Paket</h6>
                                    <div>${ data.name }</div>
                                </div>
                                <div class="w-50">
                                    <h6>Informasi Paket</h6>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-1"><b>Berat:</b><br /> ${ data.weight }</div>
                                            <div><b>Panjang:</b><br /> ${ data.length }</div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-1"><b>Lebar:</b><br /> ${ data.width }</div>
                                            <div><b>Tinggi:</b><br /> ${ data.height }</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-50">
                                    <h6>Pengiriman</h6>
                                    <div class="row">
                                        <div class="col-lg-12 mb-1">
                                            <div><b>Tanggal Penjemputan:</b><br />${ data.pickup_date } ${ data.pickup_time }</div>
                                        </div>
                                        <div class="col-lg-5 mb-1">
                                            <div><b>Layanan:</b><br />${ data.service.name }</div>
                                        </div>
                                        <div class="col-lg-7 mb-1">
                                            <div><b>Pembayaran:</b><br />${ data.payment.name }</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-50">
                                    <h6>Pembayaran</h6>
                                    <div class="mb-1"><b>Asuransi:</b><br />${ data.insurance }</div>
                                    <div class="mb-1"><b>Subtotal:</b><br />${ data.pay }</div>
                                    <div class="mb-1"><b>Total:</b><br /> <b>${ data.total }</b></div>
                                </div>
                            </div>
                        `)
                    }
                })
            }

            print() {
                $(".print").print()
            }
        }

        var delivery = new Delivery

        delivery.show()

        $(document).on(`click`, `button#print`, function() {
            delivery.print()
        })
    </script>
@endsection