@extends('layouts.app')
@section('content')
    <div class="main__container">
        <div class="header__">
            <div class="left__">
                <h2>My Pos</h2>
            </div>
        </div>
        <div class="table__wrapper">
            <table class="regular-table">
                <tr>
                    <th>Po ID</th>
                    <th>Volume</th>
                    <th>Provider</th>
                    <th>Arrival Date</th>
                    <th>Status</th>
                    <th class="center"></th>
                </tr>
                @foreach ($pos as $po)
                    <tr>
                        <td>
                            <p class="semibold">{{ $po->po_id }}</p>
                        </td>
                        <td>
                            <p class='semibold'>{{ $po->volume_kg }} KG</p>
                        </td>
                        <td>
                            <p class='semibold'>{{ $po->provider }}</p>
                        </td>
                        <td>
                            <p class="semibold bold">{{ $po->arrival_date }}
                            </p>
                        </td>
                        <td>
                            @if ($po->status == 0)
                                <p class="status progress">
                                    <span class="dot"></span> In progress
                                </p>
                            @elseif($po->status == 1)
                                <p class="status completed">
                                    <span class="dot"></span> Delivered
                                </p>
                            @else
                                <p class="status canceled">
                                    <span class="dot"></span> Canceled
                                </p>
                            @endif
                        </td>
                        <td class="center">
                            <div class="action__button">
                                <a href="#"><img src="img/dots.svg" alt="dots"></a>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </table>
        </div>
    </div>
@endsection