@extends('layouts.master')
@section('title', trans('admin.send_notification'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}"/>
    <style>
        .select2-results__option, .select2-selection__rendered {
            color: #6f6b7d;
        }
    </style>
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => trans('admin.notifications_list'), 'url' => route('admin.notification.index')],
            ['data' => trans('admin.send_notification'), 'url' => null],
        ],
    ])

    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <h5 class="card-header">{{ trans('admin.notification_details') }}</h5>
                <div class="card-body">
                    <form action="{{ route('admin.notification.store') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ trans('admin.title') }}</label>
                                <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ trans('admin.target') }}</label>
                                <select name="target" id="target_select" class="form-select select2 @error('target') is-invalid @enderror" required>
                                    <option value="all" {{ old('target') == 'all' ? 'selected' : '' }}>{{ trans('admin.all_users') }}</option>
                                    <option value="clients" {{ old('target') == 'clients' ? 'selected' : '' }}>{{ trans('admin.all_clients') }}</option>
                                    <option value="providers" {{ old('target') == 'providers' ? 'selected' : '' }}>{{ trans('admin.all_providers') }}</option>
                                    <option value="specific_user" {{ old('target') == 'specific_user' ? 'selected' : '' }}>{{ trans('admin.specific_user') }}</option>
                                </select>
                                @error('target')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-12 d-none" id="user_selection">
                                <label class="form-label">{{ trans('admin.select_user') }}</label>
                                <select name="user_id" class="form-select select2-ajax @error('user_id') is-invalid @enderror">
                                    <option value="">{{ trans('admin.select_user') }}</option>
                                </select>
                                @error('user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">{{ trans('admin.message') }}</label>
                                <textarea name="message" class="form-control @error('message') is-invalid @enderror" rows="4" required>{{ old('message') }}</textarea>
                                @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mt-4 text-end">
                                <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.send') }}</button>
                                <a href="{{ route('admin.notification.index') }}" class="btn btn-label-secondary">{{ trans('admin.cancel') }}</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
    <script>
        $(document).ready(function () {
            $(".select2").select2();

            function toggleUserSelection() {
                var target = $('#target_select').val();
                if (target === 'specific_user') {
                    $('#user_selection').removeClass('d-none');
                } else {
                    $('#user_selection').addClass('d-none');
                }
            }

            $('#target_select').on('change', toggleUserSelection);
            toggleUserSelection();

            $(".select2-ajax").each(function () {
                $(this).select2({
                    ajax: {
                        url: "{{ route('admin.app_user.select2') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term,
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: data.data,
                                pagination: {
                                    more: data.next_page_url !== null
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: "{{ trans('admin.select_user') }}",
                    allowClear: true
                });
            });
        });
    </script>
@endsection