@extends('layouts.admin')

@section('title', 'DLR Reports')
@section('page-title', 'Delivery Reports')

@section('content')
<div class="card shadow">
    <div class="card-header bg-primary text-white py-3">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Delivery Reports (DLR)</h5>
            <div class="btn-group">
                <button type="button" class="btn btn-light" id="refreshDLR">
                    <i class="fas fa-sync-alt me-2"></i>Refresh
                </button>
                <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-2"></i>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" id="exportCSV">CSV</a></li>
                    <li><a class="dropdown-item" href="#" id="exportPDF">PDF</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card-body">
        <!-- Filters -->
        <div class="row mb-4">
            <div class="col-md-12">
                <form id="filterForm" class="row g-3">
                    <div class="col-md-3">
                        <label for="user_id" class="form-label">User</label>
                        <select class="form-control" id="user_id" name="user_id">
                            <option value="">All Users</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-control" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="DELIVERED">Delivered</option>
                            <option value="UNDELIVERED">Undelivered</option>
                            <option value="FAILED">Failed</option>
                            <option value="ACCEPTED">Accepted</option>
                            <option value="UNKNOWN">Unknown</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="start_date" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="start_date" name="start_date">
                    </div>
                    <div class="col-md-2">
                        <label for="end_date" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="end_date" name="end_date">
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-filter me-2"></i>Filter
                        </button>
                        <button type="button" id="resetFilters" class="btn btn-secondary">
                            <i class="fas fa-redo me-2"></i>Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Statistics -->
        <div class="row mb-4">
            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Delivered</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['delivered'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-danger shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                    Failed</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['failed'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-times-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Undelivered</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['undelivered'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-exclamation-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    Accepted</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['accepted'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clock fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-secondary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
                                    Unknown</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['unknown'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-question-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-2 col-md-4 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Total</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-list fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delivery Rate Chart -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-header bg-light py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Delivery Rate Overview</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="dlrChart" width="400" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reports Table -->
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="dlrReportsTable">
                <thead class="table-dark">
                    <tr>
                        <th>Message ID</th>
                        <th>User</th>
                        <th>Recipient</th>
                        <th>Status</th>
                        <th>Description</th>
                        <th>Submitted At</th>
                        <th>Done At</th>
                        <th>Updated At</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($dlrReports as $report)
                    <tr>
                        <td>
                            <code>{{ $report->message_id }}</code>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-primary text-white rounded-circle me-2" 
                                     style="width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 12px;">
                                    {{ strtoupper(substr($report->smsLog->user->name, 0, 1)) }}
                                </div>
                                {{ $report->smsLog->user->name }}
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-secondary">{{ $report->recipient }}</span>
                        </td>
                        <td>
                            @php
                                $statusClass = [
                                    'DELIVERED' => 'success',
                                    'UNDELIVERED' => 'warning',
                                    'FAILED' => 'danger',
                                    'ACCEPTED' => 'info',
                                    'UNKNOWN' => 'secondary'
                                ][$report->status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusClass }}">
                                {{ $report->status }}
                            </span>
                        </td>
                        <td>
                            <small>{{ $report->description ?? 'No description' }}</small>
                        </td>
                        <td>{{ $report->submitted_at ? $report->submitted_at->format('M j, Y H:i') : 'N/A' }}</td>
                        <td>{{ $report->done_at ? $report->done_at->format('M j, Y H:i') : 'N/A' }}</td>
                        <td>{{ $report->updated_at->format('M j, Y H:i') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-3">
            <div>Showing {{ $dlrReports->firstItem() }} to {{ $dlrReports->lastItem() }} of {{ $dlrReports->total() }} records</div>
            <div>
                {{ $dlrReports->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Initialize DLR Chart
    const ctx = document.getElementById('dlrChart').getContext('2d');
    const dlrChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Delivered', 'Failed', 'Undelivered', 'Accepted', 'Unknown'],
            datasets: [{
                data: [
                    {{ $stats['delivered'] }},
                    {{ $stats['failed'] }},
                    {{ $stats['undelivered'] }},
                    {{ $stats['accepted'] }},
                    {{ $stats['unknown'] }}
                ],
                backgroundColor: [
                    '#28a745',
                    '#dc3545',
                    '#ffc107',
                    '#17a2b8',
                    '#6c757d'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                }
            }
        }
    });

    // Refresh DLR reports
    $('#refreshDLR').click(function() {
        const $btn = $(this);
        const originalText = $btn.html();
        
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Refreshing...');
        
        $.ajax({
            url: '{{ route("admin.reports.dlr.refresh") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                toastr.success('DLR reports refreshed successfully');
                location.reload();
            },
            error: function(xhr) {
                toastr.error('Failed to refresh DLR reports');
                $btn.prop('disabled', false).html(originalText);
            }
        });
    });

    // Filter form submission
    $('#filterForm').submit(function(e) {
        e.preventDefault();
        loadDLRReports();
    });

    // Reset filters
    $('#resetFilters').click(function() {
        $('#filterForm')[0].reset();
        loadDLRReports();
    });

    // Export functionality
    $('#exportCSV').click(function() {
        exportDLRReport('csv');
    });

    $('#exportPDF').click(function() {
        exportDLRReport('pdf');
    });

    function loadDLRReports() {
        const formData = $('#filterForm').serialize();
        // AJAX call to load filtered data
        $.ajax({
            url: '{{ route("admin.reports.dlr") }}',
            data: formData,
            success: function(response) {
                // Update table and statistics
                console.log('DLR reports loaded', response);
            }
        });
    }

    function exportDLRReport(format) {
        const formData = $('#filterForm').serialize();
        window.location.href = `{{ route("admin.reports.dlr.export") }}?${formData}&format=${format}`;
    }
});
</script>
@endpush