@extends('web.home.layout.master')

@section('content')
    <div class="container-fluid orderbody" style="padding-left: 5%;padding-right:5%;">
        <article class="card">
            <header class="card-header"> My Orders / Tracking </header>
            @php
                $orderData=App\Models\Order::where('id',$id)->first();
                $order_total=$orderData->total + $orderData->service_fee;
            @endphp
            <div class="card-body">
               <div class="col-md-12">
                <div class="row">
                    <div class="col-md-10">
                        <span style="font-family: 'Montserrat', sans-serif;">Order ID: <strong>{{$orderData->order_id}}</strong></span><br>
                        <span style="font-family: 'Montserrat', sans-serif;">Shipping Address: <strong>{{$orderData->address_1}},{{$orderData->address_2}}</strong></span><br>
                        <span style="font-family: 'Montserrat', sans-serif;">Total Paid: LKR&nbsp;<strong>{{ number_format($order_total, 2) }}</strong></span>

                        <div class="row product-preview align-items-center mb-3">
                            <div class="col-12 col-sm-3 col-md-2">
                                @php
                                $productData=DB::table('product')
        ->join('product_color', 'product.id', '=', 'product_color.product_id')
        ->select(
            'product.id',
            'product.product_name',
            'product.category_id',
            'product.product_tags',
            'product.sku',
            'product.product_image',
            'product.product_price',
            'product.cutted_price',
            'product.product_description',
            'product.qty',
            'product.weight',
            'product.order',
            'product.views',
            'product.status',
            'product_color.product_color',
            'product_color.color_image',
            'product_color.price',

        )
        ->where('product.id',$orderData->product_id)
        ->where('product_color.product_color', $orderData->color)
        ->first();


                            @endphp
                           <img src="{{ asset('admin/assets/img/product/'.$productData->color_image) }}" alt="{{$productData->product_name}}" class="img-fluid product-image">
                            </div>

                            <div class="col-12 col-sm-3 col-md-3">
                                <span class="product-name "><strong>{{$productData->product_name}}</strong></span>
                            </div>
                            <div class="col-12 col-sm-3 col-md-2">
                                <span class="product-quantity ">Quantity: &nbsp;<strong>{{$orderData->quantity}}</strong></span>
                            </div>
                            <div class="col-12 col-sm-3 col-md-2">
                                @php
                                $color_code=$orderData->color;
                   if($color_code=='#A78B8D'){
    $selectcolorvalue='Marblepink';
} elseif($color_code=='#61A8F8'){
    $selectcolorvalue='Babyblue';
} elseif($color_code=='#C55C82'){
    $selectcolorvalue='Pink';
} elseif($color_code=='#FF0000'){
    $selectcolorvalue='Red';
} elseif($color_code=='#CAD3D0'){
    $selectcolorvalue='Clear';
} elseif($color_code=='#BA9978'){
    $selectcolorvalue='Beige';
} elseif($color_code=='#88DB86'){
    $selectcolorvalue='Applegreen';
} elseif($color_code=='#DEE4EE'){
    $selectcolorvalue='Marblewhite';
} elseif($color_code=='#BDB8EE'){
    $selectcolorvalue='Marbleviolet';
} elseif($color_code=='#E9CBB9'){
    $selectcolorvalue='Marbleorange';
} elseif($color_code=='#FEF250'){
    $selectcolorvalue='Lemonyellow';
} elseif($color_code=='#D7D0D1'){
    $selectcolorvalue='Babypink';
} elseif($color_code=='#D2C77D'){
    $selectcolorvalue='Metallicgold';
} elseif($color_code=='#DAD9C6'){
    $selectcolorvalue='Buttermilk';
} elseif($color_code=='#E9C500'){
    $selectcolorvalue='Yellow';
} elseif($color_code=='#D3CBC4'){
    $selectcolorvalue='Graybeige';
} elseif($color_code=='#0F2D8D'){
    $selectcolorvalue='Blue';
} elseif($color_code=='#005E3A'){
    $selectcolorvalue='Green';
} elseif($color_code=='#D6F2E6'){
    $selectcolorvalue='Marblegreen';
} elseif($color_code=='#BF8BFF'){
    $selectcolorvalue='Violet';
} elseif($color_code=='#6B4B36'){
    $selectcolorvalue='Brown';
} elseif($color_code=='#C0C0C0'){
    $selectcolorvalue='Silver';
} elseif($color_code=='#808080'){
    $selectcolorvalue='Grey';
} elseif($color_code=='#6CD2FA'){
    $selectcolorvalue='Skyblue';
} elseif($color_code=='#D09305'){
    $selectcolorvalue='Orange';
} elseif($color_code=='#13598B'){
    $selectcolorvalue='Metallicblue';
} elseif($color_code=='#9582BB'){
    $selectcolorvalue='Metallicviolet';
} elseif($color_code=='#A286F4'){
    $selectcolorvalue='Purple';
} elseif($color_code=='#62ADE6'){
    $selectcolorvalue='Marbleblue';
} elseif($color_code=='#80355C'){
    $selectcolorvalue='Marblered';
} elseif($color_code=='#2FCBD4'){
    $selectcolorvalue='Avocadogreen';
} elseif($color_code=='#FFA07A'){
    $selectcolorvalue='Lightorange';
} elseif($color_code=='#DDD3D1'){
    $selectcolorvalue='Marblebeige';
} elseif($color_code=='#F4C430'){
    $selectcolorvalue='Saffron';
} elseif($color_code=='#000000'){
    $selectcolorvalue='Black';
}
 elseif($color_code=='#D4AF37'){
    $selectcolorvalue='Marblegold';
}
elseif($color_code=='#FFFFFF'){
    $selectcolorvalue='Purewhite';
}
elseif($color_code=='#B4B4B8'){
    $selectcolorvalue='Metallicsilver';
}
elseif($color_code=='#58C3C2'){
    $selectcolorvalue='Marblegreen';
}
elseif($color_code=='#006A4E'){
    $selectcolorvalue='Bottlegreen';
}
elseif($color_code=='#6F4E37'){
    $selectcolorvalue='Coffee';
}
elseif($color_code=='#FFFDD0'){
    $selectcolorvalue='Cream';
}
elseif($color_code=='#A9A9A9'){
    $selectcolorvalue='Darkgrey';
}
elseif($color_code=='#808080'){
    $selectcolorvalue='Grey';
}
elseif($color_code=='#C40233'){
    $selectcolorvalue='Metalicred';
}
elseif($color_code=='#9582BB'){
    $selectcolorvalue='Metalicviolet';
}
elseif($color_code=='#DEE4EE'){
    $selectcolorvalue='Marblewhite';
}

                                @endphp
<div class="product-color-container">
    <span class="product-color">Color:&nbsp;<strong>{{$selectcolorvalue}}</strong></span>
    <div class="color-circle" style="background-color: {{$color_code}};"></div>
</div>

<style>
.product-color-container {
    width: 200px;
    display: flex;
    align-items: center;
}

.color-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 5px;
}
</style>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="anim">
                            @if ($orderData->processing ==1 && $orderData->picked==0 && $orderData->on_the_way ==0 && $orderData->delivered ==0)
                            <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

                            <dotlottie-player src="https://lottie.host/3fec3c6b-7b1f-492d-93e2-85d6d8884dc9/ufqHBX1PCX.json" background="transparent" speed="1" style="width: 120px; height: 120px;" loop autoplay></dotlottie-player>
                            @elseif ($orderData->processing ==1 && $orderData->picked==1 && $orderData->on_the_way ==0 && $orderData->delivered ==0)
                            <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

                            <dotlottie-player src="https://lottie.host/9e152bf0-62a4-437a-8ff2-689ba634a854/h439JKEKYX.json" background="transparent" speed="1" style="width: 120px; height: 120px;" loop autoplay></dotlottie-player>
                            @elseif ($orderData->processing ==1 && $orderData->picked==1 && $orderData->on_the_way ==1 && $orderData->delivered ==0)
                            <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

                            <dotlottie-player src="https://lottie.host/deb98d54-d4a7-4961-b223-e453acd7a1c4/YllU7GGy9r.json" background="transparent" speed="1" style="width: 120px; height: 120px;" loop autoplay></dotlottie-player>
                            @elseif ($orderData->processing ==1 && $orderData->picked==1 && $orderData->on_the_way ==1 && $orderData->delivered ==1)

                            <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

                            <dotlottie-player src="https://lottie.host/cacb6be7-4c0e-4681-a79b-bcc20a4f6091/KuuHNaVCc8.json" background="transparent" speed="1" style="width: 120px; height: 130px;" loop autoplay></dotlottie-player>
                            @elseif ($orderData->processing ==0 && $orderData->picked==0 && $orderData->on_the_way ==0 && $orderData->delivered ==0)
                            <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

                            <dotlottie-player src="https://lottie.host/529f7649-7929-4708-a86c-5d0caa96663f/ocyEegg0yW.json" background="transparent" speed="1" style="width: 60px; height: 60px;" loop autoplay></dotlottie-player>
                            @endif



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

                <article class="card">
                    <div class="card-body row">
                        <div class="col"> <strong>Ordered at</strong> <br>{{ \Carbon\Carbon::parse($orderData->created_at)->format('M j, Y') }}</div>
                        <div class="col"> <strong>Shipping BY:</strong> <br> American Plastics (pvt) Ltd | <i class="fa fa-phone"></i>
                            +94 117 663 207</div>
                        <div class="col"> <strong>Status:</strong> <br>
                             @if ($orderData->processing == 1 && $orderData->ready ==0 && $orderData->picked ==0 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                            Processing
                            @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==0 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                            Ready for pickup
                            @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==1 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                            Shipped
                            @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==1 &&  $orderData->on_the_way==1 && $orderData->delivered==0)
                            On the way
                            @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==1 &&  $orderData->on_the_way==1 && $orderData->delivered==1)
                            Delivered
                            @elseif ($orderData->processing == 0 && $orderData->cancellation == 1)
                            Cancelled
                            @elseif ($orderData->processing == 0 && $orderData->ready ==0 && $orderData->picked ==0 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                            Cancellation in progress

                            @endif</div>
                        <div class="col"> <strong>Tracking #:</strong> <br>
                        @if ($orderData->tracking == null)
                        No tracking updated!
                        @else
                            {{$orderData->tracking}}
                        @endif
                        </div>
                    </div>
                </article>
                <div class="track">
                    @if ($orderData->processing == 1 && $orderData->ready ==0 && $orderData->picked ==0 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Order confirmed</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Ready for pickup</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> Picked by courier</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way </span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
                    @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==0 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Order confirmed</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Ready for pickup</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> Picked by courier</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way </span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
                    @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==1 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Order confirmed</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Ready for pickup</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> Picked by courier</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way </span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
                    @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==1 &&  $orderData->on_the_way==1 && $orderData->delivered==0)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Order confirmed</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Ready for pickup</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> Picked by courier</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way </span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
                    @elseif ($orderData->processing == 1 && $orderData->ready ==1 && $orderData->picked ==1 &&  $orderData->on_the_way==1 && $orderData->delivered==1)
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Order confirmed</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Ready for pickup</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> Picked by courier</span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way </span> </div>
                    <div class="step active"> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
                    @elseif ($orderData->processing == 0 && $orderData->ready ==0 && $orderData->picked ==0 &&  $orderData->on_the_way==0 && $orderData->delivered==0)
                    <div class="step "> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Order confirmed</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-check"></i> </span> <span class="text">Ready for pickup</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-user"></i> </span> <span class="text"> Picked by courier</span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-truck"></i> </span> <span class="text"> On the way </span> </div>
                    <div class="step "> <span class="icon"> <i class="fa fa-box"></i> </span> <span class="text">Delivered</span> </div>
                    @endif
                </div>
                <hr>

                <hr>
                <button type="button" class="btn btn-warning" id="backToOrders">   <i class="fas fa-chevron-left"></i> Back to Orders </button>
                @if ($orderData->processing ==1 && $orderData->ready ==0 && $orderData->picked == 0 && $orderData->on_the_way ==0 && $orderData->delivered ==0 )
                <button type="button" class="btn btn-warning" id="cancelOrder" data-order="{{$orderData->id}}" hidden> Cancel Order </button>
                @elseif ($orderData->processing ==0 && $orderData->cancellation ==1)
                <button type="button" class="btn btn-warning" > Order Cancelled </button>
                @elseif ($orderData->processing ==0 && $orderData->picked == 0 && $orderData->on_the_way ==0 && $orderData->delivered ==0)
                <button type="button" class="btn btn-warning" > Cancelation Requested </button>

                @endif

                <script>
                    document.getElementById('backToOrders').addEventListener('click', function() {
    window.history.back();
});
$(document).ready(function() {
    $('#cancelOrder').click(function() {
      var orderId = $(this).data('order');
      let csrfToken = $('meta[name="csrf-token"]').attr('content');
      $.ajax({
        url: "{{route('american.plastic.web.cancel.order')}}",  // Replace with your controller endpoint
        type: 'POST',
        data: {
          order_id: orderId
        },
        headers: {
                'X-CSRF-TOKEN': csrfToken
                },
        success: function(response) {
          // Handle success response
          window.location.reload();
          console.log('Order cancelled successfully:', response);
        },
        error: function(xhr, status, error) {
          // Handle error response
          console.error('Error cancelling order:', error);
        }
      });
    });
  });
                </script>
            </div>
        </article>
    </div>
    <style>


.product-preview {
    background-color: #f8f9fa; /* Light background for contrast */
}

        @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

        body {

            font-family: 'Montserrat', sans-serif;
        }

        .container {
            margin-top: 50px;
            margin-bottom: 50px
        }

        .card {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.10rem
        }

        .card-header:first-child {
            border-radius: calc(0.37rem - 1px) calc(0.37rem - 1px) 0 0
        }

        .card-header {
            padding: 0.75rem 1.25rem;
            margin-bottom: 0;
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1)
        }

        .track {
            position: relative;
            background-color: #ddd;
            height: 7px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 60px;
            margin-top: 50px
        }

        .track .step {
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            width: 25%;
            margin-top: -18px;
            text-align: center;
            position: relative
        }

        .track .step.active:before {
            background: #4dafff;
        }

        .track .step::before {
            height: 7px;
            position: absolute;
            content: "";
            width: 100%;
            left: 0;
            top: 18px
        }

        .track .step.active .icon {
            background: #4dafff;
            color: #fff
        }

        .track .icon {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: relative;
            border-radius: 100%;
            background: #ddd
        }

        .track .step.active .text {
            font-weight: 400;
            color: #000
        }

        .track .text {
            display: block;
            margin-top: 7px
        }

        .itemside {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 100%
        }

        .itemside .aside {
            position: relative;
            -ms-flex-negative: 0;
            flex-shrink: 0
        }

        .img-sm {
            width: 80px;
            height: 80px;
            padding: 7px
        }

        ul.row,
        ul.row-sm {
            list-style: none;
            padding: 0
        }

        .itemside .info {
            padding-left: 15px;
            padding-right: 7px
        }

        .itemside .title {
            display: block;
            margin-bottom: 5px;
            color: #212529
        }

        p {
            margin-top: 0;
            margin-bottom: 1rem
        }

        .btn-warning {
            color: #ffffff;
            background-color: #4dafff;
            border-color: #4dafff;
            border-radius: 1px
        }

        .btn-warning:hover {
            color: #ffffff;
            background-color: #4dafff;
            border-color: #4dafff;
            border-radius: 1px
        }




        @media (max-width: 768px) {
  /* Your CSS rules for screens with a maximum width of 768px */
  .orderbody{
    padding-top: 2%
  }
}
@media (min-width: 768px) {
  /* Your CSS rules for screens with a maximum width of 768px */
  .orderbody{
    padding-top: 2%
  }
}
    </style>
@endsection