@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('tracking.title') }}
@endsection
@push('styles')
    <style>
        .tracking-row {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            align-items: baseline;
            justify-content: space-between;
            -webkit-overflow-scrolling: touch;
            /* Pour la fluidité sur iOS */
        }

        .tracking-row>div {
            flex: 0 0 auto;
            width: 25%;
            /* Chaque étape occupe 25% de l'espace */
            /* border: 1px solid salmon; */
        }

        .tracking-row img {
            max-width: 50%;
            /* Limite la largeur de l'image à 50% de la largeur de son parent */
            height: auto;
            /* Assure une hauteur proportionnelle lors du redimensionnement */
            margin: auto;
            /* Centre horizontalement l'image */
        }

        .tracking_box_area .tracking_box_inner .tracking-row p {
            margin: auto;
            padding-top: 2rem;
        }

        .tracking_box_area .tracking_box_inner p.step-past {
            color: grey;
            font-size: small;
        }

        .tracking_box_area .tracking_box_inner p.step-present {
            color: #c909a9;
            font-size: larger;
            text-decoration: dashed 0.01rem underline;
        }

        .tracking_box_area .tracking_box_inner p.step-new {
            color: rgb(2, 161, 82);
            font-size: small;
        }

        .tracking_box_area .tracking_box_inner p.step-future {
            color: #000;
            font-size: small;
            font-weight: 600;
        }

        .tracking_box_area .tracking_box_inner p.step-canceled {
            color: tomato;
            font-size: initial;
        }

        .separator {
            border-bottom: 1px solid #ccc;
            margin: 40px 0;
        }

        .table {
            color: #2a2a2a;
        }
    </style>
@endpush
@section('main-content')
    <section class="breadcrumb breadcrumb_bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>{{ __('Trace') }}</h2>
                            <p>{{ __('tracking.breadcrumb-1') }}<span>></span>{{ __('tracking.breadcrumb-2') }}<span>></span>{{ __('tracking.breadcrumb-3') }}<span>></span>{{ __(' Trace') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="tracking_box_area padding_top">
        <div class="container">
            <div class="row align-items-center">

                <div class="col-lg-12 mb-4">
                    <div class="tracking_box_inner">
                        @if (!$order)
                            <div class="container">
                                <div class="row">
                                    <p>{{ __('tracking.trace-no-order') }}</p>
                                </div>
                            </div>
                        @else
                            <div class="row">
                                <div class="col-12">
                                    <h3>{{ __('tracking.title') }}</h3>
                                </div>
                            </div>


                            <div class="container">
                                <div class="row tracking-row">
                                    <div class="col-md-3 text-center">
                                        <div class="row"><img
                                                src="{{ asset('assets/images/frontend/customer-order.png') }}"
                                                alt="Commande du client"></div>
                                        <div class="row">
                                            <p
                                                @if ($order->status == 'Nouvelle') class="step-new" @elseif ($order->status == 'Annulée') class="step-canceled" @else class="step-past" @endif>
                                                {{ __('tracking.trace-status-order') }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="row"><img src="{{ asset('assets/images/frontend/box.png') }}"
                                                alt="Préparation de la commande"></div>
                                        <div class="row">
                                            <p
                                                @if ($order->status == 'Nouvelle') class="step-present" @elseif ($order->status == 'Annulée') class="step-canceled" @else class="step-past" @endif>
                                                {{ __('tracking.trace-status-preparation') }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="row"><img src="{{ asset('assets/images/frontend/delivery.png') }}"
                                                alt="Livraison"></div>
                                        <div class="row">
                                            <p
                                                @if ($order->status == 'Nouvelle') class="step-future" @elseif ($order->status == 'Traitée') class="step-present" @elseif ($order->status == 'Annulée') class="step-canceled" @else class="step-past" @endif>
                                                {{ __('tracking.trace-status-shipping') }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="row"><img
                                                src="{{ asset('assets/images/frontend/shopping-cart.png') }}"
                                                alt="Réception de la commande"></div>
                                        <div class="row">
                                            <p
                                                @if ($order->status == 'Livrée') class="step-present" @elseif ($order->status == 'Annulée') class="step-canceled" @else class="step-future" @endif>
                                                {{ __('tracking.trace-status-reception') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="separator"></div>

                                <div class="row">
                                    <div class="col-lg-12 mb-4">
                                        <div class="order_details_iner">
                                            <h4>{{ __('tracking.trace-order-details') }}</h4>
                                            <div class="table-responsive">
                                                <table class="table table-borderless">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col" colspan="2">{{ __('tracking.trace-thead-product') }}</th>
                                                            <th scope="col" class="text-center">{{ __('tracking.trace-thead-quantity') }}</th>
                                                            <th scope="col" class="text-right">{{ __('Total') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if (!isset($products))
                                                            <tr>
                                                                <td colspan="2"><span>{{ __('tracking.trace-no-products') }}</span></td>
                                                                <td></td>
                                                                <td> <span></span></td>
                                                            </tr>
                                                        @else
                                                            @php
                                                                $sub_total = 0;
                                                            @endphp
                                                            @foreach ($products as $key => $product)
                                                                <tr>
                                                                    <td colspan="2"><span>{{ $product['name'] }}</span>
                                                                    </td>
                                                                    <td class="text-center">{{ $product['quantity'] }}</td>
                                                                    <td class="text-right">
                                                                        <span>{{ $product['total'] }}&nbsp;FCFA</span></td>
                                                                </tr>
                                                                @php
                                                                    $sub_total += $product['total'];
                                                                @endphp
                                                            @endforeach
                                                        @endif
                                                        <tr style="border-top: solid 0.05rem; border-top-color: #cfcfcf;">
                                                            <td colspan="3">{{ __('tracking.trace-subtotal') }}</td>
                                                            <td class="text-right">
                                                                <span>{{ $sub_total ?? 0 }}&nbsp;FCFA</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="3">{{ __('tracking.trace-status-shipping') }}</td>
                                                            <td class="text-right">
                                                                <span>{{ __('tracking.trace-flat-rate') }}{{ $shipping_cost ?? 0 }}&nbsp;FCFA</span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <th scope="col" colspan="3">{{ __('Total') }}</th>
                                                            <th scope="col" class="text-right">
                                                                &nbsp;{{ $sub_total + $shipping_cost ?? 0 }}&nbsp;FCFA</th>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>

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

                            {{-- <div class="row">
                                <div class="col-md-1">
                                    <div class="img-fluid">
                                        <img src="{{ asset('assets/images/frontend/box.png') }}" alt="" sizes="" srcset="" style="max-width: 10%;">
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <h2>------------------></h2>
                                </div>
                                <div class="col-md-1">
                                    <div class="img-fluid">
                                        <img src="{{ asset('assets/images/frontend/delivery.png') }}" alt="Image par GrumpyBeere de Pixabay" sizes="" srcset="" style="max-width: 20%;">
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <h2>------------------></h2>
                                </div>
                                <div class="col-md-1"></div>
                                <div class="col-md-1"></div>
                                <div class="col-md-1"></div>
                            </div> --}}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

{{-- @push('scripts')
    <script type="text/javascript" src="http://timeapi.org/utc/now.json?callback=myCallback"></script>

    <script>
        // Set the date we're counting down to



        // Update the count down every 1 second
        var x = setInterval(function() {


            var time = $('#previous_time').val();
            var copy_time = time;
            substring = "pm";

            time = time.substring(0, 22);



            console.log(time);

            var countDownDate = new Date(time).getTime();

            if (copy_time.includes(substring)) {

                console.log('pm');

                // countDownDate = countDownDate + (1000*60*60*12);


            } else {

                console.log('am');

                // countDownDate = countDownDate - (1000*60*60*12);



            }
            console.log(countDownDate);

            //pm indictator



            // Get today's date and time
            var now = new Date();
            now = now.getTime();
            now.toLocaleString('en-US', {
                timeZone: 'America/New_York'
            });
            console.log(now);

            // 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("count_down").innerHTML = "( Remaining : " + days + "d " + hours + "h " +
                minutes + "m " + seconds + "s )";

            // If the count down is over, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("count_down").innerHTML = "Ready for Delivery";
            }

        }, 1000);
    </script>
@endpush --}}