@extends('admin.layouts.app')

@section('title', 'Counters')

@section('content')
<div class="container-fluid">
    <h2 class="mb-4">Counters Listing</h2>

    <div class="card">
        <div class="card-body">
            <!-- Date Filter Form -->
            <form method="GET" action="{{ route('admin.counters') }}" class="mb-4" id="date-filter-form">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <!-- Left side: Date input and Filter button -->
                            <div class="input-group" style="width: auto;">
                                <input type="text" name="date_filter" id="date_filter" class="form-control" placeholder="MM/DD/YYYY" value="{{ $dateFilter ? \DateTime::createFromFormat('Y-m-d', $dateFilter)->format('m/d/Y') : '' }}">
                                <button type="submit" class="btn btn-primary">Filter</button>
                            </div>
                            <!-- Right side: Clear button -->
                            <a href="{{ route('admin.counters') }}" class="btn btn-secondary">Clear</a>
                        </div>
                    </div>
                </div>
            </form>

            @if ($counters->isEmpty())
                <p>No counters found.</p>
            @else
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>User</th>
                            <th>Email</th>
                            <th>{{ $isMonthly ? 'Month' : 'Date' }}</th>
                            <th>Resolved</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($counters as $index => $counter)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $counter->user_name ?? ($counter->title . ' ' . $counter->name) }}</td>
                                <td>{{ $counter->email }}</td>
                                <td>{{ $isMonthly ? $counter->month : $counter->date }}</td>
                                <td>{{ $counter->resolved }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Initialize Flatpickr with US date format and restrict future dates
    flatpickr("#date_filter", {
        dateFormat: "m/d/Y", // Display as MM/DD/YYYY
        maxDate: "today", // Prevent selecting future dates
        onChange: function(selectedDates, dateStr, instance) {
            // Convert to YYYY-MM-DD for form submission
            if (selectedDates.length > 0) {
                const date = selectedDates[0];
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                instance.element.setAttribute('data-submit-value', `${year}-${month}-${day}`);
                instance.element.name = 'date_filter'; // Ensure the name is set for form submission
                instance.element.value = dateStr; // Keep the display value as MM/DD/YYYY
            }
        },
        onReady: function(selectedDates, dateStr, instance) {
            // Ensure the initial value is submitted in YYYY-MM-DD format
            if (dateStr) {
                const [month, day, year] = dateStr.split('/');
                instance.element.setAttribute('data-submit-value', `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`);
            }
        }
    });

    // On form submission, set the input value to the YYYY-MM-DD format
    document.getElementById('date-filter-form').addEventListener('submit', function() {
        const dateInput = document.getElementById('date_filter');
        const submitValue = dateInput.getAttribute('data-submit-value');
        if (submitValue) {
            dateInput.value = submitValue;
        }
    });
</script>
@endsection