@extends('layouts.admin')

@section('content')
<div class="page-links">
    <a href="{{ route('users.index') }}">Users</a>
    <span> > </span>
    <a href="javascript:void(0)">{{ $user->accountId }}</a>
    <span> > </span>
    <a href="javascript:void(0)">{{ $title }}</a>
</div>

<div class="row">
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
        @include('users.settings.leftbar')
    </div>
    <div class="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
        <div class=" mb-3">
            <div class="">
                <h2 class="iheading-man">
                    <div class="row">
                        <div class="col-6">{{ $title }} </div>
                    </div>
                </h2>

                <div class="row">
                    <!-- total-order -->
                    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card-main mb-3">
                            <div class="total-order">
                                <a href="{{ route('user-settings-orders', ['user' => $user]) }}">
                                    <div class="row">
                                        <div class="col-9">
                                            <h2>Total Orders </h2>
                                            <h3>{{$totalOrders}}</h3>
                                            <!-- <p>4.75% increase in orders last week</p> -->
                                        </div>
                                        <div class="col-3 text-center">
                                            <div class="t-order-icon bg-color1 color0"><i class="fa fa-shopping-cart"></i></div>
                                            <!-- <h5>4.75%</h5> -->
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- total-order end -->


                    <!-- total-order -->
                    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card-main mb-3">
                            <div class="total-order">
                                <a href="{{ route('user-settings-packages', ['user' => $user]) }}">
                                    <div class="row">
                                        <div class="col-9">
                                            <h2>Total Amount </h2>
                                            <h3>{{'$'.number_format($totalAmount,2)}}</h3>
                                            <!-- <p>Total visitors decreased by </p> -->
                                        </div>
                                        <div class="col-3 text-center">
                                            <div class="t-order-icon bg-color2 color0"><i class="fa fa-usd"></i></div>
                                            <!-- <h5>1.25%</h5> -->
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- total-order end -->

                    <!-- total-order -->
                    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card-main mb-3">
                            <div class="total-order">
                                <a href="{{ route('user-settings-payments', ['user' => $user]) }}">
                                    <div class="row">
                                        <div class="col-9">
                                            <h2>Total Payments </h2>
                                            <h3>{{'$'.number_format($totalPayments,2)}}</h3>
                                            <!-- <p>Revenue increases this month</p> -->
                                        </div>
                                        <div class="col-3 text-center">
                                            <div class="t-order-icon bg-color4 color0"><i class="fa fa-usd" aria-hidden="true"></i></div>
                                            <!-- <h5>13.5%</h5> -->
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- total-order end -->

                    <!-- pending amount -->

                    <!-- total-order -->
                    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card-main mb-3">
                            <div class="total-order">
                            <a href="{{ route('user-settings-orders', ['user' => $user]) }}">
                                <!-- <a href="{{ route('orders.index') }}"> -->
                                    <div class="row">
                                        <div class="col-9">
                                            <h2>Pending Amount </h2>
                                            <h3>{{'$'.number_format($pendingAmount,2)}}</h3>
                                            <!-- <p>20% increase in last month</p> -->
                                        </div>
                                        <div class="col-3 text-center">
                                            <div class="t-order-icon bg-color3 color0"><i class="fa fa-usd"></i></div>
                                            <!-- <h5>20% </h5> -->
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>

        <div class="card-main mb-3">
            <div class="customer-details-form form-fld">
                <h2 class="iheading-man">
                    <div class="row">
                        <div class="col-6">Current Package </div>
                    </div>
                </h2>
                @if(isset($runningPackage))
                <div class="row">
                    <div class="col-12 customer-table-main table-container">
                        <table class="table">
                            <tr>
                                <th>Package</th>
                                <th>Schedule</th>
                                <th>Tiffins</th>
                                <th>Remaining Tiffins</th>
                                <th>Expiry Date</th>
                            </tr>
                            <tr>
                                <td>
                                    {{$runningPackage->package->title}}
                                </td>
                                <td>
                                    @php
                                    $html = '';
                                    $html = ucfirst($runningPackage->package->from_day) . ' - ' . ucfirst($runningPackage->package->to_day);
                                    @endphp
                                    @foreach ($runningPackage->package->package_days as $days)
                                    @if ($days->qty > 1)
                                    @switch ($days->day_id)
                                    @case(1)
                                    @php $day = 'Mon'; @endphp
                                    @break;
                                    @case(2)
                                    @php $day = 'Tue'; @endphp
                                    @break;
                                    @case(3)
                                    @php $day = 'Wed'; @endphp
                                    @break;
                                    @case(4)
                                    @php $day = 'Thu'; @endphp
                                    @break;
                                    @case(5)
                                    @php $day = 'Fri'; @endphp
                                    @break;
                                    @case(6)
                                    @php $day = 'Sat'; @endphp
                                    @break;
                                    @default
                                    @php $day = 'Sun'; @endphp
                                    @endswitch
                                    @php $html .= " (" . $day . " - " . $days->qty . ")"; @endphp
                                    @endif
                                    @endforeach


                                    {!! $html !!}
                                </td>
                                <td>{{$runningPackage->total_tiffins }}</td>
                                <td>{{$runningPackage->remaining_tiffins }}</td>
                                <td>
                                    {{$runningPackage->expired_date}}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- <div class="card-main mb-3">
            <div class="customer-details-form form-fld"> -->
        <!-- <h2 class="iheading-man">
                    <div class="row">
                        <div class="col-6">Payments </div>
                    </div>
                </h2> -->

        <div class="row">
            <div class="col-12">
                <div class="map1 card-main mb-3">
                    <h3 class="map-heading">Payments</h3>
                    <h4 class="right-heading">Current Year - 2024</h4>
                    <div id="incExpBarChart"></div>
                </div>
            </div>
        </div>

        <!-- </div>
        </div> -->
    </div>
</div>
@endsection
@push('scripts')
<script src="{{ asset('js/apexcharts.min.js') }}"></script>


<script>
    (function() {
        var options = {
            chart: {
                height: 180,
                type: 'bar',
                toolbar: {
                    show: false,
                },
            },
            dataLabels: {
                enabled: true
            },
            stroke: {
                width: 2,
                curve: 'smooth'
            },
            series: [{
                    name: "Pay",
                    data: null                    // data: [9000, 34230, 21100, 12530, 33360, 28000, 30000, 15000, 17000, 8000, 23000, 29000]
                },
                // {
                //     name: "Expense",
                //     data: [6000, 30230, 19100, 10530, 30360, 22000, 25000, 12000, 12000, 5000, 17000, 23000]
                // }
            ],
            xaxis: {
                // categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                categories: null,
            },
            colors: ['#3ec9d6', '#FF3A6E'],
            fill: {
                type: 'solid',
            },
            grid: {
                strokeDashArray: 4,
            },
            legend: {
                show: true,
                position: 'top',
                horizontalAlign: 'right',
            },
        };
        var chart = new ApexCharts(document.querySelector("#incExpBarChart"), options);
        chart.render();
    })();
</script>

@endpush