@extends('admin.main')
@section('content')

<div class="w-lg-80  py-4">
    <div class='d-flex justify-content-between'>
        <div>
            <h6 class='font-18 colorgray'>Orders</h6>
        </div>

        <a href="orderStats.html" class='text-decoration-none'>
            <div>
                <p class="font-16 colorgray me-1">Go to Order Stats <i class="fa-solid fa-arrow-right"></i></p>
            </div>
        </a>
    </div>


    <div class="row justify-content-center mt-lg-4 mt-md-3 mt-3 ">

        <div class="col-lg-4 col-md-6 col-12  mt-lg-0 mt-md-3 mt-3 ">
            <div class="trip-mycard p-3 h-100">
                <div class="d-flex justify-content-between">
                    <div class="align-self-center">
                        <h4 class="inter font-20 fw-medium">Repeat <br> customer Rate
                        </h4>
                        <p class="inter font-12 p-1 px-3 green mb-0 btn-blue rounded-5  py-2"><i
                                class="fa-solid fa-arrow-up me-1"></i>+{{ $roundedAverageRepeatRateToday }}% today </p>
                    </div>
                    <div>
                        <div class="circular-progress" data-inner-circle-color="white" data-percentage="{{ $roundedAverageRepeatRate }}"
                            data-progress-color="#1d59f9" data-bg-color="#bbcdfd">
                            <div class="inner-circle"></div>
                            <h6 class="percentage mb-0 inter font-20 fw-medium text-blue">{{ $roundedAverageRepeatRate }}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(isset($orders))

        @php
    $totalWaitTime = 0;
    $ordersCount = count($orders);

    // Calculate total wait time and convert to seconds
    foreach ($orders as $order) {
        $startTime = \Carbon\Carbon::parse($order->start_time);
        $endTime = \Carbon\Carbon::parse($order->end_time);
        $timeDifference = $startTime->diff($endTime)->format('%H:%I:%S');

        list($hours, $minutes, $seconds) = explode(':', $timeDifference);
        $totalWaitTime += $hours * 3600 + $minutes * 60 + $seconds;
    }

    // Calculate average wait time
    $averageWaitTimeInSeconds = $ordersCount > 0 ? $totalWaitTime / $ordersCount : 0;

    // Convert average wait time back to HH:MM:SS format
    $averageHours = floor($averageWaitTimeInSeconds / 3600);
    $averageMinutes = floor(($averageWaitTimeInSeconds % 3600) / 60);
    $averageSeconds = $averageWaitTimeInSeconds % 60;

    $averageWaitTime = sprintf("%02d:%02d:%02d", $averageHours, $averageMinutes, $averageSeconds);
@endphp
 @endif
<div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-3 mt-3 ">
    <div class="trip-mycard p-3 h-100">
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="align-self-center">
                <h4 class="inter font-20 fw-medium">Average<br> wait-time</h4>
                <p class="inter font-12 p-1 px-3 green mb-0 btn-blue rounded-5  py-2">
                    <i class="fa-solid fa-arrow-up me-1"></i>+{{ $averageWaitTime }}</p>
            </div>
            <div class="align-items-center">
                <h6 class="inter font-20 fw-medium text-blue">{{ $averageWaitTime }}</h6>
            </div>
        </div>
    </div>
</div>
@php
use Carbon\Carbon; // Import the Carbon library if not already done

// Fetch orders for the last week and this week
$lastWeekStart = Carbon::now()->subWeek()->startOfWeek();
$lastWeekEnd = Carbon::now()->subWeek()->endOfWeek();
$thisWeekStart = Carbon::now()->startOfWeek();
$thisWeekEnd = Carbon::now()->endOfWeek();

// Count orders for last week and this week
$lastWeekOrderCount = App\Models\Order::whereBetween('created_at', [$lastWeekStart, $lastWeekEnd])->count();
$thisWeekOrderCount = App\Models\Order::whereBetween('created_at', [$thisWeekStart, $thisWeekEnd])->count();

// Calculate percentage increase
$percentageIncrease = 0;
if ($lastWeekOrderCount > 0) {
    $percentageIncrease = (($thisWeekOrderCount - $lastWeekOrderCount) / $lastWeekOrderCount) * 100;
}
@endphp

<div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-3 mt-3">
<div class="trip-mycard h-100 p-3">
    <div class="d-flex justify-content-between align-items-center mt-4">
        <div class="align-self-center">
            <h4 class="inter font-20 fw-medium">Total Orders</h4>
            <p class="inter font-12 p-1 px-3 green mb-0 btn-blue rounded-5 py-2">
                <i class="fa-solid fa-arrow-up me-1"></i>{{ number_format($percentageIncrease, 2) }}%
            </p>
        </div>
        <div class="">
            <h6 class="inter font-20 fw-medium text-blue">{{ $totalOrders }}</h6>
        </div>
    </div>
</div>
</div>

    <div class="row justify-content-center mt-3">
        <div class="col-lg-5 col-12 mt-lg-0 mt-md-3 mt-3 tab-nav-pills inter">

            <ul class="nav nav-pills mt-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-all-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-all" type="button" role="tab" aria-controls="pills-all"
                        aria-selected="true" data-filter="all">All</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-open-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-open" type="button" role="tab"
                        aria-controls="pills-open" aria-selected="false" data-filter="open">Open</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-pending-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-pending" type="button" role="tab"
                        aria-controls="pills-pending" aria-selected="false" data-filter="pending">Pending</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-completed-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-completed" type="button" role="tab"
                        aria-controls="pills-completed" aria-selected="false" data-filter="completed">Completed</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-canceled-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-canceled" type="button" role="tab"
                        aria-controls="pills-canceled" aria-selected="false" data-filter="canceled">Canceled</button>
                </li>
            </ul>
        </div>
        <div class="col-lg-2 col-12"></div>
        <div class="col-lg-5  col-12 mt-lg-0 mt-md-3 mt-3">
            <div class="row ">
                <div class="col-lg-4 col-12 mt-lg-0 mt-md-3 mt-3">
                    <div class="input-group  inputgroup rounded-3 p-1">
                        <span class="input-group-text border-0" style="background-color: transparent;"
                            id="basic-addon1"><i class="fa-solid fa-sliders"></i></span>
                        <input type="text" class="form-control border-0" placeholder="Filter"
                            style="background-color: transparent;" aria-label="Username"
                            aria-describedby="basic-addon1" />
                    </div>
                </div>
                <div class="col-lg-8 col-12 mt-lg-0 mt-md-3 mt-3 text-end">


                    <div class="input-group  inputgroup rounded-3 p-1">
                        <input type="text" class="form-control border-0" placeholder="Search Orders" id="searchInput" aria-label="Recipient's username" aria-describedby="basic-addon2" />

                        <span class="input-group-text border-0" style="background-color: transparent;"
                            id="basic-addon2"> <i class="fa-solid fa-magnifying-glass"></i> </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
            aria-labelledby="pills-home-tab" tabindex="0"></div>
        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
            tabindex="0"></div>
        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"
            tabindex="0"></div>
        <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab"
            tabindex="0"></div>
    </div>
    <div class='container-fluid order border mt-3 rounded-3  table-scroll '>
        <table class="table mt-3">
            <thead class='font-14 inter'>
                <tr>
                    <th scope="col">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkAll" />
                            <label class="form-check-label" for="flexCheckDefault">Order</label>
                        </div>
                    </th>
                    <th scope="col">Repeat Customer?</th>
                    <th scope="col">Start</th>
                    <th scope="col">End</th>
                    <th scope="col">Total Time</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody class='font-13 mytable inter'>
                @if(isset($orders))

                @foreach ($orders as $order)
                <tr>
                    <td scope="row" class="p-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
                            <label class="form-check-label" for="flexCheckDefault">{{ $order->id }}</label>
                        </div>
                    </td>
                    <td class='p-3'>Yes<br>1x this month</td>
                    <td class='p-3'>{{ $order->start_time }}</td>
                    <td class='p-3'>{{ $order->end_time }}</td>
                    <td class="p-3">
                        @php
                        $startTime = \Carbon\Carbon::parse($order->start_time);
                        $endTime = \Carbon\Carbon::parse($order->end_time);
                        $timeDifference = $startTime->diff($endTime)->format('%H:%I:%S');
                        @endphp
                        {{ $timeDifference }}
                    </td>
                    <td class='p-3'>
                        <div class='d-flex justify-content-between align-items-center'>
                            @php
                                $status = $order->status;
                                $badgeClass = '';
                                $text = '';
                                switch ($status) {
                                    case 'completed':
                                        $badgeClass = 'badge bg-success';
                                        $text = 'Completed';
                                        break;
                                    case 'pending':
                                        $badgeClass = 'badge bg-warning';
                                        $text = 'Pending';
                                        break;
                                    case 'canceled':
                                        $badgeClass = 'badge bg-danger';
                                        $text = 'Canceled';
                                        break;
                                    default:
                                        $badgeClass = 'badge bg-secondary';
                                        $text = 'Unknown';
                                }
                            @endphp
                            <p class="mb-0"><span class="{{ $badgeClass }}">{{ $text }}</span></p>
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                        </div>
                    </td>

                </tr>
                @endforeach
                @endif
            </tbody>
        </table>
    </div>
    <nav aria-label="Page navigation example">
        <ul class="pagination row mt-3">
            <div class="col-lg-6 col-md-6 col-12">
                <h6>Showing {{ $orders->firstItem() }} to {{ $orders->lastItem() }} of {{ $orders->total() }} results</h6>
            </div>
            <div class="col-lg-6 col-md-6 col-12 d-flex justify-content-end">
                <li class="page-item">
                    <a class="page-link" href="{{ $orders->previousPageUrl() }}" aria-label="Previous">
                        <span aria-hidden="true"><button class="pagi-next-btn"><i class="fa-solid fa-angle-left"></i></button></span>
                    </a>
                </li>
                @for ($i = 1; $i <= $orders->lastPage(); $i++)
                    <li class="page-item{{ $i == $orders->currentPage() ? ' active' : '' }}">
                        <a class="page-link" href="{{ $orders->url($i) }}">{{ $i }}</a>
                    </li>
                @endfor
                <li class="page-item">
                    <a class="page-link" href="{{ $orders->nextPageUrl() }}" aria-label="Next">
                        <span aria-hidden="true"><button class="pagi-next-btn"><i class="fa-solid fa-angle-right"></i></button></span>
                    </a>
                </li>
            </div>
        </ul>
    </nav>


</div>


@endsection
@section('scripts')
<script>
    // Get the "Check on head" checkbox
    const checkAllCheckbox = document.getElementById('checkAll');

    // Get all the row checkboxes
    const rowCheckboxes = document.querySelectorAll('tbody .form-check-input');

    // Add a click event listener to the "Check on head" checkbox
    checkAllCheckbox.addEventListener('click', function () {
        // Check or uncheck all row checkboxes based on the state of the "Check on head" checkbox
        const isChecked = checkAllCheckbox.checked;
        rowCheckboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });
    });
</script>
<script>
    // Get the search input element
    const searchInput = document.getElementById('searchInput');

    // Get the table rows
    const tableRows = document.querySelectorAll('tbody tr');

    // Add an input event listener to the search input
    searchInput.addEventListener('input', function () {
        const searchValue = searchInput.value.toLowerCase();

        // Loop through the table rows and hide/show based on the search input
        tableRows.forEach(row => {
            const orderText = row.textContent.toLowerCase();
            if (orderText.includes(searchValue)) {
                row.style.display = 'table-row';
            } else {
                row.style.display = 'none';
            }
        });
    });
</script>
<script>
    // Add a click event listener to the tab buttons
    const tabButtons = document.querySelectorAll('[data-filter]');
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const filter = button.getAttribute('data-filter');
            filterRecords(filter);
        });
    });

    function filterRecords(filter) {
        const tableRows = document.querySelectorAll('tbody tr');
        tableRows.forEach(row => {
            const status = row.querySelector('.badge').textContent.toLowerCase();
            if (filter === 'all' || status === filter) {
                row.style.display = 'table-row';
            } else {
                row.style.display = 'none';
            }
        });
    }
</script>
<script>
    const circularProgress = document.querySelectorAll(".circular-progress");

    Array.from(circularProgress).forEach((progressBar) => {
        const progressValue = progressBar.querySelector(".percentage");
        const innerCircle = progressBar.querySelector(".inner-circle");
        let startValue = 0,
            endValue = Number(progressBar.getAttribute("data-percentage")),
            speed = 50,
            progressColor = progressBar.getAttribute("data-progress-color");

        const progress = setInterval(() => {
            startValue++;
            progressValue.textContent = `${startValue}%`;
            progressValue.style.color = `${progressColor}`;

            innerCircle.style.backgroundColor = `${progressBar.getAttribute(
                "data-inner-circle-color"
            )}`;

            progressBar.style.background = `conic-gradient(${progressColor} ${startValue * 3.6
                }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
            if (startValue === endValue) {
                clearInterval(progress);
            }
        }, speed);
    });

</script>
@endsection