@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            {{-- Page title --}}
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row align-items-center">
                        <div class="col-sm-6 ps-0">
                            <h3>
                                <i class="fas fa-bell mr-2" style="color:#c9a96e"></i>
                                Notifications
                                @if(isset($currentTenant))
                                <span class="badge badge-info ml-2" style="font-size:12px;">
                                    {{ $currentTenant->name ?? 'Tenant' }}
                                </span>
                                @endif
                            </h3>
                            <p class="text-muted mb-0" style="font-size:13px">
                                All notifications sent to frontend users
                            </p>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/{{ $tenantSlug }}/admin/dashboard" class="bc-home">
                                        <i class="fas fa-home"></i>
                                    </a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Notifications</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Flash --}}
            @foreach(['success','error','warning'] as $t)
            @if(session($t))
            <div class="container-fluid">
                <div
                    class="alert alert-{{ $t==='error'?'danger':($t==='warning'?'warning':$t) }} alert-dismissible fade show">
                    {{ session($t) }}
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                </div>
            </div>
            @endif
            @endforeach

            {{-- Stat cards --}}
            <div class="container-fluid mb-3">
                <div class="row">
                    @foreach([
                    ['label'=>'Total Sent', 'value'=>$stats['total'], 'color'=>'#6c757d', 'icon'=>'fa-paper-plane'],
                    ['label'=>'Unread', 'value'=>$stats['unread'], 'color'=>'#f59e0b', 'icon'=>'fa-envelope'],
                    ['label'=>'Read', 'value'=>$stats['read'], 'color'=>'#22c55e', 'icon'=>'fa-envelope-open'],
                    ] as $c)
                    <div class="col-md-4 col-6 mb-3">
                        <div class="card shadow-sm h-100" style="border-left:4px solid {{ $c['color'] }}">
                            <div class="card-body py-3 px-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <div class="text-muted text-uppercase" style="font-size:11px">{{ $c['label'] }}
                                    </div>
                                    <i class="fas {{ $c['icon'] }} text-muted" style="opacity:0.4"></i>
                                </div>
                                <div style="font-size:24px;font-weight:700;color:{{ $c['color'] }}">{{ $c['value'] }}
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="container-fluid">
                <div class="row">

                    {{-- Left: notifications list --}}
                    <div class="col-lg-8">

                        {{-- Filters --}}
                        <!-- <div class="card shadow-sm mb-3">
                            <div class="card-body py-2">
                                <form method="GET"
                                    action="{{ route('admin.notifications.index', ['tenant' => $tenantSlug]) }}"
                                    class="d-flex flex-wrap gap-2 align-items-end" style="gap:8px">
                                    <input type="text" name="search" class="form-control form-control-sm"
                                        placeholder="Search title or message" value="{{ request('search') }}"
                                        style="max-width:200px">

                                    <select name="type" class="form-control form-control-sm" style="max-width:160px">
                                        <option value="">All Types</option>
                                        @foreach(['payment_reminder','booking_confirmed','booking_cancelled','general']
                                        as $t)
                                        <option value="{{ $t }}" {{ request('type')===$t?'selected':'' }}>
                                            {{ ucwords(str_replace('_',' ',$t)) }}
                                        </option>
                                        @endforeach
                                    </select>

                                    <select name="is_read" class="form-control form-control-sm" style="max-width:130px">
                                        <option value="">All Status</option>
                                        <option value="0" {{ request('is_read')==='0' ?'selected':'' }}>Unread</option>
                                        <option value="1" {{ request('is_read')==='1' ?'selected':'' }}>Read</option>
                                    </select>

                                    <select name="user_id" class="form-control form-control-sm" style="max-width:160px">
                                        <option value="">All Users</option>
                                        @foreach($users as $u)
                                        <option value="{{ $u->id }}" {{ request('user_id')==$u->id?'selected':'' }}>
                                            {{ $u->name }}
                                        </option>
                                        @endforeach
                                    </select>

                                    <button class="btn btn-primary btn-sm"><i
                                            class="fas fa-filter mr-1"></i>Filter</button>
                                    <a href="{{ route('admin.notifications.index', ['tenant' => $tenantSlug]) }}"
                                        class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>
                                </form>

                                @if($stats['read'] > 0)
                                <form method="POST"
                                    action="{{ route('admin.notifications.clear-all', ['tenant' => $tenantSlug]) }}"
                                    class="mb-0 ml-auto">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-outline-danger btn-sm"
                                        onclick="return confirm('Delete all read notifications?')">
                                        <i class="fas fa-trash mr-1"></i>Clear Read
                                    </button>
                                </form>
                                @endif

                            </div>
                        </div> -->

                        <div class="card shadow-sm mb-3">
                            <div class="card-body py-2">
                                <div class="d-flex justify-content-between align-items-end flex-wrap" style="gap:10px">

                                    <form method="GET"
                                        action="{{ route('admin.notifications.index', ['tenant' => $tenantSlug]) }}"
                                        class="d-flex flex-wrap align-items-end" style="gap:8px">
                                        <input type="text" name="search" class="form-control form-control-sm"
                                            placeholder="Search title or message" value="{{ request('search') }}"
                                            style="max-width:200px">

                                        <select name="type" class="form-control form-control-sm"
                                            style="max-width:160px">
                                            <option value="">All Types</option>
                                            @foreach(['payment_reminder','booking_confirmed','booking_cancelled','general']
                                            as $t)
                                            <option value="{{ $t }}" {{ request('type')===$t?'selected':'' }}>
                                                {{ ucwords(str_replace('_',' ',$t)) }}
                                            </option>
                                            @endforeach
                                        </select>

                                        <select name="is_read" class="form-control form-control-sm"
                                            style="max-width:130px">
                                            <option value="">All Status</option>
                                            <option value="0" {{ request('is_read')==='0' ?'selected':'' }}>Unread
                                            </option>
                                            <option value="1" {{ request('is_read')==='1' ?'selected':'' }}>Read
                                            </option>
                                        </select>

                                        <select name="user_id" class="form-control form-control-sm"
                                            style="max-width:160px">
                                            <option value="">All Users</option>
                                            @foreach($users as $u)
                                            <option value="{{ $u->id }}" {{ request('user_id')==$u->id?'selected':'' }}>
                                                {{ $u->name }}
                                            </option>
                                            @endforeach
                                        </select>

                                        <button class="btn btn-primary btn-sm"><i
                                                class="fas fa-filter mr-1"></i>Filter</button>
                                        <a href="{{ route('admin.notifications.index', ['tenant' => $tenantSlug]) }}"
                                            class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>
                                    </form>

                                    @if($stats['read'] > 0)
                                    <form method="POST"
                                        action="{{ route('admin.notifications.clear-all', ['tenant' => $tenantSlug]) }}"
                                        class="mb-0">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-outline-danger btn-sm"
                                            onclick="return confirm('Delete all read notifications?')">
                                            <i class="fas fa-trash mr-1"></i>Clear Read
                                        </button>
                                    </form>
                                    @endif

                                </div>
                            </div>
                        </div>

                        {{-- Notifications list --}}
                        <div class="card shadow-sm">
                            <div class="card-header">
                                <h6 class="mb-0">{{ $notifications->total() }} Notifications</h6>
                            </div>
                            <div class="card-body p-0">
                                @forelse($notifications as $notif)
                                @php
                                $typeColors = [
                                'payment_reminder' => '#f59e0b',
                                'booking_confirmed' => '#22c55e',
                                'booking_cancelled' => '#ef4444',
                                'general' => '#6c757d',
                                ];
                                $typeIcons = [
                                'payment_reminder' => 'fa-credit-card',
                                'booking_confirmed' => 'fa-check-circle',
                                'booking_cancelled' => 'fa-times-circle',
                                'general' => 'fa-bell',
                                ];
                                $color = $typeColors[$notif->type] ?? '#6c757d';
                                $icon = $typeIcons[$notif->type] ?? 'fa-bell';
                                @endphp
                                <div class="d-flex align-items-start p-3 border-bottom notif-row {{ !$notif->is_read ? 'bg-light' : '' }}"
                                    style="gap:14px;cursor:pointer" data-id="{{ $notif->id }}"
                                    data-title="{{ $notif->title }}" data-message="{{ $notif->message }}"
                                    data-type="{{ ucwords(str_replace('_',' ',$notif->type)) }}"
                                    data-color="{{ $color }}" data-icon="{{ $icon }}"
                                    data-user="{{ $notif->user ? $notif->user->name . ' · ' . $notif->user->email : '' }}"
                                    data-unit="{{ $notif->booking ? 'Unit ' . $notif->booking->plot_number : '' }}"
                                    data-sent="{{ $notif->created_at->format('d M Y, H:i') }}"
                                    data-is-read="{{ $notif->is_read ? '1' : '0' }}"
                                    data-read-at="{{ $notif->read_at ? $notif->read_at->diffForHumans() : '' }}"
                                    onclick="showNotifDetail(this)">

                                    <div style="width:38px;height:38px;border-radius:10px;background:{{ $color }}22;
                display:flex;align-items:center;justify-content:center;flex-shrink:0">
                                        <i class="fas {{ $icon }}" style="color:{{ $color }}"></i>
                                    </div>

                                    <div style="flex:1;min-width:0">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <div style="font-weight:{{ $notif->is_read ? '500' : '700' }};font-size:13px;color:#1e293b"
                                                    class="notif-title">
                                                    {{ $notif->title }}
                                                    @if(!$notif->is_read)
                                                    <span class="badge badge-warning ml-1 notif-unread-badge"
                                                        style="font-size:10px">Unread</span>
                                                    @endif
                                                </div>
                                                <div style="font-size:12px;color:#64748b;margin-top:2px">{{
                                                    $notif->message }}</div>
                                                <div
                                                    style="font-size:11px;color:#94a3b8;margin-top:4px;display:flex;gap:12px;flex-wrap:wrap">
                                                    @if($notif->user)
                                                    <span><i class="fas fa-user mr-1"></i>{{ $notif->user->name }} · {{
                                                        $notif->user->email }}</span>
                                                    @endif
                                                    @if($notif->booking)
                                                    <span><i class="fas fa-home mr-1"></i>Unit {{
                                                        $notif->booking->plot_number }}</span>
                                                    @endif
                                                    <span><i class="fas fa-clock mr-1"></i>{{
                                                        $notif->created_at->diffForHumans() }}</span>
                                                    <span class="text-success notif-read-meta"
                                                        style="{{ $notif->is_read && $notif->read_at ? '' : 'display:none' }}">
                                                        <i class="fas fa-check mr-1"></i>Read <span
                                                            class="notif-read-time">{{ $notif->read_at?->diffForHumans()
                                                            }}</span>
                                                    </span>
                                                </div>
                                            </div>

                                            <form method="POST"
                                                action="{{ route('admin.notifications.destroy', ['tenant' => $tenantSlug, 'id' => $notif->id]) }}"
                                                onsubmit="event.stopPropagation();return confirm('Delete this notification?')"
                                                onclick="event.stopPropagation()" class="ml-2">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-sm btn-outline-danger" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>

                                    <div class="notif-unread-dot"
                                        style="width:8px;height:8px;border-radius:50%;background:#f59e0b;flex-shrink:0;margin-top:4px;{{ !$notif->is_read ? '' : 'display:none' }}">
                                    </div>
                                </div>
                                @empty
                                <div class="text-center text-muted py-5">
                                    <i class="fas fa-bell-slash fa-2x mb-2 d-block" style="opacity:0.3"></i>
                                    No notifications found.
                                </div>
                                @endforelse
                            </div>
                            @if($notifications->hasPages())
                            <div class="card-footer">{{ $notifications->links() }}</div>
                            @endif
                        </div>

                    </div>

                    {{-- Right: Send custom notification --}}
                    <div class="col-lg-4">
                        <div class="card shadow-sm" style="border-top:3px solid #c9a96e;position:sticky;top:20px">
                            <div class="card-header" style="background:linear-gradient(135deg,#1a1a2e,#16213e)">
                                <h6 class="mb-0 text-white"><i class="fas fa-paper-plane mr-2"
                                        style="color:#c9a96e"></i>Send Notification</h6>
                            </div>
                            <div class="card-body">
                                <form method="POST"
                                    action="{{ route('admin.notifications.send', ['tenant' => $tenantSlug]) }}"
                                    id="notifForm">
                                    @csrf

                                    <div class="form-group mb-2">
                                        <label style="font-size:12px;font-weight:600">To User *</label>
                                        <select name="user_id" id="notifUserId" class="form-control form-control-sm"
                                            required onchange="loadUserBookings(this.value)">
                                            <option value="">Select user...</option>
                                            @foreach($users as $u)
                                            <option value="{{ $u->id }}" data-name="{{ $u->name }}">
                                                {{ $u->name }} ({{ $u->email }})
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group mb-2">
                                        <label style="font-size:12px;font-weight:600">Type *</label>
                                        <select name="type" id="notifType" class="form-control form-control-sm" required
                                            onchange="applyTemplate(this.value)">
                                            <option value="general">🔔 General</option>
                                            <option value="payment_reminder">💳 Payment Reminder</option>
                                            <option value="booking_confirmed">✅ Booking Confirmed</option>
                                            <option value="booking_cancelled">❌ Booking Cancelled</option>
                                        </select>
                                    </div>

                                    {{-- Booking selector --}}
                                    <div class="form-group mb-2" id="bookingRow" style="display:none">
                                        <label style="font-size:12px;font-weight:600">
                                            Booking <span style="color:#94a3b8;font-weight:400">(optional)</span>
                                        </label>
                                        <select name="booking_id" id="notifBookingId"
                                            class="form-control form-control-sm">
                                            <option value="">Select booking...</option>
                                        </select>
                                        <div id="bookingLoading"
                                            style="display:none;font-size:11px;color:#94a3b8;margin-top:4px">
                                            <i class="fas fa-spinner fa-spin mr-1"></i> Loading bookings...
                                        </div>
                                    </div>

                                    <div class="form-group mb-2">
                                        <label style="font-size:12px;font-weight:600">Title *</label>
                                        <input type="text" name="title" id="notifTitle"
                                            class="form-control form-control-sm" placeholder="Notification title"
                                            required maxlength="255">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label style="font-size:12px;font-weight:600">Message *</label>
                                        <textarea name="message" id="notifMessage" class="form-control form-control-sm"
                                            rows="4" placeholder="Notification message..." required
                                            maxlength="1000"></textarea>
                                        <div style="font-size:11px;color:#94a3b8;margin-top:3px">
                                            Use <code>{name}</code> for user's name, <code>{unit}</code> for unit
                                            number.
                                        </div>
                                    </div>

                                    {{-- Template preview badge --}}
                                    <div id="templateBadge" style="display:none;margin-bottom:10px">
                                        <span
                                            style="font-size:11px;padding:3px 10px;border-radius:10px;background:rgba(201,169,110,0.12);color:#c9a96e;border:1px solid rgba(201,169,110,0.25)">
                                            ✨ Template applied — feel free to edit
                                        </span>
                                    </div>

                                    <button class="btn btn-warning btn-sm btn-block" style="color:#fff;font-weight:700">
                                        <i class="fas fa-paper-plane mr-1"></i>Send Notification
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</section>

<div class="modal fade" id="notifDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius:12px;overflow:hidden;border:none">
            <div class="modal-header" id="notifModalHeader" style="border-bottom:none;padding:20px 24px 8px">
                <div class="d-flex align-items-center" style="gap:12px">
                    <div id="notifModalIconWrap" style="width:42px;height:42px;border-radius:10px;
                                display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <i id="notifModalIcon" class="fas"></i>
                    </div>
                    <div>
                        <span id="notifModalType" class="text-muted"
                            style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700"></span>
                        <h5 class="mb-0" id="notifModalTitle" style="font-size:16px;font-weight:700;color:#1e293b"></h5>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" style="padding:16px 24px 24px">
                <p id="notifModalMessage" style="font-size:14px;color:#334155;line-height:1.6"></p>
                <hr style="margin:16px 0">
                <div style="font-size:12px;color:#64748b;display:flex;flex-direction:column;gap:6px">
                    <div id="notifModalUser"><i class="fas fa-user mr-2" style="color:#94a3b8"></i><span></span></div>
                    <div id="notifModalUnit"><i class="fas fa-home mr-2" style="color:#94a3b8"></i><span></span></div>
                    <div><i class="fas fa-clock mr-2" style="color:#94a3b8"></i>Sent <span id="notifModalSent"></span>
                    </div>
                    <div id="notifModalReadStatus" style="color:#22c55e"><i class="fas fa-check mr-2"></i><span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('Partials.footer')

<script>

    function showNotifDetail(el) {
        const d = el.dataset;

        document.getElementById('notifModalType').textContent = d.type;
        document.getElementById('notifModalTitle').textContent = d.title;
        document.getElementById('notifModalMessage').textContent = d.message;
        document.getElementById('notifModalSent').textContent = d.sent;

        const iconWrap = document.getElementById('notifModalIconWrap');
        const icon = document.getElementById('notifModalIcon');
        iconWrap.style.background = d.color + '22';
        icon.className = 'fas ' + d.icon;
        icon.style.color = d.color;

        const userRow = document.getElementById('notifModalUser');
        if (d.user) { userRow.style.display = 'flex'; userRow.querySelector('span').textContent = d.user; }
        else { userRow.style.display = 'none'; }

        const unitRow = document.getElementById('notifModalUnit');
        if (d.unit) { unitRow.style.display = 'flex'; unitRow.querySelector('span').textContent = d.unit; }
        else { unitRow.style.display = 'none'; }

        const readRow = document.getElementById('notifModalReadStatus');
        if (d.isRead === '1') {
            readRow.style.display = 'flex';
            readRow.querySelector('span').textContent = 'Read ' + (d.readAt || '');
        } else {
            readRow.style.display = 'none';
        }

        $('#notifDetailModal').modal('show');

        // Mark as read if currently unread
        if (d.isRead === '0') {
            const tenant = '{{ $tenantSlug }}';
            fetch(`/${tenant}/admin/notifications/${d.id}/read`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || ''
                }
            })
                .then(r => r.json())
                .then(res => {
                    if (!res.success) return;

                    // Update dataset so re-opening doesn't re-fire the mark-read call
                    el.dataset.isRead = '1';
                    el.dataset.readAt = res.read_at;

                    // Update row UI without a page reload
                    el.classList.remove('bg-light');
                    el.querySelector('.notif-title').style.fontWeight = '500';
                    el.querySelector('.notif-unread-badge')?.remove();
                    el.querySelector('.notif-unread-dot').style.display = 'none';

                    const readMeta = el.querySelector('.notif-read-meta');
                    readMeta.style.display = 'inline';
                    readMeta.querySelector('.notif-read-time').textContent = res.read_at;
                })
                .catch(() => { });
        }
    }

    // ── Templates per type ────────────────────────────────────────────
    const TEMPLATES = {
        general: {
            title: '',
            message: '',
        },
        payment_reminder: {
            title: '💳 Payment Reminder',
            message: 'Hi {name}, this is a friendly reminder that your booking payment is pending. Please complete your payment at your earliest convenience to confirm your unit.',
        },
        booking_confirmed: {
            title: '✅ Booking Confirmed!',
            message: 'Hi {name}, congratulations! Your booking for Unit {unit} has been confirmed. Welcome to the community! Our team will be in touch shortly with next steps.',
        },
        booking_cancelled: {
            title: 'Booking Cancelled',
            message: 'Hi {name}, your booking for Unit {unit} has been cancelled. If you have any questions or would like to rebook, please contact us.',
        },
    };

    // ── Selected booking info cache ───────────────────────────────────
    let selectedBookingUnit = '';

    function applyTemplate(type) {
        const tpl = TEMPLATES[type] || TEMPLATES.general;
        const userName = document.querySelector('#notifUserId option:checked')?.dataset?.name || '';

        // Show/hide booking row
        const showBooking = ['payment_reminder', 'booking_confirmed', 'booking_cancelled'].includes(type);
        document.getElementById('bookingRow').style.display = showBooking ? 'block' : 'none';

        // Only auto-fill if there's a template for this type
        if (tpl.title) {
            document.getElementById('notifTitle').value = tpl.title;
            document.getElementById('notifMessage').value = tpl.message
                .replace(/{name}/g, userName || 'there')
                .replace(/{unit}/g, selectedBookingUnit || '—');
            document.getElementById('templateBadge').style.display = 'block';
        } else {
            document.getElementById('templateBadge').style.display = 'none';
        }
    }

    // ── Re-apply template when booking changes ──────────────────────
    document.getElementById('notifBookingId')?.addEventListener('change', function () {
        const opt = this.options[this.selectedIndex];
        selectedBookingUnit = opt?.dataset?.unit || '';
        applyTemplate(document.getElementById('notifType').value);
    });

    // ── Load bookings for selected user via AJAX ──────────────────────
    function loadUserBookings(userId) {
        const select = document.getElementById('notifBookingId');
        const loading = document.getElementById('bookingLoading');
        const tenant = '{{ $tenantSlug }}';

        // Reset
        select.innerHTML = '<option value="">Select booking...</option>';
        selectedBookingUnit = '';

        if (!userId) return;

        loading.style.display = 'block';

        fetch(`/${tenant}/admin/notifications/user-bookings/${userId}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
            .then(r => r.json())
            .then(bookings => {
                loading.style.display = 'none';
                if (!bookings.length) {
                    select.innerHTML = '<option value="">No bookings found</option>';
                    return;
                }
                bookings.forEach(b => {
                    const opt = document.createElement('option');
                    opt.value = b.id;
                    opt.dataset.unit = b.plot_number;
                    opt.textContent = `#${b.id} — Unit ${b.plot_number} (${b.booking_status})`;
                    select.appendChild(opt);
                });
                applyTemplate(document.getElementById('notifType').value);
            })
            .catch(() => { loading.style.display = 'none'; });
    }
</script>