@extends('layouts.layout-2')

@section('content')

<style>
/* Optimierte Reminder Badge Styles */
.reminder-badge {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.reminder-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.reminder-badge.badge-warning {
    background: linear-gradient(45deg, #ffc107, #ffb300);
    border: 1px solid #ffa000;
}

.reminder-badge.badge-danger {
    background: linear-gradient(45deg, #dc3545, #c82333);
    border: 1px solid #bd2130;
}

.reminder-badge.badge-dark {
    background: linear-gradient(45deg, #343a40, #23272b);
    border: 1px solid #1d2124;
}

.reminder-badge.badge-light {
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
    color: #6c757d !important;
}

/* Tooltip Verbesserungen */
.tooltip-inner {
    background-color: #343a40;
    color: white;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #343a40;
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #343a40;
}

/* Reminder Datum Styling */
.reminder-date {
    font-size: 11px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.reminder-date:hover {
    opacity: 1;
}

/* Countdown Styling */
.countdown-info {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 12px;
    background: rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.countdown-info:hover {
    background: rgba(0,0,0,0.1);
    transform: scale(1.05);
}

.countdown-info.text-info {
    background: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.2);
}

.countdown-info.text-danger {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    animation: pulse 2s infinite;
}

.countdown-info.text-success {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.countdown-days {
    font-weight: bold;
    color: #17a2b8;
}

/* Pulse Animation für fällige Erinnerungen */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .reminder-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .reminder-date {
        font-size: 10px;
    }
    
    .countdown-info {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .countdown-days {
        font-size: 9px;
    }
}

/* Info Box Styling */
.info-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    color: white;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.info-box h5 {
    color: white;
    margin-bottom: 15px;
    font-weight: 600;
}

.info-box .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-box .feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
}

.info-box .feature-list li:last-child {
    border-bottom: none;
}

.info-box .feature-list li i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.info-box .workflow-steps {
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.info-box .workflow-steps h6 {
    color: white;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-box .step {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.info-box .step-number {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
    font-size: 12px;
}

.info-box .cron-info {
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.info-box .cron-info code {
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    color: #ffd700;
}
</style>


            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-envelope"></i> Erinnerungen                    
                    </h4>
                        <div class="float-right">
                            <a href="{{ route('admin_payments_reminder_create') }}" class="btn btn-sm btn-primary">
                                <span class="far fa-plus-circle"></span> Erinnerung hinzufügen
                            </a>
                        </div>
        
                </div>

             

                <div class="card-datatable table-responsive pt-2">
                    <table class="datatables-style table table-striped table-bordered" id="datatable-pay-credit">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>{{__('Titel')}}</th>
                            <th>{{__('Interval') }}</th> 
                            <th>{{__('Typ') }}</th> 
                            <th>{{__('Action') }}</th>
                            <th>{{__('Aktiv') }}</th>
                        </tr>
                        </thead>
                        <tbody>
        
                            @foreach($reminders as $reminder)
                                <tr>
                                    <td>                                
                                        <a href="{{ route('admin_payments_reminder_edit', $reminder->id) }}" class="btn icon-btn btn-sm btn-primary"><span class="fa fa-edit"></span></a>
                                    </td>
                                    <td>{{ $reminder->title }}</td>
                                    <td>{{ $reminder->interval }}</td>
                                    <td>{{ $reminder->getClearingtype() }}</td>
                                    <td>{{ $reminder->action }}</td>
                                    <td>{!! get_active_badge($reminder->active) !!}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
        
            </div>
        

    <div class="row mt-4">
        <div class="col-12">
            <!-- Offene Zahlungen Übersicht -->
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-clock"></i> Offene Zahlungen - Übersicht
                    </h4>
                    <div class="card-tools">
                        <span class="badge badge-primary">{{ $totalPayments }} offene Zahlungen</span>
                        <span class="badge badge-warning">{{ number_format($totalAmount, 2, ',', '.') }} € Gesamtbetrag</span>
                    </div>
                    <div class="float-right">
                        <a href="{{ route('admin_payments_reminder_logs') }}" class="btn btn-sm btn-info mr-2">
                            <i class="fas fa-chart-line"></i> Logs & Statistiken
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    
                
                    <!-- Detaillierte Tabelle -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="payment-reminders-table">
                            <thead>
                                <tr>
                                    <th>Bestell-ID</th>
                                    <th>Betrag</th>
                                    <th>Erstellt am</th>
                                    <th>Tage alt</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Zahlungsart</th>
                                    <th>Versand</th>
                                    <th>Erinnerung</th>
                                    <th>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($detailedData as $payment)
                                <tr>
                                    <td data-order="{{ $payment['order_id'] }}">
                                        
                                       
                                        <a class="btn btn-sm btn-outline-primary" href="{{ route('admin_sales_detail', $payment['order_id']) }}" target="_blank">
                                            <i class="fa fa-eye"></i> {{ $payment['order_id'] }}
                                        </a>
                                    </td>
                                   
                                    <td>
                                        <span class="text-danger font-weight-bold">
                                            {{ number_format($payment['amount']/100, 2, ',', '.') }} €
                                        </span>
                                    </td>
                                    <td>{{ $payment['created_at'] }}</td>
                                    <td>
                                        @if($payment['days_old'] > 30)
                                            <span class="badge badge-danger">{{ $payment['days_old'] }} Tage</span>
                                        @elseif($payment['days_old'] > 14)
                                            <span class="badge badge-warning">{{ $payment['days_old'] }} Tage</span>
                                        @else
                                            <span class="badge badge-info">{{ $payment['days_old'] }} Tage</span>
                                        @endif
                                    </td>
                                    <td>{{ $payment['name'] }}</td>
                                    <td>{{ $payment['email'] }}</td>
                                    <td>
                                        @if($payment['clearingtype'] == 'fnc')
                                            <span class="badge badge-primary">{{ $payment['clearingtype_name'] }}</span>
                                        @else
                                            <span class="badge badge-warning">{{ $payment['clearingtype_name'] }}</span>
                                        @endif
                                    </td>
                                    <td>{!! $payment['shipped'] !!}</td>
                                    <td>
                                        @if($payment['reminder'] > 0)
                                            <div class="d-flex flex-column align-items-start">
                                                <!-- Reminder Badge mit verbesserter Darstellung -->
                                                <span class="badge badge-pill reminder-badge badge-{{ $payment['reminder'] == 1 ? 'warning' : ($payment['reminder'] == 2 ? 'danger' : 'dark') }} mb-1" 
                                                      data-toggle="tooltip" 
                                                      data-placement="top" 
                                                      title="{{ $payment['reminder'] }}. Zahlungserinnerung gesendet">
                                                    <i class="fas fa-envelope-open-text mr-1"></i>
                                                    <strong>{{ $payment['reminder'] }}.</strong>
                                                    @if($payment['reminder'] == 1)
                                                        <i class="fas fa-exclamation-triangle ml-1"></i>
                                                    @elseif($payment['reminder'] >= 2)
                                                        <i class="fas fa-exclamation-circle ml-1"></i>
                                                    @endif
                                                </span>
                                                
                                                <!-- Datum mit verbesserter Formatierung -->
                                                @if($payment['reminder_date'])
                                                    <small class="text-muted reminder-date" 
                                                           data-toggle="tooltip" 
                                                           data-placement="bottom" 
                                                           title="Letzte Erinnerung gesendet">
                                                        <i class="far fa-clock mr-1"></i>
                                                        {{ \Carbon\Carbon::parse($payment['reminder_date'])->diffForHumans() }}
                                                    </small>
                                                @endif
                                                
                                                <!-- Countdown für nächste Erinnerung -->
                                                @if(isset($payment['countdown']) && $payment['countdown'])
                                                    @if($payment['countdown']['type'] == 'countdown')
                                                        <small class="text-info countdown-info mt-1" 
                                                               data-toggle="tooltip" 
                                                               data-placement="bottom" 
                                                               title="Nächste Erinnerung am {{ \Carbon\Carbon::parse($payment['countdown']['next_reminder_date'])->format('d.m.Y') }}">
                                                            <i class="fas fa-hourglass-half mr-1"></i>
                                                            <span class="countdown-days">{{ $payment['countdown']['days_left'] }}</span> Tage
                                                        </small>
                                                    @elseif($payment['countdown']['type'] == 'overdue')
                                                        <small class="text-danger countdown-info mt-1" 
                                                               data-toggle="tooltip" 
                                                               data-placement="bottom" 
                                                               title="Nächste Erinnerung war fällig am {{ \Carbon\Carbon::parse($payment['countdown']['next_reminder_date'])->format('d.m.Y') }}">
                                                            <i class="fas fa-exclamation-triangle mr-1"></i>
                                                            Fällig!
                                                        </small>
                                                    @elseif($payment['countdown']['type'] == 'completed')
                                                        <small class="text-success countdown-info mt-1" 
                                                               data-toggle="tooltip" 
                                                               data-placement="bottom" 
                                                               title="Alle verfügbaren Erinnerungen wurden gesendet">
                                                            <i class="fas fa-check-circle mr-1"></i>
                                                            Alle gesendet
                                                        </small>
                                                    @endif
                                                @endif
                                            </div>
                                        @else
                                            <span class="badge badge-pill reminder-badge badge-light text-muted" 
                                                  data-toggle="tooltip" 
                                                  data-placement="top" 
                                                  title="Noch keine Erinnerung gesendet">
                                                <i class="fas fa-envelope mr-1"></i>
                                                0
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                      <div class="btn-group">
                                            <a href="{{ route('admin_payments_reminder_action', ['action' => 'send_reminder', 'id' => $payment['payment_id']]) }}"  class="btn btn-sm btn-outline-primary" 
                                                    onclick="return confirm('Möchten Sie wirklich eine Zahlungserinnerung senden?')">
                                                <i class="fas fa-envelope"></i> Erinnerung senden
                                            </a>
                                            <a href="{{ route('admin_payments_reminder_action', ['action' => 'no_payment', 'id' => $payment['payment_id']]) }}" class="btn btn-sm btn-outline-danger" 
                                                    onclick="return confirm('Soll die Zahlung als nicht bezahlt markiert werden?')">
                                                <i class="fas fa-trash"></i> keine Zahlung
                                            </a>
                                        </div>
                                        
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center text-muted">
                                        <i class="fas fa-check-circle"></i> Keine offenen Zahlungen gefunden
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>




{{-- <div class="info-box mt-4">
    <h5><i class="fas fa-info-circle mr-2"></i>Zahlungserinnerungen System - Übersicht & Funktionsweise</h5>
    
    <div class="row">
        <div class="col-md-6">
            <h6><i class="fas fa-cogs mr-2"></i>System-Features:</h6>
            <ul class="feature-list">
                <li><i class="fas fa-check text-success"></i>Dynamisch konfigurierbare Erinnerungsintervalle</li>
                <li><i class="fas fa-check text-success"></i>Automatische E-Mail-Versendung via Cron-Job</li>
                <li><i class="fas fa-check text-success"></i>Intelligente Fälligkeitsberechnung</li>
                <li><i class="fas fa-check text-success"></i>Detailliertes Logging & Statistiken</li>
                <li><i class="fas fa-check text-success"></i>Manuelle & automatische Aktionen</li>
                <li><i class="fas fa-check text-success"></i>Responsive Admin-Interface</li>
            </ul>
        </div>
        
        <div class="col-md-6">
            <h6><i class="fas fa-clock mr-2"></i>Workflow:</h6>
            <div class="workflow-steps">
                <div class="step">
                    <span class="step-number">1</span>
                    <span>Offene Zahlung wird erkannt</span>
                </div>
                <div class="step">
                    <span class="step-number">2</span>
                    <span>Intervall-basierte Fälligkeitsprüfung</span>
                </div>
                <div class="step">
                    <span class="step-number">3</span>
                    <span>Automatische E-Mail-Versendung</span>
                </div>
                <div class="step">
                    <span class="step-number">4</span>
                    <span>Logging & Status-Update</span>
                </div>
                <div class="step">
                    <span class="step-number">5</span>
                    <span>Nächste Erinnerung planen</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-3">
        <div class="col-md-6">
            <h6><i class="fas fa-calendar-alt mr-2"></i>Reminder-Erstellung:</h6>
            <p style="font-size: 14px; line-height: 1.5;">
                Erstellen Sie neue Erinnerungen über den "Erinnerung hinzufügen" Button. 
                Jeder Reminder kann individuell konfiguriert werden mit:
            </p>
            <ul class="feature-list" style="font-size: 13px;">
                <li><i class="fas fa-arrow-right text-info"></i>Titel & Beschreibung</li>
                <li><i class="fas fa-arrow-right text-info"></i>Intervall in Tagen (z.B. 7, 14, 30)</li>
                <li><i class="fas fa-arrow-right text-info"></i>Zahlungsart-Filter (FNC, PayPal, etc.)</li>
                <li><i class="fas fa-arrow-right text-info"></i>E-Mail-Template & Betreff</li>
                <li><i class="fas fa-arrow-right text-info"></i>Automatische Aktionen</li>
            </ul>
        </div>
        
        <div class="col-md-6">
            <h6><i class="fas fa-robot mr-2"></i>Automatisierung:</h6>
            <div class="cron-info">
                <strong>Cron-Job Konfiguration:</strong><br>
                <code>0 9 * * *</code> php /path/to/artisan payments:reminders<br><br>
                <strong>Ausführung:</strong> Täglich um 9:00 Uhr<br>
                <strong>Funktion:</strong> Prüft alle aktiven Reminder und sendet fällige E-Mails
            </div>
        </div>
    </div>
    
    <div class="row mt-3">
        <div class="col-12">
            <h6><i class="fas fa-chart-line mr-2"></i>Monitoring & Statistiken:</h6>
            <p style="font-size: 14px; line-height: 1.5;">
                Überwachen Sie die Performance Ihres Reminder-Systems über die "Logs & Statistiken" Seite. 
                Dort finden Sie detaillierte Auswertungen zu Versandraten, Erfolgsquoten, 
                durchschnittlichen Reaktionszeiten und mehr. Das System loggt jeden Schritt 
                automatisch für vollständige Transparenz.
            </p>
        </div>
    </div>
</div> --}}
</div>
<script>
$(document).ready(function() {
    // Tooltips initialisieren
    $('[data-toggle="tooltip"]').tooltip();
    
    // DataTable für Payment Reminder Einstellungen
    $('#payment-reminders-settings-table').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/German.json"
        },
        "pageLength": 25,
        "responsive": true
    });

    // DataTable für offene Zahlungen
    $('#payment-reminders-table').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/German.json"
        },
        "order": [[3, "desc"]], // Sortiere nach "Tage alt" absteigend
        "pageLength": 50,
        "responsive": true,
        "columnDefs": [
            {
                "targets": [8], // Reminder Spalte
                "orderable": true,
                "searchable": false
            }
        ]
    });
    
    // Tooltips nach DataTable-Initialisierung neu initialisieren
    $('#payment-reminders-table').on('draw.dt', function() {
        $('[data-toggle="tooltip"]').tooltip();
    });
});

function sendReminder(paymentId) {
    if (confirm('Möchten Sie wirklich eine Zahlungserinnerung senden?')) {
        // TODO: Implementiere Erinnerung senden
        alert('Erinnerung für Payment ID ' + paymentId + ' würde gesendet werden');
    }
}

function viewDetails(paymentId) {
    // TODO: Implementiere Detail-Ansicht
    alert('Details für Payment ID ' + paymentId + ' würden angezeigt werden');
}
</script>
@endsection