@extends('admin.main')
@section('content')
    <div class="w-lg-80  py-4 order">
        <div class="container">
            <div class='d-flex justify-content-between'>
                <a href="order.html" class='text-decoration-none '>
                    <div>
                        <h6 class='font-18 colorgray'><i class="fa-solid fa-arrow-left "></i> Back</h6>
                    </div>
                </a>
                <div class="d-flex">
                    <div class="">
                        <img src="/vendor/assets/imges/select.png" width="30px" alt="">
                    </div>
                    <div>
                        <select class="form-select border-0 w-100 font-20 colorgray point"
                            aria-label="Default select example">
                            <option selected>Select Date</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-3 mt-3">
                    <div class="trip-mycard p-4">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="inter font-16 fw-medium">Open</p>
                                <h6 class="inter font-20 fw-bold mt-3 text-blue">15</h6>
                            </div>
                            <div class="align-self-end">
                                <p class="inter font-14 btn-blue px-3 py-1 rounded-5 mb-0"><i
                                        class="fa-solid fa-arrow-up me-1"></i>+20</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-3 mt-3">
                    <div class="trip-mycard p-4">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="inter font-16 fw-medium">Pending</p>
                                <h6 class="inter font-20 fw-bold mt-3 text-blue">5</h6>
                            </div>
                            <div class="align-self-end">
                                <p class="inter font-14 btn-blue px-3 py-1 rounded-5 mb-0"><i
                                        class="fa-solid fa-arrow-up me-1"></i>+20</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-3 mt-3">
                    <div class="trip-mycard p-4">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="inter font-16 fw-medium">Completed</p>
                                <h6 class="inter font-20 fw-bold mt-3 text-blue">154</h6>
                            </div>
                            <div class="align-self-end">
                                <p class="inter font-14 btn-blue px-3 py-1 rounded-5 mb-0"><i
                                        class="fa-solid fa-arrow-up me-1"></i>+34</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-12 mt-3">
                    <div class="row bgcolor p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6>Daily Orders</h6>
                            </div>
                            <div>
                                <p class="mb-0">Filter</p>
                            </div>
                        </div>
                        <div class="col-lg-2 col-6">
                            <div class="mt-3">
                                <p class="font-14 inter colorgray mb-0">Total Orders</p>
                                <h6>3412</h6>
                                <div>

                                    <p class="inter font-14 btn-blue w-75 px-2 py-1 rounded-5 mb-0"><i
                                            class="fa-solid fa-arrow-up"></i>+34</p>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-10 col-12 mt-lg-0 mt-md-3 mt-3">

                            <canvas id="myChart"></canvas>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3 col-12 mt-3">
                    <div class="trip-mycard  p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="align-self-center">
                                <h6 class="inter font-16 fw-medium">Total Orders
                                </h6>
                                <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>+34% </p>
                            </div>
                            <div class="align-items-center">
                                <h6 class="inter font-16 fw-medium text-blue">174</h6>
                            </div>
                        </div>
                    </div>
                    <div class="trip-mycard p-3 mt-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="align-self-center">
                                <h6 class="inter font-16 fw-medium">Average<br> wait-time
                                </h6>
                                <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>+10.40 sec </p>
                            </div>
                            <div class="">
                                <h6 class="inter font-16 fw-medium text-blue">10:40</h6>
                            </div>
                        </div>
                    </div>
                    <div class="trip-mycard p-3  mt-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="align-self-center">
                                <h6 class="inter font-16 fw-medium">Repeat <br> customer Rate
                                </h6>
                                <!-- <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>+34%  today </p> -->
                            </div>
                            <div class="">
                                <div class="circular-progress1" data-inner-circle-color="white" data-percentage="66"
                                    data-progress-color="#1d59f9" data-bg-color="#bbcdfd">
                                    <div class="inner-circle1"></div>
                                    <p class="percentage1 mb-0">0%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-9 mt-3">
                    <div class="row justify-content-center">
                        <div class="col-lg-8 col-12">
                            <div class="bgcolor h-100 p-3">
                                <canvas id="myChart2" class="w-100 h-100"></canvas>


                            </div>
                        </div>
                        <div class="col-lg-4 col-12 mt-lg-0 mt-md-3 mt-3">
                            <div class="bgcolor p-4">
                                <div class='d-flex justify-content-between align-items-center'>
                                    <div>
                                        <h6 class='font-14 font-500 mb-0  inter'>Gender</h6>
                                    </div>
                                    <div> <i class="fa-solid fa-ellipsis-vertical"></i> </div>
                                </div>
                                <div class='text-center mt-3 pb-2'>
                                    <img src="/vendor/assets/imges/chart.png" width="100px" height="100px"
                                        alt="" />
                                </div>
                                <div class='mt-3'>
                                    <div class='d-flex justify-content-between align-items-center'>
                                        <div>
                                            <h6 class='font-14 font-500 mb-0  inter'><i
                                                    class="fa-solid fa-circle me-1 colorskyblue"></i>Male</h6>
                                        </div>
                                        <div>
                                            <p class='font-12 mb-0  inter colorgray'>240 (24%)</p>
                                        </div>
                                    </div>
                                    <div class='d-flex justify-content-between align-items-center'>
                                        <div>
                                            <h6 class='font-14 font-500 mb-0  inter'><i
                                                    class="fa-solid fa-circle me-1 colorpruppl"></i>Female</h6>
                                        </div>
                                        <div>
                                            <p class='font-12  mb-0  inter colorgray'>240 (24%)</p>
                                        </div>
                                    </div>
                                    <div class='d-flex justify-content-between align-items-center'>
                                        <div>
                                            <h6 class='font-14 font-500 mb-0  inter'><i
                                                    class="fa-solid fa-circle me-1 coloryellow"></i>Non-binary</h6>
                                        </div>
                                        <div>
                                            <p class='font-12  mb-0  inter colorgray'>200 (20%)</p>
                                        </div>
                                    </div>
                                    <div>
                                        <h6 class='font-14 font-500 mb-0  inter'><i
                                                class="fa-solid fa-circle me-1 coloryellow"></i>Prefer not to say
                                        </h6>
                                    </div>
                                    <div>
                                        <h6 class='font-14 font-500 mb-0  inter'><i
                                                class="fa-solid fa-circle me-1 coloryellow"></i>Other (unknown)</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        const circularProgress = document.querySelectorAll(".circular-progress1");

        Array.from(circularProgress).forEach((progressBar) => {
            const progressValue = progressBar.querySelector(".percentage1");
            const innerCircle = progressBar.querySelector(".inner-circle1");
            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