@extends('layouts.dashboard')

@section('content')
@php
/**
 * Push notifications — shared by the admin (platform) and vendor (own-staff)
 * dashboards. $scope decides the audience options and the endpoints.
 * Reuses the .qm-card / .qm-table / .modal patterns; no new styles.
 *
 * @var string $scope 'platform' | 'restaurant'
 * @var array  $rows
 * @var array  $pager
 * @var array  $audiences   selectable audience keys for this scope
 * @var string $baseUrl     '/admin/push-notifications' | '/vendor/push-notifications'
 * @var array|null $form     carried-back input after a validation error
 */
$rows = $rows ?? [];
$audiences = $audiences ?? [];
$form = $form ?? null;
// Human label for an audience key. Platform 'staff' = all staff; a restaurant
// send's 'staff' is the vendor's own team, so it reads "My staff".
$audienceLabel = static function (string $scope, string $aud): string {
    if ($scope === 'restaurant') {
        return t_raw('push.aud_my_staff');
    }
    return t_raw('push.aud_' . $aud);
};
@endphp
<div class="qm-card">
    <div class="qm-ops-head">
        <div>
            <h2 class="mb-0">{!! t('push.title') !!}</h2>
            <p class="qm-ops-sub mb-0">{!! $scope === 'restaurant' ? t('push.sub_vendor') : t('push.sub_admin') !!}</p>
        </div>
        <button type="button" class="qm-btn" data-bs-toggle="modal" data-bs-target="#pushModal"><i class="fas fa-bullhorn me-1" aria-hidden="true"></i>{!! t('push.new_btn') !!}</button>
    </div>

    <div class="table-responsive">
    @php /* Sent carries no data-sort: it renders a date *and* a time, which the
             sorter's Date.parse() cannot read, so offering the control would sort it wrongly. */
@endphp
    <table class="qm-table" data-sortable>
        <thead><tr>
            <th scope="col" data-sort="text">{!! t('push.th_title') !!}</th>
            <th scope="col" data-sort="text">{!! t('push.th_audience') !!}</th>
            <th scope="col" data-sort="number">{!! t('push.th_recipients') !!}</th>
            <th scope="col">{!! t('push.th_sent') !!}</th>
            <th class="text-end" scope="col">{!! t('common.actions') !!}</th>
        </tr></thead>
        <tbody>
            @if ($rows)
            @foreach ($rows as $b)
            <tr>
                <td>
                    <strong>{{ (string) $b['title'] }}</strong>
                    @if (!empty($b['body']))<div class="qm-cell-sub">{{ (string) $b['body'] }}</div>@endif
                </td>
                <td><span class="qm-pill qm-pill-grey">{!! $audienceLabel($scope, (string) $b['audience']) !!}</span></td>
                <td class="qm-cell-body" data-sort-value="{!! (int) $b['recipient_count'] !!}">{!! number_format((int) $b['recipient_count']) !!}</td>
                <td class="qm-cell-body">
                    {!! fmt_datetime($b['last_sent_at']) !!}
                    @if ((int) $b['send_count'] > 1)<span class="qm-cell-sub">{!! t('push.sent_times', [':count' => (int) $b['send_count']]) !!}</span>@endif
                </td>
                <td class="qm-actions-cell">
                    <form method="post" action="{!! url($baseUrl . '/resend') !!}" class="d-inline" data-confirm="{!! t('push.confirm_resend') !!}">
                        {!! csrf_field() !!}<input type="hidden" name="id" value="{!! (int) $b['id'] !!}">
                        <button type="submit" class="qm-icon-btn" aria-label="{!! t('push.action_resend') !!}" title="{!! t('push.action_resend') !!}"><i class="fas fa-redo" aria-hidden="true"></i></button>
                    </form>
                </td>
            </tr>
            @endforeach
            @else
            @include('partials.table-empty', ['colspan' => 5, 'icon' => 'fa-bullhorn', 'msg' => t('push.empty')])
            @endif
        </tbody>
    </table>
    </div>
    @include('partials.table-toolbar', ['pager' => $pager, 'base' => $baseUrl])
</div>

@php // Compose modal — Title, Send to, Message, Send / Close (reuses the .modal pattern).
@endphp
<div class="modal fade" id="pushModal" tabindex="-1" aria-labelledby="pushModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" action="{!! url($baseUrl . '/send') !!}" autocomplete="off">
                {!! csrf_field() !!}
                <div class="modal-header">
                    <h2 class="modal-title h5" id="pushModalLabel">{!! t('push.modal_title') !!}</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{!! t('common.close') !!}"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label" for="push-title">{!! t('push.f_title') !!}</label>
                        <input type="text" class="form-control" id="push-title" name="title" maxlength="160" value="{{ (string) ($form['title'] ?? '') }}" required placeholder="{!! t('admin.deals.title_placeholder') !!}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="push-audience">{!! t('push.f_audience') !!}</label>
                        <select class="form-select" id="push-audience" name="audience"{!! count($audiences) <= 1 ? ' disabled' : '' !!}>
                            @foreach ($audiences as $aud)
                            <option value="{{ $aud }}"{!! ($form['audience'] ?? '') === $aud ? ' selected' : '' !!}>{!! $audienceLabel($scope, $aud) !!}</option>
                            @endforeach
                        </select>
                        @if (count($audiences) <= 1)
                        <input type="hidden" name="audience" value="{{ $audiences[0] ?? 'staff' }}">
                        @endif
                    </div>
                    <div class="mb-0">
                        <label class="form-label" for="push-body">{!! t('push.f_message') !!}</label>
                        <textarea class="form-control" id="push-body" name="body" rows="4" maxlength="300">{{ (string) ($form['body'] ?? '') }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="qm-btn qm-btn-outline" data-bs-dismiss="modal">{!! t('common.cancel') !!}</button>
                    <button type="submit" class="qm-btn"><i class="fas fa-paper-plane me-1" aria-hidden="true"></i>{!! t('push.send_btn') !!}</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if ($form)
<script>(function(){ var m=document.getElementById('pushModal'); if(m){ new bootstrap.Modal(m).show(); } })();</script>
@endif
@endsection