@extends('admin.app')
@section('title') Edit Order @endsection
@section('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<style>

    .product-details .product-status-wrap{
    width: 100%;
    margin: 40px auto 20px;
    overflow: initial;
}
        
.product-details .product-status-wrap .modal-content {
    width: 100%;
    margin: 0px auto;
    background: none;
    box-shadow: none;
    border: 0px;
    max-height: 100% !important;
}

.product-details .product-status-wrap .modal-content  .modal-header {
    border-bottom: 0px;
    width: 100%;
    float: left;
    display: block;
    padding: 0px 0px 10px;
}

.product-details .product-status-wrap .modal-content  .rb-container {
    font-family: "PT Sans", sans-serif;
    width: 90%;
    margin: auto;
    display: block;
    position: relative;
}
.product-details  .rb-container ul.rb li.current::before {
        border-color: green;
    }
    .product-details .product-status-wrap .modal-content .rb-container {
    font-family: "PT Sans", sans-serif;
    width: 96%;
    margin: auto;
    display: block;
    position: relative;
}   

.product-details .trust .tab-panel .content {
    margin-bottom: 0px;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

.text-muted{
    margin-bottom:0px;
}
.card-text:last-child {
    margin-bottom: 15px;
}
</style>
@endsection
@section('content')
<div class="container-fluid">
    <div class="row dataList product-details" style="margin: auto;">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: left;">
            @if(session('success'))
            <div class="alert alert-success alert-dismissible">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif
            <div class="product-status-wrap">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="row">
                            <div class="col-sm-6">
                                <h5 class="modal-title">Order TM{{ $order->order_id }} </h5>
                            </div>
                                                    
                            <div class="col-sm-6">
                                <h5 class="modal-title">Invoice {{ $order->invoice_num }}</h5>
                            </div>
                            {{-- <div class="col-sm-6">
                                <h5 class="modal-title">
                                    @if($order->orderStatuses->isEmpty())
                                    <a class="" href="#" onclick="event.preventDefault(); document.getElementById('confirm-order-form').submit();">
                                        <button type="button" class="btnreq">Confirm</button>
                                    </a>
                                    <form id="confirm-order-form" action="{{ route('vendor.orders.confirm', $order) }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                    @endif
                                </h5>
                            </div> --}}
                        </div>
                    </div>
                    <div class="row mb-2">
                        {{-- Sender --}}
                        <div class="col-md-6 mb-2">
                            <div class="card  mb-2">
                                <h5 class="card-header">Sender</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                          <p class="text-muted">Name</p>
                                          <p class="card-text">{{ $vendor->vendor_name }}</p>
                                        </div>                                            
                                        <div class="col-sm-6">
                                          <p class="text-muted">Address</p>
                                          <p class="card-text"></p>
                                        </div>
                                        <div class="col-sm-6">
                                          <p class="text-muted">Email</p>
                                          <p class="card-text">{{ $vendor->email }}</p>
                                        </div>                                            
                                        <div class="col-sm-6">
                                          <p class="text-muted">Phone</p>
                                          <p class="card-text">{{ $vendor->vendor_mobile_num }}</p>
                                        </div>
                                        <div class="col-sm-6">
                                          <p class="text-muted">Pickup Date</p>
                                          <p class="card-text">{{ $order->pickup_date }}</p>
                                        </div>
                                    </div>
                                 </div>
                            </div>
                            {{-- Estimate --}}
                            <div class="card">
                                <h5 class="card-header">Estimate</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="text-muted">Estimated Delivery Cost</p>
                                            <p class="card-text">$ {{ $order->estimated_delivery_charge }}</p>
                                        </div>

                                        <div class="col-6">
                                            <p class="text-muted">Estimated Distance</p>
                                            <p class="card-text">{{ $order->estimated_distance }} km</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Receiver --}}
                        <div class="col-md-6 mb-2">
                            <div class="card">
                                <h5 class="card-header">Receiver</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                         <p class="text-muted">Name</p>
                                         <p class="card-text">{{ $order->receiver_first_name }} {{ $order->receiver_last_name }}</p>
                                        </div>
                                        <div class="col-sm-6">
                                         <p class="text-muted">Address</p>
                                         <p class="card-text"></p>
                                        </div>
                                        <div class="col-sm-6">
                                         <p class="text-muted">Drop Off Access</p>
                                         <p class="card-text">{{ $order->drop_off_access }}</p>
                                        </div>
                                        <div class="col-sm-6">
                                         <p class="text-muted">Floor</p>
                                         <p class="card-text">
                                                        @if ( $order->drop_off_access === "Ground" )
                                                            0
                                                        @else
                                                            {{ $order->floor }}
                                                        @endif
                                                    </p>
                                        </div>
                                        <div class="col-sm-6">
                                         <p class="text-muted">Email</p>
                                         <p class="card-text">{{ $order->receiver_email }}</p>
                                        </div>
                                        <div class="col-sm-6">
                                         <p class="text-muted">Phone</p>
                                         <p class="card-text">{{ $order->receiver_phone }}</p>
                                        </div>
                                        <div class="col-sm-6">
                                         <p class="text-muted">Delivery Date</p>
                                         <p class="card-text">{{ $order->delivery_date }}</p>
                                        </div>
                                        <div class="col-sm-6">
                                         <p class="text-muted">Notes</p>
                                         <p class="card-text">{{ $order->delivery_note }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Freight Details --}}
                        <div class="col-12 mb-2">
                            <div class="card" >
                                <h5 class="card-header">Freight Details</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <table id="orderTable">
                                            <thead>
                                                <tr class="table-header">
                                                    <th>Reference #</th>
                                                    <th>Product Type</th>
                                                    <th>Description</th>
                                                    <th>Quantity</th>
                                                    <th>Length</th>
                                                    <th>Width</th>
                                                    <th>Height</th>
                                                    <th>Total Cubic</th>
                                                    <th>Weight</th>
                                                    <th>Installation</th>
                                                    <th>Unwrap</th>
                                                    <th>Fragile</th>
                                                <th><a href="{{ route('admin.orders.print', $order) }}" target="_blank">Print All</a><br> (Thermal/A4)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($order->packages as $package)
                                                <tr class="table-border">
                                                    <td>{{$package->reference_id}}</td>
                                                    <td>{{$package->product_type}}</td>
                                                    <td style="word-break:break-all">{{$package->product_description}}</td>
                                                    <td>{{$package->quantity}}</td>
                                                    <td>{{$package->length}} {{$package->unit}}</td>
                                                    <td>{{$package->width}} {{$package->unit}}</td>
                                                    <td>{{$package->height}} {{$package->unit}}</td>
                                                    <td>{{$package->cubic}} ㎥</td>
                                                    <td>{{$package->weight}} Kg</td>
                                                    <td>
                                                        @if ($package->installation === 1)
                                                        <i class="fas fa-check"></i>
                                                        @else
                                                        <i class="fas fa-times"></i>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($package->unwrap === 1)
                                                        <i class="fas fa-check"></i>
                                                        @else
                                                        <i class="fas fa-times"></i>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($package->fragile === 1)
                                                        <i class="fas fa-check"></i>
                                                        @else
                                                        <i class="fas fa-times"></i>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <a href="{{ route('admin.packages.print', $package) }}" target="_blank">
                                                            <i class="fa fa-print" aria-hidden="true"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- History --}}
                        <div class="col-12 mb-2">
                            <div class="card">
                                <h5 class="card-header"><i class="fas fa-route"></i> HISTORY</h5>
                                <div class="card-body">
                                <link rel="stylesheet" href="{{ asset('/css1/app.css') }}">
                                <div class="trust">
                                    <div class="tab-panel" id="ex2-tabs-2" role="tabpanel" aria-labelledby="ex2-tab-2">
                                
                                            <div class="row content">
                                                    <div class="rb-container">
                                                        <ul class="rb">
                                                            @foreach($order->orderStatuses as $orderStatus)
                                                            <li @class(['rb-item', 'current'=> $orderStatus->pivot->current]) ng-repeat="itembx">
                                                                <h5>{{ $orderStatus->order_status_name }}</h5>
                                                                <div class="timestamp">{{ $orderStatus->pivot->created_at->format('d/m/Y') }}</div>
                                                                <div class="item-title">{{ $orderStatus->pivot->remarks }}</div>
                                                            </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                </div>   
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>


                        {{-- Attachments --}}
                        <div class="col-12 mb-2">
                            <div class="card">
                                <h5 class="card-header">Attachments</h5>
                                <div class="card-body">
                                    <div class="row">
                                        <table id="orderTable">
                                            <thead>
                                                <tr class="table-header">
                                                    <th>DATE</th>
                                                    <th>FILE NAME</th>
                                                    <th>REMARKS</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($order->images as $image)
                                                <tr class="table-border">
                                                    <td>{{ $image->created_at }}</td>
                                                    <td><a href="/storage/{{$image->image_path}}" target="_blank">{{ $image->original_file_name }}</a></td>
                                                    <td>{{ $image->remarks }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')

@endpush