@extends('admin.layout.master')
@section('content')
    <!-- Dashboard Headline -->
    <div class="dashboard-headline">
        {{-- <h3>Howdy, Tom!</h3> --}}
        {{-- <span>We are glad to see you again!</span> --}}

        <!-- Breadcrumbs -->
        <nav id="breadcrumbs" class="dark">
            <ul>
                <li><a href="#">Home</a></li>
                <li>Dashboard</li>
            </ul>
        </nav>
    </div>

    <!-- Fun Facts Container -->
    <div class="fun-facts-container">
        <div class="fun-fact" data-fun-fact-color="#36bd78">
            <div class="fun-fact-text">
                <span>Total Sellers</span>
                <h4>{{ $data['sellers'] }}</h4>
            </div>
            <div class="fun-fact-icon"><i class="icon-material-outline-gavel"></i></div>
        </div>
        <div class="fun-fact" data-fun-fact-color="#36bd78">
            <div class="fun-fact-text">
                <span>Total Users</span>
                <h4>{{ $data['buyers'] }}</h4>
            </div>
            <div class="fun-fact-icon"><i class="icon-material-outline-rate-review"></i></div>
        </div>
        <div class="fun-fact" data-fun-fact-color="#b81b7f">
            <div class="fun-fact-text">
                <span>Jobs</span>
                <h4>{{ $data['services'] }}</h4>
            </div>
            <div class="fun-fact-icon"><i class="icon-material-outline-business-center"></i></div>
        </div>
        {{-- <div class="fun-fact" data-fun-fact-color="#efa80f">
            <div class="fun-fact-text">
                <span>Reviews</span>
                <h4>28</h4>
            </div>
            <div class="fun-fact-icon"><i class="icon-material-outline-rate-review"></i></div>
        </div> --}}

        <!-- Last one has to be hidden below 1600px, sorry :( -->
        {{-- <div class="fun-fact" data-fun-fact-color="#2a41e6">
            <div class="fun-fact-text">
                <span>This Month Views</span>
                <h4>987</h4>
            </div>
            <div class="fun-fact-icon"><i class="icon-feather-trending-up"></i></div>
        </div> --}}
    </div>
    <hr>
    <h2>Monthly Count</h2>
    <div>
        <div class="form-group">
            <label for="month">Month</label>
            <select class="form-control" id="month" name="month">
                <option value="">Select a month</option>
                <option value="01">January</option>
                <option value="02">February</option>
                <option value="03">March</option>
                <option value="04">April</option>
                <option value="05">May</option>
                <option value="06">June</option>
                <option value="07">July</option>
                <option value="08">August</option>
                <option value="09">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
        </div>

        <div class="form-group">
            <label for="year">Year</label>
            <select class="form-control" id="year" name="year">
                <option value="">Select a year</option>
            </select>
        </div>
        @if (!empty(request()->month) || !empty(request()->year))
        <a href="{{route('admin.index')}}" type="button" class="btn btn-danger" id="reset-button">Reset</a>
        @endif
    </div>
    <div class="fun-facts-container">

        <div class="fun-fact" data-fun-fact-color="#36bd78">
            <div class="fun-fact-text">
                <span>Total Sellers</span>
                <h4>{{ $monthlyCount['sellers'] }}</h4>
            </div>
            <div class="fun-fact-icon"><i class="icon-material-outline-gavel"></i></div>
        </div>
        <div class="fun-fact" data-fun-fact-color="#36bd78">
            <div class="fun-fact-text">
                <span>Total Users</span>
                <h4>{{ $monthlyCount['buyers'] }}</h4>
            </div>
            <div class="fun-fact-icon"><i class="icon-material-outline-rate-review"></i></div>
        </div>
    </div>

    <!-- Row -->
    <div class="row">

        {{-- <div class="col-xl-8">
            <!-- Dashboard Box -->
            <div class="dashboard-box main-box-in-row">
                <div class="headline">
                    <h3><i class="icon-feather-bar-chart-2"></i> Your Profile Views</h3>
                    <div class="sort-by">
                        <select class="selectpicker hide-tick">
                            <option>Last 6 Months</option>
                            <option>This Year</option>
                            <option>This Month</option>
                        </select>
                    </div>
                </div>
                <div class="content">
                    <!-- Chart -->
                    <div class="chart">
                        <canvas id="chart" width="100" height="45"></canvas>
                    </div>
                </div>
            </div>
            <!-- Dashboard Box / End -->
        </div> --}}
        <div class="col-xl-4">

            <!-- Dashboard Box -->
            <!-- If you want adjust height of two boxes
                                                                                                    add to the lower box 'main-box-in-row'
                                                                                                    and 'child-box-in-row' to the higher box -->
            {{-- <div class="dashboard-box child-box-in-row">
                <div class="headline">
                    <h3><i class="icon-material-outline-note-add"></i> Notes</h3>
                </div>

                <div class="content with-padding">
                    <!-- Note -->
                    <div class="dashboard-note">
                        <p>Meeting with candidate at 3pm who applied for Bilingual Event Support
                            Specialist</p>
                        <div class="note-footer">
                            <span class="note-priority high">High Priority</span>
                            <div class="note-buttons">
                                <a href="#" title="Edit" data-tippy-placement="top"><i
                                        class="icon-feather-edit"></i></a>
                                <a href="#" title="Remove" data-tippy-placement="top"><i
                                        class="icon-feather-trash-2"></i></a>
                            </div>
                        </div>
                    </div>
                    <!-- Note -->
                    <div class="dashboard-note">
                        <p>Extend premium plan for next month</p>
                        <div class="note-footer">
                            <span class="note-priority low">Low Priority</span>
                            <div class="note-buttons">
                                <a href="#" title="Edit" data-tippy-placement="top"><i
                                        class="icon-feather-edit"></i></a>
                                <a href="#" title="Remove" data-tippy-placement="top"><i
                                        class="icon-feather-trash-2"></i></a>
                            </div>
                        </div>
                    </div>
                    <!-- Note -->
                    <div class="dashboard-note">
                        <p>Send payment to David Peterson</p>
                        <div class="note-footer">
                            <span class="note-priority medium">Medium Priority</span>
                            <div class="note-buttons">
                                <a href="#" title="Edit" data-tippy-placement="top"><i
                                        class="icon-feather-edit"></i></a>
                                <a href="#" title="Remove" data-tippy-placement="top"><i
                                        class="icon-feather-trash-2"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="add-note-button">
                    <a href="#small-dialog" class="popup-with-zoom-anim button full-width button-sliding-icon">Add Note <i
                            class="icon-material-outline-arrow-right-alt"></i></a>
                </div>
            </div> --}}
            <!-- Dashboard Box / End -->
        </div>
    </div>
    <!-- Row / End -->

    <!-- Row -->
    <div class="row">

        <!-- Dashboard Box -->
        {{-- <div class="col-xl-6">
            <div class="dashboard-box">
                <div class="headline">
                    <h3><i class="icon-material-baseline-notifications-none"></i> Notifications</h3>
                    <button class="mark-as-read ripple-effect-dark" data-tippy-placement="left" title="Mark all as read">
                        <i class="icon-feather-check-square"></i>
                    </button>
                </div>
                <div class="content">
                    <ul class="dashboard-box-list">
                        <li>
                            <span class="notification-icon"><i class="icon-material-outline-group"></i></span>
                            <span class="notification-text">
                                <strong>Michael Shannah</strong> applied for a job <a href="#">Full Stack Software
                                    Engineer</a>
                            </span>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button ripple-effect ico" title="Mark as read"
                                    data-tippy-placement="left"><i class="icon-feather-check-square"></i></a>
                            </div>
                        </li>
                        <li>
                            <span class="notification-icon"><i class=" icon-material-outline-gavel"></i></span>
                            <span class="notification-text">
                                <strong>Gilber Allanis</strong> placed a bid on your <a href="#">iOS App
                                    Development</a> project
                            </span>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button ripple-effect ico" title="Mark as read"
                                    data-tippy-placement="left"><i class="icon-feather-check-square"></i></a>
                            </div>
                        </li>
                        <li>
                            <span class="notification-icon"><i class="icon-material-outline-autorenew"></i></span>
                            <span class="notification-text">
                                Your job listing <a href="#">Full Stack Software Engineer</a> is
                                expiring
                            </span>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button ripple-effect ico" title="Mark as read"
                                    data-tippy-placement="left"><i class="icon-feather-check-square"></i></a>
                            </div>
                        </li>
                        <li>
                            <span class="notification-icon"><i class="icon-material-outline-group"></i></span>
                            <span class="notification-text">
                                <strong>Sindy Forrest</strong> applied for a job <a href="#">Full
                                    Stack Software Engineer</a>
                            </span>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button ripple-effect ico" title="Mark as read"
                                    data-tippy-placement="left"><i class="icon-feather-check-square"></i></a>
                            </div>
                        </li>
                        <li>
                            <span class="notification-icon"><i class="icon-material-outline-rate-review"></i></span>
                            <span class="notification-text">
                                <strong>David Peterson</strong> left you a <span class="star-rating no-stars"
                                    data-rating="5.0"></span> rating
                                after finishing <a href="#">Logo Design</a> task
                            </span>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button ripple-effect ico" title="Mark as read"
                                    data-tippy-placement="left"><i class="icon-feather-check-square"></i></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div> --}}

        <!-- Dashboard Box -->
        <div class="col-xl-6">
            <div class="dashboard-box">
                <div class="headline">
                    <h3><i class="icon-material-outline-assignment"></i> Orders</h3>
                </div>
                <div class="content">
                    <ul class="dashboard-box-list">
                        @forelse ($orders as $order)
                            <li>
                                <div class="invoice-list-item">
                                    <strong>{{ $order->service->title }}</strong>
                                    <ul>
                                        @switch($order->status)
                                            @case(0)
                                                <li><span class="unpaid">Pending</span></li>
                                            @break

                                            @case(1)
                                                <li><span class="unpaid">Waiting for payment from
                                                        buyer</span></li>
                                            @break

                                            @case(2)
                                                <li><span class="unpaid">Waiting
                                                        for
                                                        delivery
                                                        By Seller</span></li>
                                            @break

                                            @case(3)
                                                <li><span class="unpaid">Order
                                                        Delivered
                                                        By Seller</span></li>
                                            @break

                                            @case(4)
                                                <li><span class="paid">Order
                                                        Completed</span></li>
                                            @break

                                            @case(5)
                                                <li><span class="unpaid">Order
                                                        Rejected</span></li>
                                            @break

                                            @case(6)
                                                <li><span class="unpaid">Waiting
                                                        for
                                                        payment secured</span></li>
                                            @break

                                            @default
                                        @endswitch
                                        <li>Order: #{{ $order->id }}</li>
                                        <li>Date: {{ $order->created_at->format('Y-m-d') }}</li>
                                    </ul>
                                </div>
                                <!-- Buttons -->
                                {{-- <div class="buttons-to-right">
                                <a href="#" class="button">Finish Payment</a>
                            </div> --}}
                            </li>
                            @empty
                            @endforelse

                            {{-- <li>
                            <div class="invoice-list-item">
                                <strong>Professional Plan</strong>
                                <ul>
                                    <li><span class="paid">Paid</span></li>
                                    <li>Order: #264</li>
                                    <li>Date: 10/07/2019</li>
                                </ul>
                            </div>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button gray">View
                                    Invoice</a>
                            </div>
                        </li>
                        <li>
                            <div class="invoice-list-item">
                                <strong>Professional Plan</strong>
                                <ul>
                                    <li><span class="paid">Paid</span></li>
                                    <li>Order: #211</li>
                                    <li>Date: 12/06/2019</li>
                                </ul>
                            </div>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button gray">View
                                    Invoice</a>
                            </div>
                        </li>
                        <li>
                            <div class="invoice-list-item">
                                <strong>Professional Plan</strong>
                                <ul>
                                    <li><span class="paid">Paid</span></li>
                                    <li>Order: #179</li>
                                    <li>Date: 06/05/2019</li>
                                </ul>
                            </div>
                            <!-- Buttons -->
                            <div class="buttons-to-right">
                                <a href="#" class="button gray">View
                                    Invoice</a>
                            </div>
                        </li> --}}
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!-- Row / End -->
    @endsection

    @push('scripts')
        <script>
            // Populate the year dropdown with the last 10 years
            var currentYear = new Date().getFullYear();
            var years = [];
            for (var i = 0; i < 10; i++) {
                years.push(currentYear - i);
            }
            years.forEach(function(year) {
                $('#year').append($('<option>', {
                    value: year,
                    text: year
                }));
            });

            // Set the default values for the dropdowns based on the current month and year
            var currentMonth = new Date().getMonth() + 1; // JavaScript months are zero-based
            $('#month').val(('0' + currentMonth).slice(-2)); // Add leading zero if necessary
            $('#year').val(currentYear);

            var searchParams = new URLSearchParams(window.location.search);
            var month = searchParams.get('month');
            var year = searchParams.get('year');

            if (month && year) {
                $('#month').val(month);
                $('#year').val(year);
            } else {
                // Set the default values for the dropdowns based on the current month and year
                var currentMonth = new Date().getMonth() + 1; // JavaScript months are zero-based
                $('#month').val(('0' + currentMonth).slice(-2)); // Add leading zero if necessary
                $('#year').val(currentYear);
            }


            $('#month, #year').on('change', function() {
                var month = $('#month').val();
                var year = $('#year').val();
                var url = '{{ route('admin.index') }}?month=' + month + '&year=' + year;
                window.location.href = url;
            });
        </script>
    @endpush