@extends('admin.layouts.master')

@section('title', 'Send Notification')

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Send Notification',
        'crumbs' => [
            ['label' => 'Send Notification'],
        ],
    ])

    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Push status</h5>
                    <p class="mb-2"><strong>{{ number_format($tokenCount) }}</strong> device token(s)</p>
                    <p class="mb-0 text-muted"><strong>{{ number_format($userCount) }}</strong> user(s) with tokens</p>
                    <hr>
                    <p class="small text-muted mb-0">
                        Uses the same FCM service as the mobile API. Firebase JSON is loaded from
                        <code>storage/app/firebase/</code> or <code>public/uploads/</code>.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Compose notification</h5>

                    <form method="POST" action="{{ route('admin.notification.send') }}" id="notificationSendForm">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                                   value="{{ old('title', 'Tree of Memories') }}" maxlength="120" required>
                            @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Message <span class="text-danger">*</span></label>
                            <textarea name="message" rows="4" class="form-control @error('message') is-invalid @enderror"
                                      maxlength="500" required>{{ old('message') }}</textarea>
                            @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Send to <span class="text-danger">*</span></label>
                            <select name="send_to" id="send_to" class="form-select" required>
                                <option value="all" @selected(old('send_to', 'all') === 'all')>All users with device tokens</option>
                                <option value="user" @selected(old('send_to') === 'user')>Specific user ID</option>
                                <option value="funeral" @selected(old('send_to') === 'funeral')>Users linked to a memorial (Link My Tree)</option>
                                <option value="token" @selected(old('send_to') === 'token')>Single device token</option>
                            </select>
                        </div>

                        <div class="mb-3 tom-target-field" data-for="user" style="display:none;">
                            <label class="form-label">User ID</label>
                            <input type="number" name="user_id" class="form-control" value="{{ old('user_id') }}" min="1">
                        </div>

                        <div class="mb-3 tom-target-field" data-for="funeral" style="display:none;">
                            <label class="form-label">Memorial</label>
                            <select name="funeral_id" class="form-select">
                                <option value="">Select memorial</option>
                                @foreach ($funerals as $funeral)
                                    <option value="{{ $funeral->f_id }}" @selected((string) old('funeral_id') === (string) $funeral->f_id)>
                                        #{{ $funeral->f_id }} — {{ $funeral->f_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3 tom-target-field" data-for="token" style="display:none;">
                            <label class="form-label">Device token</label>
                            <textarea name="device_token" rows="3" class="form-control" placeholder="FCM device token">{{ old('device_token') }}</textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Type <span class="text-muted">(optional)</span></label>
                                <input type="text" name="type" class="form-control" value="{{ old('type', '1') }}" placeholder="e.g. 1 or 2">
                                <div class="form-text">CI uses type <code>2</code> for share-memory pushes.</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Share ID <span class="text-muted">(optional)</span></label>
                                <input type="text" name="share_id" class="form-control" value="{{ old('share_id') }}">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="ti ti-bell"></i> Send Notification
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(function () {
        function toggleTargets() {
            var value = $('#send_to').val();
            $('.tom-target-field').hide();
            $('.tom-target-field[data-for="' + value + '"]').show();
        }

        $('#send_to').on('change', toggleTargets);
        toggleTargets();

        $('#notificationSendForm').on('submit', function () {
            return confirm('Send this push notification now?');
        });
    });
</script>
@endpush