@extends('seller.layouts.app')
@section('title')
    Order Information | Seller
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">

            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="line-height: 36px;">Order Information</h3>
                        <a href="{{ route('vendor.order.list') }}"
                            class="btn bg-primary float-right d-flex align-items-center justify-content-center"><i
                                class="fas fa-arrow-left"></i>&nbsp;Back</a>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4 offset-4">
                                <div class="ecommerce-address shipping-address">
                                    <h4 class="title title-underline ls-25 font-weight-bold text-center">Shipping Address
                                    </h4>
                                    <address class="mb-4">
                                        <table class="table table-striped table-bordered">
                                            <tr>
                                                <th>Name</th>
                                                <td>{{ $order->shipping->name }}</td>
                                            </tr>
                                            <tr>
                                                <th>E-mail</th>
                                                <td>{{ $order->shipping->email }}</td>
                                            </tr>
                                            <tr>
                                                <th>Phone</th>
                                                <td>{{ $order->shipping->phone }}</td>
                                            </tr>
                                            <tr>
                                                <th>District</th>
                                                <td>{{ $order->shipping->city }}</td>
                                            </tr>
                                            <tr>
                                                <th>Address</th>
                                                <td>{{ $order->shipping->address }}</td>
                                            </tr>
                                            <tr>
                                                <th>Note</th>
                                                <td>{{ $order->shipping->remark }}</td>
                                            </tr>
                                        </table>
                                    </address>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-10 offset-1">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Serial Sl</th>
                                            <th>Product Name</th>
                                            <th>Product Attribute</th>
                                            <th>Image</th>
                                            <th>Product Qty</th>
                                            <th>Product price</th>
                                            <th>Total Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @php
                                            $total = 0;
                                            $qty = 0;
                                        @endphp
                                        @foreach ($order->order_details as $key => $details)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>
                                                    <h6 href="#"> {{ $details->product->title }}
                                                    </h6>
                                                </td>
                                                <td>
                                                    <h6 href="#"> {{ $details->product_attribute }}
                                                    </h6>
                                                </td>
                                                <td>
                                                    <img src="/product/{{ $details->product->image }}" width="80"
                                                        height="80" alt="">
                                                </td>
                                                <td> {{ $details->quqntity }} </td>
                                                <td> {{ $details->price }} </td>
                                                <td> {{ $details->quqntity * $details->price }}</td>
                                            </tr>
                                            @php
                                                $total += $details->price * $details->quqntity;
                                                $qty += $details->quqntity;
                                            @endphp
                                        @endforeach


                                    </tbody>
                                </table>
                            </div>
                            <div class="col-3"></div>
                            <div class="col-6">
                                <table class="table table-bordered" border="1" cellpadding="5" cellspacing="5">
                                    <tr>
                                        <th>Details</th>
                                        <th>Amount</th>
                                    </tr>
                                    <tr>
                                        <td>Sub total</td>
                                        <td>{{ $total }}</td>
                                    </tr>
                                    <tr>
                                        <td>Delivery Change</td>
                                        <td>{{ $total > 400 ? '0' : $order->area->regular_charge }}</td>
                                    </tr>
                                    <tr>
                                        <td>Total</td>
                                        <td>{{ $total > 400 ? $total : $total + $order->area->regular_charge }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
@endsection

@section('script')
    <script src="{{ asset('backend') }}/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="{{ asset('backend') }}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('backend') }}/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="{{ asset('backend') }}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script>
        $(function() {
            $("#example1").DataTable({
                "responsive": true,
                "autoWidth": false,
            });
            $('#example2').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        });
    </script>
@endsection