@extends('layouts.rider')


@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card p-4">
                <div class="card-head">

    @if($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <a  href="{{ url('riderorders') }}" class="btn btn-primary me-2">Back</a>
                    <!-- <button class="btn btn-primary my-1"  onclick="getCurrentLocation()">My Current Location</button> -->
                    <h4 class="my-2">Orders</h4>
                </div>
                <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0y4St8UrR34p4fsCRMh0rVRDw1wqx6Qk&callback=initMap&v=weekly">
   async defer></script>
                <div class="card-body">
                    <div class="row">
                        
                        <div class="col-md-6">

                        <p><strong>Date Ordered :</strong> {{ $order->created_at->format('F j, Y h:i A') }}</p>
                        @if ($order->status == '8')
                        <p><strong>Date Completed :</strong> {{ $order->updated_at->format('F j, Y h:i A') }}</p>
                        @endif

                        <label for="" class="my-1">Tracking Number</label>
                            <div class="border p-2 ">{{$order->tracking_no}} </div>
                            <br>
                            <label for="" class="my-1">Name</label>
                            <div class="border p-2 ">{{$order->user->name}} {{$order->user->middle_name}} {{$order->user->last_name}}</div>
                            <label for="" class="my-1">Contact No</label>
                            <div class="border p-2">{{$order->user->phone}}</div>
                            <label for="" class="my-1">Delivery Address</label>
<div class="border p-2">
    @php
        $address = $order->address;
    @endphp

    @if($address)
        {{ $address->barangay }}<br>
        {{ $address->municipal }}<br>
        {{ $address->streets }}
    @else
        Location not found
    @endif
</div>

                            
                                <br>
                         
                        
                        </div>
                        <div class="col-md-6 table-responsive">
                        <table class="table table-striped">
                        @php
// Define the getDeliveryFee function
if (!function_exists('getDeliveryFee')) {
        function getDeliveryFee($shopId) {    $deliveryRate = \App\Models\DeliveryRate::
                                             where('is_active', 1)
                                              ->value('delivery_fee');
    return $deliveryRate ? $deliveryRate : 0;
}

}
@endphp
                  @php
    // Calculate grand total
    $grandTotal = 0;

    if ($order->delivery_option == 2) {
        $shippingFee = getDeliveryFee($order->shop_id);
        $grandTotal += $shippingFee;
    }

    // Calculate subtotal
    foreach ($order->orderItems as $item) {
        if ($item->status == 0) {
            // Fetch the price based on timestamp comparison
            $activePrice = $item->product->productPrices()
                ->where('is_active', 1)
                ->where('created_at', '<', $item->created_at) // Compare timestamps
                ->orderBy('created_at', 'desc') // Order by descending timestamp
                ->first();

            $originalPrice = $activePrice ? $activePrice->price : 0;
            $subtotal = $originalPrice * $item->qty;
            $grandTotal += $subtotal;
        }
    }
@endphp

                          
</p>  @if ($order->delivery_option == 2)
                                <p class="shipping-fee">Shipping Fee: ₱ {{ number_format($shippingFee, 2, '.', ',') }}</p>
                            @endif
                            <h4 class="px-2">Grand Total: <span class="float-end">₱{{ number_format($grandTotal, 2, '.', ',') }}</span></h4>

                            <div class="mt-3">
                               <h1> <label for="">Order Status</label></h1>
   
  @if ($order->status == '4')
    <a href="{{ route('update-sellerstatus', ['orderId' => $order->id, 'newStatus' => 5]) }}" class="badge bg-success text-white" onclick="return confirm('Are you sure you want to update the status?')">Order has been assigned to you</a>
@elseif ($order->status == '5')
    <a href="{{ route('update-sellerstatus', ['orderId' => $order->id, 'newStatus' => 6]) }}" class="badge bg-success text-white" onclick="return confirm('Are you sure you want to update the status?')">Picked up</a>
@elseif ($order->status == '6')
    <a href="{{ route('update-sellerstatus', ['orderId' => $order->id, 'newStatus' => 7]) }}" class="badge bg-success text-white" onclick="return confirm('Are you sure you want to update the status?')">Order is on the way</a>
@elseif ($order->status == '7')
    <a class="badge bg-primary text-white" onclick="return confirm('Are you sure this order is completed?')">Completed</a>
@endif


 

  
</td>

</div>


@if ($order->status == 7 && empty($order->pod_path))
    <button type="button" class="btn btn-primary my-2 w-100" id="podButton">POD PARCEL</button>
@endif
                 
  <div class="modal fade" id="podModal" tabindex="-1" role="dialog" aria-labelledby="podModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="podModalLabel">Proof of Delivery (POD)</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{ route('pod.store') }}" method="POST">
          @csrf
          <input type="hidden" name="order_id" value="{{ $order->id }}">
  
          <div class="text-center mb-3">
            <button type="button" class="btn btn-primary" id="captureBtn">Capture Photo</button>
          </div>
  
          <div class="text-center" id="cameraContainer">
    <video id="videoPreview" autoplay playsinline style="max-width: 100%; max-height: 100%;"></video>
</div>
          <div class="text-center mt-3" id="previewContainer" style="display: none;">
          <img id="capturedPhoto" alt="Captured Photo" style="max-width: 100%; max-height: 100%;">
            <input type="hidden" id="capturedPhotoInput" name="capturedPhoto">
            <button type="submit" class="btn btn-primary mt-2" id="submitBtn">Submit POD</button>
          </div>
        </form>
    


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

<style>
    p {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .float-end {
        margin-left: auto;
    }

    .shipping-fee {
        text-align: right;
    }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const captureBtn = document.getElementById('captureBtn');
  const cameraContainer = document.getElementById('cameraContainer');
  const previewContainer = document.getElementById('previewContainer');
  const videoPreview = document.getElementById('videoPreview');
  const capturedPhoto = document.getElementById('capturedPhoto');
  const capturedPhotoInput = document.getElementById('capturedPhotoInput');

  captureBtn.addEventListener('click', function () {
    cameraContainer.style.display = 'none';
    previewContainer.style.display = 'block';
    videoPreview.pause();

    // Capture the photo
    const canvas = document.createElement('canvas');
    canvas.width = videoPreview.videoWidth;
    canvas.height = videoPreview.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(videoPreview, 0, 0, canvas.width, canvas.height);

    const photoDataURL = canvas.toDataURL('image/jpeg');
    capturedPhoto.src = photoDataURL;

    capturedPhotoInput.value = photoDataURL;
  });
});

$('#podModal').on('shown.bs.modal', function () {
  const videoPreview = document.getElementById('videoPreview');
  
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
      videoPreview.srcObject = stream;
      videoPreview.play();
    })
    .catch(error => {
      console.error('Error accessing camera:', error);
    });
});

</script>




  <script>
    $(document).ready(function () {
      $('#podButton').on('click', function () {
        $('#podModal').modal('show');
      });
    });
  </script>


        </div>
 
</div>


</div>
 
 </div>




<center>

    <head>
        <title>Customer's Location</title>
           <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <div class="my-3">

                    </div>

                    <!-- Map display -->
                    <div class="py-5">
                        <div id="map" style="height: 250px; width: 100%;"></div>
                    </div>                  
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var map;
    var markers = [];

    function initMap() {
        var haightAshbury = { lat: 7.86319, lng: 125.170874 };

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 9,
            center: haightAshbury,
            mapTypeId: 'roadmap'
        });

        map.addListener('click', function (event) {
            deleteMarkers();
            addMarker(event.latLng);
            document.getElementById('inputLat').value = event.latLng.lat();
            document.getElementById('inputLng').value = event.latLng.lng();
        });

        // Load markers from the user's location
        loadMarkerFromUserLocation();

        // Automatically set marker when the page loads
        setMarkerToCoordinates();
    }
    function loadMarkerFromUserLocation() {
    var userLat = parseFloat({{ $order->address->latitude ?? 'null' }});
    var userLng = parseFloat({{ $order->address->longitude ?? 'null' }});

        if (!isNaN(userLat) && !isNaN(userLng)) {
            var userLocation = { lat: userLat, lng: userLng };
            addMarker(userLocation);
            map.setCenter(userLocation);
        }
    }

    function addMarker(location) {
        clearMarkers();
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        markers.push(marker);
    }

    function clearMarkers() {
        markers.forEach(marker => {
            marker.setMap(null);
        });
        markers = [];
    }

    function setMarkerToCoordinates() {
        var inputLat = parseFloat(document.getElementById('inputLat').value);
        var inputLng = parseFloat(document.getElementById('inputLng').value);

        if (!isNaN(inputLat) && !isNaN(inputLng)) {
            var location = { lat: inputLat, lng: inputLng };
            addMarker(location);
            map.setCenter(location);
        } else {
        }
    }

    // Call initMap after the Google Maps API script is loaded
    google.maps.event.addDomListener(window, 'load', initMap);
</script>
@endsection