@extends('cleaner.layouts.loggedin')

@section('title', 'Cleaner Dashboard')

@section('content')
    <div class="row">
        <div class="mb-4 col-12">
            <h2>Your orders</h2>
        </div>
        <h5>Filter by</h5>
        <div class="col-12 mb-3">
            <a href="{{ route('cleaner.orders.view') }}"
                class="btn btn-default m-1 {{ request()->routeIs('cleaner.orders.view') ? 'btn-primary' : 'btn-default' }}">Delivery
                Dates</a>
            <a href="{{ route('cleaner.orders.view.tomorrow') }}"
                class="btn btn-default m-1 {{ request()->routeIs('cleaner.orders.view.tomorrow') ? 'btn-primary' : 'btn-default' }}">Delivery
                Tomorrow</a>
            <a href="{{ route('cleaner.orders.view.twoday') }}"
                class="btn btn-default m-1 {{ request()->routeIs('cleaner.orders.view.twoday') ? 'btn-primary' : 'btn-default' }}">Delivery
                {{ \Carbon\Carbon::today()->addDays(2)->format('m-d-y') }}</a>
            <a href="{{ route('cleaner.orders.view.latest') }}"
                class="btn btn-default m-1 {{ request()->routeIs('cleaner.orders.view.latest') ? 'btn-primary' : 'btn-default' }}">Latest
                orders</a>
                <a style="border:2px solid rgb(109, 239, 109)" href="{{ route('cleaner.orders.view.completed') }}"
                class="btn btn-default m-1 {{ request()->routeIs('cleaner.orders.view.completed') ? 'btn-primary' : 'btn-default' }}">Completed
                orders</a>

        </div>
        <hr>
        <div class="col-12">
            <div class="row">
                @foreach ($orders as $order)
                    @php
                        $completeBy = new DateTime($order->completeby);
                        $now = new DateTime();

                        $now->setTime(0, 0, 0); // Set time to start of the day

                        $interval = $now->diff($completeBy);
                        $diffInDays = $interval->days;

                        if ($completeBy < $now) {
                            $diffInDays = abs($diffInDays);
                            $diffInDays = '-' . $diffInDays;
                            $is_negative = true;
                        } else {
                            $diffInDays = $diffInDays;
                            $is_negative = false;
                        }
                        $diffInDays = $diffInDays . ' day(s)';
                        if (strtolower($order->status) == 'completed') {
                            $diffInDays = 'completed';
                            $is_negative = false;
                        }

                    @endphp

                    <div class="col-md-4 col-lg-4 col-xl-4 mb-4 ">

                        <a href="{{ route('cleaner.orders.view.detail', ['orderid' => $order->orderId]) }}">

                            <div class="card " style=" ">
                                
                                <div class="card-header d-flex p-1 mt-0 text-center"
                                    style="justify-content: space-between;align-items: center">
                                                                        <div>&nbsp;</div>
                                                                        <h6 class="text-center" style="font-size:12px;">Order Id: # |
                                        </span></h6>
                                    <div><span
                                            class="badge text-bg-success rounded-pill custombade">{{ App\Helpers\DateTimeHelper::calculateProcessingTime($order->pickupby, $order->completeby) }}
                                            <i class="fas fa-dollar-sign x05"></i></span></div>
                                </div>

                                <div class="card-body  p-2  text-center mb-0">
                                    <img class="text-center mb-1" style="width: 58px;" src="" />
                                    <h4></h4>
                                    @if($order->status != 'Completed')
                                    <div style="background: rgba(239, 239, 239, 0.478);font-weight: 600;font-size: 17px;" >
                                        <div>Pickup By : <span
                                                style="color: rgb(0, 146, 0);font-weight: 700">{{ App\Helpers\DateTimeHelper::getFormattedDateTimeStatus($order->pickupby) }}</span>

                                        </div>
                                        <div>Deliver By: <span
                                                style="color: rgb(0, 146, 0);font-weight: 700">{{ App\Helpers\DateTimeHelper::getFormattedDateTimeStatus($order->completeby) }}</span>

                                        </div>
                                    </div>
                                    @endif
                                    <hr class="horizontal dark my-2">
                                    <div class="d-flex w-100 pt-3" style="justify-content: center;align-items: center">
                                        <div style="padding-right:10px;text-align:center; ">
                                                                                        <i onclick="stopPropagation(event)" class="fas weight-info fa-info"
                                                data-bs-toggle="modal" data-bs-target="#inforforweightandestimate"></i>

                                            
                                            <p>Bags</p>
                                        </div>
                                        <div
                                            style="padding-right:10px;text-align:center; border-left:2px solid rgb(235, 235, 235); padding-left:10px; padding-right:10px;">
                                                                                        <i onclick="stopPropagation(event)" class="fas weight-info fa-info"
                                                data-bs-toggle="modal" data-bs-target="#inforforweightandestimate"></i>

                                            
                                            <p>Weight</p>
                                        </div>
                                        <div
                                            style="border-left:2px solid rgb(235, 235, 235); padding-left:10px; padding-right:10px;text-align:center;">

                                                                                        <i onclick="stopPropagation(event)" class="fas estimate-info fa-info"
                                                data-bs-toggle="modal" data-bs-target="#inforforweightandestimate"></i>

                                            
                                            <p>Estimate</p>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach


            </div>
        </div>
    </div>
    <style>
        .border-red {
            border: 3px solid red;
        }

        .border-red * {
            font-weight: 900 !important;
            color: red !important;
        }

        .pills-danger {
            background-color: rgb(225, 225, 225);
            color: #fff;
            font-size: 15px;
            font-weight: 400;
            border-radius: 5px;
            width: 300px;
            margin-top: -10px !important;
            margin: auto;
            animation: heartbeat 1s infinite;
        }

        @keyframes heartbeat {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>


    <div class="modal fade" id="inforforweightandestimate" tabindex="-1" aria-labelledby="inforforweightandestimateLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="inforforweightandestimateLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
@endsection
<script>
    function stopPropagation(event) {
        event.stopPropagation();
    }
</script>