@extends('layouts.store')
@section('body')
<section class="section-content padding-y">
    @php
    $payment = json_decode($order->attributes)->payment;
    $date = Carbon\Carbon::parse($payment->expire_datetime)->toDateTimeString();
    $user = json_decode($order->attributes)->user;
    @endphp
    <div class="container col-6">
        <div class="card mb-4">
            <div class="card-body">
                @if ($order->status == "open" || $order->status == "paid")
                <span class="badge badge-success">{{$order->status}}</span>
                <h4 class="card-title mb-5">Order #{{$order->code}}</h4>
                <div class="row d-flex justify-content-center mb-5" style="height: 100px">
                    <div class="col-sm-8 d-flex align-items-center bg-primary rounded text-white">
                        <div class="text-center col">
                            <!-- Display the countdown timer in an element -->
                            <h3>Payment Deadline</h3>
                            <h4 id="demo">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </h4>
                        </div>
                    </div>
                </div>
                @else
                <span class="badge badge-danger">Close</span>
                <h4 class="card-title mb-5">Order #{{$order->code}}</h4>
                @endif
                <div class="row d-flex justify-content-between">
                    <div class="col-md-5">
                        <h4>Customer</h4>
                        <div class="row mb-1">
                            <div class="col">
                                {{$user->fname}} ({{$user->phone}})
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col">
                                {{$user->email}}
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col">
                                {{$user->address}}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 d-flex justify-content-end">
                        <div>
                            <h4 class="text-right">Payment</h4>
                            <img width="100px" src="{{$payment->image_url ?? ""}}" alt="">
                            <div class="row mb-2">
                                <div class="col">
                                    @if ($payment->va_number)
                                        <p class="text-right"><b>{{$payment->va_number}}</b></p>
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-1">
                                <div class="col">
                                    <p class="text-right">Rp {{number_format($payment->amount)}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('script')
<script type="text/javascript">
    // Set the date we're counting down to
    var countDownDate

    window.onload = function() {
        mount();
    }

    function mount() {
        countDownDate = new Date("{!! $date !!}").getTime();
    }
    
    // Update the count down every 1 second
    var x = setInterval(function() {
    
      // Get today's date and time
      var now = new Date().getTime();
        
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
        
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = hours + "h "
      + minutes + "m " + seconds + "s ";
        
      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
    }, 1000);
</script>
@endsection