@extends('layouts.app')

@section('admin_title')
{{ __('Dashboard') }}
@endsection

@section('content')
<style>
    .btn-focus {
        background-color: #007bff;
        /* Change to your preferred focus color */
        color: white;
        /* Text color */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        /* Optional shadow for effect */
    }
    .custom-stat-card {
        border: none;
        border-radius: 12px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        background: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        min-height: 110px; /* Ensures all cards stay the same height */
    }

    .custom-stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .stat-label {
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        text-align: center;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: #32325d;
    }
    
    /* Responsive adjustment for small screens */
    @media (max-width: 576px) {
        .stat-value { font-size: 1.25rem; }
    }
</style>
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5">
    <div class="container-fluid">
        <div class="header-body">
            <!-- Card stats -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="btn-group" role="group" aria-label="Filter">
                        <button type="button" class="btn btn-focus" data-filter="daily">Daily</button>
                        <button type="button" class="btn" data-filter="weekly">Weekly</button>
                        <button type="button" class="btn" data-filter="monthly">Monthly</button>
                        <button type="button" class="btn" data-filter="quarterly">Quarterly</button>
                        <button type="button" class="btn" data-filter="yearly">Yearly</button>
                    </div>
                </div>
            </div>


               
<div class="row dashboard-equal-cards">
    <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
        <div class="card card-stats custom-stat-card h-100">
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <h5 class="stat-label">{{ __('New Restaurants') }}</h5>
                <span class="stat-value" id="restaurants-count">{{ $newCompanys }}</span>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
        <div class="card card-stats custom-stat-card h-100">
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <h5 class="stat-label">{{ __('Trial Restaurants') }}</h5>
                <span class="stat-value" id="trial-users-count">{{ $FreeCompanys }}</span>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
        <div class="card card-stats custom-stat-card h-100">
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <h5 class="stat-label">{{ __('Total Customers') }}</h5>
                <span class="stat-value" id="total-customers">{{ $users }}</span>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
        <div class="card card-stats custom-stat-card h-100">
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <h5 class="stat-label">{{ __('Sale Amount') }}</h5>
               <span class="stat-value">
    ${{ number_format($totalSalesAmount, 2) }}
</span>

            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
        <div class="card card-stats custom-stat-card h-100">
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <h5 class="stat-label">{{ __('Messages') }}</h5>
                <span class="stat-value" id="restaurant-messages">{{ $tickets }}</span>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
        <div class="card card-stats custom-stat-card h-100">
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <h5 class="stat-label">{{ __('Unresponded') }}</h5>
                <span class="stat-value text-danger" id="unresponded-messages">{{ $ticketsnotresponded }}</span>
            </div>
        </div>
    </div>
</div>

       
        </div>
    </div>
</div>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-8 mb-5 mb-xl-0">
            <div class="card bg-gradient-default shadow">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-uppercase text-light ls-1 mb-1">{{ __('Overview') }}</h6>
                            <h2 class="text-white mb-0">{{ __('Sales value') }}</h2>
                        </div>
                    </div>
                </div>

                <script>
                    var salesValue = {
                        !!json_encode($filteredData['salesValue'] ?? []) !!
                    };
                    var monthLabels = {
                        !!json_encode($filteredData['monthLabels'] ?? []) !!
                    };

                    var totalOrders = [];
                    var salesValues = [];
                    var costValues = [];

                    for (const key in salesValue) {
                        totalOrders.push(salesValue[key].totalPerMonth);
                        salesValues.push(salesValue[key].sumValue);
                        costValues.push(salesValue[key].costValue ?? 0); // Use null coalescing
                    }
                </script>

                <div class="card-body">
                    <!-- Chart -->
                    @if(isset($filteredData['salesValue']) && count($filteredData['salesValue']) > 0)
                    <div class="chart">
                        <canvas id="chart-sales" class="chart-canvas"></canvas>
                    </div>
                    @else
                    <p class="text-white">{{ __('No sales right now!') }}</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card shadow">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-uppercase text-muted ls-1 mb-1">{{ __('Performance') }}</h6>
                            <h2 class="mb-0">{{ __('Total orders') }}</h2>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    @if(isset($filteredData['salesValue']) && count($filteredData['salesValue']) > 0)
                    <div class="chart">
                        <canvas id="chart-orders" class="chart-canvas"></canvas>
                    </div>
                    @else
                    <p>{{ __('No orders right now!') }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-xl-6">
            <div class="card shadow">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="mb-0">{{ __('Responded') }}</h2>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">{{ __('SL') }}</th>
                                    <th scope="col">{{ __('Subject') }}</th>
                                    <th scope="col">{{ __('Status') }}</th>
                                    <th scope="col">{{ __('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if($Responded->isEmpty())
                                <tr>
                                    <td colspan="4">{{ __('No tickets found.') }}</td>
                                </tr>
                                @else
                                @foreach($Responded as $key => $Responded)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $Responded->subject }}</td>
                                    <td>{{ $Responded->status }}</td>
                                    <td>
                                        <a href="{{ route('admin.ticket.view', $Responded->id) }}" class="btn btn-sm btn-primary">{{ __('View') }}</a>
                                    </td>
                                </tr>
                                @endforeach
                                @endif

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card shadow">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="mb-0">{{ __('Not Responded') }}</h2>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">{{ __('SL') }}</th>
                                    <th scope="col">{{ __('Subject') }}</th>
                                    <th scope="col">{{ __('Status') }}</th>
                                    <th scope="col">{{ __('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if($NotResponded->isEmpty())
                                <tr>
                                    <td colspan="4">{{ __('No tickets found.') }}</td>
                                </tr>
                                @else
                                @foreach($NotResponded as $key => $NotResponded)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $NotResponded->subject }}</td>
                                    <td>{{ $NotResponded->status }}</td>
                                    <td>
                                        <a href="{{ route('admin.ticket.view', $NotResponded->id) }}" class="btn btn-sm btn-primary">{{ __('View') }}</a>
                                    </td>
                                </tr>
                                @endforeach
                                @endif

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footers.auth')
</div>

@endsection

@section('topjs')
<script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
<script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $('.btn').click(function() {
            let filterType = $(this).data('filter');

            // Remove focus from all buttons
            $('.btn').removeClass('btn-focus');

            // Add focus to the clicked button
            $(this).addClass('btn-focus');

            $.ajax({
                url: '/admin/dashboard', // Laravel route for the AJAX request
                method: 'GET',
                data: {
                    filter: filterType
                },
                success: function(response) {
                    // Update the card values with the response data
                    $('#restaurants-count').text(response.newCompanys);
                    $('#trial-users-count').text(response.FreeCompanys);
                    $('#total-sales-amount').text('$' + response.totalSalesAmount);
                },
                error: function(error) {
                    console.error('Error fetching data', error);
                }
            });
        });

        // ✅ Trigger the "daily" filter automatically on page load
        $('.btn[data-filter="daily"]').trigger('click');
    });
</script>

@endpush