@extends('layouts.contentLayoutMaster')
@php
$breadcrumbs = [[['link' => route('notifications.index'), 'name' => "الاشعارات"],['name'=> 'اضافة اشعار ']],['title' => 'اضافة اشعار ']];
@endphp

@section('title', 'اضافة اشعار ')

@section('vendor-style')
<link rel="stylesheet" href="{{asset(mix('vendors/css/forms/select/select2.min.css'))}}">

@endsection

@section('page-style')
    <style>
        .hidden {
            display: none;
        }
        figure.image {
            display: inline-block;
            border: 1px solid gray;
            margin: 0 2px 0 1px;
            background: #f5f2f0;
        }

        figure.align-left {
            float: left;
        }

        figure.align-right {
            float: right;
        }

        figure.image img {
            margin: 8px 8px 0 8px;
        }

        figure.image figcaption {
            margin: 6px 8px 6px 8px;
            text-align: center;
        }

        /*
         Alignment using classes rather than inline styles
         check out the "formats" option
        */

        img.align-left {
            float: left;
        }

        img.align-right {
            float: right;
        }

        /* Basic styles for Table of Contents plugin (tableofcontents) */
        .mce-toc {
            border: 1px solid gray;
        }

        .mce-toc h2 {
            margin: 4px;
        }

        .mce-toc li {
            list-style-type: none;
        }
    </style>
@endsection

@section('content')

@component('components.forms.formCard',['title' => sprintf('اضافة اشعار ')])
    @if($errors->any())
        <div class="alert alert-danger mb-1 rounded-0" role="alert">
            @foreach($errors->all() as $error)
                <div class="alert-body">{{ $error }}</div>
                @endforeach
                </div>
    @endif
{{ Form::open(['route' => 'notifications.store','method'=> 'POST' , 'class' => 'row','id' => 'adminform' , 'onsubmit' => 'showLoader()']) }}

<x-ui.divider>معلومات الاشعار </x-ui.divider>



    <div class="row mb-1">
        <div class="col-md">
            <label for="channel" class="form-label">قناة الارسال</label>
            <select
                id="channel"
                name="channel"
                class="select2 form-select "
                data-allow-clear="true">
{{--                <option  selected value="-1"> اختر القناة</option>--}}
                <option value="{{\App\Models\Notification::SMS_CHANNEL}}">{{\App\Models\Notification::NOTIFICATION_CHANNEL_TEXT[\App\Models\Notification::SMS_CHANNEL]}}</option>
                <option value="{{\App\Models\Notification::EMAIL_CHANNEL}}">{{\App\Models\Notification::NOTIFICATION_CHANNEL_TEXT[\App\Models\Notification::EMAIL_CHANNEL]}}</option>
                <option value="{{\App\Models\Notification::INTERNAL_CHANNEL}}">{{\App\Models\Notification::NOTIFICATION_CHANNEL_TEXT[\App\Models\Notification::INTERNAL_CHANNEL]}}</option>
                <option value="{{\App\Models\Notification::ALL_CHANNEL}}" selected>{{\App\Models\Notification::NOTIFICATION_CHANNEL_TEXT[\App\Models\Notification::ALL_CHANNEL]}}</option>
            </select>
            @error('channel')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div class="col-md">
            <label for="type" class="form-label">الي</label>
            <select
                id="type"
                name="type"
                class="select2 form-select "
                data-allow-clear="true">
                 <option  selected value="" disabled> اختر المستخدمين</option>
                <option value="{{\App\Models\Notification::SEND_ALL_USERS}}">{{\App\Models\Notification::SEND_TEXT[\App\Models\Notification::SEND_ALL_USERS]}}</option>
                <option value="{{\App\Models\Notification::SEND_ALL_ADMINS}}">{{\App\Models\Notification::SEND_TEXT[\App\Models\Notification::SEND_ALL_ADMINS]}}</option>
                <option value="{{\App\Models\Notification::SEND_ALL_PARENTS}}">{{\App\Models\Notification::SEND_TEXT[\App\Models\Notification::SEND_ALL_PARENTS]}}</option>
                <option value="{{\App\Models\Notification::SEND_ADMIN}}">{{\App\Models\Notification::SEND_TEXT[\App\Models\Notification::SEND_ADMIN]}}</option>
                <option value="{{\App\Models\Notification::SEND_PARENT}}">{{\App\Models\Notification::SEND_TEXT[\App\Models\Notification::SEND_PARENT]}}</option>
            </select>
            @error('type')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>

        <div style="display: none" id="select-parent" class="select-user col-md">
            <label class="form-label" for="select-parents">اختر ولي الامر</label>
            <select name="parent_id" id="select-parents" class="form-control select2">
            </select>
            @error('parent_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
        <div style="display: none" id="select-admin" class="select-user col-md">
            <label class="form-label" for="select-admins">اختر الموظف </label>
            <select name="admin_id" id="select-admins" class="form-control select2">
            </select>
            @error('admin_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>



    </div>
<div class="row mb-1" id="sms_text">
        <div class="col-md ">
            <label for="sms_text_val">اكتب نص الرسالة القصيرة:</label>
            <textarea class="form-control" id="sms_text_val" name="sms_text" placeholder="اكتب نص الرسالة القصيرة"  rows="5"></textarea>
{{--            <x-inputs.text.Input type="textarea"  label="اكتب نص الرسالة القصيرة " name="sms_text" data-placeholder="اكتب نص الرسالة القصيرة" data-msg="رجاء اكتب نص الرسالة القصيرة"/>--}}
            @error('sms_text')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
</div>
<div class="row mb-1" id="email_text">
        <div class="col-md" >
            <label for="email_text_val">اكتب نص البريد الالكتروني:</label>
            <textarea class="form-control editor" id="email_text_val" name="email_text"   rows="5"></textarea>
            {{--            <x-inputs.text.Input type="textarea" class="editor"   label="اكتب نص البريد الالكتروني " name="email_text" data-placeholder="اكتب نص البريد الالكتروني" data-msg="رجاء اكتب نص البريد الالكتروني"/>--}}
            @error('email_text')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
</div>
<div class="row mb-1" id="internal_text">
        <div class="col-md" >
            <label for="internal_text_val">اكتب نص الاشعار الداخلي:</label>
            <textarea class="form-control editor" id="internal_text_val" name="internal_text"   rows="5"></textarea>

            {{--            <x-inputs.text.Input type="textarea" class="editor"  label="اكتب نص الاشعار الداخلي " name="internal_text" data-placeholder="اكتب نص الاشعار الداخلي" data-msg="رجاء اكتب نص الاشعار الداخلي"/>--}}
            @error('internal_text')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
</div>



<div class="col-12 text-center mt-2">
    <x-inputs.submit>ارسال</x-inputs.submit>
    <x-inputs.link route="notifications.index">عودة</x-inputs.link>
</div>

{!! Form::close() !!}

@endcomponent

@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>

@endsection

@section('page-script')
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>

    <script>
        let parent_user_id={{\App\Models\Notification::SEND_PARENT}};
        let admin_user_id={{\App\Models\Notification::SEND_ADMIN}};
        $(document).ready(function() {
            // $('#sms_text').hide();
            // $('#email_text').hide();
            // $('#internal_text').hide();
            $('#channel').change(function() {
                // Get the selected value
                var selected = $(this).val();

                // Hide all input elements
                $('#sms_text').hide();
                $('#email_text').hide();
                $('#internal_text').hide();

                // Show the input element corresponding to the selected value
                $('#'+selected+'_text').show();
                if(selected == 'all'){
                    $('#sms_text').show();
                    $('#email_text').show();
                    $('#internal_text').show();
                }
            });


            function onUserChange(){
                var select_type = $('#type').val();
                $('.select-user').css("display",'none');
                switch(select_type){
                    case admin_user_id.toString():  $('#select-admin').css("display",'inline'); break;
                    case parent_user_id.toString():  $('#select-parent').css("display",'inline'); break;

                }
            }


                $('#type').on('change', function (e) {
                    onUserChange();
                });


            $("#select-admins").on('select2:select', function(e) {
                let record = e.params.data;
                console.log(record);
            });


            $("#select-admins").select2({
                ajax: {
                    url: "/admin_dashboard/json/search_admins",
                    method: "post",
                    delay: 500,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            _token: document.getElementsByName('_token')[0].value
                        };
                    },
                    processResults: function(data, params) {
                        return {
                            results: data.data.data,
                        };
                    },
                    cache: true
                },
                placeholder: 'ابحث عن الموظف  بواسطة الاسم او اسم الوظيفة',
                minimumInputLength: 3,
                templateResult: formatAdmin,
                templateSelection: formatAdminSelection
            });

            function formatAdmin(repo) {
                if (repo.loading) {
                    return " ...جاري البحث في قاعدة البيانات";
                }

                var $container = $(
                    "<div class='select2-result-users clearfix'>" +
                    "<div class='select2-result-users__meta'>" +
                    "<div class='select2-result-users__admin_name'></div>" +
                    "<div class='select2-result-users__job_title'></div>" +
                    "</div>" +
                    "</div>"
                );
                $container.find(".select2-result-users__admin_name").html('<span class="text-danger">الاسم : </span>' + repo.admin_name + '</span>');
                $container.find(".select2-result-users__job_title").html('<span class="text-danger">الوظيفة : </span>' + repo.job_title + '</span>');

                return $container;
            }

            function formatAdminSelection(repo) {
                if (repo.id === '') {
                    return 'اختر اسم الموظف ';
                }
                if (repo.admin_name == undefined) {
                    return repo.text
                }
                return repo.admin_name + ' - (' + repo.job_title != null ?repo.job_title:'' + ')';
            }


            $("#select-parents").on('select2:select', function(e) {
                let record = e.params.data;
            });

            $("#select-parents").select2({
                ajax: {
                    url: "/admin_dashboard/json/search_parents",
                    method: "post",
                    delay: 500,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            _token: document.getElementsByName('_token')[0].value
                        };
                    },
                    processResults: function(data, params) {
                        return {
                            results: data.data.data,
                        };
                    },
                    cache: true
                },
                placeholder: 'ابحث عن ولي الامر بواسطة الاسم او رقم الهوية',
                minimumInputLength: 3,
                templateResult: formatParent,
                templateSelection: formatParentSelection
            });

            function formatParent(repo) {
                if (repo.loading) {
                    return " ...جاري البحث في قاعدة البيانات";
                }

                var $container = $(
                    "<div class='select2-result-users clearfix'>" +
                    "<div class='select2-result-users__meta'>" +
                    "<div class='select2-result-users__guardian_name'></div>" +
                    "<div class='select2-result-users__national_id'></div>" +
                    "</div>" +
                    "</div>"
                );
                $container.find(".select2-result-users__guardian_name").html('<span class="text-danger">الاسم : </span>' + repo.guardian_name + '</span>');
                $container.find(".select2-result-users__national_id").html('<span class="text-danger">الهوية : </span>' + repo.national_id + '</span>');

                return $container;
            }

            function formatParentSelection(repo) {
                if (repo.id === '') {
                    return 'اختر اسم ولي الامر';
                }
                if (repo.guardian_name == undefined) {
                    return repo.text
                }
                return repo.guardian_name + ' - (' + repo.national_id + ')';
            }

        });
        // $.ajax(
        //     {
        //         type: "GET",
        //         url: "withdrawals/" + app_id + "/edit?",
        //         data: {
        //             "fees": null
        //         },
        //         success: function(response)
        //         {
        //             if(response.code == 200){
        //                 $(".message").css("display","block");
        //                 $('.message').removeClass("alert-danger");
        //                 $('.message').removeClass("alert-success");
        //                 $('.message').addClass("alert-success");
        //                 $('.messageBody').text(response.message);
        //                 window.setTimeout(function(){
        //                     location.reload()
        //                 }, 2000);
        //             }else{
        //                 $(".message").css("display","block");
        //                 $('.message').removeClass("alert-success");
        //                 $('.message').removeClass("alert-danger");
        //                 $('.message').addClass("alert-danger");
        //                 $('.messageBody').text(response.message);
        //             }
        //         }
        //     }
        // );
    </script>
@endsection