@extends('app.app')

@section('title') Delivery Tracker @endsection
@section('styles')
@endsection
@push('head-scripts')
    
@section('content')
    <!-- Start address - End address -->
    <!-- <div class="StartEndHeader" >
        <div class="col-6">
            <p><b>Start:</b></p>
            <p>109 Queen Street<br>
                Auckland, 1010</p>
        </div>
        <div class="col-6">
            <p><b>End:</b></p>
            <p>109 Queen Street<br>
                Auckland, 1010</p>
        </div>
    </div> -->

    <!-- Preview / Notes buttons -->

    <!-- Tabs navs -->
    <ul class="nav nav-pills mb-3 nav-fill position-fixed" style="width: 100vw; background-color: #fcfcfc; z-index: 10" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active"  style="min-height: 5vh;" 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">
                Pickup / Direct Delivery <div class="badge rounded-pill bg-dark"> {{ $countpickup }}</div>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link"  style="min-height: 5vh;" 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">
                Delivery <div class="badge rounded-pill bg-dark">{{ $countdelivery }}</div>
            </button>
        </li>
    </ul>
    <!-- Tabs navs -->

    <!-- Tabs content -->
    <div class="tab-content" id="pills-tabContent" style="margin-top: 65px; 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="tab-content" id="pills-child1-tabContent">
                <!-- Chiled Tab 3 -->
                <div class="tab-pane fade show active" id="ex2-tabs-3" role="tabpanel" aria-labelledby="ex2-tab-3">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 h4"><i class="fas fa-truck"></i> TODAY'S PICKUP</div>
                        </div>
                        <div class="row">
                            @foreach($getpickup as $get)
                                <a href="{{ route('driver.task.details', $get->task_id) }}" class="simpleLink">
                                    <div class="col-12">
                                        <div class="card bg-light mb-3 ReceiverCard">
                                            <div class="card-header ReceiverCardHeader">
                                                <div class="deliveryNumber">
                                                    Order# TM{{ $get->order_id }}
                                                </div>
                                                <div class="">
                                                    <span class="small">From:</span> {{ $get->vendor_name }}
                                                </div>
                                                <div class="">
                                                    {{ $get->total_packages }} Items
                                                </div>
                                            </div>
                                            <div class="card-body" >
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="row" style="display: flex;">
                                                            <div class="col-lg-3 col-4 description">Receiver:</div>
                                                            <div class="col valueCol small"><h5 style="font-weight: bolder;">{{ $get->receiver_first_name ." " . $get->receiver_last_name }} </h5></div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-3 col-4 description">Address:</div>
                                                            <div class="col valueCol small">{{ $get->receiver_address }}</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-3 col-4 description">Phone:</div>
                                                            <div class="col valueCol small">{{ $get->receiver_phone }}</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-3 col-4 description">Invoice No:</div>
                                                            <div class="col valueCol small">{{ $get->invoice_num }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="btn btnMore">
                                                            <i class="fas fa-angle-double-right"></i> 
                                                            @if($get->order_status_id === 2) 
                                                                Pick Up
                                                            @elseif($get->order_status_id === 5) 
                                                                Deliver
                                                            @else 
                                                                {{ $get->order_status_name  }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row text-end">
                                                    <div class="col text-muted small">{{ $get->days_left }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- Chiled Tab 4 -->
                <div class="tab-pane fade" id="ex2-tabs-4" role="tabpanel" aria-labelledby="ex2-tab-4">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 h4"><i class="fas fa-truck"></i> PAST PICKUP</div>
                        </div>
                        <div class="row">
                            @foreach($pastpickup as $delivery)
                            <a href="{{ route('driver.task.details', $delivery->task_id) }}" class="simpleLink" >
                                <div class="col-12">
                                    <div class="card bg-light mb-3 ReceiverCard">
                                        <div class="card-header ReceiverCardHeader">
                                            <div class="deliveryNumber">
                                                Order# {{ $delivery->order_id }}
                                            </div>
                                            <div class="">
                                                <span class="small">From:</span> {{ $delivery->vendor_name }}
                                            </div>
                                            <div class="">
                                                {{ $delivery->total_packages }} Items
                                            </div>
                                        </div>
                                        <div class="card-body" >
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="row" style="display: flex;">
                                                        <div class="col-lg-3 col-4 description">Receiver:</div>
                                                        <div class="col valueCol small"><h5 style="font-weight: bolder;">{{ $delivery->receiver_first_name ." " . $delivery->receiver_last_name }} </h5></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Address:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_address }}
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Phone:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_phone }}</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Invoice No:</div>
                                                        <div class="col valueCol small">{{ $delivery->invoice_num }}</div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-3 col-4">
                                                    <div class="btn btnCompleted"><i class="fas fa-check"></i> Completed</div>
                                                </div>
                                            </div>
                                            <div class="row text-end">
                                                <div class="col text-muted small">{{ $delivery->days_after_completion }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- Chiled Tab 5 -->
                <div class="tab-pane fade" id="ex2-tabs-5" role="tabpanel" aria-labelledby="ex2-tab-5">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 h4"><i class="fas fa-truck"></i> FUTURE PICKUP</div>
                        </div>
                        <div class="row">
                            @foreach($futurepickup as $delivery)
                            <a href="{{ route('driver.task.details', $delivery->task_id) }}" class="simpleLink" >
                                <div class="col-12">
                                    <div class="card bg-light mb-3 ReceiverCard">
                                        <div class="card-header ReceiverCardHeader">
                                            <div class="deliveryNumber">
                                                Order# TM{{ $delivery->order_id }}
                                            </div>
                                            <div class="">
                                                <span class="small">From:</span> {{ $delivery->vendor_name }}
                                            </div>
                                            <div class="">
                                                {{ $delivery->total_packages }} Items
                                            </div>
                                        </div>
                                        <div class="card-body" >
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="row" style="display: flex;">
                                                        <div class="col-lg-3 col-4 description">Receiver:</div>
                                                        <div class="col valueCol small"><h5 style="font-weight: bolder;">{{ $delivery->receiver_first_name ." " . $delivery->receiver_last_name }} </h5></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Address:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_address }}
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Phone:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_phone }}</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Invoice No:</div>
                                                        <div class="col valueCol small">{{ $delivery->invoice_num }}</div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-3 col-4">
                                                <div class="btn btnMore">
                                                        <i class="fas fa-angle-double-right"></i> 
                                                        @if($delivery->order_status_id === 2) 
                                                            Pick Up
                                                        @elseif($delivery->order_status_id === 5) 
                                                            Deliver
                                                        @else 
                                                            {{ $delivery->order_status_name }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row text-end">
                                                <div class="col text-muted small">{{ $delivery->days_left }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Chiled Tabs navs -->
                <ul class="nav nav-pills p-1 nav-fill bottom-0 fixed-bottom" id="pills-tab" role="tablist" style=" width: 100vw; background-color: #fcfcfc">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link " style="min-height: 5vh;"  id="ex2-tab-4" data-bs-toggle="pill" data-bs-target="#ex2-tabs-4" type="button" role="tab" aria-controls="ex2-tab-4" aria-selected="true">
                            <i class="fas fa-arrow-circle-left"></i> Previous Day Pickup
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" style="min-height: 5vh;"  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">
                            <i class="fas fa-clock"></i> Today
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" style="min-height: 5vh;"  id="ex2-tab-5" data-bs-toggle="pill" data-bs-target="#ex2-tabs-5" type="button" role="tab" aria-controls="ex2-tab-5" aria-selected="false">
                            Next Day Pickup <i class="fas fa-arrow-circle-right"></i>
                        </button>
                    </li>
                </ul>
                <!-- Child Tabs navs -->
            </div>
        </div>
        <!-- Tab 2 -->
        <div class="tab-pane fade" id="ex2-tabs-2" role="tabpanel" aria-labelledby="ex2-tab-2">
            <div class="tab-content" id="pills-child1-tabContent">
                <!-- Chiled Tab 6 -->
                <div class="tab-pane fade show active" id="ex2-tabs-6" role="tabpanel" aria-labelledby="ex2-tab-6">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 h4"><i class="fas fa-truck"></i> TODAY'S DELIVERY</div>
                        </div>
                        <div class="row">
                            @foreach($getdelivery as $key)
                            <a href="{{ route('driver.task.details', $key->task_id) }}" class="simpleLink" >
                                <div class="col-12">
                                    <div class="card bg-light mb-3 ReceiverCard">
                                        <div class="card-header ReceiverCardHeader">
                                            <div class="deliveryNumber">
                                                Order# TM{{ $key->order_id }}
                                            </div>
                                            <div class="">
                                                <span class="small">From:</span> {{ $key->vendor_name }}
                                            </div>
                                            <div class="">
                                                {{ $key->total_packages }} Items
                                            </div>
                                        </div>
                                        <div class="card-body" >
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="row" style="display: flex;">
                                                        <div class="col-lg-3 col-4 description">Receiver:</div>
                                                        <div class="col valueCol small"><h5 style="font-weight: bolder;">{{ $key->receiver_first_name ." " . $key->receiver_last_name }} </h5></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Address:</div>
                                                        <div class="col valueCol small">{{ $key->receiver_address }} 
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Phone:</div>
                                                        <div class="col valueCol small">
                                                            {{ $key->receiver_phone}}</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Invoice No:</div>
                                                        <div class="col valueCol small">{{ $key->invoice_num }}</div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-3 col-4">
                                                <div class="btn btnMore">
                                                        <i class="fas fa-angle-double-right"></i> 
                                                        @if($key->order_status_id === 2) 
                                                            Pick Up
                                                        @elseif($key->order_status_id === 5) 
                                                            Deliver
                                                        @else 
                                                            {{ $key->order_status_name }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row text-end">
                                                <div class="col text-muted small">{{ $key->days_left }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            @endforeach
                        </div>
    
                    </div>
                </div>
                <!-- Chiled Tab 7 -->
                <div class="tab-pane fade" id="ex2-tabs-7" role="tabpanel" aria-labelledby="ex2-tab-7">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 h4"><i class="fas fa-truck"></i> PAST DELIVERY</div>
                        </div>
                        <div class="row">
                            @foreach($pastdelivery as $delivery)
                            <a href="{{ route('driver.task.details', $delivery->task_id) }}" class="simpleLink" >
                                <div class="col-12">
                                    <div class="card bg-light mb-3 ReceiverCard">
                                        <div class="card-header ReceiverCardHeader">
                                            <div class="deliveryNumber">
                                                Order# TM{{ $delivery->order_id }}
                                            </div>
                                            <div class="">
                                                <span class="small">From:</span> {{ $delivery->vendor_name }}
                                            </div>
                                            <div class="">
                                                {{ $delivery->total_packages }} Items
                                            </div>
                                        </div>
                                        <div class="card-body" >
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="row" style="display: flex;">
                                                        <div class="col-lg-3 col-4 description">Receiver:</div>
                                                        <div class="col valueCol small"><h5 style="font-weight: bolder;">{{ $delivery->receiver_first_name ." " . $delivery->receiver_last_name }} </h5></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Address:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_address }}
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Phone:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_phone }}</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Invoice No:</div>
                                                        <div class="col valueCol small">{{ $delivery->invoice_num }}</div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-3 col-4">
                                                    <div class="btn btnCompleted"><i class="fas fa-check"></i> Completed</div>
                                                </div>
                                            </div>
                                            <div class="row text-end">
                                                <div class="col text-muted small">{{ $delivery->days_after_completion }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- Chiled Tab 8 -->
                <div class="tab-pane fade" id="ex2-tabs-8" role="tabpanel" aria-labelledby="ex2-tab-8">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 h4"><i class="fas fa-truck"></i> FUTURE DELIVERY</div>
                        </div>
                        <div class="row">
                            @foreach($futuredelivery as $delivery)
                            <a href="{{ route('driver.task.details', $delivery->task_id) }}" class="simpleLink" >
                                <div class="col-12">
                                    <div class="card bg-light mb-3 ReceiverCard">
                                        <div class="card-header ReceiverCardHeader">
                                            <div class="deliveryNumber">
                                                Order# TM{{ $delivery->order_id }}
                                            </div>
                                            <div class="">
                                                <span class="small">From:</span> {{ $delivery->vendor_name }}
                                            </div>
                                            <div class="">
                                                {{ $delivery->total_packages }} Items
                                            </div>
                                        </div>
                                        <div class="card-body" >
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="row" style="display: flex;">
                                                        <div class="col-lg-3 col-4 description">Receiver:</div>
                                                        <div class="col valueCol small"><h5 style="font-weight: bolder;">{{ $delivery->receiver_first_name ." " . $delivery->receiver_last_name }} </h5></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Address:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_address }}
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Phone:</div>
                                                        <div class="col valueCol small">{{ $delivery->receiver_phone }}</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 col-4 description">Invoice No:</div>
                                                        <div class="col valueCol small">{{ $delivery->invoice_num }}</div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-3 col-4">
                                                <div class="btn btnMore">
                                                        <i class="fas fa-angle-double-right"></i> 
                                                        @if($delivery->order_status_id === 2) 
                                                            Pick Up
                                                        @elseif($delivery->order_status_id === 5) 
                                                            Deliver
                                                        @else 
                                                            {{ $delivery->order_status_name }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row text-end">
                                                <div class="col text-muted small">{{ $delivery->days_left }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Chiled Tabs navs -->
                <ul class="nav nav-pills p-1 nav-fill bottom-0 fixed-bottom" id="pills-tab" role="tablist" style=" width: 100vw; background-color: #fcfcfc">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link " style="min-height: 5vh;"  id="ex2-tab-7" data-bs-toggle="pill" data-bs-target="#ex2-tabs-7" type="button" role="tab" aria-controls="ex2-tab-7" aria-selected="true">
                            <i class="fas fa-arrow-circle-left"></i> Previous Day Delivery
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" style="min-height: 5vh;"  id="ex2-tab-6" data-bs-toggle="pill" data-bs-target="#ex2-tabs-6" type="button" role="tab" aria-controls="ex2-tab-6" aria-selected="false">
                            <i class="fas fa-clock"></i> Today
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" style="min-height: 5vh;"  id="ex2-tab-8" data-bs-toggle="pill" data-bs-target="#ex2-tabs-8" type="button" role="tab" aria-controls="ex2-tab-8" aria-selected="false">
                            Next Day Delivery <i class="fas fa-arrow-circle-right"></i>
                        </button>
                    </li>
                </ul>
                <!-- Child Tabs navs -->
            </div>
        </div>
    </div>
    <!-- Tabs content -->
@endsection