@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-4">
                <x-ui.card title="Who you want to send?">

                    <div class="form-check mb-3">
                        <input class="form-check-input target-radio" type="radio" name="target" id="t_single"
                            value="single" checked>
                        <label class="form-check-label text-primary" for="t_single">Send to single user</label>
                        <div class="mt-2">
                            <input type="text" id="extra_single" class="form-control" placeholder="User ID or mail id">
                        </div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input target-radio" type="radio" name="target" id="t_multiple"
                            value="multiple">
                        <label class="form-check-label text-primary" for="t_multiple">To multiple users EmailID</label>
                        <div class="mt-2">
                            <textarea id="extra_multiple" class="form-control" rows="2"
                                placeholder="Comma separated Email ID (e.g. a@gmail.com,b@gmail.com,c@gmail.com)"></textarea>
                        </div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input target-radio" type="radio" name="target" id="t_banned"
                            value="banned">
                        <label class="form-check-label text-primary" for="t_banned">Banned users (last 50)</label>
                    </div>

                            <div class="form-check mb-3">
                        <input class="form-check-input target-radio" type="radio" name="target" id="t_leaderboard_streak"
                            value="leaderboard_streak">
                        <label class="form-check-label text-primary" for="t_leaderboard_streak">Leaderboard Streak winners (top N)</label>
                        <div class="mt-2">
                            <input type="number" id="extra_leaderboard_streak" class="form-control"
                                placeholder="limit (default 50)" min="1">
                        </div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input target-radio" type="radio" name="target" id="t_leaderboard_refer"
                            value="leaderboard_refer">
                        <label class="form-check-label text-primary" for="t_leaderboard_refer">Leaderboard Refer winners (top N)</label>
                        <div class="mt-2">
                            <input type="number" id="extra_leaderboard_refer" class="form-control"
                                placeholder="limit (default 50)" min="1">
                        </div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input target-radio" type="radio" name="target" id="t_all"
                            value="all">
                        <label class="form-check-label text-primary" for="t_all">To All users</label>
                    </div>

                    <div class="form-check ">
                        <input class="form-check-input target-radio" type="radio" name="target" id="t_country"
                            value="country">
                        <label class="form-check-label text-primary" for="t_country">Country [Max 1000 User]</label>
                        <div class="">
                            <x-form.select name="country" label=""
                                :options="$country->pluck('name', 'code')" :selected="old('country')" 
                                class="js-country-select js-example-basic-multiple"
                                :multiple="true" :required="true" />
                        </div>
                    </div>

                </x-ui.card>
            </div>

            <div class="col-md-8">

                <x-ui.card title="Send Push Message">
                    <x-form.input label="Message title:" col="mt-3" class="" name="title"
                        placeholder="Enter a title..." autofocus />

                    <x-form.textarea tooltip="Enter message you want to share to user" class="col-xl-12 mt-3"
                        label="Message body" name="message" :required="true" placeholder="your message" />

                    <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                        sizeLabel="400×200 px" label="Image Optional" :required="false" />

                     <x-form.input label="Url (Optional):" col="mt-3" class="" name="url" type="url"
                        placeholder="http..." autofocus :required="false" />

                    <div class="mt-3">
                        <button id="sendBtn" class="btn btn-primary">Send message</button>
                        <span id="statusText" class="ms-3"></span>
                    </div>

                    <div class="mt-3">
                        <pre id="responseBox"
                            style="display:none; white-space:pre-wrap; background:#f7f7f7; padding:10px; border-radius:6px;"></pre>
                    </div>

                </x-ui.card>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @include('layouts.components.common-script')
    <script src="{{ asset('build/assets/libs/toastify-js/src/toastify.js') }}"></script>
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        (function() {
            // initialize select2 if not already
            $('.js-country-select').select2({
                placeholder: 'Select countries',
                allowClear: true,
                width: '100%'
            });

            const sendBtn = document.getElementById('sendBtn');
            const statusText = document.getElementById('statusText');
            const responseBox = document.getElementById('responseBox');

            function selectedTarget() {
                const radios = document.querySelectorAll('.target-radio');
                for (const r of radios)
                    if (r.checked) return r.value;
                return 'all';
            }

            function buildExtra() {
                const t = selectedTarget();
                if (t === 'single') return document.getElementById('extra_single').value.trim();
                if (t === 'multiple') return document.getElementById('extra_multiple').value.trim();
                if (t === 'leaderboard') return (document.getElementById('extra_leaderboard').value || '').trim();
                return '';
            }

            function getSelectedCountries() {
                // using select2 - returns array or null
                try {
                    const vals = $('.js-country-select').val();
                    return Array.isArray(vals) ? vals : (vals ? [vals] : []);
                } catch (e) {
                    // fallback if jQuery/select2 not available
                    const el = document.querySelector('.js-country-select');
                    if (!el) return [];
                    return Array.from(el.selectedOptions).map(o => o.value).filter(v => v);
                }
            }

            function getImageValue() {

                const selectors = [
                    'input[name="media"]',
                    '#uploadmedia input[name="media"]',
                    '#uploadmedia'
                ];
                for (const s of selectors) {
                    const el = document.querySelector(s);
                    if (!el) continue;
                    // if it's an input take its value, else skip
                    if (el.tagName === 'INPUT') return el.value || null;
                    if (el.getAttribute && el.getAttribute('data-url')) return el.getAttribute('data-url');
                }
                return null;
            }

            sendBtn.addEventListener('click', function() {
                const title = document.querySelector('input[name="title"]') ? document.querySelector(
                    'input[name="title"]').value.trim() : document.getElementById('title').value.trim();
                const messageEl = document.querySelector('textarea[name="message"]') || document.getElementById(
                    'message');
                const message = messageEl ? messageEl.value.trim() : '';
                const type = selectedTarget();
                const extra = buildExtra();
                const countries = getSelectedCountries();
                const image = getImageValue();

                if (!title || !message) {
                    promptify({
                        icon:'info',
                        text: 'Please enter title and message',
                    });
                    return;
                }

                if(type=="single" && extra==''){
                    promptify({
                        icon:'info',
                        text: 'Please enter user id or Email id',
                    });
                    return;
                }
                else if(type=="t_multiple" && extra==''){
                    promptify({
                        icon:'info',
                        text: 'Please enter user id or Email id',
                    });
                    return;
                }else if(type=="country" && countries.length==0){
                    promptify({
                        icon:'info',
                        text: 'Please select at least one country',
                    });
                    return;
                }

                sendBtn.disabled = true;
                statusText.textContent = 'Sending...';
                responseBox.style.display = 'none';
                responseBox.textContent = '';

                const url = `{{ route('admin.notification.instant_push.send') }}`;

                const payload = {
                    type: type,
                    title: title,
                    message: message,
                    extra: extra || null,
                    country: countries,
                    image: image || null
                };

                AjaxUtil.post(url, payload, function(response) {
                    if (response && (response.status === 201 || response.ok === true || response
                        .mode)) {
                        AjaxUtil.showToast(response.message || 'Notification sent', 'success');
                        statusText.textContent = 'Sent ✔';
                        responseBox.style.display = 'block';
                        responseBox.textContent = JSON.stringify(response, null, 2);
                    } else {
                        AjaxUtil.showToast(response.message || 'Failed to send', 'error');
                        statusText.textContent = 'Error';
                        responseBox.style.display = 'block';
                        responseBox.textContent = JSON.stringify(response, null, 2);
                        console.error(response);
                    }
                    sendBtn.disabled = false;
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error sending notification.', 'error');
                    statusText.textContent = 'Network error';
                    responseBox.style.display = 'block';
                    responseBox.textContent = error.toString();
                    sendBtn.disabled = false;
                });
            });
        })();
    </script>
@endsection