@extends('app.app')

@section('title') Delivery Tracker @endsection
@section('styles')
@endsection
@push('head-scripts')
    
@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @foreach($details as $detail)
    <div class="DetailHeader h4">Order# TM{{ $detail->order_id }}</div>
    @endforeach
    <!-- Tabs navs -->
    <ul class="nav nav-pills nav-fill position-fixed" style="width: 100vw; background-color: #fcfcfc; margin-top: 65px; z-index: 10" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="ex2-tab-1" data-bs-toggle="pill" data-bs-target="#ex2-tabs-1" type="button" role="tab" aria-controls="ex2-tab-1" aria-selected="true">Consignment</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="ex2-tab-2" data-bs-toggle="pill" data-bs-target="#ex2-tabs-2" type="button" role="tab" aria-controls="ex2-tab-2" aria-selected="false">History</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="ex2-tab-3" data-bs-toggle="pill" data-bs-target="#ex2-tabs-3" type="button" role="tab" aria-controls="ex2-tab-3" aria-selected="false">Attachments</button>
        </li>
    </ul>
    <!-- Tabs navs -->
    <!-- Tabs content -->
    <div class="tab-content" id="pills-tabContent" style="margin-top: 120px; margin-bottom: 100px;">

        <!-- Tab 1 -->
        <div class="tab-pane fade show active" id="ex2-tabs-1" role="tabpanel" aria-labelledby="ex2-tab-1">
            <div class="container">
                <div class="row content">
                    <h4 class="content_title"><i class="fa-solid fa-boxes-packing"></i> FROM</h4>
                    @if  ( $detail->task_type_id === 1 || $detail->task_type_id === 2  ) 
                        <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> Vendor's Address: {{ $detail->pickup_address }}</div>
                    @elseif ( $detail->task_type_id === 3  ) 
                        @if ( $detail->warehouse_id == 2 ) 
                            <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> {{ $detail->warehouse_name }}: {{ $detail->pickup_address }}</div>
                        @elseif ( $detail->warehouse_id == 1 ) 
                            <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> ( {{ $detail->warehouse_name }} )</div>
                        @else
                            <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> {{ $detail->warehouse_name }}: {{ $detail->warehouse_address }}</div>
                        @endif
                    @endif
                </div>
                <div class="row content">
                    <h4 class="content_title"><i class="fa-solid fa-user"></i> VENDOR</h4>
                    <div class="col-6 mb-3"><i class="fas fa-user"></i> {{ $detail->vendor_name }}</div>
                    <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> {{ $detail->pickup_address }}</div>
                    <div class="col-12"><i class="fas fa-mobile-alt"></i> <a href="tel:+{{ $detail->vendor_mobile_num }}">+{{ $detail->vendor_mobile_num }}</a></div>
                </div>
                <div class="row content">
                    <h4 class="content_title"><i class="fa-solid fa-box-archive"></i> TO</h4>
                    @if ( $detail->warehouse_id == 1 ) {{--unassigned--}} 
                        <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> ( {{ $detail->warehouse_name }} )</div>
                    @else
                        @if  ( $detail->task_type_id === 1 ) {{--direct delivery task--}}
                            <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> Receiver's Address: 
                                <a href="https://www.google.com/maps/dir/?api=1&origin={{ $detail->pickup_address }}&destination={{ $detail->receiver_address }}&travelmode=driving" target="_blank">{{ $detail->receiver_address }}</a>
                            </div>
                        @elseif( $detail->task_type_id === 2  ) {{--pickup task--}}
                            @if ( $detail->warehouse_id == 2 ) {{--direct delivery--}}
                                <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> {{ $detail->warehouse_name }}: 
                                    <a href="https://www.google.com/maps/dir/?api=1&origin={{ $detail->pickup_address }}&destination={{ $detail->receiver_address }}&travelmode=driving" target="_blank">{{ $detail->receiver_address }}</a>
                                </div>
                            @else
                                <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> {{ $detail->warehouse_name }}: 
                                    <a href="https://www.google.com/maps/dir/?api=1&origin={{ $detail->pickup_address }}&destination={{ $detail->warehouse_address }}&travelmode=driving" target="_blank">{{ $detail->warehouse_address }}</a>
                                </div>
                            @endif
                        @elseif ( $detail->task_type_id === 3  ) {{--delivery task--}}
                            @if ( $detail->warehouse_id == 2 ) {{--direct delivery--}}
                                <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> Receiver's Address: 
                                    <a href="https://www.google.com/maps/dir/?api=1&origin={{ $detail->pickup_address }}&destination={{ $detail->receiver_address }}&travelmode=driving" target="_blank">{{ $detail->receiver_address }}</a>
                                </div>
                            @else
                                <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> Receiver's Address: 
                                    <a href="https://www.google.com/maps/dir/?api=1&origin={{ $detail->warehouse_address }}&destination={{ $detail->receiver_address }}&travelmode=driving" target="_blank">{{ $detail->receiver_address }}</a>
                                </div>
                            @endif
                        @else
                            <p>something wrong...</p>
                        @endif
                    @endif

                </div>
                <div class="row content">
                    <h4 class="content_title"><i class="fa-solid fa-person-chalkboard"></i> CUSTOMER</h4>
                    <div class="col-6 mb-3"><i class="fas fa-user"></i> {{ $detail->receiver_first_name . " " . $detail->receiver_last_name }} </div>
                    <div class="col-6 mb-3">Reference:  
                        @foreach ($packages as $package)
                            {{ $package->reference_id }}
                        @endforeach
                    </div>
                    <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> {{ $detail->receiver_address }}</div>
                    <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> Drop off Access: {{ $detail->drop_off_access }}</div>
                    <div class="col-12 mb-3"><i class="fas fa-map-marker-alt"></i> Floor: 
                        @if($detail->drop_off_access === "Ground") 
                            0 
                        @else 
                            {{ $detail->floor }}
                        @endif
                    </div>
                    <div class="col-12 mb-3"><i class="fas fa-mobile-alt"></i> <a href="tel:+{{ $detail->receiver_phone }}">+{{ $detail->receiver_phone }}</a></div>
                </div>
                <div class="row content" style="overflow-x: scroll;">
                    <h4 class="content_title"><i class="fas fa-box"></i> FREIGHT</h4>
                    <table class="table small">
                        <thead>
                            <tr class="small p-0">
                                <th class="p-1">No.</th>
                                <th class="p-1">Product Type</th>
                                <th class="p-1">Description</th>
                                <th class="p-1">Installation</th>
                                <th class="p-1">Unwrap</th>
                                <th class="p-1">Fragile</th>
                                <th class="p-1">Qty</th>
                                <th class="p-1">m3</th>
                                <th class="p-1">Kg</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($packages as $package)
                            <tr class="small">
                                <td class="p-1">{{ $package->reference_id }}</td>
                                <td class="p-1">{{ $package->product_type }}</td>
                                <td class="p-1">{{ $package->product_description }}</td>
                                <td class="p-1">
                                    @if ($package->installation === 1)
                                        <i class="fas fa-check"></i>
                                    @else
                                        <i class="fas fa-times"></i>
                                    @endif
                                </td>
                                <td class="p-1">
                                    @if ($package->unwrap === 1)
                                        <i class="fas fa-check"></i>
                                    @else
                                        <i class="fas fa-times"></i>
                                    @endif
                                </td>
                                <td class="p-1">
                                    @if ($package->fragile === 1)
                                        <i class="fas fa-check"></i>
                                    @else
                                        <i class="fas fa-times"></i>
                                    @endif
                                </td>
                                <td class="p-1">{{ $package->quantity }}</td>
                                <td class="p-1">{{ $package->cubic }}</td>
                                <td class="p-1">{{ $package->weight }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-end small">
                        <div class="p-3">TOTAL: {{ $total_quantity[ $detail->task_id ] ?? '' }} items(s)</div>
                        <div class="p-3">{{ $total_cubic[ $detail->task_id ] ?? '' }} m3</div>
                        <div class="p-3">{{ $total_weight[ $detail->task_id ] ?? '' }} kg</div>
                    </div>
                </div>
                <div class="row content">
                    <h4 class="content_title"><i class="fas fa-clipboard"></i> NOTES & INSTRUCTIONS</h4>
                    <div class="col-12">{{ $detail->delivery_note }}</div>
                </div>
            </div>
        </div>
        
        <!-- Tab 2 -->
        <div class="tab-pane fade" id="ex2-tabs-2" role="tabpanel" aria-labelledby="ex2-tab-2" >
        
            <div class="container">
                <div class="row content">
                    <h4 class="content_title"><i class="fas fa-route"></i> HISTORY</h4>
                    <div class="container">
                        <div class="rb-container">
                            <ul class="rb">

                                @foreach($orderStatusHistory as $orderStatusHistory)
                                <li class="rb-item" ng-repeat="itembx">
                                    <h5>{{ $orderStatusHistory->order_status_name }}</h5>
                                    <div class="timestamp">{{ $orderStatusHistory->created_at }}</div>
                                    <div class="item-title">{{ $orderStatusHistory->remarks }}</div>
                                </li>
                                @endforeach

                            </ul>
                        </div>
                    </div>
                </div>
                {{-- <div class="row content">
                    <h4 class="content_title"><i class="fas fa-clipboard"></i> ENDORSEMENT</h4>
                    <table class="table ">
                        <thead>
                            <tr>
                                <th>TIMESTAMP</th>
                                <th>DESCRIPTION</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>14:23:54 19/12/2021</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                            </tr>
                            <tr>
                                <td>18:11:49 22/12/2021</td>
                                <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
                            </tr>
                        </tbody>
                    </table>
                </div> --}}
            </div>
        </div>

        <!-- Tab 3 -->
        <div class="tab-pane fade" id="ex2-tabs-3" role="tabpanel" aria-labelledby="ex2-tab-3" >
            <div class="container">
                <div class="row content">
                    <h4 class="content_title mb-4"><i class="fas fa-images"></i> Attachments</h4>
                    <form name="imageUploadForm" method="post" action="{{ route('driver.task.addAttachment') }}" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="order_id" value="{{ $detail->order_id }}">
                        <input type="hidden" name="task_id" value="{{ $detail->task_id }}">
                        <input id="photo" type="file" name="photo" class="mb-2" style="display: inherit" accept="image/png, image/jpeg">
                        <input type="text" class="form-control mb-2" name="remarks" value="" placeholder="remarks if any">
                        <div class="text-end">
                            <button id="btnAddFile" type="button" class="btn btnAddFile w-100" onclick="imageUpload()">Add File</button>
                        </div>
                    </form>
                    <div class="row content-end">
                        <div class="col">
                            <a href="{{ route('app.signature', $detail->task_id) }}">Add Signature</a>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>DATE</th>
                                <th>FILE NAME</th>
                                <th>REMARKS</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($images as $image)
                            <tr>
                                <td>{{ $image->uploaded_at }}</td>
                                <td><a href="/storage/{{$image->image_path}}" target="_blank">{{ $image->original_file_name }}</a></td>
                                <td>{{ $image->remarks }}</td>
                                {{-- <td><input type="submit" value="Delete"></td> --}}
                                <td></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Tabs content -->

    <!-- Button trigger modal -->
    @if ( $currentTaskStatus->task_status_id == 4 )
        {{-- no button for completed task --}}
    @else
        <div class="DetailFooter h4 bottom-0 mb-0">
            <button class="btn btn-confirm w-100 p-3" style="min-height: inherit; font-size: 1.4rem" data-bs-toggle="modal" data-bs-target="#statusModal">
                <i class="fas fa-angle-double-right"></i> Change Status to {{ $order_status[$nextOrderStatus_id] }}
            </button>
        </div>
    @endif

    <!-- Modal -->
    <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="statusModalLabel">Change Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form name="updateStatusForm" method="post" action="{{ route('driver.task.updateOrderStatus') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="order_id" value="{{ $currentOrderStatus->order_id }}">
                        <input type="hidden" name="task_id" value="{{ $currentOrderStatus->task_id }}">
                        <input type="hidden" name="order_status_id" value="{{ $currentOrderStatus->order_status_id }}">
                        
                        {{-- Delivered or Cancelled --}}
                        @if ( $currentOrderStatus->order_status_id === 6 || $currentOrderStatus->order_status_id === 7 )
                            <li><input type="radio" id="order_status_{{$currentOrderStatus->order_status_id}}" name="order_status" value="{{$currentOrderStatus->order_status_id}}" checked readonly> <label for="order_status_{{$currentOrderStatus->order_status_id}}">{{ $order_status[$currentOrderStatus->order_status_id] }}</label></li>
                        @else
                            <li><input type="radio" id="order_status_{{$nextOrderStatus_id}}" name="order_status" value="{{$nextOrderStatus_id}}" checked readonly> <label for="order_status_{{$nextOrderStatus_id}}">{{ $order_status[$nextOrderStatus_id] }}</label></li>
                            <br>
                            <li><input type="radio" id="order_status_7" name="order_status" value="7" {{$currentOrderStatus->order_status_id == 7 ? 'checked': null }}> <label for="order_status_7">{{ $order_status[7] }}</label></li>
                        @endif
                        <br>
                        <b>Remarks</b><input type="text" name="order_status_remakrs" class="form-control" placeholder="Remarks if any">
                    </form>
                </div>
                <div class="modal-footer">
                    {{-- <button type="button" class="btn btnAddFile"><i class="fa-solid fa-circle-check"></i> Update Status</button> --}}
                    <button type="button" class="btn btnAddFile" onclick="saveStatus()"><i class="fa-solid fa-circle-check"></i> Update Status</button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function imageUpload() {
            var btn = document.getElementById('btn');
            var photo = document.getElementById('photo');
            
            if( !photo.value.trim() ) {
                alert('Please choose an image first.');
            } else {
                document.imageUploadForm.submit();
            }
        }
        function saveStatus() {
            console.log('savestatus');
            document.updateStatusForm.submit();
        }

      </script>
    @endpush

@endsection