@extends('user.layouts.app', ['title' => 'Push Notify Setting'])

@push('head')
    <style>
        .push-notify-tag {
            border: 1px solid rgba(16, 185, 129, 0.18);
            background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 34%),
                linear-gradient(135deg, #f2fffb 0%, #ddf7ec 100%);
            color: #0f766e !important;
            box-shadow: 0 12px 24px rgba(16, 185, 129, 0.08);
            max-width: 100%;
            white-space: normal;
            word-break: break-word;
        }

        .push-notify-tag span {
            min-width: 0;
        }

        .push-notify-stat-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.14);
            background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 32%),
                linear-gradient(135deg, #f3fffb 0%, #e5f9f1 100%);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
        }

        .push-notify-stat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 58%);
            pointer-events: none;
        }

        .push-notify-stat-card > * {
            position: relative;
            z-index: 1;
        }

        @media (max-width: 575.98px) {
            .push-notify-tag {
                display: flex;
                align-items: flex-start;
                width: 100%;
                border-radius: 1rem;
            }
        }

        html[data-theme="dark"] .push-notify-tag {
            border-color: rgba(45, 212, 191, 0.24);
            background:
                radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 34%),
                linear-gradient(135deg, rgba(15, 118, 110, 0.34) 0%, rgba(17, 94, 89, 0.28) 100%);
            color: #ccfbf1 !important;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
        }

        html[data-theme="dark"] .push-notify-stat-card {
            border-color: rgba(148, 163, 184, 0.16);
            background:
                radial-gradient(circle at top right, rgba(45, 212, 191, 0.14), transparent 30%),
                linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(17, 24, 39, 0.94) 100%);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
        }

        html[data-theme="dark"] .push-notify-stat-card::before {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 58%);
        }

        html[data-theme="dark"] .push-notify-stat-card .small {
            color: #94a3b8 !important;
        }

        html[data-theme="dark"] .push-notify-stat-card .fs-4,
        html[data-theme="dark"] .push-notify-stat-card .fw-bold {
            color: #f8fafc;
        }
    </style>
@endpush

@section('content')
    <div class="d-grid gap-3">
        <section class="card admin-card border-0">
            <div class="card-body p-4 p-lg-4">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill small fw-bold text-uppercase push-notify-tag">
                    <i class="bi bi-bell"></i>
                    <span>Tools / Push Notify Setting</span>
                </div>

                <div class="mt-3">
                    <h1 class="h3 fw-bold mb-2">Push Notify Setting</h1>
                    <p class="text-muted mb-0">Control every push event from one place with fast ON/OFF toggles for wallet, escrow, payout, voucher, ticket, KYC, and card notifications.</p>
                </div>

                <div class="row g-3 mt-1">
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 push-notify-stat-card h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1 text-nowrap">Total Events</div>
                                    <div class="fs-4 fw-bold">{{ $notifications->count() }}</div>
                                </div>
                                <div class="fs-3 text-primary">
                                    <i class="bi bi-bell"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 push-notify-stat-card h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1 text-nowrap">Enabled</div>
                                    <div class="fs-4 fw-bold">{{ $enabledCount }}</div>
                                </div>
                                <div class="fs-3 text-success">
                                    <i class="bi bi-check2-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 push-notify-stat-card h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1 text-nowrap">Disabled</div>
                                    <div class="fs-4 fw-bold">{{ $disabledCount }}</div>
                                </div>
                                <div class="fs-3 text-danger">
                                    <i class="bi bi-slash-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header bg-primary text-white border-0 py-3">
                <div class="fw-bold text-nowrap">Notification Toggles</div>
                <div class="small text-white-50">Review each event and switch ON or OFF as needed</div>
            </div>
            <div class="card-body p-3 p-lg-4">
                <div class="row g-3">
                    @foreach ($notifications as $index => $notification)
                        <div class="col-12 col-xl-6">
                            <div class="border rounded-4 p-3 h-100 bg-body-tertiary">
                                <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3">
                                    <div class="pe-sm-3">
                                        <div class="fw-semibold text-break">{{ $notification['label'] }}</div>
                                        <div class="small text-muted">Push event {{ $index + 1 }}</div>
                                    </div>

                                    <div class="d-flex align-items-center gap-2 flex-shrink-0">
                                        <span class="badge text-bg-{{ $notification['enabled'] ? 'success' : 'danger' }}" data-notify-status>
                                            {{ $notification['enabled'] ? 'ON' : 'OFF' }}
                                        </span>
                                        <div class="form-check form-switch m-0">
                                            <input
                                                class="form-check-input shadow-none border-0"
                                                type="checkbox"
                                                role="switch"
                                                id="notify-{{ $index }}"
                                                @checked($notification['enabled'])
                                                data-notify-switch
                                                style="width: 2.9rem; height: 1.45rem; background-color: {{ $notification['enabled'] ? '#198754' : '#dc3545' }};"
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('[data-notify-switch]').forEach(function (toggle) {
                const updateState = function () {
                    const badge = toggle.closest('.d-flex').querySelector('[data-notify-status]');

                    toggle.style.backgroundColor = toggle.checked ? '#198754' : '#dc3545';
                    badge.textContent = toggle.checked ? 'ON' : 'OFF';
                    badge.className = 'badge ' + (toggle.checked ? 'text-bg-success' : 'text-bg-danger');
                };

                toggle.addEventListener('change', updateState);
                updateState();
            });
        });
    </script>
@endpush