@extends('layouts.home_layout')
@php
    $pageTitle = "Order Details";
@endphp
@section('title', $pageTitle)

@section('style')
    <link rel="stylesheet" href="{{ asset('app-assets/css/select2.min.css') }}" >
    <style>
        .invoice-box {
            max-width: 800px;
            margin: auto;
            padding: 30px;
            border: 1px solid #eee;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            font-size: 16px;
            line-height: 24px;
            font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            color: #555;
        }

        .invoice-box table {
            width: 100%;
            line-height: inherit;
            text-align: left;
        }

        .invoice-box table td {
            padding: 5px;
            vertical-align: top;
        }

        .invoice-box table tr td:nth-child(2) {
            text-align: right;
        }

        .invoice-box table tr.top table td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.top table td.title {
            font-size: 45px;
            line-height: 45px;
            color: #333;
        }

        .invoice-box table tr.information table td {
            padding-bottom: 40px;
        }

        .invoice-box table tr.heading td {
            background: #eee;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }

        .invoice-box table tr.details td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.item td {
            border-bottom: 1px solid #eee;
        }

        .invoice-box table tr.item.last td {
            border-bottom: none;
        }

        .invoice-box table tr.total td:nth-child(2) {
            border-top: 2px solid #eee;
            font-weight: bold;
        }

        @media only screen and (max-width: 600px) {
            .invoice-box table tr.top table td {
                width: 100%;
                display: block;
                text-align: center;
            }

            .invoice-box table tr.information table td {
                width: 100%;
                display: block;
                text-align: center;
            }
        }

        /** RTL **/
        .invoice-box.rtl {
            direction: rtl;
            font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        }

        .invoice-box.rtl table {
            text-align: right;
        }

        .invoice-box.rtl table tr td:nth-child(2) {
            text-align: left;
        }
    </style>
@endsection

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{$pageTitle}}</h3>
                {{-- <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active">Animation</li>
                        </ol>
                    </div>
                </div> --}}
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="dropdown float-md-right">
                    
                </div>
            </div>
        </div>
        <div class="content-body">
            @include('common.alert_msg')
            <!-- Button animation start -->
            <section class="btnAnimation">
                <div class="row" id="printableArea">
                    <div class="col-12">
                        <div class="invoice-box"  >
                            <table cellpadding="0" cellspacing="0">
                                <tr class="top">
                                    <td colspan="5">
                                        <table>
                                            <tr>
                                                <td class="title">
                                                    <img src="{{ asset('app-assets/invoice-logo.png')}}" style="width: 100%; max-width: 300px" />
                                                </td>
                
                                                <td>
                                                    Invoice #: {{ $order->order_no }}<br />
                                                    Order Date: {{ date('d M Y',strtotime($order->order_date))  }}<br />
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                
                                <tr class="information">
                                    <td colspan="5">
                                        <table>
                                            <tr>
                                                <td>
                                                    <b>Billing Address</b><br />
                                                    {{ $order->bfname }}  {{ $order->blname }}<br />
                                                    {{$order->bmobile }}<br />
                                                    {{$order->bemail }}<br />
                                                    {{$order->baddress }}, {{$order->bcity }}, {{$order->bzipcode }}<br />
                                                    {{$order->bupazila }},{{$order->bdistrict }},{{$order->bdivision }}
                                                </td>
                
                                                <td>
                                                    <b>Shipping Address</b><br />
                                                    {{  $order->sfname ? $order->sfname : $order->bfname }}  {{ $order->sfname ? $order->blname :  $order->blname }}<br />
                                                    {{$order->sfname ? $order->smobile : $order->bmobile }}<br />
                                                    {{ $order->sfname ? $order->semail : $order->bemail }}<br />
                                                    {{ $order->sfname ? $order->saddress : $order->baddress }}, {{ $order->sfname ? $order->scity : $order->bcity }}, {{$order->sfname ? $order->szipcode : $order->bzipcode }}<br />
                                                    {{$order->sfname ? $order->supazila : $order->bupazila }},{{$order->sfname ? $order->sdistrict : $order->bdistrict }},{{$order->sfname ? $order->sdivision : $order->bdivision }}
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                
                                <tr class="heading">
                                    <td colspan="2">Payment Method</td>
                                    <td colspan="3">{{$order->payment_method }}</td>
                                </tr>
                
                                <tr class="details">
                                    <td colspan="2">Booking Money</td>
                                    <td colspan="3">{{$order->booking_money }}</td>

                                   
                                </tr>
                                @if($order->payment != NULL)
                                <tr class="details">
                                    <td colspan="2">Due Payment</td>
                                    <td colspan="3">{{$order->payment }}</td>
                                </tr>
                                @endif
                
                                <tr class="heading">
                                    <td>Product Desctiption</td>
                                    <td style="text-align: left">Color</td>
                                    <td>Weight</td>
                                    <td>Qty</td>
                                    <td style="text-align: right">Price</td>
                                </tr>
                                @foreach ($details as $key=> $item)
                               
                                    <tr class="item">
                                        <td>Cattle ID: {{$item->cattle_no}}</td>
                                        <td style="text-align: left">{{$item->cattle_color}}</td>
                                        <td>{{$item->cattle_weight}} kg</td>
                                        <td>{{$item->qty}}</td>
                                        <td style="text-align: right">{{$item->cattle_price}}</td>
                                    </tr>
                                @endforeach
                                
                
                                <tr class="total">
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td style="text-align: right">Total:{{$order->total_amount }}</td>
                                </tr>
                                <tr class="total">
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td style="text-align: right">Pay:{{$order->booking_money +$order->payment }}</td>
                                </tr>
                                <tr class="total">
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td style="text-align: right"><b> Total Due:{{$order->total_amount - ($order->booking_money +$order->payment) }}</b> </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <input class="btn btn-success" type="button" onclick="printDiv('printableArea')" value="Print" />
            </section>
            <!-- Card animation end -->
        </div>
    </div>
  
</div>
@endsection


@section('script')
<script>
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    }
</script>
@endsection