@extends('admin.layouts.app')
@section('title') Order List | Admin @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 Edit</h3>
                        <a href="{{ route('admin.order-all.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 id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                            <div class="row">
                                <div class="col-6 mb-10">
                                    <div class="ecommerce-address shipping-address">
                                        <h4 class="title title-underline ls-25 font-weight-bold">Shipping Address</h4>
                                        <address class="mb-4">
                                            <table class="address-table">
                                                <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 class="col-6">
                                    <div class="col-4">
                                        <div class="order-view list-style-none">
                                            <li>
                                                <label>Order number</label>
                                                <strong> {{ $order->unique_id }} </strong>
                                            </li>
                                            <li>
                                                <label>Status</label>
                                                <strong>{{ $order->status }}</strong>
                                            </li>
                                            <li>
                                                <label>Date</label>
                                                <strong>{{ $order->created_at->format('d,M,Y') }}</strong>
                                            </li>
                                            <li>
                                                <label>Payment method</label>
                                                <strong>Cash On Delivery</strong>
                                            </li>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-5">
                                <div class="col-sm-12">
                                    @foreach ($order->order_details as $key => $details)
                                    <form method="POST" action="{{ route('admin.order.upload',$order->id) }}">
                                         @csrf
                                            <div class="col-10 offset-1">
                                                <table class="table table-striped table-bordered">
                                                    <thead>
                                                        @if ($key +1==1)
                                                      <tr>
                                                        <th scope="col">SL</th>
                                                        <th scope="col">Image</th>
                                                        <th scope="col">Product Name</th>
                                                        <th scope="col">Price</th>
                                                        <th scope="col">Quantity</th>
                                                        <th scope="col">Action</th>
                                                        <th scope="col">Total</th>
                                                      </tr>
                                                      @endif
                                                    </thead>
                                                    <tbody style="margin-top:20px">
                                                      <tr>
                                                        <td width="3%">{{ $key +1 }}</td>
                                                        <td width="15%"><img src="/banner/{{ $details->product->image }}" width="40" height="40" alt=""></td>
                                                        <th width="25%">{{ $details->product->title  }}</th>
                                                        <td width="15%">{{ $details->product->price  }}</td>
                                                        <td  width="10%"><input type="text" min="1" name="quqntity" value="{{ $details->quqntity  }}" class="form-control" id="orderUpdate" aria-describedby="emailHelp" placeholder="Enter email">
                                                            <td width="10%"><button type="submit" class="btn btn-primary btn-sm">Update</button></td>
                                                        <td width="20%">{{ $details->product->price * $details->quqntity  }}</td>
                                                            <input type="hidden" name="id" value="{{ $details->id }}" id="">
                                                        </td>
                                                        
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                            </div>
                                      </form>
                                    @endforeach
                                </div>
                            </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