@extends('../welcome')


@section('content')
    <div class="container-fluid">
        <!-- Page Heading -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Daily Report</h1>
        </div>

        <div class="row">
            <!-- Reservations Card  -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Reservations</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    <h1 id="counter">0
                                    </h1>
                                    <p id="currentValue" data-count="{{ count($reservations) }}" class="d-none">
                                    </p>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Earnings Card  -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Earnings </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    <h1 id="earningCounter">{{ $earnings }}
                                    </h1>
                                    {{-- <p id="earningtValue" data-count="{{ $earnings }}" class="d-none">
                                    </p> --}}
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- time Card  -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Most Reserved Time
                                </div>
                                <div class="row no-gutters align-items-center">
                                    <div class="col-auto">
                                        <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                                            <h1 id="timeCounter">0
                                            </h1>
                                            <p id="timeCurrentValue" data-count="{{ $mostTime->count ?? 0 }}" class="d-none">
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class=" mr-2">
                                            {{ $mostTime->time ?? 'No Reservation Yet' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clock fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- units Card  -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Most Visted Unit</div>
                                <div class="row no-gutters align-items-center">
                                    <div class="col-auto">
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                                            <h1 id="unitCounter">0
                                            </h1>
                                            <p id="unitCurrentValue" data-count="{{ count($mostUnit) }}" class="d-none">
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class=" mx-2">
                                            {{ $mostUnit[0]->unit->name ?? 'No Reservation Today' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <script>
        var counterElement = document.getElementById('counter');
        var currentValue = document.getElementById('currentValue');
        currentValueElement = currentValue.getAttribute("data-count")
        let reservationCounter = 0;

        var counterInterval1 = setInterval(function() {
            if (reservationCounter < currentValueElement) {
                reservationCounter++;
                counterElement.innerHTML = reservationCounter;
            }
        }, 300);

        var timeCounterElement = document.getElementById('timeCounter');
        var timeCurrentValue = document.getElementById('timeCurrentValue');
        currentValue = timeCurrentValue.getAttribute("data-count")
        let timeCounter = 0;

        var counterInterval2 = setInterval(function() {
            if (timeCounter < currentValue) {
                timeCounter++;
                timeCounterElement.innerHTML = timeCounter;
            }
        }, 300);

        var unitCounter = document.getElementById('unitCounter');
        var unitCurrentValue = document.getElementById('unitCurrentValue');
        unitValue = unitCurrentValue.getAttribute("data-count")

        var counterInterval2 = setInterval(function() {
            if (unitCounter.innerHTML <= unitValue) {
                unitCounter.innerHTML++;
            }
        }, 300);

        // var earningCounter = document.getElementById('earningCounter');
        // var earningtValue = document.getElementById('earningtValue');
        // earningCurrentValue = earningtValue.getAttribute("data-count")

        // let counter = 0;
        // var counterInterval3 = setInterval(function() {
        //     if (counter < earningCurrentValue) {
        //         counter++;
        //         earningCounter.innerHTML = counter
        //     }
        // }, .25);
    </script>
@endsection