{{-- resources/views/notifications/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Notifications')
@section('page_title', 'Notifications')
@section('page_subtitle', 'Templates and delivery overview')

@section('content')

{{-- Stats --}}
<div class="row g-3 mb-3">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-send-check"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['sent_today'] }}</div>
                <div class="stat-label">Sent Today</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon {{ $stats['failed_today'] > 0 ? 'si-danger' : 'si-muted' }}">
                <i class="bi bi-send-x"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['failed_today'] }}</div>
                <div class="stat-label">Failed Today</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-info">
                <i class="bi bi-envelope"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['sent_month'] }}</div>
                <div class="stat-label">Sent This Month</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon si-warning">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['pending'] }}</div>
                <div class="stat-label">Pending</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">

    {{-- Templates --}}
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-bell me-2" style="color:var(--clay)"></i>
                    Notification Templates
                </span>
                <a href="{{ tenant_route('settings.notifications') }}"
                   class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-pencil me-1"></i>Edit Templates
                </a>
            </div>

            @if($templates->isEmpty())
                <div class="card-body text-center py-5">
                    <i class="bi bi-bell-slash"
                       style="font-size:2.5rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-3 mb-1">No templates configured</p>
                    <p class="text-muted" style="font-size:.82rem;">
                        Set up templates in Settings → Notifications
                    </p>
                    <a href="{{ tenant_route('settings.notifications') }}"
                       class="btn btn-primary btn-sm mt-2">
                        Configure Notifications
                    </a>
                </div>
            @else
                @php
                    $channelColors = [
                        'email'    => ['bg'=>'#dbeafe','color'=>'#1e40af','icon'=>'bi-envelope'],
                        'sms'      => ['bg'=>'#d1fae5','color'=>'#065f46','icon'=>'bi-chat-dots'],
                        'whatsapp' => ['bg'=>'#dcfce7','color'=>'#166534','icon'=>'bi-whatsapp'],
                    ];

                    $eventLabels = [
                        'welcome'                 => 'Welcome',
                        'reservation_confirmed'   => 'Reservation Confirmed',
                        'check_in_reminder'       => 'Check-in Reminder',
                        'check_out_reminder'      => 'Check-out Reminder',
                        'payment_received'        => 'Payment Received',
                        'invoice_issued'          => 'Invoice Issued',
                        'reservation_cancelled'   => 'Reservation Cancelled',
                        'balance_due_reminder'    => 'Balance Due Reminder',
                        'subscription_expiring'   => 'Subscription Expiring',
                    ];
                @endphp

                <div class="card-body" style="padding:0;">
                    @foreach($templates as $event => $channelTemplates)
                        <div style="padding:14px 18px;
                                    border-bottom:1px solid var(--border);">
                            <div style="display:flex;align-items:center;
                                        justify-content:space-between;
                                        flex-wrap:wrap;gap:8px;">
                                <div>
                                    <div class="fw-semibold"
                                         style="font-size:.84rem;">
                                        {{ $eventLabels[$event] ?? ucfirst(str_replace('_', ' ', $event)) }}
                                    </div>
                                    <div style="display:flex;gap:5px;margin-top:5px;
                                                flex-wrap:wrap;">
                                        @foreach($channelTemplates as $tpl)
                                            @php $cc = $channelColors[$tpl->channel] ?? $channelColors['email']; @endphp
                                            <span style="font-size:.67rem;font-weight:600;
                                                         padding:2px 7px;border-radius:10px;
                                                         background:{{ $tpl->is_active ? $cc['bg'] : '#f1f5f9' }};
                                                         color:{{ $tpl->is_active ? $cc['color'] : '#94a3b8' }};
                                                         display:inline-flex;align-items:center;gap:3px;">
                                                <i class="bi {{ $cc['icon'] }}"
                                                   style="font-size:.65rem;"></i>
                                                {{ ucfirst($tpl->channel) }}
                                                @if(!$tpl->is_active)
                                                    (off)
                                                @endif
                                            </span>
                                        @endforeach
                                    </div>
                                </div>

                                {{-- Send manually --}}
                                @php $firstActive = $channelTemplates->where('is_active', true)->first(); @endphp
                                @if($firstActive)
                                    <button class="btn btn-xs btn-outline-secondary"
                                            data-bs-toggle="modal"
                                            data-bs-target="#sendModal"
                                            data-template-id="{{ $firstActive->id }}"
                                            data-template-name="{{ $eventLabels[$event] ?? $event }}"
                                            data-channel="{{ $firstActive->channel }}">
                                        <i class="bi bi-send me-1"></i>Send
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    {{-- Recent Log --}}
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-clock-history me-2"
                       style="color:var(--clay)"></i>
                    Recent Activity
                </span>
                <a href="{{ tenant_route('notifications.log') }}"
                   style="font-size:.75rem;color:var(--clay);
                          text-decoration:none;">
                    Full log →
                </a>
            </div>

            @if($recentLogs->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No notifications sent yet
                    </p>
                </div>
            @else
                <div class="card-body" style="padding:0;">
                    @foreach($recentLogs as $log)
                        @php
                            $cc = $channelColors[$log->channel] ?? $channelColors['email'];
                            $sc = [
                                'sent'    => ['color'=>'var(--success)','icon'=>'bi-check-circle-fill'],
                                'failed'  => ['color'=>'var(--danger)',  'icon'=>'bi-x-circle-fill'],
                                'pending' => ['color'=>'var(--warning)', 'icon'=>'bi-hourglass-split'],
                                'queued'  => ['color'=>'var(--info)',    'icon'=>'bi-clock'],
                            ][$log->status] ?? ['color'=>'var(--muted)','icon'=>'bi-dash-circle'];
                        @endphp
                        <div style="display:flex;align-items:center;gap:10px;
                                    padding:11px 16px;
                                    border-bottom:1px solid var(--border);">
                            <div style="width:28px;height:28px;border-radius:7px;
                                        background:{{ $cc['bg'] }};
                                        display:flex;align-items:center;
                                        justify-content:center;flex-shrink:0;">
                                <i class="bi {{ $cc['icon'] }}"
                                   style="font-size:.75rem;color:{{ $cc['color'] }};"></i>
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div style="font-size:.78rem;font-weight:600;
                                            white-space:nowrap;overflow:hidden;
                                            text-overflow:ellipsis;">
                                    {{ $log->guest?->first_name }}
                                    {{ $log->guest?->last_name ?? $log->recipient }}
                                </div>
                                <div style="font-size:.68rem;color:var(--muted);">
                                    {{ ucfirst(str_replace('_', ' ', $log->event)) }}
                                </div>
                            </div>
                            <div style="display:flex;flex-direction:column;
                                        align-items:flex-end;flex-shrink:0;gap:2px;">
                                <i class="bi {{ $sc['icon'] }}"
                                   style="color:{{ $sc['color'] }};font-size:.8rem;"></i>
                                <span style="font-size:.65rem;color:var(--muted);">
                                    {{ $log->created_at->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

</div>

{{-- Send Manually Modal --}}
<div class="modal fade" id="sendModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST"
                  action="{{ tenant_route('notifications.send') }}">
                @csrf
                <input type="hidden" name="template_id" id="modalTemplateId">

                <div class="modal-header">
                    <h5 class="modal-title"
                        style="font-size:.9rem;font-weight:700;">
                        Send Notification
                    </h5>
                    <button type="button" class="btn-close"
                            data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div style="background:var(--bg);border-radius:8px;
                                padding:10px 12px;margin-bottom:16px;
                                font-size:.8rem;">
                        <span id="modalTemplateName"
                              class="fw-semibold"></span>
                        via
                        <span id="modalChannel"
                              style="color:var(--clay);font-weight:600;"></span>
                    </div>

                    <label class="form-label fw-semibold">
                        Select Guest <span class="text-danger">*</span>
                    </label>
                    <select name="guest_id"
                            class="form-select" required>
                        <option value="">Choose guest...</option>
                        @foreach(\App\Models\Guest::where('property_id', tenant_id())->orderBy('first_name')->get() as $guest)
                            <option value="{{ $guest->id }}">
                                {{ $guest->first_name }} {{ $guest->last_name }}
                                @if($guest->email) — {{ $guest->email }} @endif
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">Cancel</button>
                    <button type="submit"
                            class="btn btn-primary btn-sm">
                        <i class="bi bi-send me-1"></i>Send
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.getElementById('sendModal').addEventListener('show.bs.modal', function(e) {
    const btn = e.relatedTarget;
    document.getElementById('modalTemplateId').value  = btn.dataset.templateId;
    document.getElementById('modalTemplateName').textContent = btn.dataset.templateName;
    document.getElementById('modalChannel').textContent      = btn.dataset.channel;
});
</script>
@endpush