@extends('admin::index')

@section('content')

    <section class="content-header">
        <h1>
            {{ $header or trans('admin.title') }}
            <small>{{ $description or trans('admin.description') }}</small>
        </h1>

        <!-- breadcrumb start -->

    </section>

    <section class="content">

        @include('partials.error')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')
        @if(Session::has('swal'))
            <script>
                $(function () {
                    swal(DON_HANG_THANH_CONG_MSG, '', 'success');
                })
            </script>
        @endif

        {{-- MAIN CONTENT --}}
        <div class="row">
            <div class="box receipt">
                <div class="box-body">
                    <div class="receipt">
                        <div class="receipt__subtitle">

                            Đ/C: Chợ Minh Hưng, Minh Hưng, Chơn Thành, Bình Phước <br> ĐT: 0933.788.114 - 0972.788.114<br><br>
                            <strong> Quầy sữa 78 - Mỹ phẩm 78 <br>QUẦY THUỐC 78</strong><br>
                        </div>
                        <h1 class="receipt__title">
                            Hoá đơn
                        </h1>
                        <hr class="divider" style="width: 50%">
                        <div class="receipt__header">
                            Số HĐ: <strong>{{ $order->code  }}</strong><br>
                            Ngày: {{ $order->created_at->format('d-m-Y H:i') }}<br>
                            @if($order->customer)
                            Khách: {{ $order->customer->fullname }}<br>
                            SĐT:  {{ $order->customer->phone }}<br>
                            Điểm thưởng hiện tại: {{ number_format($order->customer->points, 1) }}<br>
                            @endif
                        </div><br>
                        <div class="receipt__body">
                            <table>
                                <tr><th>SL</th><th>ĐG</th><th class="text-right">Thành tiền</th></tr>

                                @foreach($order->products as $item)
                                @php
                                    $unitLabel = $item->pivot->unit_id ? (\App\Models\Unit::find($item->pivot->unit_id)->name ?? '') : $item->unit;
                                @endphp
                                <tr>
                                    <td colspan="3" style="padding-top: 5px">{{ $item->name }}@if($unitLabel) ({{ $unitLabel }})@endif</td>
                                </tr>
                                <tr class="line">
                                    <td class="text-right">{{ $item->pivot->qty }}</td>
                                    <td class="text-right">{{ number_format($item->pivot->price,0) }}</td>
                                    <td class="text-right"><strong>{{ number_format($item->pivot->qty * $item->pivot->price,0) }}</strong></td>
                                </tr>
                                @endforeach
                                <tr class="discount">
                                    <td colspan="2">
                                        <strong>Tiền giảm:</strong>
                                    </td>
                                    <td class="text-right">
                                        <strong>- {{ number_format($order->discount_amount,0) }}</strong>
                                    </td>
                                </tr>
                                <tr class="total">
                                    <td colspan="2">
                                        <strong>Tổng cộng:</strong>
                                    </td>
                                    <td class="text-right ">
                                        <strong>{{ number_format($order->total,0) }}</strong>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <br>
                        <div class="receipt__footer">
                            <hr class="divider" style="width: 80%">
                            Cám ơn quý khách!
                        </div>
                        <br>
                        <div>
                            Tài khoản: <strong>Nguyen Hoang Dao</strong><br>
                            ACB : <strong>7257807</strong><br>
                            Sacombank : <strong>0933788114</strong>
                        </div>
                    </div>
                    <div class="noPrint text-center">
                        <br><br>
                        @if(request('ref') === 'orders')
                            <a href="javascript:history.back()" class="btn btn-default">
                                <i class="fa fa-chevron-left"></i> Trở lại
                            </a>
                        @else
                            <a href="{{ url('/pos') }}" class="btn btn-default">
                                <i class="fa fa-chevron-left"></i> Tạo đơn mới
                            </a>
                        @endif

                        <button style="width: 50%" onclick="window.print();" class="btn btn-primary">
                            <i class="fa fa-print"></i> In đơn
                        </button>

                    </div>
                </div>
            </div>
        </div>



    </section>

    <style>
        .box.receipt {
            width: 100%;
            max-width: 80mm;
            margin: 0 auto;
            font-size: 14px;
        }

        .receipt .divider {
            margin: 10px auto;
        }

        .receipt__body table {
            width: 100%;
        }
        .receipt__body table th {
            border-bottom: 1px solid #999999;
            padding: 5px 0;
        }
        .receipt__body table .line {
            border-bottom: 1px dashed #CCCCCC;
            padding: 5px 0;
        }
        .receipt__body table tr.total {
            font-size: 16pt;
        }
        .receipt__body table tr.total td {
            padding: 10px 0;
        }
        .receipt__body table tr.discount td {
            padding: 10px 0;
        }

        .receipt__title {
            font-family: "Times New Roman";
            font-size: 20pt;
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
        }

        .receipt__subtitle {
            text-align: center;
            font-size: 12px;
        }
        .receipt__subtitle strong {
            font-size: 14px;
        }

        .receipt__footer {
            font-style: italic;
            text-align: center;
        }

        @media print {

            .box.receipt {
                max-width: 72mm;
                margin: 0;
            }

            .box {
                border: 0;
            }
            .main-footer {
                display: none !important;
            }
            .noPrint {
                display: none !important;
            }
            .box.receipt .box-body {
                padding: 0;
            }
        }
    </style>


@endsection


@push('styles')
    {{-- cannot use in pjax--}}
@endpush

@push('scripts')
    {{-- cannot use in pjax--}}
@endpush