@extends('layouts.contentLayoutMaster')
@php
    $breadcrumbs = [[['link' => route('notification_texts.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' => 'notification_texts.store','method'=> 'POST' , 'class' => 'row','id' => 'adminform' , 'onsubmit' => 'showLoader()']) }}

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

        <div class="row mb-1">
            <div class="col-md">
        <p class="my-50">
            <a href="#" id="blog-image-text">تعليمات: اذا اردت ان تترك مكان لقيمة متغيرة فيمكنك من خلال اضافة @ ثم اسم المتغير من خلال القائمة الخاصة بالحدث</a>
        <ul id="event_list">
            @foreach(\App\Models\NotificationText::EVENTS_VARIABLES[\App\Models\NotificationText::VERIFICATION_EVENT] as $value)
                <li><strong>{{$value}}</strong></li>
            @endforeach
        </ul>
        </p>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col-md">
                <label for="event_id" class="form-label">الحدث</label>
                <select
                    id="event_id"
                    name="event_id"
                    class="select2 form-select "
                    data-allow-clear="true">
                    @foreach(\App\Models\NotificationText::EVENTS_TEXT as $key=>$val)
                    <option value="{{$key}}">{{$val}}</option>
                    @endforeach
                </select>
                @error('event_id')
                <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
                @enderror
            </div>
            <div class="col-md">
                <label for="channel" class="form-label">قناة الارسال</label>
                <select
                    id="channel"
                    name="channel"
                    class="select2 form-select "
                    data-allow-clear="true">
                    @foreach(\App\Models\NotificationText::NOTIFICATION_CHANNEL_TEXT as $key=>$val)
                    <option value="{{$key}}" {{$key==\App\Models\NotificationText::ALL_CHANNEL ? 'selected' : ''}}>{{$val}}</option>

                    @endforeach
                    {{--                <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>
        <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>
                @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>
                @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>
                @error('internal_text')
                <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
                @enderror
            </div>
        </div>
        <div class="row mb-1">
            <div class="col-md">

                <label class="form-label mr-1" for="is_active"> الحالة </label>
                <x-inputs.checkbox name="is_active">مفعل</x-inpurs.checkbox>

            </div>
        </div>



        <div class="col-12 text-center mt-2">
            <x-inputs.submit>حفظ</x-inputs.submit>
            <x-inputs.link route="notification_texts.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>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                }
            });
            // $('#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();
                }
            });

            $('#event_id').on('change', function (e) {
                $('#event_list').empty();
                let selected=$('#event_id').val();
                $.ajax({
                    url: "/admin_dashboard/json/search_notification_text",
                    method: "post",
                    delay: 500,
                    cache: true,
                    data:{'event_id': selected},
                    success: function (response){
                        console.log(response.data);
                        $.each(response.data, function(index, value) {
                            $('#event_list').append('<li><strong>'+value+'</strong></li>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });


            });



            });
    </script>
@endsection