@extends('admin.layout.master')

@section('content')
    <section class="content">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title pull-right">لیست محصولات سفارش {{@$order->id}}</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table no-margin">
                        <thead>
                        <tr>
                            <th class="text-center">تصویر محصول</th>
                            <th class="text-center">نام محصول</th>
                            <th class="text-center">قیمت محصول</th>
                            <th class="text-center">سایز - حروف - جعبه</th>
                            <th class="text-center">تعداد</th>
                        </tr>
                        </thead>
                        <tbody>

                        @foreach(@$order->products as $product)
                            <tr>
                                <td class="text-center"><img width="50%" src="/images/product/{{$product->photos[0]->path}}"> </td>
                                <td class="text-center">{{$product->title}}</td>
                                <td class="text-center">{{$product->price}}</td>
                                <td class="text-center">{{$product->pivot->plusi}} {{$product->pivot->size}} @if($product->pivot->giftbox == "on") <span class="btn btn-success btn-sm">با جعبه</span> @endif</td>
                                <td class="text-center">{{$product->pivot->qty}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                 <style>
        html, body {
            padding: 0;
            margin: 0 auto;

        }

        body {
            padding: 0.5cm
        }

        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        table {
            width: 100%;
            table-layout: fixed;
            border-spacing: 0;
        }

        .header-table {
            table-layout: fixed;
            border-spacing: 0;
        }

        .header-table td {
            padding: 0;
            vertical-align: top;
        }

        body {
            direction: rtl;
        }

        .page {
            background: white;
        }

        .flex {
            display: flex;
            margin-bottom:20px;
        }

        .flex > * {
            float: left;
        }

        .flex-grow {
            flex-grow: 10000000;
        }

        .barcode {
            text-align: center;
            margin: 12px 0 0 0;
            height: 30px;
        }

        .barcode span {
            font-size: 35pt;
            font-family: 'Libre Barcode 128';
        }

        .portait {
            transform: rotate(-90deg) translate(0, 40%);
            text-align: center;
        }

        .header-item-wrapper {
            border: 1px solid #000;
            width: 100%;
            height: 100%;
            background: #eee;
            display: flex;
            align-content: center;
        }

        thead, tfoot {
            background: #eee;
        }

        .header-item-data {
            height: 100%;
            width: 100%;
        }

        .bordered {
            border: 1px solid #000;
            padding: 0.12cm;
        }

        .header-table table {
            width: 100%;
            vertical-align: middle;
        }

        .content-table {
            border-collapse: collapse;
        }

        .content-table td, th {
            border: 1px solid #000;
            text-align: center;
            padding: 0.1cm;
            font-weight: normal;
        }

        table.centered td {
            vertical-align: middle;
        }

        .serials {
            direction: ltr;
            text-align: left;
        }

        .title {
            text-align: right;
        }

        .grow {
            width: 100%;
            height: 100%;
        }

        .font-small {
            font-size: 8pt;
        }

        .font-medium {
            font-size: 10pt;
        }

        .font-big {
            font-size: 15pt;
        }

        .label {
            font-weight: bold;
            padding: 0 0 0 2px;
        }

        @page {
            size: A4 landscape;
            margin: 0;
            margin-bottom: 0.5cm;
            margin-top: 0.5cm;
        }

        .ltr {
            direction: ltr;
            display: block;
        }
    </style>
           <table class="header-table" style="width: 100%">
        <tbody>
            <tr>
            <td style="width: 1.8cm; height: 2.5cm;vertical-align: middle;padding-bottom: 4px;">
                <div class="header-item-wrapper">
                                            <div class="portait" style="margin:20px">خریدار</div>
                                    </div>
            </td>
            <td style="padding: 0 4px 4px;height: 2cm;">
                <div class="bordered grow header-item-data">
                    <table class="grow centered">
    <tbody><tr>
        <td style="width: 7cm">
            <span class="label">خریدار:</span> {{@$order->user->name . ' ' . @$order->user->last_name}}
        </td>
        <td style="width: 5cm">
            <span class="label">شماره تماس :</span> {{@$order->user->phone}}
        </td>

        <td> نحوه ارسال : 
            @if(@$order->paytype == 2)
             ارسال با پیک        
             @else
             ارسال با پست
             @endif
    
    </td>

    </tr>
    <tr>
        <td colspan="3">
            <span class="label">نشانی :</span> {{@@$order->user->addresses[0]->province->name . ' - ' . @@$order->user->addresses[0]->city . ' - ' . @@$order->user->addresses[0]->address}}
        </td>
        <td>
             کدپستی : {{@@$order->user->addresses[0]->post_code}}
        </td>
    </tr>
</tbody></table>
</div>
            </td>
            <td style="width: 4.5cm;height: 2cm;padding: 0 0 4px;">
                <div class="bordered grow" style="padding: 2mm 5mm;">
                    <div class="flex">
                        <div class="font-small">شماره فاکتور:</div>
                        <div class="flex-grow" style="text-align: left">{{date('Ymd', strtotime(@$order->created_at))}}-{{@$order->id}}</div>
                        </div>
                        <div class="flex">
                         <div class="font-small">تاریخ :</div>
                        <div class="flex-grow" style="text-align: center">{{date('Y-m-d', strtotime(@$order->created_at))}}</div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody></table>

<table class="content-table">
        <thead>
        <tr>
    <th style="width:16%">ردیف</th>
    <th style="width: 20%">شرح کالا</th>
    <th style="width:16%">تعداد</th>
    <th style="width:16%">مبلغ واحد (تومان)</th>
    <th style="width:16%">مبلغ کل (تومان)</th>
        </tr>
        </thead>
                            <tbody>
                       @foreach(@$order->products as $product)
                                                        <tr>
                <td>{{$shr}}</td>
                <td>{{$product->title}}</td>
                <td>
                    <span class="title">{{$product->pivot->qty}}</span>
                </td>
                <td><span class="ltr">{{number_format($product->price)}}</span></td>
                                <td><span class="ltr">{{number_format($totalpc)}}</span></td>
                            </tr>
                                                       @endforeach
                                        </tbody><tfoot>
        <tr>
            <td colspan="2">
            </td><td colspan="2" class="font-small">

            </td>
            <td>
                                <span class="ltr">{{number_format(@$order->amount)}}</span>
            </td>
        </tr>

        </tfoot>
    </table>

                <div class="customer-data">
                    <p style="margin-top: 20px">
                        <strongt>نام خریدار: </strongt> {{@$order->user->name . ' ' . @$order->user->last_name}}
                    </p>
                    <p>
                        <strongt>آدرس خریدار: </strongt> {{@$order->user->addresses[0]->province->name . ' ' . @$order->user->addresses[0]->city . ' ' . @$order->user->addresses[0]->address}}
                        <br/>
                        <strongt>کد پستی خریدار: </strongt> {{@$order->user->addresses[0]->post_code}}
                    </p>
                    <p>
                        <strongt>شماره موبایل خریدار: </strongt> {{@$order->user->phone}}
                    </p>
                </div>
                <!-- /.table-responsive -->
            </div>
        </div>
    </section>

@endsection