@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_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.select
                        name="notification_type" col="col-xl-12 " label="Notification Alert Type:" placeholder="Notification Type" :required="true"
                        :options="[
                            '0' => 'Info -> Information Messge',
                            '1' => 'Success -> Any Success or Credit Related Message',
                            '2' => 'Warning -> any debit, warning, spam related messsage'
                        ]"
                        :selected="old('notification_type')"
                            />

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

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

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

                    <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>

            <x-ui.card title="Recent Local Message Logs">
                    @php
                    $columns = [
                        ['label' => 'ID'],
                        ['label' => 'Image'],
                        ['label' => 'Title'],
                        ['label' => 'Message'],
                        ['label' => 'Alert Type'],
                        ['label' => 'Category'],
                        ['label' => 'Sent'],
                        ['label' => 'Failed'],
                        ['label' => 'Read'],
                        ['label' => 'Created AT'],
                        ['label' => 'Action'],
                    ];
                @endphp

                <x-ui.table id="data_table" :columns="$columns"></x-ui.table>
            </x-ui.card>
        </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');
            const urlText = document.getElementById('url');

            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_streak') return (document.getElementById('extra_leaderboard_streak').value || '').trim();
                if (t === 'leaderboard_refer') return (document.getElementById('extra_leaderboard_refer').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.local_push.send') }}`;

                const payload = {
                    type: type,
                    title: title,
                    message: message,
                    extra: extra || null,
                    country: countries,
                    image: image || null,
                    notification_type: $('#notification_type').val() || 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>

    
    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('data_table', "{{ route('admin.notification.local_push.data') }}", {
            
            }, [{
                    data: 'id',
                    orderable: false
                },
               {
                    data: 'image',
                    render: function(data, type, row) {
                        if(data==null){
                            return '-'
                        }else{
                            return `<img src="{{ asset('uploads') }}/` + row.image +
                            `" alt="" style="height:100px; width:150px; border-radius:10px;">`;
                        }
                    }
                }, 
                {
                    data: 'title'
                },
                {
                    data: 'message'
                },
                {
                    data: 'alert_type'
                },
                {
                    data: 'type'
                },   {
                    data: 'sent'
                },   {
                    data: 'failed'
                },   {
                    data: 'read'
                },
                {
                    data: 'created_at',
                    render: function (data, type, row) {
                        if (!data) return '';
                        const d = new Date(data);
                        return d.toLocaleDateString('en-GB', {  // you can change locale
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="javascript:void(0);" id="` + row.id + `" data-id="local_notification" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light deleteItem">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();

        });
    </script>
@endsection