@extends('backend.layouts.app')
@section('content')
<div class="card page-container" id="page-container">
    <div class="card-body p-lg-25 content-wrap">
        <!--begin::Layout-->
        <div class="d-flex flex-column flex-lg-row mb-17">
            <div class="flex-lg-row-fluid me-0 me-lg-20">
                <form action="{{ route('admin.notifications.store') }}" class="form mb-15" method="POST" id="kt_careers_form" enctype='multipart/form-data'>
                    @csrf
                    <div class="row mb-5">
                        <div class="col-md-6 fv-row">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Title') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ old('title') }}"
                                placeholder="{{ TranslationManager::translate('Please Enter Title') }}" name="title" />
                            @error('title')
                                <span class="error">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6 fv-row">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Message') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ old('message') }}"
                                placeholder="{{ TranslationManager::translate('Please Enter Message') }}" name="message" />
                            @error('message')
                                <span class="error">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6 fv-row">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Type') }}</label>
                            <select name="type" class="form-select form-select-solid" data-control="select2"
                                data-placeholder="{{ TranslationManager::translate('Select Type') }}" id="notificaton_type_selector"
                                data-url="{{ route('admin.notificatons.type_selector') }}">
                                <option value="3">{{ TranslationManager::translate('All Users') }}</option>
                                <option value="1">{{ TranslationManager::translate('Student') }}</option>
                                <option value="2">{{ TranslationManager::translate('Instructor') }}</option>
                                <option value="4">{{ TranslationManager::translate('University') }}</option>
                                <option value="5">{{ TranslationManager::translate('Group') }}</option>
                            </select>
                            @error('type')
                                <span class="error">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                            <div class="col-md-6 fv-row" id="type_users">
                                {{-- multi users --}}
                                <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Users') }}</label>
                                <select name="users[]" class="form-select form-select-solid" data-control="select2"
                                    data-placeholder="{{ TranslationManager::translate('Select Users') }}" multiple>
                                    <option value="">{{ TranslationManager::translate('Select Users') }}</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                @error('users')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                            </div>

                    </div>

                    <div class="row mb-5">

                        <div class="separator mb-8"></div>
                        <button type="submit" class="btn btn-primary" id="kt_careers_submit_button">
                            <span class="indicator-label">{{ TranslationManager::translate('Submit') }}</span>
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
@endsection


@section('js')
    <script>
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready( function () {
        $('body').on('change', '#notificaton_type_selector', function() {
            var type = $(this).val();
            var action = $(this).attr('data-url');
            $.ajax({
            type: 'POST',
            data: {_token : $('meta[name="csrf-token"]').attr('content'), type: type},
            url: action,
            success: function(data)
            {
                $('#type_users').html(data);
                $('#type_users select').select2();
            }
        });
        return false;
        });
    });
    </script>
@endsection