@extends('layouts.app')

@section('title', _lang('Push Notification'))

@section('content')
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <h4 class="mb-0">{{ _lang('Push Notification') }}</h4>
            <p class="mb-0 text-muted">{{ _lang('Send a custom FCM push to every user, one organization, or one specific user.') }}</p>
        </div>
    </div>

    @include('partials.alerts')

    <div class="row">
        <div class="col-xl-4">
            <div class="card custom-card">
                <div class="card-header"><div class="card-title">{{ _lang('Compose') }}</div></div>
                <div class="card-body">
                    <form action="{{ route('admin.push.store') }}" method="POST" id="pushForm">
                        @csrf
                        <div class="mb-2">
                            <label class="form-label">{{ _lang('Title') }}</label>
                            <input type="text" name="title" class="form-control" maxlength="200" required value="{{ old('title') }}">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">{{ _lang('Message') }}</label>
                            <textarea name="body" class="form-control" rows="4" maxlength="1000" required>{{ old('body') }}</textarea>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">{{ _lang('Send to') }}</label>
                            <select name="target" id="targetSelect" class="form-select">
                                <option value="all">{{ _lang('All users') }}</option>
                                <option value="organization">{{ _lang('One organization (owner + staff)') }}</option>
                                <option value="user">{{ _lang('One specific user') }}</option>
                            </select>
                        </div>
                        <div class="mb-2" id="organizationWrap" style="display:none;">
                            <label class="form-label">{{ _lang('Organization') }}</label>
                            <select name="organization_id" id="organizationSelect" class="form-select">
                                <option value="">{{ _lang('Select organization') }}</option>
                                @foreach ($organizations as $c)
                                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3" id="userWrap" style="display:none;">
                            <label class="form-label">{{ _lang('Organization (to filter users)') }}</label>
                            <select id="userOrganizationSelect" class="form-select mb-2">
                                <option value="">{{ _lang('Select organization') }}</option>
                                @foreach ($organizations as $c)
                                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                                @endforeach
                            </select>
                            <label class="form-label">{{ _lang('User') }}</label>
                            <select name="user_id" id="userSelect" class="form-select">
                                <option value="">{{ _lang('Select organization first') }}</option>
                            </select>
                        </div>
                        <button class="btn btn-primary w-100"><i class="bi bi-send"></i> {{ _lang('Send') }}</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xl-8">
            <div class="card custom-card">
                <div class="card-header"><div class="card-title">{{ _lang('Sent History') }}</div></div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table text-nowrap table-hover">
                            <thead>
                                <tr>
                                    <th>{{ _lang('Message') }}</th>
                                    <th>{{ _lang('Target') }}</th>
                                    <th>{{ _lang('Sent') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($sent as $n)
                                    <tr>
                                        <td>
                                            <span class="fw-semibold">{{ $n->title_bn }}</span>
                                            <small class="d-block text-muted text-truncate" style="max-width:320px;">{{ $n->body_bn }}</small>
                                        </td>
                                        <td>
                                            @if ($n->user)
                                                {{ _lang('User') }}: {{ $n->user->name }}
                                            @elseif ($n->organization)
                                                {{ _lang('Organization') }}: {{ $n->organization->name }}
                                            @else
                                                {{ _lang('All users') }}
                                            @endif
                                        </td>
                                        <td class="text-muted">{{ $n->sent_at?->format('d M Y, h:i A') }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center text-muted py-4">{{ _lang('No custom push sent yet.') }}</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($sent->hasPages())
                    <div class="card-footer">{{ $sent->links() }}</div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    const targetSelect = document.getElementById('targetSelect');
    const organizationWrap = document.getElementById('organizationWrap');
    const userWrap = document.getElementById('userWrap');
    const userOrganizationSelect = document.getElementById('userOrganizationSelect');
    const userSelect = document.getElementById('userSelect');

    function syncTarget() {
        organizationWrap.style.display = targetSelect.value === 'organization' ? '' : 'none';
        userWrap.style.display = targetSelect.value === 'user' ? '' : 'none';
    }
    targetSelect.addEventListener('change', syncTarget);
    syncTarget();

    userOrganizationSelect.addEventListener('change', async function () {
        const organizationId = this.value;
        userSelect.innerHTML = '<option value="">{{ _lang('Loading…') }}</option>';
        if (!organizationId) {
            userSelect.innerHTML = '<option value="">{{ _lang('Select organization first') }}</option>';
            return;
        }
        const res = await fetch(`{{ route('admin.push.users') }}?organization_id=${encodeURIComponent(organizationId)}`, {
            headers: { 'Accept': 'application/json' },
        });
        const users = await res.json();
        userSelect.innerHTML = users.length
            ? users.map(u => `<option value="${u.id}">${u.name}</option>`).join('')
            : '<option value="">{{ _lang('No users found') }}</option>';
    });
})();
</script>
@endpush