@extends('layouts.app')

@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">Orders</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Unga Group</a></li>
                                <li class="breadcrumb-item active">Orders</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div>

                    </div>
                    <div class="table-responsive mb-4">
                        <table class="table table-centered dt-responsive nowrap table-card-list"
                            style="border-collapse: collapse; border-spacing: 0 12px; width: 100%;">
                            <thead>
                                <tr class="bg-transparent">
                                    <th>Tracking No</th>
                                    <th>SAP Order No</th>
                                    <th>Date Ordered</th>
                                    <th>Products Ordered</th>
                                    <th>Order Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($purchases as $order)
                                    <tr>
                                        <td>{{ $order->tracking_no }}</td>
                                        <td>{{ $order->order_no }}</td>
                                        <td>{{ date('M d, Y', strtotime($order->order_date)) }}</td>
                                        <td><a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#view{{ $order->id }}" class="btn btn-success btn-sm">View Products</a></td>
                                        <td>{{ $order->order_status }}</td>
                                        <td>
                                            @if ($order->order_status === 'Order dispatched')
                                                <a href="{{ route('orders.show', $order->id) }}"
                                                    class="btn btn-info btn-sm">Receive Order <i
                                                        class="fa fa-chevron-right"></i></a>
                                            @endif
                                        </td>

                                        <div class="modal fade" id="view{{ $order->id }}">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h4 class="modal-title">Order No: {{ $order->order_no }}</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        @foreach (json_decode($order->items) as $item)
                                                        <div class="products">
                                                            <p><b>Product Name: </b> {{ $item->product->name }} <br>
                                                                {{-- <b>Code: {{ $item->product->code }}</b><br> --}}
                                                                <b>Unit: </b> {{ $item->product->unit }} <br>
                                                                <b>Quantity: </b> {{ $item->quantity }}
                                                            </p>
                                                        </div>
                                                        <hr>
                                                        @endforeach
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="#" data-bs-dismiss="modal" class="btn btn-danger">Close</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- end table -->
                </div>
            </div>
            <!-- end row -->

            <a href="{{ route('products.index') }}" class="mybtn btn btn-success"><i class="fa fa-plus"></i> New
                Order</a>

        </div> <!-- container-fluid -->
    </div>
    <style>
        .mybtn {
            position: fixed;
            right: 10px;
            bottom: 20px;
            z-index: 99999;
            border-radius: 25px;
        }

    </style>
@endsection