@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</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="/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'] as $t)
                @if(session($t))
                    <div class="container-fluid">
                        <div class="alert alert-{{ $t==='error'?'danger':$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" 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="/admin/notifications" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>

                                    @if($stats['read'] > 0)
                                        <form method="POST" action="/admin/notifications/clear-all" 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
                                </form>
                            </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->is_read ? 'bg-light' : '' }}"
                                         style="gap:14px">

                                        {{-- Icon --}}
                                        <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>

                                        {{-- Content --}}
                                        <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">
                                                        {{ $notif->title }}
                                                        @if(!$notif->is_read)
                                                            <span class="badge badge-warning ml-1" 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>
                                                        @if($notif->is_read && $notif->read_at)
                                                            <span class="text-success"><i class="fas fa-check mr-1"></i>Read {{ $notif->read_at->diffForHumans() }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                {{-- Delete --}}
                                                <form method="POST" action="/admin/notifications/{{ $notif->id }}"
                                                      onsubmit="return confirm('Delete this notification?')" 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>

                                        {{-- Unread dot --}}
                                        @if(!$notif->is_read)
                                            <div style="width:8px;height:8px;border-radius:50%;background:#f59e0b;flex-shrink:0;margin-top:4px"></div>
                                        @endif
                                    </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="/admin/notifications" 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 — shown for payment_reminder & booking types --}}
                                    <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 — links notification to a booking)</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>

@include('Partials.footer')

<script>
// ── 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 (fill in unit number) ──
document.getElementById('notifBookingId').addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];
    selectedBookingUnit = opt?.dataset?.unit || '';
    // Re-apply template so {unit} gets filled
    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');

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

    if (!userId) return;

    loading.style.display = 'block';

    fetch(`/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);
        });
        // Re-apply template to update {unit} placeholder
        applyTemplate(document.getElementById('notifType').value);
    })
    .catch(() => { loading.style.display = 'none'; });
}
</script>