@extends('layouts.main')

@section('title', 'Создать рассылку')

@section('content')
    <div class="container mt-3 ms-2">
        <div class="row">
            <div class="col-md-6">
                <form action="{{ route('loyalty.push.sendPush') }}" method="post" enctype="multipart/form-data">
                    @csrf

                    <div class="mb-3">
                        <select class="form-select @error('recipient_type') is-invalid @enderror" name="recipient_type" id="recipient_type">
                            @foreach($recipientType as $value => $label)
                                <option value="{{ $value }}" {{ old('recipient_type') == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('recipient_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3" style="display: none" id="selected_users">
                        <input id="phoneInput" type="text" class="form-control @error('selected_users') is-invalid @enderror" name="selected_users" value="{{ old('selected_users') }}" placeholder="+79999999999;+79999999999;">

                        @error('selected_users')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}" placeholder="Введите заголовок">

                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <textarea
                            class="form-control @error('text') is-invalid @enderror"
                            name="text" placeholder="Введите текст пуша" rows="5"
                        >{{ old('text') }}</textarea>

                        @error('text')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-danger w-100">Отправить рассылку</button>
                </form>
            </div>
        </div>
    </div>
    @include('loyalty.push.log-table', ['jobsData' => $jobsData])
@endsection
@section('scripts')
    @parent
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const select = document.getElementById('recipient_type');
            const usersInput = document.getElementById('selected_users');

            const showForValue = 'specific_user';

            function toggleUsersInput() {
                if (select.value === showForValue) {
                    usersInput.style.display = 'block';
                } else {
                    usersInput.style.display = 'none';
                }
            }

            toggleUsersInput();
            select.addEventListener('change', toggleUsersInput);
        });
    </script>
    <script>
        const maskOptions = {
            mask: "+{7}0000000000[;+{7}0000000000;+{7}0000000000;+{7}0000000000;+{7}0000000000;+{7}0000000000;+{7}0000000000;+{7}0000000000;+{7}0000000000;+{7}0000000000]",
        };

        function maskPhone(elements) {
            elements.forEach((element) => {
                if (element instanceof HTMLElement) {
                    IMask(element, maskOptions);
                }
            });
        }

        const phone = document.querySelectorAll("#phoneInput");

        maskPhone(phone);

    </script>
@endsection