@extends('layouts.app')

@section('title', 'Reminder Report')
@section('no-page-header')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <!-- <h2 class="text-2xl font-bold text-gray-900">Reminder Report</h2> -->
            <p class="mt-1 text-sm text-gray-600">View all SMS, Email, and WhatsApp reminder history.</p>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="bg-white rounded-lg shadow p-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0">
            <div class="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
                <input type="hidden" id="from-date" name="from_date">
                <input type="text" id="from-date-display" placeholder="From Date" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" autocomplete="off">

                <input type="hidden" id="to-date" name="to_date">
                <input type="text" id="to-date-display" placeholder="To Date" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" autocomplete="off">

                <select id="type-filter" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Types</option>
                    <option value="email">Email</option>
                    <option value="sms">SMS</option>
                    <option value="whatsapp">WhatsApp</option>
                </select>

                <select id="status-filter" class="px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
                    <option value="">All Status</option>
                    <option value="sent">Sent</option>
                    <option value="failed">Failed</option>
                    <option value="pending">Pending</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <button onclick="generateReport()" class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" id="view-report-btn">
                    <i class="fas fa-chart-bar mr-2"></i>View Report
                </button>
            </div>
        </div>
    </div>

    <!-- Report Container (loaded via AJAX) -->
    <div id="report-container" class="mt-6">
        @if(request()->hasAny(['from_date', 'to_date', 'type', 'status']))
            <!-- Export Buttons -->
            <div class="flex justify-end mb-4">
                <button onclick="downloadReport('xlsx')" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm mr-2">
                    <i class="fas fa-file-excel mr-2"></i>Download Excel
                </button>
            </div>

            <!-- Statistics Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow-sm border p-4">
                    <p class="text-sm text-gray-600">Total Reminders</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['total'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm border p-4">
                    <p class="text-sm text-gray-600">Sent</p>
                    <p class="text-2xl font-bold text-green-600">{{ $stats['sent'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm border p-4">
                    <p class="text-sm text-gray-600">Failed</p>
                    <p class="text-2xl font-bold text-red-600">{{ $stats['failed'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm border p-4">
                    <p class="text-sm text-gray-600">Email</p>
                    <p class="text-2xl font-bold text-blue-600">{{ $stats['email'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm border p-4">
                    <p class="text-sm text-gray-600">SMS</p>
                    <p class="text-2xl font-bold text-yellow-600">{{ $stats['sms'] }}</p>
                </div>
                <div class="bg-white rounded-lg shadow-sm border p-4">
                    <p class="text-sm text-gray-600">WhatsApp</p>
                    <p class="text-2xl font-bold" style="color: #25D366;">{{ $stats['whatsapp'] }}</p>
                </div>
            </div>

            <!-- Results Table -->
            <div class="bg-white rounded-lg shadow-sm border overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">S.No</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client Name</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Days</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sent At</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @if($reminders->count() > 0)
                                @foreach($reminders as $reminder)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $loop->iteration }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ \Carbon\Carbon::parse($reminder->date)->format('d M Y') }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $reminder->client_name }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $reminder->days_count }} Days
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            @if($reminder->type == 'email')
                                                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                                    Email
                                                </span>
                                            @elseif($reminder->type == 'sms')
                                                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                    SMS
                                                </span>
                                            @elseif($reminder->type == 'whatsapp')
                                                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full" style="background-color: #25D36620; color: #25D366;">
                                                    WhatsApp
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $reminder->phone ?? 'N/A' }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $reminder->email ?? 'N/A' }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            @if($reminder->status == 'sent')
                                                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                    Sent
                                                </span>
                                            @elseif($reminder->status == 'failed')
                                                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                    Failed
                                                </span>
                                            @else
                                                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                                    Pending
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $reminder->created_at ? \Carbon\Carbon::parse($reminder->created_at)->format('d M Y H:i') : 'N/A' }}
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                                        <div class="flex flex-col items-center">
                                            <i class="fas fa-bell-slash text-4xl text-gray-300 mb-4"></i>
                                            <p class="text-lg font-medium">No reminders found</p>
                                            <p class="text-sm">Try adjusting your filters or date range.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
    .ui-datepicker { z-index: 9999 !important; }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        const viewBtn = document.getElementById('view-report-btn');
        if (viewBtn) {
            viewBtn.addEventListener('click', function(e) {
                e.preventDefault();
                generateReport();
            });
        }
    });

    // Initialize datepicker on page load
    $(document).ready(function() {
        $('#from-date-display, #to-date-display').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '-10:+10',
            onSelect: function(dateText, inst) {
                var parts = dateText.split('-');
                var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                if (this.id === 'from-date-display') {
                    $('#from-date').val(isoDate);
                } else {
                    $('#to-date').val(isoDate);
                }
            }
        });

        // Sync display to hidden on manual input
        $('#from-date-display').on('change', function() {
            var val = $(this).val();
            if (val) {
                var parts = val.split('-');
                if (parts.length === 3) {
                    var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                    $('#from-date').val(isoDate);
                }
            } else {
                $('#from-date').val('');
            }
        });

        $('#to-date-display').on('change', function() {
            var val = $(this).val();
            if (val) {
                var parts = val.split('-');
                if (parts.length === 3) {
                    var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                    $('#to-date').val(isoDate);
                }
            } else {
                $('#to-date').val('');
            }
        });
    });

    // Get filter values
    function getFilterValues() {
        const filters = {
            from_date: document.getElementById('from-date').value,
            to_date: document.getElementById('to-date').value,
            type: document.getElementById('type-filter').value,
            status: document.getElementById('status-filter').value
        };
        return filters;
    }

    const exportUrl = '{{ route('reports.reminders.export') }}';

    // Download report
    function downloadReport(format) {
        const filters = getFilterValues();
        const params = new URLSearchParams();
        Object.keys(filters).forEach(key => {
            if (filters[key]) {
                params.append(key, filters[key]);
            }
        });

        const url = `${exportUrl}?${params.toString()}`;

        const link = document.createElement('a');
        link.href = url;
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // Generate report via AJAX
    async function generateReport() {
        const filters = getFilterValues();

        const reportContainer = document.getElementById('report-container');

        // Show loading
        reportContainer.innerHTML = `
            <div class="bg-white rounded-lg shadow p-6 text-center py-8">
                <i class="fas fa-spinner fa-spin text-primary-600 text-3xl mb-4"></i>
                <p class="text-gray-600">Loading report...</p>
            </div>
        `;

        try {
            const response = await fetch('{{ route('reports.reminders') }}?' + new URLSearchParams(filters));
            const html = await response.text();

            // Parse the HTML to extract the report-container content
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newContent = doc.querySelector('#report-container');

            if (newContent) {
                reportContainer.innerHTML = newContent.innerHTML;
            } else {
                reportContainer.innerHTML = `
                    <div class="bg-white rounded-lg shadow p-6 text-center py-8 text-red-600">
                        <i class="fas fa-exclamation-circle text-3xl mb-4"></i>
                        <p>Failed to load report. Please try again.</p>
                    </div>
                `;
            }
        } catch (error) {
            reportContainer.innerHTML = `
                <div class="bg-white rounded-lg shadow p-6 text-center py-8 text-red-600">
                    <i class="fas fa-exclamation-circle text-3xl mb-4"></i>
                    <p>Error loading report: ${error.message}</p>
                </div>
            `;
        }
    }
</script>
@endpush