@extends('inventory::layouts.master')

@section('page_content')
    <div class="row printable">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-6">
                            <h4 class="header-title">{{ $pageTitle }}</h4>
                        </div>
                        <div class="col-sm-6 not-printable">
                            <div class="float-right">
                                @if(isset($urls["addUrl"]))
                                    <a href="{{$urls['addUrl']}}">
                                        <div class="btn btn-info btn-sm"><span class="fa fa-plus"></span> Add New</div>
                                    </a>
                                @endif

                                @if(isset($urls["editUrl"]) && $record["approvalStatus"] !== "APPROVED")
                                    <a href="{{$urls['editUrl']}}">
                                        <div class="btn btn-info btn-sm"><span class="fa fa-edit"></span> Edit</div>
                                    </a>
                                @endif

                                @if(isset($urls["listUrl"]))
                                    <a href="{{$urls['listUrl']}}">
                                        <div class="btn btn-info btn-sm"><span class="fa fa-list"></span> List</div>
                                    </a>
                                @endif

                                <div class="btn btn-info btn-sm" onclick="window.print()">
                                    <span class="fa fa-print"></span> Print
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <h4 class="page-title mb-3 not-printable">Items in Exchange Order</h4>

                    <div class="table-responsive">
                        <table class="table table-bordered table-centered mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Product Name</th>
                                @if($showProductSize === "YES")<th>Product Size</th>@endif
                                <th>Quantity</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(isset($record["purchase_order_items"]) && count($record["purchase_order_items"]) > 0)
                                @foreach($record["purchase_order_items"] as $item)
                                    <tr>
                                        <th scope="row">{{ $item["product"]["name"] }}</th>
                                        @if($showProductSize === "YES")<td>{{ number_format($item["product"]["itemSize"], 2) }} {{ $item["product"]["measure"]["name"] ?? '' }}</td>@endif
                                        <td>{{ number_format($item["quantity"], 2) }} {{ $item["measure"]["name"] }}</td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="page-title mb-3">Order Information</h4>

                    <h5 class="mt-0">Exchange Order Number</h5>
                    <p>{{ $record["name"]}}</p>

                    <h5 class="mt-3">Department</h5>
                    <p>
                        {{ $record["store"]["department"]["name"]}}
                    </p>

                    <h5 class="mt-3">Requested Store</h5>
                    <p>
                        {{ $record["store"]["name"]}}
                    </p>

                    <h5 class="mt-3">Exchange(d) Store</h5>
                    <p>
                        {{ $record["source_store"]["name"]}}
                    </p>
                </div>
            </div>
        </div> <!-- end col -->

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <h4 class="page-title mb-3">Track Order Status</h4>
                        </div>
                        <div class="col-lg-4 pt-2 text-right">
                            <div class="btn btn-sm btn-{{ $orderStatus["label"] }}">{{ $orderStatus["name"] }}</div>
                        </div>
                    </div>

                    <div class="track-order-list">
                        <ul class="list-unstyled">
                            @if(isset($orderStatusUpdates) && count($orderStatusUpdates) > 0)
                                @foreach($orderStatusUpdates as $status)

                                    <li class="@if($status["isCompleted"]) completed @endif">
                                        @if($status["isActive"])
                                            <span class="active-dot dot"></span>
                                        @endif
                                        @if($status["isRed"])
                                            <span class="active-dot dot" style="background-color: red; color: red;"></span>
                                        @endif
                                        <h5 class="mt-0 mb-1">{{ $status["name"] }}</h5>
                                        <p class="text-muted">{{ $status["tagline"] }} </p>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <h4 class="page-title mb-3">Track Approval Status</h4>
                        </div>
                        <div class="col-lg-4 pt-2 text-right">
                            <div class="btn btn-sm btn-{{ $approvalStatus["label"] }}">{{ $approvalStatus["name"] }}</div>
                        </div>
                    </div>

                    <div class="track-order-list">
                        <ul class="list-unstyled">
                            @if(isset($approvalStatusUpdates) && count($approvalStatusUpdates) > 0)
                                @foreach($approvalStatusUpdates as $status)

                                    <li class="@if($status["isCompleted"]) completed @endif">
                                        @if($status["isActive"])
                                            <span class="active-dot dot"></span>
                                        @endif
                                        @if($status["isRed"])
                                            <span class="active-dot dot" style="background-color: red; color: red;"></span>
                                        @endif
                                        <h5 class="mt-0 mb-1">{{ $status["name"] }}</h5>
                                        <p class="text-muted">{{ $status["tagline"] }} </p>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
    <!-- end row -->
@endsection

@section('page_css')
    <style>
        @media print {
            .navbar-custom, .left-side-menu .footer, .container-fluid > .row:not(.printable), .not-printable {
                display:none;
            }

            #print-area * {
                display:block !important;
            }
        }
    </style>
@endsection

@section('page_js')
@endsection