@extends('admin.layouts.master')
@section('breadcrumb')
    <section class="content-header">
        <h1>
            Stores Stats
        </h1>
        <ul class="breadcrumb">
            <li> Stats <i class="fa fa-minus" aria-hidden="true"></i></li>
        </ul>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
        <!-- Date Filter Form -->
        <form method="GET" action="{{ route('stats') }}">
            <div class="row">
                <!-- Start Date and End Date -->
                <div class="col-md-4">
                    <input type="text" class="form-control" id="startDate" name="start_date" placeholder="Start Date" value="{{ request()->get('start_date') }}">
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="endDate" name="end_date" placeholder="End Date" value="{{ request()->get('end_date') }}">
                </div>
                <!-- Preset date filters -->
                <div class="col-md-4">
                    <select name="date_filter" class="form-control">
                        <option value="none" selected>No Filter</option>
                        <option value="today" {{ request('date_filter') == 'today' ? 'selected' : '' }}>Today</option>
                        <option value="yesterday" {{ request('date_filter') == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                        <option value="last_7_days" {{ request('date_filter') == 'last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                        <option value="last_month" {{ request('date_filter') == 'last_month' ? 'selected' : '' }}>Last Month</option>
                    </select>
                </div>
                <br>
                <br>
                <div class="col-md-12 mt-2">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <button type="button" class="btn btn-secondary" id="clearFilterBtn">Clear Filter</button>
                </div>
            </div>
        </form>
    </section>
@stop
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>Data Category</th>
                                <th>Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Installed Apps</td>
                                <td>{{ $data->installed_apps }}</td>
                            </tr>
                            <tr>
                                <td>Uninstalled Apps</td>
                                <td>{{ $data->uninstalled_apps }}</td>
                            </tr>
                            <tr>
                                <td>Shops with Configured Events</td>
                                <td>{{ $data->shops_with_configured_events }}</td>
                            </tr>
                            <tr>
                                <td>Shops with Active Data Events</td>
                                <td>{{ $data->shops_with_active_data_events }}</td>
                            </tr>
                            <tr>
                                <td>Shops with Processed Logs</td>
                                <td>{{ $data->shops_with_processed_logs }}</td>
                            </tr>
                            <tr>
                                <td>Total Processed Logs</td>
                                <td>{{ $data->total_processed_logs }}</td>
                            </tr>
                            <tr>
                                <td>Review Stats</td>
                                <td>{!! $data->review_stats !!}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="bulkSyncModal" tabindex="-1" aria-labelledby="bulkSyncModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bulkSyncModalLabel">Bulk Sync Jobs Per Store</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>
@stop
@section('last_scripts')
    <!-- Datepicker CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- Datepicker JS (must be after jQuery) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#startDate, #endDate').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true
            });

            $('#clearFilterBtn').click(function () {
                window.location.href = "{{ route('stats') }}";
            });
        });
    </script>
@stop